@extends('admin.layouts.app')

@section('title', 'Edit Spare Part 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:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.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:#f97316; }
    .toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
    .submit-btn { background:linear-gradient(135deg,#f97316,#ea580c); 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; }
    .meta-badge { background:#f1f5f9; color:#64748b; border-radius:8px; padding:6px 12px; font-size:.8rem; display:inline-flex; align-items:center; gap:6px; }
    .icon-display { width:64px; height:64px; border-radius:16px; background:#fff7ed; border:2px solid #fed7aa; display:flex; align-items:center; justify-content:center; font-size:2rem; cursor:pointer; transition:border-color .2s, transform .15s; flex-shrink:0; }
    .icon-display:hover { border-color:#f97316; transform:scale(1.05); }
    .emoji-picker-wrap { background:#fff; border:1.5px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
    .emoji-search { border:1.5px solid #e5e7eb; border-radius:9px; padding:8px 12px; font-size:.85rem; width:100%; margin-bottom:10px; }
    .emoji-search:focus { border-color:#f97316; outline:none; }
    .emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:200px; overflow-y:auto; }
    .emoji-btn { width:34px; height:34px; border:none; border-radius:8px; background:transparent; font-size:1.2rem; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; }
    .emoji-btn:hover { background:#fff7ed; }
    .quick-icons { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; }
    .quick-icon-btn { padding:4px 10px; border:1.5px solid #e5e7eb; border-radius:8px; background:#fff; font-size:1.1rem; cursor:pointer; transition:all .15s; }
    .quick-icon-btn:hover { border-color:#f97316; background:#fff7ed; }
    .cat-preview-card { border:1.5px solid #e9ecef; border-radius:14px; overflow:hidden; }
    .cat-preview-header { padding:18px; background:linear-gradient(135deg,#f97316,#ea580c); display:flex; align-items:center; gap:14px; }
    .cat-preview-icon-wrap { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
    .cat-preview-body { padding:18px; background:#fff; }
    .cat-preview-stat { text-align:center; flex:1; }
    .cat-preview-stat .val { font-size:1.1rem; font-weight:700; color:#1e293b; }
    .cat-preview-stat .lbl { font-size:.72rem; color:#94a3b8; margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
</style>

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

    {{-- Header --}}
    <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
        <a href="{{ route('admin.spare-part-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; flex-shrink:0;">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0" style="color:#1e293b;">Edit Spare Part Category</h4>
            <small class="text-muted">
                <a href="{{ route('admin.spare-part-categories.index') }}" class="text-decoration-none text-muted">Categories</a>
                / <span class="text-muted">{{ $sparePartCategory->name }}</span>
            </small>
        </div>
        <div class="ms-auto d-flex gap-2 flex-wrap">
            <span class="meta-badge"><i class="bi bi-hash"></i>ID: {{ $sparePartCategory->id }}</span>
            <span class="meta-badge"><i class="bi bi-calendar3"></i>{{ $sparePartCategory->created_at?->format('d M Y') }}</span>
            <span class="meta-badge"><i class="bi bi-box2"></i>{{ $sparePartCategory->spare_parts_count ?? $sparePartCategory->spareParts()->count() }} parts</span>
        </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.spare-part-categories.update', $sparePartCategory) }}" method="POST" id="catForm">
        @csrf @method('PUT')
        <div class="row g-4">

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

                    {{-- Icon Picker --}}
                    <div class="mb-4">
                        <label class="styled-label">Category Icon</label>
                        <div class="d-flex align-items-start gap-3">
                            <div class="icon-display" id="iconDisplay" onclick="togglePicker()">
                                <span id="iconPreviewLg">{{ old('icon', $sparePartCategory->icon ?: '📦') }}</span>
                            </div>
                            <div class="flex-grow-1">
                                <input type="hidden" name="icon" id="iconInput" value="{{ old('icon', $sparePartCategory->icon ?: '📦') }}">
                                <div style="font-size:.82rem; color:#64748b; margin-bottom:6px;">Click the icon to open picker, or type/paste an emoji below.</div>
                                <input type="text" id="iconManual" value="{{ old('icon', $sparePartCategory->icon ?: '📦') }}"
                                    class="styled-input" placeholder="Paste or type emoji…" maxlength="10"
                                    style="font-size:1.3rem; padding:8px 12px; width:auto; max-width:120px;">
                            </div>
                        </div>

                        <div id="emojiPickerWrap" class="emoji-picker-wrap mt-3" style="display:none;">
                            <div class="quick-icons">
                                @foreach(['📦','⚙️','🔧','🔩','🛞','🪛','🪝','🔋','💡','🪟','🚗','🛻','🔑','🪜','🧲','🔌','🛢️','🪣','🧰','⛽'] as $e)
                                    <button type="button" class="quick-icon-btn" onclick="pickIcon('{{ $e }}')">{{ $e }}</button>
                                @endforeach
                            </div>
                            <input type="text" class="emoji-search" placeholder="Search emojis…" oninput="filterEmojis(this.value)">
                            <div class="emoji-grid" id="emojiGrid"></div>
                        </div>
                    </div>

                    {{-- 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', $sparePartCategory->name) }}"
                            class="styled-input @error('name') is-invalid @enderror"
                            placeholder="e.g. Engine Parts, Brake System" required autocomplete="off">
                        @error('name')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                    </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…">{{ old('description', $sparePartCategory->description) }}</textarea>
                    </div>

                    <hr class="section-divider">

                    <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', $sparePartCategory->sort_order) }}"
                                class="styled-input" min="0">
                        </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 garages</small>
                                </div>
                                <label class="toggle-switch mb-0">
                                    <input type="checkbox" name="is_active" value="1" id="isActive"
                                        {{ old('is_active', $sparePartCategory->is_active) ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <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>Update Category
                            </button>
                        </div>
                        <div class="col-4">
                            <a href="{{ route('admin.spare-part-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 class="cat-preview-card">
                        <div class="cat-preview-header">
                            <div class="cat-preview-icon-wrap">
                                <span id="previewIcon">{{ $sparePartCategory->icon ?: '📦' }}</span>
                            </div>
                            <div>
                                <div id="previewName" class="fw-bold text-white" style="font-size:1rem;">{{ $sparePartCategory->name }}</div>
                                <div id="previewStatus" class="mt-1"
                                    style="font-size:.75rem; background:{{ $sparePartCategory->is_active ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.2)' }}; color:#fff; display:inline-block; padding:2px 10px; border-radius:20px; font-weight:600;">
                                    {{ $sparePartCategory->is_active ? 'Active' : 'Inactive' }}
                                </div>
                            </div>
                        </div>
                        <div class="cat-preview-body">
                            <div id="previewDescWrap" style="{{ $sparePartCategory->description ? '' : 'display:none;' }} margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid #f1f5f9;">
                                <div style="font-size:.8rem; color:#64748b;" id="previewDesc">{{ $sparePartCategory->description }}</div>
                            </div>
                            <div class="d-flex gap-3">
                                <div class="cat-preview-stat">
                                    <div class="val">{{ $sparePartCategory->spareParts()->count() }}</div>
                                    <div class="lbl">Spare Parts</div>
                                </div>
                                <div style="width:1px; background:#f1f5f9;"></div>
                                <div class="cat-preview-stat">
                                    <div id="previewSlug" class="val" style="font-size:.72rem; word-break:break-all; font-family:monospace;">{{ $sparePartCategory->slug }}</div>
                                    <div class="lbl">Slug</div>
                                </div>
                            </div>
                        </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>Pick an emoji that visually represents the category</li>
                            <li>Use clear, descriptive names for easy navigation</li>
                            <li>Sort order controls the display position</li>
                            <li>Inactive categories won't be shown to garages</li>
                        </ul>
                    </div>
                </div>
            </div>

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

<script>
const EMOJIS = [
    '📦','⚙️','🔧','🔩','🛞','🪛','🪝','🔋','💡','🪟','🚗','🛻','🔑','🪜','🧲','🔌','🛢️','🪣','🧰','⛽',
    '🚘','🚙','🏎️','🚐','🚌','🛺','🚑','🚒','🚚','🛵','🛴','🛻','⚡','🌡️','🔦','🪔','🔭','🔬','💎','🪨',
    '🗜️','⛓️','🪤','🧯','🪣','🧱','🪞','🛋️','🪑','🚿','🛁','🪴','🌿','🍃','🌱','🌲','🌳','🌴','🌵','🎋',
    '❄️','🌊','🔥','⚡','🌀','🌈','☁️','🌤️','⛅','🌧️','🌨️','🌩️','🌪️','🌫️','🌬️','🌂','☂️','☔','⛱️','🌞',
    '🔴','🟠','🟡','🟢','🔵','🟣','⚫','⚪','🟤','❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎',
];
let allEmojis = [...EMOJIS];

function renderGrid(list){
    const g = document.getElementById('emojiGrid');
    g.innerHTML = list.map(e =>
        `<button type="button" class="emoji-btn" onclick="pickIcon('${e}')">${e}</button>`
    ).join('');
}
renderGrid(allEmojis);

function filterEmojis(q){
    renderGrid(q.trim() ? allEmojis.filter(e => e.includes(q)) : allEmojis);
}
function pickIcon(e){
    document.getElementById('iconInput').value   = e;
    document.getElementById('iconManual').value  = e;
    document.getElementById('iconPreviewLg').textContent = e;
    document.getElementById('previewIcon').textContent   = e;
    document.getElementById('emojiPickerWrap').style.display = 'none';
}
function togglePicker(){
    const w = document.getElementById('emojiPickerWrap');
    w.style.display = w.style.display === 'none' ? 'block' : 'none';
}
document.getElementById('iconManual').addEventListener('input', function(){
    const v = this.value.trim() || '📦';
    document.getElementById('iconInput').value = v;
    document.getElementById('iconPreviewLg').textContent = v;
    document.getElementById('previewIcon').textContent   = v;
});
function slugify(s){ return s.toLowerCase().replace(/[^a-z0-9\s-]/g,'').replace(/\s+/g,'-').replace(/-+/g,'-').trim(); }

document.getElementById('catName').addEventListener('input', function(){
    document.getElementById('previewName').textContent = this.value || 'Category Name';
    document.getElementById('previewSlug').textContent = this.value ? slugify(this.value) : '—';
});
document.getElementById('catDesc').addEventListener('input', function(){
    const wrap = document.getElementById('previewDescWrap');
    document.getElementById('previewDesc').textContent = this.value;
    wrap.style.display = this.value.trim() ? 'block' : 'none';
});
document.getElementById('isActive').addEventListener('change', function(){
    const el = document.getElementById('previewStatus');
    el.textContent = this.checked ? 'Active' : 'Inactive';
    el.style.background = this.checked ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.2)';
});
document.addEventListener('click', function(e){
    const wrap = document.getElementById('emojiPickerWrap');
    const display = document.getElementById('iconDisplay');
    if(!wrap.contains(e.target) && !display.contains(e.target)){
        wrap.style.display='none';
    }
});
</script>
@endsection