@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create 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 items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Create Taxonomy</h1>
        <a href="{{ route('admin.taxonomy.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Taxonomies
        </a>
    </div>

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

            <input type="hidden" name="language_code" value="{{ defaultLanguage() }}">

            <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') }}" 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') }}"
                                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') }}</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 name="taxonomable_type"
                                class="form-select @error('taxonomable_type') border-red-500 @enderror">
                                @foreach ($taxonomableTypes as $label => $type)
                                    <option value="{{ $type }}"
                                        {{ old('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 class="mt-6">
                        <div class="image-input w-full max-w-[360px]">
                            <h3 class="mb-2">Featured Image</h3>
                            <label for="featured-image" class="aspect-[360/157]">
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_2161_7518)">
                                        <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path
                                            d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2161_7518">
                                            <rect width="32" height="32" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <div class="flex gap-2">
                                    <p><span>Choose file</span></p>
                                </div>
                                <p class="text-14 text-paragraph">
                                    JPEG, PNG, JPG, GIF, WEBP
                                </p>
                            </label>
                            <input type="file" name="featured_image" accept="image/*" id="featured-image" />
                            @error('featured_image')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </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') === $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 $taxonomy)
                                    <option value="{{ $taxonomy->id }}"
                                        {{ old('parent_id') == $taxonomy->id ? 'selected' : '' }}>
                                        {{ $taxonomy->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') }}"
                                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') }}"
                                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', 0) }}"
                                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-primary">Create 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').select2({
                theme: 'bootstrap-5'
            });

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

            // Auto-generate slug from name
            $('#name').on('blur', function() {
                if ($('#slug').val() === '') {
                    const name = $(this).val();
                    const slug = name.toLowerCase()
                        .replace(/[^\w\s-]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-');
                    $('#slug').val(slug);
                }
            });

            // Filter parent taxonomies based on selected taxonomy type
            $('#taxonomy_type').on('change', function() {
                const type = $(this).val();
                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) {
                                options +=
                                    `<option value="${item.id}">${item.name}</option>`;
                            });
                            $('#parent_id').html(options).trigger('change');
                        }
                    });
                } else {
                    $('#parent_id').html('<option value="">None (Top Level)</option>').trigger('change');
                }
            });
        });
    </script>
@endpush