@extends('layouts.app')
@section('title', $branch->name)
@section('page-title', $branch->name)

@section('content')
<div class="page-header d-flex align-items-start justify-content-between">
    <div>
        <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('branches.index') }}">Branches</a></li><li class="breadcrumb-item active">{{ $branch->name }}</li></ol></nav>
        <h1>
            {{ $branch->name }}
            @if($branch->is_headquarters)
            <span style="font-size:13px;background:rgba(255,107,53,0.12);color:#FF6B35;padding:3px 12px;border-radius:20px;font-weight:700;vertical-align:middle;">HQ</span>
            @endif
        </h1>
        <p>{{ $branch->code }} @if($branch->city)· {{ $branch->city }}@endif @if($branch->manager_name)· {{ $branch->manager_name }}@endif</p>
    </div>
    <a href="{{ route('branches.edit', $branch) }}" class="btn btn-outline-secondary"><i class="bi bi-pencil me-1"></i> Edit</a>
</div>

{{-- KPI Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-1 h-100">
            <div class="stat-icon"><i class="bi bi-currency-dollar"></i></div>
            <div class="stat-value">${{ number_format($todaySales, 2) }}</div>
            <div class="stat-label">Today's Sales</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-2 h-100">
            <div class="stat-icon"><i class="bi bi-calendar-month"></i></div>
            <div class="stat-value">${{ number_format($monthlySales, 2) }}</div>
            <div class="stat-label">This Month</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-3 h-100">
            <div class="stat-icon"><i class="bi bi-receipt"></i></div>
            <div class="stat-value">{{ number_format($totalSales) }}</div>
            <div class="stat-label">Total Sales</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-4 h-100">
            <div class="stat-icon"><i class="bi bi-exclamation-triangle"></i></div>
            <div class="stat-value">{{ $lowStock }}</div>
            <div class="stat-label">Low Stock Items</div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Left column --}}
    <div class="col-12 col-xl-8">

        {{-- Monthly trend chart --}}
        <div class="card mb-4">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Revenue Trend (Last 6 Months)</h6>
                <canvas id="trendChart" height="90"></canvas>
            </div>
        </div>

        {{-- Recent Sales --}}
        <div class="card">
            <div class="card-body p-0">
                <div class="p-4 pb-2 d-flex align-items-center justify-content-between">
                    <h6 class="fw-700 mb-0" style="font-family:'Space Grotesk',sans-serif;">Recent Sales</h6>
                    <a href="{{ route('sales.index') }}" style="font-size:13px;color:var(--brand)">View All →</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">Invoice</th>
                                <th>Customer</th>
                                <th class="text-end">Amount (USD)</th>
                                <th class="text-end pe-4">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentSales as $sale)
                            <tr>
                                <td class="ps-4"><a href="{{ route('sales.show', $sale) }}" style="font-weight:700;color:var(--accent);text-decoration:none;font-size:13px;">{{ $sale->invoice_number }}</a></td>
                                <td style="font-size:13px;">{{ $sale->customer?->name ?? 'Walk-in' }}</td>
                                <td class="text-end fw-700">${{ number_format($sale->total_usd, 2) }}</td>
                                <td class="text-end pe-4" style="font-size:12px;color:var(--text-muted-c)">{{ $sale->sale_date->format('M j, H:i') }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center py-4 text-muted">No sales recorded yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Right column --}}
    <div class="col-12 col-xl-4">

        {{-- Top 3 Trending Products --}}
        <div class="card mb-4">
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-2 mb-4">
                    <div style="width:36px;height:36px;border-radius:10px;background:rgba(255,107,53,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="bi bi-fire" style="color:#FF6B35;font-size:18px;"></i>
                    </div>
                    <div>
                        <div class="fw-700" style="font-family:'Space Grotesk',sans-serif;">Top Trending</div>
                        <div style="font-size:12px;color:var(--text-muted-c)">This month at this branch</div>
                    </div>
                </div>

                @forelse($topProducts as $i => $product)
                <div class="d-flex align-items-center gap-3 mb-3 p-3 rounded-3" style="background:var(--page-bg)">
                    <div style="width:32px;height:32px;border-radius:50%;background:{{ ['rgba(255,107,53,0.15)','rgba(46,196,182,0.15)','rgba(67,97,238,0.15)'][$i] }};display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:{{ ['#FF6B35','#2EC4B6','#4361EE'][$i] }};flex-shrink:0;">
                        {{ $i + 1 }}
                    </div>
                    <div class="flex-fill min-width-0">
                        <div class="fw-600" style="font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $product->name }}</div>
                        <div style="font-size:11px;color:var(--text-muted-c)">{{ number_format($product->total_qty) }} units sold</div>
                    </div>
                    <div class="text-end flex-shrink-0">
                        <div class="fw-700" style="font-size:14px;color:var(--accent)">${{ number_format($product->total_revenue, 2) }}</div>
                    </div>
                </div>
                @empty
                <div class="text-center py-4 text-muted">
                    <i class="bi bi-bar-chart" style="font-size:32px;"></i>
                    <p class="mt-2 mb-0" style="font-size:13px;">No sales this month yet.</p>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Branch info card --}}
        <div class="card">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Branch Info</h6>
                @if($branch->address)
                <div class="d-flex gap-2 mb-2" style="font-size:13px;"><i class="bi bi-geo-alt" style="color:var(--brand)"></i><span>{{ $branch->address }}</span></div>
                @endif
                @if($branch->phone)
                <div class="d-flex gap-2 mb-2" style="font-size:13px;"><i class="bi bi-telephone" style="color:var(--accent)"></i><span>{{ $branch->phone }}</span></div>
                @endif
                @if($branch->email)
                <div class="d-flex gap-2 mb-2" style="font-size:13px;"><i class="bi bi-envelope" style="color:#4361EE"></i><span>{{ $branch->email }}</span></div>
                @endif
                @if($branch->manager_name)
                <div class="d-flex gap-2 mb-2" style="font-size:13px;"><i class="bi bi-person-badge" style="color:#7209B7"></i><span>{{ $branch->manager_name }}</span></div>
                @endif
                <div class="d-flex gap-2" style="font-size:13px;"><i class="bi bi-hash" style="color:var(--text-muted-c)"></i><span>Branch code: <strong>{{ $branch->code }}</strong></span></div>

                <div class="mt-4 pt-3" style="border-top:1px solid var(--border-c)">
                    <div class="d-flex justify-content-between mb-2" style="font-size:13px;">
                        <span class="text-muted">Staff</span>
                        <strong>{{ $branch->users->count() }} users</strong>
                    </div>
                    <div class="d-flex justify-content-between" style="font-size:13px;">
                        <span class="text-muted">Products</span>
                        <strong>{{ $branch->products->count() }} SKUs</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const trendData = @json($trend);
const labels = Object.keys(trendData);
const values = Object.values(trendData);
new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels,
        datasets: [{
            label: 'Revenue (USD)',
            data: values,
            borderColor: '#FF6B35',
            backgroundColor: 'rgba(255,107,53,0.08)',
            borderWidth: 2.5,
            pointRadius: 4,
            pointBackgroundColor: '#FF6B35',
            fill: true,
            tension: 0.35,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false } },
            y: { ticks: { callback: v => '$' + v.toLocaleString() } }
        }
    }
});
</script>
@endpush