@extends('admin.layouts.app')

@section('title', 'Add Service Category')

@section('content')
<style>
    .form-card    { border-radius:16px; border:1.5px solid #e9ecef; }
    .preview-card { border-radius:16px; border:1.5px solid #e9ecef; position:sticky; top:80px; }
    .styled-label { font-size:.85rem; font-weight:600; color:#374151; margin-bottom:6px; display:block; }
    .styled-input { border:1.5px solid #e5e7eb; border-radius:10px; padding:10px 14px; font-size:.9rem; width:100%; transition:border-color .2s, box-shadow .2s; background:#fff; }
    .styled-input:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.1); outline:none; }
    .styled-input.is-invalid { border-color:#ef4444; }
    .section-divider { border:none; border-top:1.5px solid #f1f5f9; margin:20px 0; }
    .toggle-switch { position:relative; display:inline-block; width:48px; height:26px; }
    .toggle-switch input { display:none; }
    .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#d1d5db; border-radius:34px; transition:.3s; }
    .toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
    .toggle-switch input:checked + .toggle-slider { background:#7c3aed; }
    .toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
    .submit-btn { background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none; border-radius:10px; padding:11px 28px; font-weight:600; color:white; width:100%; transition:opacity .2s, transform .1s; }
    .submit-btn:hover { opacity:.92; transform:translateY(-1px); }
    .cancel-btn { border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 20px; font-weight:600; color:#64748b; background:white; width:100%; transition:all .2s; }
    .cancel-btn:hover { border-color:#94a3b8; color:#374151; }

    /* Emoji Picker */
    .emoji-input-wrap { position:relative; }
    .emoji-display { font-size:1.5rem; cursor:pointer; width:52px; height:52px; border-radius:12px; border:1.5px solid #e5e7eb; background:#f9fafb; display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s; flex-shrink:0; }
    .emoji-display:hover { border-color:#7c3aed; background:#f5f3ff; }
    .emoji-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; max-height:220px; overflow-y:auto; padding:10px; }
    .emoji-grid button { background:none; border:none; font-size:1.4rem; padding:4px; border-radius:8px; cursor:pointer; transition:background .15s; line-height:1; }
    .emoji-grid button:hover { background:#f3e8ff; }
    .emoji-picker-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:999; background:#fff; border:1.5px solid #e9ecef; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.12); width:320px; display:none; }
    .emoji-picker-panel.open { display:block; }
    .emoji-search { width:100%; border:none; border-bottom:1.5px solid #f1f5f9; padding:10px 14px; font-size:.85rem; outline:none; border-radius:14px 14px 0 0; }
    .emoji-category { padding:6px 10px 2px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; }

    /* Preview card */
    .preview-icon-wrap { width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 12px; }
    .badge-active   { background:#dcfce7; color:#15803d; padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:600; }
    .badge-inactive { background:#f1f5f9; color:#64748b;  padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:600; }
</style>

<div class="container-fluid py-2">

    {{-- Header --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ route('admin.service-categories.index') }}"
            style="width:38px; height:38px; border-radius:10px; border:1.5px solid #e5e7eb; background:white; display:flex; align-items:center; justify-content:center; color:#374151; text-decoration:none;">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0" style="color:#1e293b;">Add New Service Category</h4>
            <small class="text-muted">
                <a href="{{ route('admin.service-categories.index') }}" class="text-decoration-none text-muted">Service Categories</a> / Add New
            </small>
        </div>
    </div>

    @if($errors->any())
        <div class="d-flex gap-2 align-items-start mb-4 px-4 py-3"
            style="background:#fef2f2; border:1.5px solid #fecaca; border-radius:12px; color:#dc2626;">
            <i class="bi bi-exclamation-triangle-fill mt-1"></i>
            <div><strong>Please fix:</strong><ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        </div>
    @endif

    <form action="{{ route('admin.service-categories.store') }}" method="POST" id="catForm">
        @csrf
        <div class="row g-4">

            {{-- LEFT: Form --}}
            <div class="col-lg-7">
                <div class="form-card card p-4">

                    {{-- Name --}}
                    <div class="mb-4">
                        <label class="styled-label">Category Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="catName" value="{{ old('name') }}"
                            class="styled-input @error('name') is-invalid @enderror"
                            placeholder="e.g. Engine Repair, Oil Change, Tyres" required autocomplete="off">
                        @error('name')<div style="color:#ef4444; font-size:.8rem; margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Icon --}}
                    <div class="mb-4">
                        <label class="styled-label">Category Icon <span class="text-muted fw-normal">(emoji)</span></label>
                        <div class="d-flex align-items-center gap-3">
                            <div class="emoji-display" id="emojiDisplay" onclick="togglePicker()">
                                <span id="emojiShow">{{ old('icon', '🔧') }}</span>
                            </div>
                            <div style="flex:1;">
                                <div style="font-size:.82rem; color:#374151; font-weight:500;">Click the icon to pick an emoji</div>
                                <div style="font-size:.78rem; color:#94a3b8;">Choose an emoji that represents this service category</div>
                            </div>
                        </div>
                        <input type="hidden" name="icon" id="iconInput" value="{{ old('icon', '🔧') }}">

                        {{-- Emoji Picker Panel --}}
                        <div class="emoji-picker-panel" id="emojiPanel">
                            <input type="text" class="emoji-search" id="emojiSearch" placeholder="Search emojis..." oninput="filterEmojis(this.value)">
                            <div class="emoji-grid" id="emojiGrid"></div>
                        </div>
                    </div>

                    <hr class="section-divider">

                    {{-- Sort + Active --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Sort Order</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}"
                                class="styled-input @error('sort_order') is-invalid @enderror" min="0">
                            <small class="text-muted" style="font-size:.78rem;">Lower = shown first</small>
                        </div>
                        <div class="col-sm-6 d-flex align-items-center">
                            <div class="p-3 rounded-3 w-100 d-flex align-items-center justify-content-between"
                                style="background:#f8fafc; border:1.5px solid #e5e7eb;">
                                <div>
                                    <div class="fw-semibold" style="font-size:.9rem; color:#374151;">Status</div>
                                    <small class="text-muted">Visible to users</small>
                                </div>
                                <label class="toggle-switch mb-0">
                                    <input type="checkbox" name="is_active" value="1" id="isActive"
                                        {{ old('is_active', '1') ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Description --}}
                    <div class="mb-4">
                        <label class="styled-label">Description <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="description" id="catDesc" rows="3"
                            class="styled-input @error('description') is-invalid @enderror"
                            placeholder="Brief description of this service category...">{{ old('description') }}</textarea>
                    </div>

                    {{-- Buttons --}}
                    <div class="row g-2 mt-2">
                        <div class="col-8">
                            <button type="submit" class="submit-btn">
                                <i class="bi bi-check-lg me-2"></i>Save Category
                            </button>
                        </div>
                        <div class="col-4">
                            <a href="{{ route('admin.service-categories.index') }}" class="cancel-btn text-decoration-none text-center d-block">
                                Cancel
                            </a>
                        </div>
                    </div>

                </div>
            </div>

            {{-- RIGHT: Preview --}}
            <div class="col-lg-5">
                <div class="preview-card card p-4">
                    <div class="fw-bold mb-3" style="font-size:.85rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
                        <i class="bi bi-eye me-1"></i> Live Preview
                    </div>

                    <div style="border:1.5px solid #e9ecef; border-radius:14px; padding:24px; background:#fafafa;">
                        <div class="preview-icon-wrap" id="previewIconWrap" style="background:#f3e8ff;">
                            <span id="previewIcon">🔧</span>
                        </div>
                        <div class="text-center mb-3">
                            <div id="previewName" class="fw-bold" style="font-size:1.05rem; color:#1e293b;">Category Name</div>
                            <div id="previewSlug" style="font-size:.75rem; color:#94a3b8; font-family:monospace; margin-top:2px;">category-name</div>
                        </div>
                        <div class="d-flex justify-content-center gap-2 mb-3">
                            <span id="previewStatus" class="badge-active">
                                <i class="bi bi-circle-fill me-1" style="font-size:.45rem; vertical-align:middle;"></i>Active
                            </span>
                        </div>
                        <div id="previewDescWrap" style="border-top:1px solid #e9ecef; padding-top:12px; display:none;">
                            <div id="previewDesc" class="text-muted text-center" style="font-size:.82rem; font-style:italic;"></div>
                        </div>
                    </div>

                    {{-- Quick icon suggestions --}}
                    <div class="mt-4">
                        <div class="fw-semibold mb-2" style="font-size:.82rem; color:#374151;">
                            <i class="bi bi-lightning me-1 text-warning"></i> Quick Pick
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach(['🔧','🛞','⚙️','🔩','🛢️','🚗','🔋','❄️','🔌','💨','🪛','🔦','🏎️','🚿','🛡️','🔑'] as $e)
                                <button type="button" onclick="setEmoji('{{ $e }}')"
                                    style="background:#f8fafc; border:1.5px solid #e9ecef; border-radius:8px; padding:6px 10px; font-size:1.2rem; cursor:pointer; transition:all .15s;"
                                    onmouseover="this.style.borderColor='#7c3aed'; this.style.background='#f5f3ff';"
                                    onmouseout="this.style.borderColor='#e9ecef'; this.style.background='#f8fafc';">
                                    {{ $e }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="fw-semibold mb-2" style="font-size:.82rem; color:#374151;">
                            <i class="bi bi-lightbulb me-1 text-warning"></i> Tips
                        </div>
                        <ul style="font-size:.8rem; color:#64748b; padding-left:16px; line-height:1.8;">
                            <li>Use a relevant emoji for quick visual identification</li>
                            <li>Keep names short and descriptive</li>
                            <li>Sort order 0 appears first in the list</li>
                            <li>Inactive categories won't show to customers</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>

<script>
// All service-related emojis
const emojis = [
    {c:'Auto Service', e:['🔧','🛞','⚙️','🔩','🛢️','🚗','🔋','❄️','🔌','💨','🪛','🔦','🏎️','🚿','🛡️','🔑','🚙','🏁','🔎','🪝','⛽','🧰','🪜','🛻','🚐','🔐','🪤','🧲']},
    {c:'General', e:['⭐','✅','🏆','💎','🎯','🚀','💡','🔥','📦','📋','🗂️','🏷️','📌','🔖','✨','💫','🌟','🎨','🛒','📊']},
];

function buildEmojiGrid(filter='') {
    const grid = document.getElementById('emojiGrid');
    grid.innerHTML = '';
    emojis.forEach(cat => {
        const filtered = cat.e.filter(e => !filter || e.includes(filter));
        if (!filtered.length) return;
        const label = document.createElement('div');
        label.className = 'emoji-category';
        label.textContent = cat.c;
        label.style.gridColumn = '1/-1';
        grid.appendChild(label);
        filtered.forEach(e => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = e;
            btn.title = e;
            btn.onclick = () => { setEmoji(e); closePickerPanel(); };
            grid.appendChild(btn);
        });
    });
}

function togglePicker() {
    const panel = document.getElementById('emojiPanel');
    panel.classList.toggle('open');
    if (panel.classList.contains('open')) {
        buildEmojiGrid();
        document.getElementById('emojiSearch').focus();
    }
}
function closePickerPanel() { document.getElementById('emojiPanel').classList.remove('open'); }

function filterEmojis(q) { buildEmojiGrid(q); }

function setEmoji(e) {
    document.getElementById('emojiShow').textContent = e;
    document.getElementById('iconInput').value = e;
    document.getElementById('previewIcon').textContent = e;
}

// Close picker on outside click
document.addEventListener('click', function(ev) {
    if (!ev.target.closest('#emojiDisplay') && !ev.target.closest('#emojiPanel')) {
        closePickerPanel();
    }
});

// Live preview
function slugify(s) { return s.toLowerCase().replace(/[^a-z0-9\s-]/g,'').replace(/\s+/g,'-').replace(/-+/g,'-').trim(); }

document.getElementById('catName').addEventListener('input', function() {
    const v = this.value || 'Category Name';
    document.getElementById('previewName').textContent = v;
    document.getElementById('previewSlug').textContent = slugify(v) || 'category-name';
});

document.getElementById('isActive').addEventListener('change', function() {
    const el = document.getElementById('previewStatus');
    if (this.checked) {
        el.className = 'badge-active';
        el.innerHTML = '<i class="bi bi-circle-fill me-1" style="font-size:.45rem; vertical-align:middle;"></i>Active';
    } else {
        el.className = 'badge-inactive';
        el.innerHTML = '<i class="bi bi-circle me-1" style="font-size:.45rem; vertical-align:middle;"></i>Inactive';
    }
});

document.getElementById('catDesc').addEventListener('input', function() {
    const wrap = document.getElementById('previewDescWrap');
    const el   = document.getElementById('previewDesc');
    if (this.value.trim()) {
        wrap.style.display = 'block';
        el.textContent = this.value;
    } else {
        wrap.style.display = 'none';
    }
});
</script>
@endsection