@extends('layouts.app')

@section('title', 'Categories')

@push('styles')
<style>
    .page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
    .page-header h1 { font-size:1.5rem; font-weight:700; }
    .filter-bar { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; flex-wrap:wrap; }
    .filter-bar .search-input { flex:1; min-width:220px; max-width:380px; position:relative; }
    .filter-bar .search-input input { width:100%; padding:0.625rem 1rem 0.625rem 2.5rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card); color:var(--text-primary); font-family:inherit; font-size:0.875rem; outline:none; }
    .filter-bar .search-input i { position:absolute; left:0.875rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:0.875rem; }
    .cat-grid-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
    .cat-table { width:100%; border-collapse:collapse; }
    .cat-table th, .cat-table td { padding:0.85rem 1.1rem; text-align:left; font-size:0.875rem; border-bottom:1px solid var(--border); }
    .cat-table th { background:var(--bg-subtle, rgba(255,255,255,0.02)); color:var(--text-muted); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; }
    .cat-table tr:last-child td { border-bottom:none; }
    .cat-name { display:flex; align-items:center; gap:0.6rem; font-weight:600; }
    .cat-slug { color:var(--text-muted); font-size:0.78rem; font-family:monospace; }
    .badge-soft { display:inline-block; padding:0.18rem 0.55rem; border-radius:999px; font-size:0.7rem; font-weight:600; }
    .badge-active { background:rgba(0,212,170,0.12); color:#00d4aa; }
    .badge-inactive { background:rgba(106,106,142,0.18); color:var(--text-muted); }
    .row-actions { display:flex; gap:0.4rem; justify-content:flex-end; }
    .row-actions .btn { padding:0.35rem 0.65rem; font-size:0.78rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; }
    .row-actions .btn:hover { border-color:var(--accent); color:var(--accent); }
    .row-actions .btn-danger:hover { border-color:var(--danger, #ff4757); color:var(--danger, #ff4757); }
    .empty { text-align:center; padding:2.5rem 1rem; color:var(--text-muted); }
    .empty i { font-size:2.5rem; opacity:0.5; margin-bottom:0.8rem; display:block; }

    /* Modal */
    .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
    .modal-backdrop.open { display:flex; }
    .modal-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:480px; padding:1.5rem; }
    .modal-card h3 { margin:0 0 1rem; font-size:1.05rem; }
    .modal-card .form-group { margin-bottom:1rem; }
    .modal-card label { display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.35rem; color:var(--text-muted); }
    .modal-card input[type="text"], .modal-card textarea {
        width:100%; padding:0.55rem 0.75rem; border:1px solid var(--border); border-radius:var(--radius-md);
        background:var(--bg-page, var(--bg-card)); color:var(--text-primary); font-family:inherit; font-size:0.88rem;
    }
    .modal-card textarea { resize:vertical; min-height:80px; }
    .modal-actions { display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem; }
    .btn { padding:0.55rem 1rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; font-size:0.85rem; }
    .btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
    .btn-primary:hover { opacity:0.92; }
    .toggle-row { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1><i class="fas fa-tags" style="margin-right:0.4rem; color:var(--accent);"></i> Categories</h1>
            <p style="color:var(--text-muted); font-size:0.85rem; margin-top:0.25rem;">
                Organise your products. Pick a category when adding a product, or quick-add one from the product form.
            </p>
        </div>
        <button type="button" class="btn btn-primary" onclick="openCategoryModal()">
            <i class="fas fa-plus"></i> New Category
        </button>
    </div>

    @if(session('success'))
        <div class="cat-grid-card" style="padding:0.85rem 1.1rem; margin-bottom:1rem; color:#00d4aa;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if($errors->any())
        <div class="cat-grid-card" style="padding:0.85rem 1.1rem; margin-bottom:1rem; color:#ff4757;">
            <i class="fas fa-triangle-exclamation"></i> {{ $errors->first() }}
        </div>
    @endif

    <form method="GET" action="{{ route('inventory.categories.index') }}" class="filter-bar">
        <div class="search-input">
            <i class="fas fa-search"></i>
            <input type="text" name="q" placeholder="Search categories..." value="{{ $search ?? '' }}">
        </div>
        @if(!empty($search))
            <a href="{{ route('inventory.categories.index') }}" class="btn">Clear</a>
        @endif
    </form>

    <div class="cat-grid-card">
        @if($categories->count() === 0)
            <div class="empty">
                <i class="fas fa-tags"></i>
                <div style="font-weight:600; color:var(--text-primary);">No categories yet</div>
                <div style="font-size:0.85rem;">Create one to start organising your products.</div>
                <button type="button" class="btn btn-primary" style="margin-top:1rem;" onclick="openCategoryModal()">
                    <i class="fas fa-plus"></i> New Category
                </button>
            </div>
        @else
            <table class="cat-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Products</th>
                        <th>Status</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($categories as $cat)
                        <tr>
                            <td>
                                <div class="cat-name">
                                    <i class="fas {{ $cat->icon ?: 'fa-tag' }}" style="color:var(--accent);"></i>
                                    {{ $cat->name }}
                                </div>
                                <div class="cat-slug">{{ $cat->slug }}</div>
                            </td>
                            <td style="color:var(--text-muted); max-width:340px;">
                                {{ \Illuminate\Support\Str::limit($cat->description, 80) ?: '—' }}
                            </td>
                            <td>{{ $cat->products_count }}</td>
                            <td>
                                @if($cat->is_active)
                                    <span class="badge-soft badge-active">Active</span>
                                @else
                                    <span class="badge-soft badge-inactive">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <div class="row-actions">
                                    <button type="button" class="btn cat-edit-btn"
                                        data-id="{{ $cat->id }}"
                                        data-name="{{ $cat->name }}"
                                        data-description="{{ $cat->description }}"
                                        data-icon="{{ $cat->icon }}"
                                        data-sort_order="{{ $cat->sort_order }}"
                                        data-is_active="{{ $cat->is_active ? '1' : '0' }}">
                                        <i class="fas fa-pen"></i> Edit
                                    </button>
                                    <form method="POST" action="{{ route('inventory.categories.destroy', $cat->id) }}"
                                          style="display:inline;"
                                          data-confirm="Products tagged with &quot;{{ $cat->name }}&quot; will be left untagged but not deleted. This can&rsquo;t be undone."
                                          data-confirm-title="Delete this category?"
                                          data-confirm-type="danger"
                                          data-confirm-button="Delete Category">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    @if($categories->hasPages())
        <div style="margin-top:1rem;">{{ $categories->links() }}</div>
    @endif

    {{-- Create / Edit Modal --}}
    <div class="modal-backdrop" id="categoryModal" onclick="if(event.target===this) closeCategoryModal()">
        <div class="modal-card">
            <h3 id="categoryModalTitle">New Category</h3>
            <form method="POST" id="categoryForm" action="{{ route('inventory.categories.store') }}">
                @csrf
                <input type="hidden" name="_method" id="categoryMethod" value="POST">

                <div class="form-group">
                    <label>Name <span style="color:#ff4757;">*</span></label>
                    <input type="text" name="name" id="catName" required maxlength="120" placeholder="e.g. Electronics">
                </div>

                <div class="form-group">
                    <label>Description</label>
                    <textarea name="description" id="catDescription" maxlength="1000" placeholder="Optional short description"></textarea>
                </div>

                <div class="form-group">
                    <label>Icon (FontAwesome class, optional)</label>
                    <input type="text" name="icon" id="catIcon" maxlength="64" placeholder="fa-tag, fa-mobile-screen, ...">
                </div>

                <div class="form-group">
                    <label>Sort order</label>
                    <input type="text" name="sort_order" id="catSortOrder" placeholder="0">
                </div>

                <div class="form-group">
                    <label class="toggle-row">
                        <input type="checkbox" name="is_active" id="catIsActive" value="1" checked>
                        Active
                    </label>
                </div>

                <div class="modal-actions">
                    <button type="button" class="btn" onclick="closeCategoryModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-check"></i> Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const _catStoreUrl  = @json(route('inventory.categories.index'));

    function openCategoryModal() {
        document.getElementById('categoryModalTitle').textContent = 'New Category';
        document.getElementById('categoryForm').action = _catStoreUrl;
        document.getElementById('categoryMethod').value = 'POST';
        document.getElementById('catName').value = '';
        document.getElementById('catDescription').value = '';
        document.getElementById('catIcon').value = '';
        document.getElementById('catSortOrder').value = '0';
        document.getElementById('catIsActive').checked = true;
        document.getElementById('categoryModal').classList.add('open');
        setTimeout(() => document.getElementById('catName').focus(), 60);
    }

    function editCategory(c) {
        document.getElementById('categoryModalTitle').textContent = 'Edit Category';
        document.getElementById('categoryForm').action = _catStoreUrl + '/' + c.id;
        document.getElementById('categoryMethod').value = 'PUT';
        document.getElementById('catName').value = c.name || '';
        document.getElementById('catDescription').value = c.description || '';
        document.getElementById('catIcon').value = c.icon || '';
        document.getElementById('catSortOrder').value = c.sort_order ?? 0;
        document.getElementById('catIsActive').checked = !!c.is_active;
        document.getElementById('categoryModal').classList.add('open');
        setTimeout(() => document.getElementById('catName').focus(), 60);
    }

    document.querySelectorAll('.cat-edit-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            editCategory({
                id:          btn.dataset.id,
                name:        btn.dataset.name,
                description: btn.dataset.description,
                icon:        btn.dataset.icon,
                sort_order:  btn.dataset.sort_order,
                is_active:   btn.dataset.is_active === '1',
            });
        });
    });

    function closeCategoryModal() {
        document.getElementById('categoryModal').classList.remove('open');
    }

    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') closeCategoryModal();
    });
</script>
@endpush