@extends('admin.layouts.app')

@section('title', 'Spare Part Categories')

@section('content')
<style>
    .stat-box { border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px; border:1.5px solid transparent; }
    .stat-box .stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
    .stat-box .stat-val  { font-size:1.5rem; font-weight:700; line-height:1; }
    .stat-box .stat-lbl  { font-size:.78rem; color:#64748b; margin-top:2px; }
    .filter-bar { background:#fff; border-radius:12px; border:1.5px solid #e9ecef; padding:14px 18px; }
    .filter-input { border:1.5px solid #e5e7eb; border-radius:9px; padding:8px 14px; font-size:.875rem; background:#f9fafb; transition:border-color .2s, background .2s; }
    .filter-input:focus { border-color:#f97316; background:#fff; box-shadow:0 0 0 3px rgba(249,115,22,.08); outline:none; }
    .cat-table { border-collapse:separate; border-spacing:0; width:100%; }
    .cat-table thead th { background:#f8fafc; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748b; padding:12px 16px; border-bottom:2px solid #e9ecef; white-space:nowrap; }
    .cat-table tbody tr { transition:background .15s; border-bottom:1px solid #f1f5f9; }
    .cat-table tbody tr:last-child { border-bottom:none; }
    .cat-table tbody tr:hover { background:#fafbff; }
    .cat-table tbody td { padding:13px 16px; vertical-align:middle; font-size:.875rem; color:#374151; }
    .icon-cell { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:#fff7ed; border:1.5px solid #fed7aa; flex-shrink:0; }
    .parts-pill { display:inline-flex; align-items:center; gap:4px; background:#fff7ed; color:#c2410c; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .badge-active   { background:#dcfce7; color:#15803d; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .badge-inactive { background:#f1f5f9; color:#64748b; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .badge-deleted  { background:#fef2f2; color:#dc2626; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .btn-act { width:32px; height:32px; border-radius:8px; border:none; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; transition:all .18s; cursor:pointer; text-decoration:none; }
    .btn-act-edit   { background:#eff6ff; color:#2563eb; }
    .btn-act-edit:hover   { background:#2563eb; color:#fff; }
    .btn-act-delete { background:#fef2f2; color:#dc2626; }
    .btn-act-delete:hover { background:#dc2626; color:#fff; }
    .empty-state { padding:60px 24px; text-align:center; color:#94a3b8; }
    .empty-state i { font-size:3rem; display:block; margin-bottom:14px; }
    .row-deleted td { opacity:.65; }
</style>

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

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h4 class="fw-bold mb-1" style="color:#1e293b;">
                <i class="bi bi-box-seam me-2" style="color:#f97316;"></i>Spare Part Categories
            </h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0" style="font-size:.82rem;">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                    <li class="breadcrumb-item active text-muted">Spare Part Categories</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('admin.spare-part-categories.create') }}"
            class="btn text-white fw-semibold shadow-sm"
            style="background:linear-gradient(135deg,#f97316,#ea580c); border:none; border-radius:10px; padding:10px 20px;">
            <i class="bi bi-plus-lg me-1"></i> Add Category
        </a>
    </div>

    {{-- Flash --}}
    @if(session('success'))
        <div class="d-flex align-items-center gap-2 mb-4 px-4 py-3"
            style="background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:12px; color:#15803d;">
            <i class="bi bi-check-circle-fill fs-5"></i>
            <span class="fw-medium">{{ session('success') }}</span>
            <button type="button" class="btn-close btn-close-sm ms-auto" data-bs-dismiss="alert" style="font-size:.7rem;"></button>
        </div>
    @endif

    {{-- Stats --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:#fed7aa;">
                <div class="stat-icon" style="background:#fed7aa;"><i class="bi bi-box-seam" style="color:#f97316;"></i></div>
                <div><div class="stat-val" style="color:#c2410c;">{{ $stats['total'] }}</div><div class="stat-lbl">Total Categories</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#bbf7d0;">
                <div class="stat-icon" style="background:#bbf7d0;"><i class="bi bi-check-circle" style="color:#16a34a;"></i></div>
                <div><div class="stat-val" style="color:#15803d;">{{ $stats['active'] }}</div><div class="stat-lbl">Active</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-color:#e2e8f0;">
                <div class="stat-icon" style="background:#e2e8f0;"><i class="bi bi-dash-circle" style="color:#64748b;"></i></div>
                <div><div class="stat-val" style="color:#374151;">{{ $stats['inactive'] }}</div><div class="stat-lbl">Inactive</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#fef2f2,#fee2e2); border-color:#fecaca;">
                <div class="stat-icon" style="background:#fecaca;"><i class="bi bi-trash" style="color:#dc2626;"></i></div>
                <div><div class="stat-val" style="color:#b91c1c;">{{ $stats['deleted'] }}</div><div class="stat-lbl">Deleted</div></div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="filter-bar mb-4">
        <form method="GET" action="{{ route('admin.spare-part-categories.index') }}" id="filterForm">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-md-5">
                    <div class="input-group" style="border-radius:9px; overflow:hidden;">
                        <span class="input-group-text" style="background:#f9fafb; border:1.5px solid #e5e7eb; border-right:none; color:#9ca3af;">
                            <i class="bi bi-search" style="font-size:.85rem;"></i>
                        </span>
                        <input type="text" name="search" value="{{ request('search') }}"
                            class="filter-input" style="border-left:none; border-radius:0 9px 9px 0; flex:1;"
                            placeholder="Search categories...">
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <select name="status" class="filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Status</option>
                        <option value="active"   {{ request('status') === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <select name="trashed" class="filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">Active Records</option>
                        <option value="1" {{ request('trashed') ? 'selected' : '' }}>Deleted Only</option>
                    </select>
                </div>
                <div class="col-12 col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm fw-semibold px-3"
                        style="background:#f97316; color:#fff; border-radius:9px; border:none;">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    @if(request()->hasAny(['search','status','trashed']))
                        <a href="{{ route('admin.spare-part-categories.index') }}"
                            class="btn btn-sm fw-semibold px-3"
                            style="background:#f1f5f9; color:#64748b; border-radius:9px; border:1.5px solid #e9ecef;">
                            <i class="bi bi-x me-1"></i>Clear
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="card border-0 shadow-sm" style="border-radius:14px; overflow:hidden;">
        <div class="d-flex justify-content-between align-items-center px-4 py-3"
            style="border-bottom:1.5px solid #f1f5f9; background:#fff;">
            <span style="font-size:.875rem; color:#374151; font-weight:600;">
                {{ request('trashed') ? 'Deleted Categories' : 'All Categories' }}
                <span class="ms-2 px-2 py-1 rounded-pill" style="background:#fff7ed; color:#f97316; font-size:.75rem;">
                    {{ $categories->total() }} result{{ $categories->total() !== 1 ? 's' : '' }}
                </span>
            </span>
            <span style="font-size:.78rem; color:#94a3b8;">
                Showing {{ $categories->firstItem() ?? 0 }}–{{ $categories->lastItem() ?? 0 }} of {{ $categories->total() }}
            </span>
        </div>

        <div class="table-responsive">
            <table class="cat-table">
                <thead>
                    <tr>
                        <th style="width:60px;">Icon</th>
                        <th>Category Name</th>
                        <th>Spare Parts</th>
                        <th>Status</th>
                        <th>Sort</th>
                        <th style="width:90px; text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($categories as $category)
                    <tr class="{{ $category->trashed() ? 'adm-row-deleted' : '' }}">
                        <td>
                            <div class="icon-cell">
                                {{ $category->icon ?: '📦' }}
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div>
                                    <div class="fw-semibold" style="color:#1e293b;">{{ $category->name }}</div>
                                    @if($category->description)
                                        <div style="font-size:.78rem; color:#94a3b8; margin-top:2px;">{{ Str::limit($category->description, 55) }}</div>
                                    @endif
                                    <div style="font-size:.72rem; color:#cbd5e1; margin-top:2px; font-family:monospace;">{{ $category->slug }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="parts-pill">
                                <i class="bi bi-box2"></i>
                                {{ $category->spare_parts_count ?? 0 }} parts
                            </span>
                        </td>
                        <td>
                            @if($category->trashed())
                                <span class="badge-deleted"><i class="bi bi-trash me-1" style="font-size:.6rem;"></i>Deleted</span>
                            @elseif($category->is_active)
                                <span class="badge-active"><i class="bi bi-circle-fill me-1" style="font-size:.5rem; vertical-align:middle;"></i>Active</span>
                            @else
                                <span class="badge-inactive"><i class="bi bi-circle me-1" style="font-size:.5rem; vertical-align:middle;"></i>Inactive</span>
                            @endif
                        </td>
                        <td>
                            <span style="font-size:.82rem; color:#64748b; font-weight:600;">{{ $category->sort_order }}</span>
                        </td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                @if(!$category->trashed())
                                    <a href="{{ route('admin.spare-part-categories.edit', $category) }}" class="btn-act btn-act-edit" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="{{ route('admin.spare-part-categories.destroy', $category) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-act btn-act-delete" title="Delete"
                                            onclick="return confirm('Delete \'{{ addslashes($category->name) }}\'?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @else
                                    <span style="font-size:.75rem; color:#94a3b8; font-style:italic;">Deleted</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                <i class="bi bi-box-seam"></i>
                                <div class="fw-semibold mb-1" style="color:#374151; font-size:1rem;">No categories found</div>
                                @if(request()->hasAny(['search','status','trashed']))
                                    <p class="mb-3" style="font-size:.875rem;">Try adjusting your filters.</p>
                                    <a href="{{ route('admin.spare-part-categories.index') }}" class="btn btn-sm" style="border-radius:9px; border:1.5px solid #e9ecef; color:#374151; background:#fff;">Clear Filters</a>
                                @else
                                    <p class="mb-3" style="font-size:.875rem;">Start by adding your first spare part category.</p>
                                    <a href="{{ route('admin.spare-part-categories.create') }}" class="btn btn-sm text-white" style="border-radius:9px; background:linear-gradient(135deg,#f97316,#ea580c); border:none;">
                                        <i class="bi bi-plus-lg me-1"></i> Add First Category
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($categories->hasPages())
        <div class="d-flex justify-content-between align-items-center px-4 py-3"
            style="border-top:1.5px solid #f1f5f9; background:#fafbfc;">
            <span style="font-size:.8rem; color:#64748b;">
                Page {{ $categories->currentPage() }} of {{ $categories->lastPage() }} &nbsp;·&nbsp; {{ $categories->total() }} total
            </span>
            {{ $categories->links('vendor.pagination.bootstrap-5') }}
        </div>
        @endif
    </div>

</div>
@endsection