@extends('layouts.app')

@section('title', 'Branch Stock Report')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); }
</style>
@endpush

@section('content')
@can('view_branch_stock')

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-indigo-400 to-indigo-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Branch Stock Report</h1>
                <p class="text-secondary mt-1">Stock levels across all branches</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.branch-stock.pdf', request()->query()) }}" class="btn-primary px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

@if(auth()->user()->canAccessAllData())
<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="flex items-end gap-4">
        @include('reports.partials.branch-filter')
        <button type="submit" class="btn-primary px-5 py-2 rounded-xl text-sm font-bold">
            <i class="fas fa-filter mr-1.5"></i> Filter
        </button>
    </form>
</div>
@endif

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in" style="box-shadow: 0 0 24px rgba(99,102,241,0.12);">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
                <i class="fas fa-store text-indigo-400"></i>
            </div>
            <p class="text-xs text-slate-500 font-medium">Total Branches</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ $branchesWithStock->count() }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in" style="box-shadow: 0 0 24px rgba(59,130,246,0.12);">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
                <i class="fas fa-pills text-blue-400"></i>
            </div>
            <p class="text-xs text-slate-500 font-medium">Total Items</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ $totalProducts }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in" style="box-shadow: 0 0 24px rgba(34,197,94,0.12);">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center">
                <i class="fas fa-cubes text-green-400"></i>
            </div>
            <p class="text-xs text-slate-500 font-medium">Total Quantity</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ number_format($totalQuantity) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in" style="box-shadow: 0 0 24px rgba(239,68,68,0.12);">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center">
                <i class="fas fa-dollar-sign text-red-400"></i>
            </div>
            <p class="text-xs text-slate-500 font-medium">Total Value</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ $currency }}{{ number_format($totalValue, 2) }}</p>
    </div>
</div>

@forelse($branchesWithStock as $branch)
<div class="table-container rounded-2xl overflow-hidden fade-in mb-6">
    <div class="p-5" style="border-bottom: 1px solid var(--border-color);">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
                <i class="fas fa-store text-indigo-400"></i>
            </div>
            <div>
                <h3 class="font-semibold text-white text-lg">{{ $branch->name }}</h3>
                <p class="text-xs text-slate-500">{{ $branch->products->count() }} items | Total: {{ $branch->products->sum('pivot.quantity') }} qty</p>
            </div>
        </div>
        <div class="text-right">
            <p class="text-sm text-slate-400">Value</p>
            <p class="text-lg font-bold text-white">{{ $currency }}{{ number_format($branch->products->sum(fn($m) => $m->pivot->quantity * $m->cost_price), 2) }}</p>
        </div>
    </div>
    @if($branch->products->count() > 0)
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/30">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-bold text-slate-400 uppercase tracking-wider">Product</th>
                    <th class="px-4 py-3 text-center text-xs font-bold text-slate-400 uppercase tracking-wider">Category</th>
                    <th class="px-4 py-3 text-center text-xs font-bold text-slate-400 uppercase tracking-wider">Qty</th>
                    <th class="px-4 py-3 text-right text-xs font-bold text-slate-400 uppercase tracking-wider">Cost Price</th>
                    <th class="px-4 py-3 text-right text-xs font-bold text-slate-400 uppercase tracking-wider">Subtotal</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/30">
                @foreach($branch->products as $product)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-4 py-3 text-sm font-medium text-white">{{ $product->name }}</td>
                    <td class="px-4 py-3 text-sm text-center text-slate-400">{{ $product->category->name }}</td>
                    <td class="px-4 py-3 text-sm text-center font-semibold {{ $product->pivot->quantity == 0 ? 'text-red-400' : 'text-green-400' }}">{{ $product->pivot->quantity }}</td>
                    <td class="px-4 py-3 text-sm text-right text-slate-400">{{ $currency }}{{ number_format($product->cost_price, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-right text-white font-medium">{{ $currency }}{{ number_format($product->pivot->quantity * $product->cost_price, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-800/50">
                <tr>
                    <td colspan="2" class="px-4 py-3 text-sm font-bold text-white">Total</td>
                    <td class="px-4 py-3 text-sm text-center font-bold text-white">{{ $branch->products->sum('pivot.quantity') }}</td>
                    <td class="px-4 py-3"></td>
                    <td class="px-4 py-3 text-sm text-right font-bold text-white">{{ $currency }}{{ number_format($branch->products->sum(fn($m) => $m->pivot->quantity * $m->cost_price), 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @else
    <div class="p-8 text-center">
        <p class="text-slate-500">No stock assigned to this branch.</p>
    </div>
    @endif
</div>
@empty
<div class="table-container rounded-2xl p-8 text-center fade-in">
    <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-slate-700/50 flex items-center justify-center">
        <i class="fas fa-store text-2xl text-slate-500"></i>
    </div>
    <p class="text-slate-400 text-lg">No branch stock data available</p>
    <p class="text-slate-500 text-sm mt-1">Assign stock to branches from product create/edit forms.</p>
</div>
@endforelse

@endcan
@endsection