@extends('admin.layouts.app')
@section('title', 'Brands We Offer')
@section('content')
<div class="action-bar">
    <h2 style="color:#fff;font-size:1.3rem;font-weight:700">Brands We Offer</h2>
    <div class="inline-flex" style="gap:8px">
        <span style="color:#9a9ab0;font-size:0.9rem">{{ $brands->total() }} brands</span>
        <a href="{{ route('admin.brands.create') }}" class="btn btn-primary">+ Add Brand</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if($brands->isEmpty())
<div class="card" style="text-align:center;padding:40px">
    <p style="color:#9a9ab0">No brands yet. <a href="{{ route('admin.brands.create') }}" style="color:#f0c040">Add your first brand</a></p>
</div>
@else
<div class="brands-admin-grid">
    @foreach($brands as $brand)
    <div class="brand-admin-card">
        <div class="brand-admin-logo-wrap">
            @if($brand->logo)
            <img src="{{ asset('storage/'.$brand->logo) }}" alt="{{ $brand->name }}" class="brand-admin-logo">
            @else
            <span class="brand-admin-placeholder">{{ strtoupper(substr($brand->name, 0, 2)) }}</span>
            @endif
            <div class="brand-admin-status {{ $brand->is_active ? 'active' : 'inactive' }}">
                {{ $brand->is_active ? 'Active' : 'Inactive' }}
            </div>
        </div>
        <div class="brand-admin-info">
            <h3>{{ $brand->name }}</h3>
            @if($brand->website)
            <a href="{{ $brand->website }}" target="_blank" class="brand-admin-website">{{ $brand->website }}</a>
            @endif
            <div class="brand-admin-meta">
                <span>Order: {{ $brand->order }}</span>
                @if($brand->description)
                <span class="text-muted">{{ Str::limit($brand->description, 60) }}</span>
                @endif
            </div>
        </div>
        <div class="brand-admin-actions">
            <a href="{{ route('admin.brands.edit', $brand) }}" class="btn btn-sm btn-primary">Edit</a>
            <form action="{{ route('admin.brands.destroy', $brand) }}" method="POST"
                  onsubmit="return confirm('Delete {{ $brand->name }}?')" style="display:inline">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
            </form>
        </div>
    </div>
    @endforeach
</div>
<div class="pagination">{{ $brands->links() }}</div>
@endif

<style>
.brands-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.brand-admin-card { background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.brand-admin-logo-wrap { position: relative; background: #0f0f1a; padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 100px; border-bottom: 1px solid #2a2a3e; }
.brand-admin-logo { max-width: 120px; max-height: 50px; object-fit: contain; }
.brand-admin-placeholder { font-size: 1.8rem; font-weight: 800; color: #2a2a3e; }
.brand-admin-status { position: absolute; top: 8px; right: 8px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
.brand-admin-status.active { background: #1a3a2e; color: #6fcf97; }
.brand-admin-status.inactive { background: #3a1a1a; color: #e74c3c; }
.brand-admin-info { padding: 14px 16px; flex: 1; }
.brand-admin-info h3 { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.brand-admin-website { color: #5a7af0; font-size: 0.8rem; text-decoration: none; display: block; margin-bottom: 6px; }
.brand-admin-website:hover { text-decoration: underline; }
.brand-admin-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: #5a5a7a; }
.brand-admin-actions { padding: 10px 16px; border-top: 1px solid #2a2a3e; display: flex; gap: 6px; }
</style>
@endsection
