@extends('admin.layouts.app')

@section('crumb')
    <x-bread-crumb :breadcrumbs="[
        ['text'=>'sub-categories / edit-attributes','link'=>route('admin.sub-categories.index')],
        ['text'=> getLastKeyRoute(request()->route()->getName())]
        ]" :button="['text'=>'Go To sub-categories','link'=>route('admin.sub-categories.index')]">
    </x-bread-crumb>
@endsection

@section('content')

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-body pt-0">
                        <form action="{{ route('admin.Attribute.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if ($attributes->count() > 0)
                                @foreach ($attributes as $attribute)
                                    <a class="btn btn-danger btn-sm mb-3" href="{{ route('admin.Attribute.destroy', $attribute->id) }}">delete</a>
                                    <input type="hidden" name="attribute_ids[]" value="{{ $attribute->id }}">
                                    <div class="fv-row mb-10 attribute-block" id="attribute-block-{{ $attribute->id }}">
                                        <div class="row">
                                            @foreach (Config('language') as $key => $lang)
                                                <div class="col-6">
                                                    <label class="fs-5 fw-bold form-label mb-5">Name in {{ $lang }}:</label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           placeholder="{{ $lang }}"
                                                           name="attributes[{{ $attribute->id }}][name][{{ $key }}]"
                                                           value="{{ old("attributes.{$attribute->id}.name.{$key}", $attribute->getTranslation('name', $key)) }}">
                                                    @error("attributes.{$attribute->id}.name.{$key}")
                                                    <span class="text-danger" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                    @enderror
                                                </div>
                                            @endforeach

                                            <div class="col-12 mt-5">
                                                <label class="fs-5 fw-bold form-label mb-5">Type:</label>
                                                <select name="attributes[{{ $attribute->id }}][type]" class="form-control form-control-solid"
                                                        onchange="showValueField(this, {{ $attribute->id }})">
                                                    <option value="{{ $attribute->type }}">{{ $attribute->type }}</option>
                                                    <option value="text">Text</option>
                                                    <option value="select">Select</option>
                                                    <option value="textarea">Textarea</option>
                                                    <option value="checkbox">Checkbox</option>
                                                    <option value="radio">Radio</option>
                                                </select>
                                                @error("attributes.{$attribute->id}.type")
                                                <span class="text-danger" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div id="attributeValueField{{ $attribute->id }}" class="col-12 mt-5">
                                                @if (in_array($attribute->type, ['radio', 'checkbox', 'select']))
                                                    @foreach ($attribute->options as $option)
                                                        <div class="mb-3">
                                                            @foreach (Config('language') as $langKey => $lang)
                                                                <label class="fs-6">{{ $lang }} Option:</label>
                                                                <input type="text" class="form-control form-control-solid mb-2"
                                                                       name="attributes[{{ $attribute->id }}][options][{{ $langKey }}][]"
                                                                       value="{{ $option->getTranslation('options', $langKey) }}">
                                                            @endforeach
                                                        </div>
                                                    @endforeach
                                                    <button type="button" class="btn btn-dark btn-sm" onclick="addOption(this, {{ $attribute->id }})">Add Option</button>
                                                @else
                                                    @foreach (Config('language') as $key => $lang)
                                                        <div class="mb-3">
                                                            <label class="fs-6">{{ $lang }} Value:</label>
                                                            <input type="text" class="form-control form-control-solid"
                                                                   name="attributes[{{ $attribute->id }}][value][{{ $key }}]"
                                                                   value="{{ old("attributes.{$attribute->id}.value.{$key}", $attribute->getTranslation('value', $key)) }}">
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                        <hr>
                                    </div>
                                @endforeach

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">
                                        <span class="indicator-label">Update</span>
                                    </button>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('admin_js')
<script>
    function showValueField(select, attributeId) {
        const type = select.value;
        const valueField = document.getElementById('attributeValueField' + attributeId);

        if (!valueField) return;

        if (type === "select" || type === "checkbox" || type === "radio") {
            valueField.innerHTML = `
                <div class="mb-3">
                    @foreach (Config('language') as $langKey => $lang)
                        <label class="fs-6">{{ $lang }} Option:</label>
                        <input type="text" class="form-control form-control-solid mb-2"
                            name="attributes[${attributeId}][options][{{ $langKey }}][]"
                            placeholder="{{ $lang }}">
                    @endforeach
                </div>
                <button type="button" class="btn btn-dark btn-sm" onclick="addOption(this, ${attributeId})">Add Option</button>
            `;
        } else {
            valueField.innerHTML = `
                @foreach (Config('language') as $key => $lang)
                    <div class="mb-3">
                        <label class="fs-6">{{ $lang }} Value:</label>
                        <input type="text" class="form-control form-control-solid"
                            name="attributes[${attributeId}][value][{{ $key }}]"
                            placeholder="{{ $lang }}">
                    </div>
                @endforeach
            `;
        }
    }

    function addOption(button, attributeId) {
        const container = button.parentNode;
        const newInput = document.createElement('div');
        let html = '';

        @foreach (Config('language') as $langKey => $lang)
            html += `
                <label class="fs-6 mt-2">{{ $lang }} Option:</label>
                <input type="text" class="form-control form-control-solid mb-2"
                    name="attributes[${attributeId}][options][{{ $langKey }}][]"
                    placeholder="{{ $lang }}">
            `;
        @endforeach

        newInput.innerHTML = html + '<hr>';
        container.insertBefore(newInput, button);
    }
</script>
@endpush