@extends('layouts.app-shell')
@section('title', 'Categories')
@section('sidebar')
    @include('admin._sidebar')
@endsection
@section('bottomnav')
    <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard*') ? 'active' : '' }}"><x-icon name="home" :size="20" /><span>Home</span></a>
    <a href="{{ route('admin.bookings') }}" class="{{ request()->routeIs('admin.bookings*') ? 'active' : '' }}"><x-icon name="bookings" :size="20" /><span>Subs</span></a>
    <a href="{{ route('admin.services.index') }}" class="{{ request()->routeIs('admin.services*') ? 'active' : '' }}"><x-icon name="services" :size="20" /><span>Catalogue</span></a>
    <a href="{{ route('admin.categories') }}" class="{{ request()->routeIs('admin.categories*') ? 'active' : '' }}"><x-icon name="bookings" :size="20" /><span>Cats</span></a>
@endsection

@section('content')
<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 22px; font-weight: 700;">Service categories</h2>
        <p class="muted" style="font-size: 13px;">Group services shown on the customer home page.</p>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="grid-2">
    <div class="panel">
        <div class="panel-head">
            <h3><span class="ic"><x-icon name="bookings" :size="14" /></span> {{ $categories->count() }} categor{{ $categories->count() === 1 ? 'y' : 'ies' }}</h3>
            <span class="meta">Sorted by display order</span>
        </div>
        <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr><th>Image</th><th>Name</th><th>Services</th><th>Status</th><th></th></tr>
                </thead>
                <tbody>
                    @forelse($categories as $c)
                        <tr>
                            <td data-label="Image">
                                <div class="row-thumb" style="border-radius: 10px;">
                                    @if($c->image)
                                        <img src="{{ asset($c->image) }}" alt="">
                                    @elseif($c->icon)
                                        <span style="font-size: 22px;">{{ $c->icon }}</span>
                                    @else🛠@endif
                                </div>
                            </td>
                            <td data-label="Name">
                                <strong>{{ $c->name }}</strong>
                                <div class="muted" style="font-size: 11.5px;">{{ $c->slug }}</div>
                            </td>
                            <td data-label="Services"><strong>{{ $c->services_count }}</strong></td>
                            <td data-label="Status">{!! $c->is_active ? '<span class="pill pill-green">active</span>' : '<span class="pill pill-grey">off</span>' !!}</td>
                            <td data-label="">
                                <button class="ic-btn" title="Edit" onclick="editCategory({{ $c->id }}, '{{ addslashes($c->name) }}', '{{ addslashes($c->slug ?? '') }}', '{{ addslashes($c->icon ?? '') }}', {{ (int)$c->sort_order }}, {{ $c->is_active ? 'true' : 'false' }}, '{{ addslashes($c->description ?? '') }}', '{{ addslashes($c->image ?? '') }}')"><x-icon name="edit" :size="14" /></button>
                                <form method="POST" action="{{ route('admin.categories.destroy', $c) }}" style="display:inline" onsubmit="return confirm('Delete this category?');">
                                    @csrf @method('DELETE')
                                    <button class="ic-btn red" title="Delete"><x-icon name="trash" :size="14" /></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5"><div class="empty">No categories yet. Add one →</div></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel">
        <div class="panel-head">
            <h3><span class="ic"><x-icon name="plus" :size="14" /></span> <span id="formTitle">Add category</span></h3>
            <button class="btn btn-ghost btn-sm" type="button" onclick="resetCategoryForm()" id="resetBtn" style="display:none;">
                <x-icon name="plus" :size="12" /> New
            </button>
        </div>
        @if($errors->any())
            <div class="alert alert-error">
                <ul style="margin: 0 0 0 16px;">@foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.categories.save') }}" enctype="multipart/form-data" id="categoryForm">
            @csrf
            <input type="hidden" name="id" id="cat-id" value="">

            <div class="form-section">
                <div class="ic"><x-icon name="info" :size="14" /></div>
                <h4>Basic info</h4>
                <span class="sub">Name & slug</span>
            </div>
            <div class="field">
                <label>Name <span class="req">*</span></label>
                <input name="name" id="cat-name" required placeholder="e.g. Cleaning">
            </div>
            <div class="form-grid">
                <div class="field">
                    <label>Slug</label>
                    <input name="slug" id="cat-slug" placeholder="auto-generated">
                    <span class="hint">Lowercase letters, numbers, dashes.</span>
                </div>
                <div class="field">
                    <label>Icon (emoji)</label>
                    <input name="icon" id="cat-icon" placeholder="🛠️" maxlength="8">
                    <span class="hint">Shown if no image is uploaded.</span>
                </div>
            </div>
            <div class="field">
                <label>Description</label>
                <textarea name="description" id="cat-description" rows="3" placeholder="Optional short description"></textarea>
            </div>

            <div class="form-section">
                <div class="ic"><x-icon name="camera" :size="14" /></div>
                <h4>Cover image</h4>
                <span class="sub">Optional</span>
            </div>
            <div class="field">
                <input type="file" name="image" accept="image/*">
                <div id="current-image" style="display:none; margin-top: 10px;">
                    <div class="photo-preview-box">
                        <img id="cat-image-preview" src="" alt="">
                    </div>
                </div>
                <span class="hint">JPG, PNG or WebP, max 4 MB.</span>
            </div>

            <div class="form-section">
                <div class="ic"><x-icon name="settings" :size="14" /></div>
                <h4>Display</h4>
                <span class="sub">Order and visibility</span>
            </div>
            <div class="form-grid">
                <div class="field">
                    <label>Sort order</label>
                    <input type="number" name="sort_order" id="cat-sort" value="0">
                </div>
                <div class="field">
                    <label class="pill-toggle">
                        <input type="checkbox" name="is_active" id="cat-active" value="1" checked>
                        <span class="sw"></span>
                        <span class="lbl">Active</span>
                    </label>
                </div>
            </div>

            <div class="flex" style="gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--bfk-border-2);">
                <button class="btn btn-primary" type="submit"><x-icon name="check" :size="14" /> <span id="saveBtnText">Save category</span></button>
                <button class="btn btn-outline" type="button" onclick="resetCategoryForm()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
function editCategory(id, name, slug, icon, sortOrder, isActive, description, image) {
    document.getElementById('cat-id').value = id;
    document.getElementById('cat-name').value = name;
    document.getElementById('cat-slug').value = slug;
    document.getElementById('cat-icon').value = icon;
    document.getElementById('cat-sort').value = sortOrder;
    document.getElementById('cat-description').value = description;
    document.getElementById('cat-active').checked = isActive;
    document.getElementById('formTitle').textContent = 'Edit category';
    document.getElementById('saveBtnText').textContent = 'Update category';
    document.getElementById('resetBtn').style.display = '';
    if (image) {
        document.getElementById('cat-image-preview').src = '/' + image;
        document.getElementById('current-image').style.display = '';
    } else {
        document.getElementById('current-image').style.display = 'none';
    }
    document.getElementById('categoryForm').scrollIntoView({behavior:'smooth', block:'center'});
}
function resetCategoryForm() {
    document.getElementById('categoryForm').reset();
    document.getElementById('cat-id').value = '';
    document.getElementById('formTitle').textContent = 'Add category';
    document.getElementById('saveBtnText').textContent = 'Save category';
    document.getElementById('resetBtn').style.display = 'none';
    document.getElementById('current-image').style.display = 'none';
}
</script>

@endsection