@extends('admin.layouts.app')

@section('title', 'Categories - Admin')
@section('page-title', 'Categories')

@section('content')

<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">

    {{-- Add Category Form --}}
    <div class="admin-card">
        <div class="admin-card-title">+ Add New Category</div>
        <form method="POST" action="{{ route('admin.categories.store') }}">
            @csrf
            @if($errors->any())
                <div class="alert-admin alert-admin-danger">{{ $errors->first() }}</div>
            @endif
            <div class="admin-form-group">
                <label>Name *</label>
                <input type="text" name="name" value="{{ old('name') }}" required>
            </div>
            <div class="admin-form-group">
                <label>Slug * (e.g. instant-food)</label>
                <input type="text" name="slug" value="{{ old('slug') }}" required>
            </div>

            {{-- Icon Picker --}}
            <div class="admin-form-group">
                <label>Icon</label>
                <input type="hidden" name="icon" id="icon-input" value="{{ old('icon', '📦') }}">

                {{-- Preview --}}
                <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px;">
                    <div id="icon-preview" style="font-size:36px; width:56px; height:56px;
                        border:2px solid #E0E0E0; border-radius:10px;
                        display:flex; align-items:center; justify-content:center;">
                        {{ old('icon', '📦') }}
                    </div>
                    <span style="font-size:12px; color:#888;">Click an icon below to select</span>
                </div>

                {{-- Emoji Grid --}}
                <div style="display:flex; flex-wrap:wrap; gap:6px; padding:12px;
                    border:1.5px solid #E0E0E0; border-radius:10px; background:#FAFAFA;">
                    @foreach(['📦','🍜','🍱','🍙','🧃','🥤','🍫','🍬','🍭','🍿',
                              '🧁','🍞','🥐','🧇','🍳','🥚','🧴','🪥','🧹','🧺',
                              '📝','✏️','📏','📐','🖊️','📚','🗂️','💊','🩹','🧪',
                              '🛒','🏷️','💰','🎁','🧸','🪆','🎮','🖥️','📱','⌚'] as $emoji)
                    <button type="button" onclick="selectIcon('{{ $emoji }}')"
                        class="icon-option"
                        style="font-size:22px; width:40px; height:40px; border-radius:8px;
                               border:2px solid transparent; background:white;
                               cursor:pointer; transition:all 0.15s;
                               display:flex; align-items:center; justify-content:center;">
                        {{ $emoji }}
                    </button>
                    @endforeach
                </div>
            </div>

            <button type="submit" class="admin-btn admin-btn-primary">Add Category</button>
        </form>
    </div>

    {{-- Categories List --}}
    <div class="admin-card">
        <div class="admin-card-title">All Categories</div>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Icon</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Products</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                <tr>
                    <td style="font-size:24px;">{{ $category->icon }}</td>
                    <td style="font-weight:700;">{{ $category->name }}</td>
                    <td><span class="badge badge-gray">{{ $category->slug }}</span></td>
                    <td><span class="badge badge-blue">{{ $category->products_count }}</span></td>
                    <td>
                        <form method="POST" action="{{ route('admin.categories.destroy', $category) }}"
                            onsubmit="return confirm('Delete {{ $category->name }}?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="admin-btn admin-btn-danger admin-btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

@endsection

@push('scripts')
<script>
function selectIcon(emoji) {
    document.getElementById('icon-input').value = emoji;
    document.getElementById('icon-preview').textContent = emoji;

    // highlight selected
    document.querySelectorAll('.icon-option').forEach(btn => {
        btn.style.borderColor = 'transparent';
        btn.style.background = 'white';
    });
    event.currentTarget.style.borderColor = '#B30000';
    event.currentTarget.style.background = '#FEF2F2';
}
</script>
@endpush