<h4 class="c-grey-900 mT-10 mB-30">{{ $submitLabel }}</h4>

@php
$iconValue = old('icon', $productCategory->icon ?? 'category');
$iconSuggestions = [
    'category'     => 'Category',
    'folder'       => 'Folder',
    'label'        => 'Label',
    'local_offer'  => 'Offer',
    'shopping_bag' => 'Shopping',
    'store'        => 'Store',
    'inventory_2'  => 'Inventory',
    'bolt'         => 'Bolt',
    'palette'      => 'Design',
    'code'         => 'Code',
    'music_note'   => 'Music',
    'videocam'     => 'Video',
    'school'       => 'Education',
    'science'      => 'Science',
    'home'         => 'Home',
    'restaurant'   => 'Food',
];
@endphp

<div class="row">

    {{-- ── Left column: Name + Description + Actions ── --}}
    <div class="col-md-8">
        <div class="bgc-white bd bdrs-3 p-20 mB-20">

            <div class="mb-3">
                <label for="name" class="form-label">Category Name</label>
                <input type="text" name="name" id="name"
                       class="form-control @error('name') is-invalid @enderror"
                       placeholder="Enter category name"
                       value="{{ old('name', $productCategory->name ?? '') }}">
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-4">
                <label for="description" class="form-label">Description</label>
                <textarea name="description" id="description" rows="5"
                          class="form-control @error('description') is-invalid @enderror"
                          placeholder="Enter category description">{{ old('description', $productCategory->description ?? '') }}</textarea>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <a href="{{ route('ch-admin.categories.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">{{ $submitLabel }}</button>
            </div>

        </div>
    </div>

    {{-- ── Right column: Icon picker ── --}}
    <div class="col-md-4">
        <div class="bgc-white bd bdrs-3 p-20 mB-20">

            <h6 class="c-grey-900 mB-20">Icon</h6>

            {{-- Large preview --}}
            <div class="text-center mb-3" style="background:#f8f9fa;border-radius:6px;padding:20px 0;">
                <span id="icon-preview"
                      class="material-symbols-outlined"
                      style="font-size:56px;color:#6c757d;display:block;line-height:1;">{{ $iconValue }}</span>
                <code id="icon-name-display"
                      style="display:block;margin-top:8px;font-size:11px;color:#9ca3af;">{{ $iconValue }}</code>
            </div>

            {{-- Input with live inline preview --}}
            <div class="mb-3">
                <label for="icon" class="form-label" style="font-size:12px;">Icon name</label>
                <div class="input-group">
                    <span class="input-group-text bg-white"
                          style="border-right:0 !important;padding:0 10px !important;">
                        <span id="icon-prefix"
                              class="material-symbols-outlined"
                              style="font-size:18px;color:#6c757d;">{{ $iconValue }}</span>
                    </span>
                    <input id="icon" name="icon" type="text" autocomplete="off"
                           class="form-control @error('icon') is-invalid @enderror"
                           placeholder="e.g. shopping_bag"
                           value="{{ $iconValue }}"
                           style="border-left:0 !important;">
                    @error('icon')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Suggestion chips --}}
            <p style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;margin:0 0 8px;">
                Common icons
            </p>
            <div style="display:flex;flex-wrap:wrap;gap:6px;" id="icon-suggestions">
                @foreach($iconSuggestions as $iconKey => $iconLabel)
                <button type="button"
                        class="icon-chip"
                        data-icon="{{ $iconKey }}"
                        style="display:inline-flex !important;align-items:center !important;gap:4px !important;padding:4px 9px !important;background:#fff !important;border:1px solid #dee2e6 !important;border-radius:5px !important;font-size:11px !important;color:#495057 !important;line-height:1.4 !important;font-weight:400 !important;box-shadow:none !important;cursor:pointer !important;">
                    <span class="material-symbols-outlined"
                          style="font-size:13px !important;line-height:1 !important;flex-shrink:0;">{{ $iconKey }}</span>
                    {{ $iconLabel }}
                </button>
                @endforeach
            </div>

            <p class="mT-10" style="font-size:11px;margin-bottom:0;">
                <a href="https://fonts.google.com/icons" target="_blank" class="c-grey-600">
                    Browse all icons <i class="ti-new-window"></i>
                </a>
            </p>

        </div>
    </div>

</div>

@push('head')
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
@endpush

@push('scripts')
    <script src="{{ url('assets/backend/js/iconPicker.js') }}"></script>
@endpush
