@extends('layouts.app')

@section('title', 'Manage Brands - Admin')

@section('content')
<div class="row g-4">
    <!-- Left Sidebar: Menu -->
    <div class="col-lg-2">
        <div class="d-grid mb-4">
            <a href="{{ route('admin.dashboard') }}" class="btn btn-dark shadow-sm fw-bold btn-sm">
                <i class="bi bi-speedometer2 me-2"></i> Back to Dashboard
            </a>
        </div>

        <h5 class="fw-bold mb-3 text-secondary ps-2 small text-uppercase font-letter-spacing">Brand Desk</h5>
        <div class="list-group list-group-flush border rounded shadow-sm mb-4">
            <a href="{{ route('admin.brands.index') }}" class="list-group-item list-group-item-action active fw-bold border-start border-4 border-primary">
                <i class="bi bi-tag me-2"></i> All Brands
            </a>
            <a href="{{ route('admin.categories.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-grid me-2"></i> Categories
            </a>
            <a href="{{ route('admin.products.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-box-seam me-2"></i> Products
            </a>
        </div>

        <div class="d-grid shadow-sm">
            <a href="{{ route('admin.brands.create') }}" class="btn btn-primary btn-sm fw-bold">
                <i class="bi bi-plus-lg me-1"></i> Add Brand
            </a>
        </div>
    </div>

    <!-- Center: Main Content -->
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold mb-0 text-dark">Brand Management</h2>
            <div class="input-group input-group-sm shadow-sm" style="width: 200px;">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search small"></i></span>
                <input type="text" class="form-control border-start-0" placeholder="Search brands...">
            </div>
        </div>

        <div class="card shadow-sm border-0 overflow-hidden">
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="bg-light text-muted small text-uppercase">
                        <tr>
                            <th class="ps-4 py-3">Brand Name / Logo</th>
                            <th>Slug</th>
                            <th>Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($brands as $brand)
                        <tr class="hover-lift-row">
                            <td class="ps-4 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 bg-light rounded d-flex align-items-center justify-content-center p-2 me-3" style="width: 45px; height: 45px; border: 1px solid #eee;">
                                        @if($brand->logo)
                                            <img src="{{ $brand->getLogoUrl() }}" class="w-100 h-100 object-fit-contain" alt="">
                                        @else
                                            <i class="bi bi-tag-fill text-muted opacity-50 fs-5"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark">{{ $brand->name }}</div>
                                        <small class="text-muted">ID: #{{ $brand->id }}</small>
                                    </div>
                                </div>
                            </td>
                            <td class="small font-monospace text-muted">{{ $brand->slug }}</td>
                            <td>
                                @if($brand->status)
                                    <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 border border-success border-opacity-10">Live</span>
                                @else
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 border border-secondary border-opacity-10">Inactive</span>
                                @endif
                            </td>
                            <td class="text-end pe-4">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-white border px-2 py-1" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end border-0 shadow">
                                        <li><a class="dropdown-item py-2" href="{{ route('admin.brands.edit', $brand->id) }}"><i class="bi bi-pencil me-2 text-primary opacity-75"></i> Edit Brand</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ route('admin.brands.destroy', $brand->id) }}" method="POST" onsubmit="return confirm('Delete this brand permanently?')">
                                                @csrf @method('DELETE')
                                                <button class="dropdown-item py-2 text-danger"><i class="bi bi-trash-fill me-2"></i> Remove</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <div class="display-1 text-muted opacity-10 mb-4"><i class="bi bi-tags"></i></div>
                                <h4 class="fw-bold">No Brands Found</h4>
                                <p class="text-muted">Start by adding your first product brand.</p>
                                <a href="{{ route('admin.brands.create') }}" class="btn btn-primary px-4 shadow-sm">Add New Brand</a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($brands->hasPages())
                <div class="card-footer bg-white py-3 border-0">
                    {{ $brands->links() }}
                </div>
            @endif
        </div>
    </div>

    <!-- Right Sidebar: Stats & Reports -->
    <div class="col-lg-3">
        <h5 class="fw-bold mb-3 ps-1 text-secondary">Brand Intelligence</h5>
        
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0 small text-uppercase"><i class="bi bi-graph-up-arrow me-2 text-primary"></i>Market Growth</h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">Total Brands</small>
                    <small class="fw-bold">{{ $brands->total() }}</small>
                </div>
                <div class="progress mb-3" style="height: 6px;">
                    <div class="progress-bar bg-primary" style="width: 100%"></div>
                </div>
                <div class="bg-light rounded p-3 mb-2 small d-flex justify-content-between">
                    <span>Active Partners</span>
                    <span class="fw-bold text-success">{{ \App\Models\Brand::where('status', 1)->count() }}</span>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0 small text-uppercase"><i class="bi bi-lightning-charge me-2 text-primary"></i>Recent Report</h6>
            </div>
            <div class="list-group list-group-flush px-3 pb-3">
                <div class="list-group-item bg-light rounded border-0 mb-2 py-2 small d-flex justify-content-between align-items-center">
                    <span>New Brands (7d)</span>
                    <span class="badge bg-white text-dark border">+2</span>
                </div>
                <div class="list-group-item bg-light rounded border-0 mb-2 py-2 small d-flex justify-content-between align-items-center">
                    <span>Top Performing</span>
                    <span class="text-primary fw-bold">Apple</span>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-indigo text-white p-4" style="background-color: #4f46e5;">
             <h6 class="fw-bold mb-2 small"><i class="bi bi-stars me-2"></i>SEO Tip</h6>
             <p class="small opacity-75 mb-0">Adding a high-quality logo and SEO-friendly slug to each brand improves product discoverability in search engines.</p>
        </div>
    </div>
</div>

<style>
    .hover-lift-row { transition: all 0.2s ease; }
    .hover-lift-row:hover { background-color: rgba(79, 70, 229, 0.03)!important; transform: translateX(5px); }
</style>
@endsection