@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Edit Taxonomy')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
@endpush

@section('content')

    <div class="flex justify-between items-center mb-4 flex-wrap gap-2">
        <!-- Text left -->
        <h1 class="text-2xl font-semibold">Edit Taxonomy: {{ $taxonomy->name }}</h1>

        <!-- Buttons right -->
        <div class="flex gap-2 flex-wrap">
            <a href="{{ route('admin.taxonomy.show', $taxonomy->id) }}" class="btn btn-primary btn-black">
                <i class="fas fa-eye"></i> View
            </a>
            <a href="{{ route('admin.taxonomy.index') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left"></i> Back to Taxonomies
            </a>
        </div>
    </div>

    <div class="card">
        <form action="{{ route('admin.taxonomy.update', $taxonomy->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <input type="hidden" name="language_code" value="{{ $taxonomy->language_code }}">
            <div
                class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                <div class="col-span-2">
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Basic Information</h5>

                        <div class="mb-4 input-with-label">
                            <label>Name <span class="text-red-500">*</span></label>
                            <input type="text" id="name" name="name" value="{{ old('name', $taxonomy->name) }}"
                                required class="@error('name') border-red-500 @enderror">
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Slug</label>
                            <input type="text" id="slug" name="slug" value="{{ old('slug', $taxonomy->slug) }}"
                                class="@error('slug') border-red-500 @enderror">
                            @error('slug')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs mt-1">Leave empty to auto-generate from name</p>
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Description</label>
                            <textarea id="description" name="description" rows="4"
                                class="rich-editor @error('description') border-red-500 @enderror">{{ old('description', $taxonomy->description) }}</textarea>
                            @error('description')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div>
                        <h5 class="text-lg font-medium mb-4">Model Configuration</h5>

                        <div class="mb-4 input-with-label">
                            <label>Model Type</label>
                            <select id="model_type" name="taxonomable_type"
                                class="form-select @error('taxonomable_type') border-red-500 @enderror">
                                @foreach ($taxonomableTypes as $label => $type)
                                    <option value="{{ $type }}"
                                        {{ old('taxonomable_type', $taxonomy->taxonomable_type) === $type ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="text-xs mt-1">Leave as "Global" for taxonomies that apply to all content types</p>
                            @error('taxonomable_type')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>


                    <div>
                        @include('backend::components.featured-image',
                        [
                            'label' => 'Featured image'
                            'preview' => $taxonomy->getFirstMediaUrl('featured'),
                            'media' => $taxonomy->getFirstMedia('featured')
                        ])
                    </div>
                </div>
                <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">

                    <!-- Publishing Options -->
                    <div class="mb-10">
                        <h3 class="mb-2">Publishing Options</h3>

                        <div class="mb-4 input-with-label">
                            <label>Taxonomy Type <span class="text-red-500">*</span></label>
                            <select id="taxonomy_type" name="taxonomy_type" required
                                class="form-select @error('taxonomy_type') border-red-500 @enderror">
                                <option value="">Select Type</option>
                                @foreach ($taxonomyTypes as $type)
                                    <option value="{{ $type }}"
                                        {{ old('taxonomy_type', $taxonomy->taxonomy_type) === $type ? 'selected' : '' }}>
                                        {{ ucfirst($type) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('taxonomy_type')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Parent Taxonomy</label>
                            <select id="parent_id" name="parent_id"
                                class="form-select @error('parent_id') border-red-500 @enderror">
                                <option value="">None (Top Level)</option>
                                @foreach ($parentTaxonomies as $parent)
                                    <option value="{{ $parent->id }}"
                                        {{ old('parent_id', $taxonomy->parent_id) == $parent->id ? 'selected' : '' }}>
                                        {{ $parent->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('parent_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Color</label>
                            <input type="text" id="color" name="color"
                                value="{{ old('color', $taxonomy->color) }}"
                                class="color-picker @error('color') border-red-500 @enderror">
                            @error('color')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Icon</label>
                            <input type="text" id="icon" name="icon"
                                value="{{ old('icon', $taxonomy->icon ?? '') }}"
                                class="@error('icon') border-red-500 @enderror">
                            @error('icon')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs mt-1">Enter icon class (e.g., fa-tag) or upload an icon</p>
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Sort Order</label>
                            <input type="number" id="sort_order" name="sort_order"
                                value="{{ old('sort_order', $taxonomy->sort_order) }}"
                                class="@error('sort_order') border-red-500 @enderror">
                            @error('sort_order')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                <a class="btn-secondary" href="{{ route('admin.taxonomy.index') }}">
                    Cancel
                </a>
                <button type="submit" class="btn btn-sm btn-primary">Update Taxonomy</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('#parent_id, #language_code, #taxonomy_type, #model_type').select2({
                theme: 'bootstrap-5'
            });

            // Initialize color picker
            $('.color-picker').spectrum({
                type: "component",
                showInput: true,
                showInitial: true,
                showAlpha: false,
                allowEmpty: true,
                preferredFormat: "hex",
                color: "{{ $taxonomy->color }}"
            });

            // Filter parent taxonomies based on selected taxonomy type
            $('#taxonomy_type').on('change', function() {
                const type = $(this).val();
                const currentId = {{ $taxonomy->id }};
                if (type) {
                    $.ajax({
                        url: '/admin/taxonomy-types/' + type,
                        type: 'GET',
                        success: function(data) {
                            let options = '<option value="">None (Top Level)</option>';
                            data.forEach(function(item) {
                                // Prevent selecting itself as parent
                                if (item.id !== currentId) {
                                    const selected = item.id ==
                                        {{ $taxonomy->parent_id ?? 'null' }} ?
                                        'selected' : '';
                                    options +=
                                        `<option value="${item.id}" ${selected}>${item.name}</option>`;
                                }
                            });
                            $('#parent_id').html(options).trigger('change');
                        }
                    });
                } else {
                    $('#parent_id').html('<option value="">None (Top Level)</option>').trigger('change');
                }
            });
        });
    </script>
@endpush