@extends('layouts.admin')

@section('title', 'Brands')

@section('content')
<div class="admin-page-header">
    <h1>Brands</h1>
    @can('brands.create')
    <a href="{{ route('admin.brands.create') }}" class="admin-btn-primary">
        <i class="bi bi-plus"></i> Add Brand
    </a>
    @endcan
</div>

<!-- Filters -->
<div class="admin-card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.brands.index') }}" class="row g-3 align-items-end justify-content-end">
            <div class="col-md-5">
                <label class="admin-form-label">Search</label>
                <input type="text"
                       name="search"
                       class="admin-form-control form-control"
                       placeholder="Search by brand name"
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <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-md-2 col-10">
                <button type="submit" class="admin-btn-primary w-100">
                    <i class="bi bi-search"></i> Filter
                </button>
            </div>
            @if(request()->hasAny(['search','status']))
            <div class="col-md-1 col-2">
                <a href="{{ route('admin.brands.index') }}" title="clear filter"class="btn btn-outline-secondary" >
                                <i class="bi bi-arrow-clockwise"></i>
                   
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th style="font-weight: 700; text-align: left;">Logo</th>
                        <th style="font-weight: 700; text-align: left;">Brand Name</th>
                        <th style="font-weight: 700; text-align: left;">Slug</th>
                        <th style="font-weight: 700; text-align: center;">Product Count</th>
                        <th style="font-weight: 700; text-align: center;">Status</th>
                        <th style="font-weight: 700; text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($brands as $brand)
                        <tr class="table-row-hover">
                            <td>
                                @if($brand->logo_path)
                                    <img src="{{ asset('storage/' . $brand->logo_path) }}" 
                                         alt="{{ $brand->name }}" 
                                         class="brand-thumbnail"
                                         onerror="this.onerror=null; this.style.display='none';">
                                @else
                                    <div class="brand-thumbnail d-flex align-items-center justify-content-center bg-light" style="background: #f3f4f6 !important;">
                                        <i class="bi bi-image text-muted" style="font-size: 1.2rem;"></i>
                                    </div>
                                @endif
                            </td>
                            <td>
                                <span style="font-weight: 500;">{{ $brand->name }}</span>
                            </td>
                            <td>
                                <code class="text-muted">{{ $brand->slug }}</code>
                            </td>
                            <td style="text-align: center;">
                                <span class="product-count-badge">{{ $brand->products_count ?? 0 }}</span>
                            </td>
                            <td style="text-align: center;">
                                <span class="admin-badge {{ $brand->is_active ? 'admin-badge-success' : 'admin-badge-danger' }}">
                                    {{ $brand->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td style="text-align: center;">
                                <div class="d-flex gap-2 justify-content-center">
                                    @can('brands.update')
                                    <a href="{{ route('admin.brands.edit', $brand->id) }}" 
                                       class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                       title="Edit Brand">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    @endcan
                                    @can('brands.delete')
                                    <form action="{{ route('admin.brands.destroy', $brand->id) }}" 
                                          method="POST" 
                                          class="d-inline" 
                                          onsubmit="return confirm('Are you sure you want to delete this brand?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                class="admin-action-btn admin-action-btn-sm" 
                                                style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                title="Delete Brand">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-tag"></i>
                                    <h3>No Brands Found</h3>
                                    @can('brands.create')
                                    <p>Get started by creating your first brand.</p>
                                    <a href="{{ route('admin.brands.create') }}" class="admin-btn-primary">
                                        <i class="bi bi-plus"></i> Add Brand
                                    </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $brands->firstItem() ?? 0 }}</strong>–<strong>{{ $brands->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $brands->total() }}</strong> brands
                </div>
                @if($brands->hasPages())
                    <div class="pagination-controls">
                        {{ $brands->links('vendor.pagination.admin-categories') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.brand-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: white;
    padding: 4px;
}

.product-count-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: var(--admin-primary);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 45px;
    text-align: center;
}

.admin-table tbody tr.table-row-hover {
    transition: all 0.2s ease;
}

.admin-table tbody tr.table-row-hover:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pagination-wrapper {
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
}

.pagination-info-text {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 500;
}

@media (max-width: 768px) {
    .admin-action-btn-sm span {
        display: none;
    }
    
    .admin-action-btn-sm {
        width: 36px;
        height: 36px;
        /* padding: 0; */
    }
}
</style>
@endpush
@endsection