@extends('layouts.app')
@section('title', 'Brands')
@section('breadcrumb')
<li class="breadcrumb-item active">Brands</li>
@endsection
@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-award me-2" style="color:#1d4ed8;"></i>Brands</h1>
        <p class="page-subtitle">Manage product brands</p>
    </div>
    @can_permission('brands.create')
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createBrandModal">
        <i class="bi bi-plus-lg me-1"></i> Add Brand
    </button>
    @endcan_permission
</div>

{{-- Search --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="d-flex gap-2">
            <input type="text" name="search" class="form-control" style="max-width:320px;" placeholder="Search brands..." value="{{ $search }}">
            <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
            @if($search)<a href="{{ route('brands.index') }}" class="btn btn-outline-danger"><i class="bi bi-x"></i></a>@endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">All Brands ({{ $brands->total() }})</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th width="70">Logo</th>
                        <th>Brand Name</th>
                        <th>Products</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th width="120">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($brands as $brand)
                    <tr>
                        <td>
                            @if($brand->logo)
                            <img src="{{ Storage::url($brand->logo) }}" alt="{{ $brand->name }}" style="width:44px;height:44px;object-fit:contain;border-radius:8px;border:1px solid #e2e8f0;padding:4px;background:#fff;">
                            @else
                            <div style="width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;"><i class="bi bi-award"></i></div>
                            @endif
                        </td>
                        <td><div class="fw-600">{{ $brand->name }}</div></td>
                        <td><span class="badge bg-secondary">{{ $brand->products_count }}</span></td>
                        <td><span class="text-muted" style="font-size:0.85rem;">{{ Str::limit($brand->description, 60) }}</span></td>
                        <td><span class="badge {{ $brand->is_active ? 'bg-success' : 'bg-danger' }}">{{ $brand->is_active ? 'Active' : 'Inactive' }}</span></td>
                        <td>
                            <div class="d-flex gap-1">
                                @can_permission('brands.edit')
                                <a href="{{ route('brands.edit', $brand) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>
                                @endcan_permission
                                @can_permission('brands.delete')
                                <form method="POST" action="{{ route('brands.destroy', $brand) }}" onsubmit="return confirm('Delete brand \'{{ $brand->name }}\'?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                                @endcan_permission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-5 text-muted"><i class="bi bi-award" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>No brands found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($brands->hasPages())<div class="card-footer">{{ $brands->links() }}</div>@endif
</div>

{{-- Create Brand Modal --}}
<div class="modal fade" id="createBrandModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <form method="POST" action="{{ route('brands.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-700"><i class="bi bi-award me-2"></i>Add Brand</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Brand Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. HP, Dell, Lenovo">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Logo</label>
                        <input type="file" name="logo" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="Optional brand description"></textarea>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-1"></i>Save Brand</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection