@extends('admin.layouts.app')

@section('title', 'Car Brands')

@section('content')
<style>
    /* ── Stats ── */
    .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 ── */
    .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: #7c3aed; background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,.08); outline: none; }

    /* ── Table ── */
    .brands-table { border-collapse: separate; border-spacing: 0; width: 100%; }
    .brands-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;
    }
    .brands-table thead th:first-child { border-radius: 10px 0 0 0; }
    .brands-table thead th:last-child  { border-radius: 0 10px 0 0; }
    .brands-table tbody tr {
        transition: background .15s;
        border-bottom: 1px solid #f1f5f9;
    }
    .brands-table tbody tr:last-child { border-bottom: none; }
    .brands-table tbody tr:hover { background: #fafbff; }
    .brands-table tbody td { padding: 13px 16px; vertical-align: middle; font-size: .875rem; color: #374151; }

    /* ── Logo thumb ── */
    .logo-thumb {
        width: 42px; height: 42px; border-radius: 10px;
        object-fit: cover; border: 1.5px solid #e9ecef;
    }
    .logo-placeholder {
        width: 42px; height: 42px; border-radius: 10px;
        background: #f1f5f9; border: 1.5px solid #e9ecef;
        display: inline-flex; align-items: center; justify-content: center;
        color: #cbd5e1; font-size: 1.1rem;
    }

    /* ── Badges ── */
    .badge-luxury  { background: #fef3cd; color: #92400e; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
    .badge-popular { background: #dbeafe; color: #1d4ed8; 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; }

    /* ── Action buttons ── */
    .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; }

    /* pagination handled by custom vendor template */

    /* ── Empty state ── */
    .empty-state { padding: 60px 24px; text-align: center; color: #94a3b8; }
    .empty-state i { font-size: 3rem; display: block; margin-bottom: 14px; }
</style>

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

    {{-- Page 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-car-front me-2" style="color:#7c3aed;"></i>Car Brands
            </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">Car Brands</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('admin.car-brands.create') }}"
            class="btn text-white fw-semibold shadow-sm"
            style="background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none; border-radius:10px; padding:10px 20px;">
            <i class="bi bi-plus-lg me-1"></i> Add New Brand
        </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,#faf5ff,#f3e8ff); border-color:#e9d5ff;">
                <div class="stat-icon" style="background:#e9d5ff;"><i class="bi bi-collection" style="color:#7c3aed;"></i></div>
                <div><div class="stat-val" style="color:#6b21a8;">{{ $stats['total'] }}</div><div class="stat-lbl">Total Brands</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#fffbeb,#fef3cd); border-color:#fde68a;">
                <div class="stat-icon" style="background:#fde68a;"><i class="bi bi-gem" style="color:#d97706;"></i></div>
                <div><div class="stat-val" style="color:#92400e;">{{ $stats['luxury'] }}</div><div class="stat-lbl">Luxury</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:#bfdbfe;">
                <div class="stat-icon" style="background:#bfdbfe;"><i class="bi bi-star" style="color:#2563eb;"></i></div>
                <div><div class="stat-val" style="color:#1e40af;">{{ $stats['popular'] }}</div><div class="stat-lbl">Popular</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>

    {{-- Filter Bar --}}
    <div class="filter-bar mb-4">
        <form method="GET" action="{{ route('admin.car-brands.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 by brand name...">
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <select name="type" class="filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Types</option>
                        <option value="luxury"  {{ request('type') === 'luxury'  ? 'selected' : '' }}>Luxury</option>
                        <option value="popular" {{ request('type') === 'popular' ? 'selected' : '' }}>Popular</option>
                    </select>
                </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-12 col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm fw-semibold px-3"
                        style="background:#7c3aed; color:#fff; border-radius:9px; border:none;">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    @if(request()->hasAny(['search','type','status']))
                        <a href="{{ route('admin.car-brands.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 Card --}}
    <div class="card border-0 shadow-sm" style="border-radius:14px; overflow:hidden;">

        {{-- Table Header --}}
        <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;">
                All Brands
                <span class="ms-2 px-2 py-1 rounded-pill" style="background:#f3e8ff; color:#7c3aed; font-size:.75rem;">
                    {{ $brands->total() }} result{{ $brands->total() !== 1 ? 's' : '' }}
                </span>
            </span>
            <span style="font-size:.78rem; color:#94a3b8;">
                Showing {{ $brands->firstItem() ?? 0 }}–{{ $brands->lastItem() ?? 0 }} of {{ $brands->total() }}
            </span>
        </div>

        <div class="table-responsive">
            <table class="brands-table">
                <thead>
                    <tr>
                        <th style="width:56px;">Logo</th>
                        <th>Brand Name</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Sort</th>
                        <th>Description</th>
                        <th style="width:90px; text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($brands as $brand)
                    <tr>
                        <td>
                            @if($brand->logo)
                                <img src="{{ asset('storage/'.$brand->logo) }}" alt="{{ $brand->name }}" class="logo-thumb">
                            @else
                                <span class="logo-placeholder"><i class="bi bi-car-front"></i></span>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold" style="color:#1e293b;">{{ $brand->name }}</div>
                            <code style="font-size:.72rem; color:#94a3b8;">{{ $brand->slug }}</code>
                        </td>
                        <td>
                            @if($brand->type === 'luxury')
                                <span class="badge-luxury"><i class="bi bi-gem me-1" style="font-size:.65rem;"></i>Luxury</span>
                            @else
                                <span class="badge-popular"><i class="bi bi-star-fill me-1" style="font-size:.65rem;"></i>Popular</span>
                            @endif
                        </td>
                        <td>
                            @if($brand->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;">{{ $brand->sort_order }}</span>
                        </td>
                        <td>
                            @if($brand->description)
                                <span style="font-size:.82rem; color:#64748b;">{{ Str::limit($brand->description, 50) }}</span>
                            @else
                                <span style="font-size:.8rem; color:#cbd5e1; font-style:italic;">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('admin.car-brands.edit', $brand) }}" class="btn-act btn-act-edit" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('admin.car-brands.destroy', $brand) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-act btn-act-delete" title="Delete"
                                        onclick="return confirm('Delete \'{{ addslashes($brand->name) }}\'?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="bi bi-car-front"></i>
                                <div class="fw-semibold mb-1" style="color:#374151; font-size:1rem;">No brands found</div>
                                @if(request()->hasAny(['search','type','status']))
                                    <p class="mb-3" style="font-size:.875rem;">Try adjusting your filters.</p>
                                    <a href="{{ route('admin.car-brands.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;">Get started by adding your first car brand.</p>
                                    <a href="{{ route('admin.car-brands.create') }}" class="btn btn-sm text-white" style="border-radius:9px; background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none;">
                                        <i class="bi bi-plus-lg me-1"></i> Add First Brand
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($brands->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 {{ $brands->currentPage() }} of {{ $brands->lastPage() }}
                &nbsp;·&nbsp; {{ $brands->total() }} total
            </span>
            {{ $brands->links('vendor.pagination.bootstrap-5') }}
        </div>
        @endif

    </div>
</div>
@endsection