@extends('master.app')
@section('title', 'Product Sales Report')

@section('pageCSS')
<style>
    .kpi-card{
        border:1px solid #e9ecef; border-radius:14px;
        padding:14px 14px; background:#fff;
        box-shadow:0 8px 24px rgba(0,0,0,.05);
        position:relative; overflow:hidden;
    }
    .kpi-card:before{
        content:""; position:absolute; right:-40px; top:-40px;
        width:120px; height:120px; border-radius:999px;
        background:rgba(13,110,253,.08);
    }
    .kpi-label{ font-size:12px; color:#6c757d; }
    .kpi-value{ font-size:20px; font-weight:900; }
    .soft-pill{
        display:inline-flex; align-items:center; gap:8px;
        padding:6px 10px; border-radius:999px;
        background:#f8f9fa; border:1px solid #e9ecef;
        font-size:12px; color:#495057;
    }
    .table thead th{ white-space:nowrap; }
    .sort-link{ text-decoration:none; color:inherit; }
    .sort-link:hover{ text-decoration:underline; }
    .card-header{
        background:linear-gradient(135deg, #0d6efd, #4f46e5);
        color:#fff;
        border-bottom:0;
    }
    .card-header small{ color:rgba(255,255,255,.8) !important; }
    .btn-light{ border-color: rgba(255,255,255,.3) !important; }
    .badge-soft{
        background:rgba(255,255,255,.18);
        border:1px solid rgba(255,255,255,.28);
        color:#fff;
    }

    @media print{
        .no-print{ display:none !important; }
        .card{ box-shadow:none !important; border:none !important; }
        body{ background:#fff !important; }
        .table{ font-size:12px; }
        .table thead th{ background:#f2f2f2 !important; -webkit-print-color-adjust: exact; }
        .kpi-card{ box-shadow:none !important; }
    }
</style>
@endsection

@section('body')
<main class="app-content">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0">
                    <i class="fas fa-chart-bar me-2"></i>
                    Product Sales Report
                </h5>
                <small class="text-muted">
                    Province / Customer wise • Qty • Cartons • Amount
                </small>
            </div>

            <div class="no-print d-flex gap-2">
                <a href="{{ route('reports.product_sales') }}" class="btn btn-sm btn-light">
                    <i class="fas fa-rotate-left me-1"></i> Reset
                </a>

                <a target="_blank"
                   href="{{ route('reports.product_sales', array_merge(request()->query(), ['print'=>1])) }}"
                   class="btn btn-sm btn-dark">
                    <i class="fas fa-print me-1"></i> Print
                </a>
            </div>
        </div>

        <div class="card-body">

            {{-- Print Header --}}
            @if($isPrint)
                <div class="text-center mb-3">
                    <h5 class="mb-1">{{ $info->business_name ?? 'Business' }}</h5>
                    <div class="text-muted">Product Sales Report</div>
                    <div class="text-muted">Print Date: {{ date('Y-m-d') }}</div>
                </div>
            @endif

            {{-- Filters --}}
            <form method="GET" action="{{ route('reports.product_sales') }}" class="row g-2 mb-3 no-print">
                <div class="col-md-2">
                    <label class="form-label">Group By</label>
                    <select name="group_by" class="form-select">
                        <option value="province" {{ request('group_by','province')==='province'?'selected':'' }}>Province</option>
                        <option value="customer" {{ request('group_by')==='customer'?'selected':'' }}>Customer</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Province</label>
                    <select name="province_id" class="form-select">
                        <option value="all">All</option>
                        @foreach($provinces as $p)
                            @php $pname = $p->title_en ?? $p->name ?? ('ID-'.$p->id); @endphp
                            <option value="{{ $p->id }}" {{ request('province_id')==(string)$p->id ? 'selected':'' }}>
                                {{ $pname }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Customer</label>
                    <select name="customer_id" class="form-select">
                        <option value="all">All</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" {{ request('customer_id')==(string)$c->id ? 'selected':'' }}>
                                {{ $c->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Currency</label>
                    <select name="currency_id" class="form-select">
                        <option value="all">All</option>
                        @foreach($currencies as $cur)
                            <option value="{{ $cur->id }}" {{ request('currency_id')==(string)$cur->id ? 'selected':'' }}>
                                {{ $cur->title_en }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">From</label>
                    <input type="date" name="from_date" value="{{ request('from_date') }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="form-label">To</label>
                    <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Category</label>
                    <select name="cat_id" class="form-select">
                        <option value="">All</option>
                        @foreach($categories as $row)
                            <option value="{{ $row->id }}" {{ request('cat_id')==(string)$row->id ? 'selected':'' }}>
                                {{ $row->title_en ?? $row->title ?? $row->name ?? ('ID-'.$row->id) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Sub Category</label>
                    <select name="sub_cat_id" class="form-select">
                        <option value="">All</option>
                        @foreach($subcategories as $row)
                            <option value="{{ $row->id }}" {{ request('sub_cat_id')==(string)$row->id ? 'selected':'' }}>
                                {{ $row->title_en ?? $row->title ?? $row->name ?? ('ID-'.$row->id) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Product / Stock</label>
                    <select name="stock_id" class="form-select">
                        <option value="">All</option>
                        @foreach($stocks as $s)
                            <option value="{{ $s->id }}" {{ request('stock_id')==(string)$s->id ? 'selected':'' }}>
                                {{ $s->title_en ?? $s->title ?? $s->name ?? ('Stock-'.$s->id) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 d-grid">
                    <label class="form-label">&nbsp;</label>
                    <button class="btn btn-primary">
                        <i class="fas fa-magnifying-glass me-1"></i> Search
                    </button>
                </div>
            </form>

            {{-- Active Filters Pills --}}
            <div class="d-flex flex-wrap gap-2 mb-3">
                <span class="soft-pill">
                    <i class="fas fa-layer-group"></i>
                    Group: <b class="ms-1">{{ $groupBy === 'customer' ? 'Customer' : 'Province' }}</b>
                </span>
                @if(request('from_date') || request('to_date'))
                    <span class="soft-pill">
                        <i class="fas fa-calendar"></i>
                        {{ request('from_date') ?: '...' }} → {{ request('to_date') ?: '...' }}
                    </span>
                @endif
                @if(request('currency_id') && request('currency_id') !== 'all')
                    <span class="soft-pill"><i class="fas fa-coins"></i> Currency ID: <b class="ms-1">{{ request('currency_id') }}</b></span>
                @endif
            </div>

            {{-- KPI --}}
            <div class="row g-2 mb-3">
                <div class="col-md-4">
                    <div class="kpi-card">
                        <div class="kpi-label"><i class="fas fa-boxes-stacked me-1"></i> Total Qty</div>
                        <div class="kpi-value">{{ number_format($kpi->qty, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="kpi-card">
                        <div class="kpi-label"><i class="fas fa-box me-1"></i> Total Cartons</div>
                        <div class="kpi-value">{{ number_format($kpi->carton, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="kpi-card">
                        <div class="kpi-label"><i class="fas fa-money-bill-wave me-1"></i> Total Amount</div>
                        <div class="kpi-value">{{ number_format($kpi->amount, 2) }}</div>
                    </div>
                </div>
            </div>

            @php
                // helper for sorting links
                $makeSortUrl = function($key) {
                    $currentSort = request('sort');
                    $currentDir  = request('dir','desc');
                    $dir = ($currentSort === $key && $currentDir === 'desc') ? 'asc' : 'desc';
                    return route('reports.product_sales', array_merge(request()->query(), ['sort'=>$key, 'dir'=>$dir]));
                };
                $sortIcon = function($key){
                    $currentSort = request('sort');
                    $currentDir  = request('dir','desc');
                    if($currentSort !== $key) return 'fa-sort text-muted';
                    return $currentDir === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
                };
            @endphp

            {{-- Table --}}
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:60px;">#</th>

                            <th>
                                <a class="sort-link" href="{{ $makeSortUrl('name') }}">
                                    {{ $groupBy === 'customer' ? 'Customer' : 'Province' }}
                                    <i class="fas {{ $sortIcon('name') }} ms-1"></i>
                                </a>
                            </th>

                            <th class="text-end" style="width:160px;">
                                <a class="sort-link" href="{{ $makeSortUrl('qty') }}">
                                    Qty <i class="fas {{ $sortIcon('qty') }} ms-1"></i>
                                </a>
                            </th>

                            <th class="text-end" style="width:160px;">
                                <a class="sort-link" href="{{ $makeSortUrl('carton') }}">
                                    Cartons <i class="fas {{ $sortIcon('carton') }} ms-1"></i>
                                </a>
                            </th>

                            <th class="text-end" style="width:180px;">
                                <a class="sort-link" href="{{ $makeSortUrl('amount') }}">
                                    Amount <i class="fas {{ $sortIcon('amount') }} ms-1"></i>
                                </a>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            // paginator vs collection row iteration
                            $rowItems = $isPrint ? $rows : $rows->items();
                            $startNo  = $isPrint ? 1 : $rows->firstItem();
                        @endphp

                        @forelse($rowItems as $i => $r)
                            <tr>
                                <td>{{ $startNo + $i }}</td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <i class="fas {{ $groupBy==='customer' ? 'fa-user' : 'fa-map-location-dot' }} me-1"></i>
                                            <b>{{ $r->gname }}</b>
                                        </div>
                                        <span class="badge rounded-pill bg-secondary">
                                            ID: {{ $r->gid }}
                                        </span>
                                    </div>
                                </td>
                                <td class="text-end fw-bold">{{ number_format((float)$r->total_qty, 2) }}</td>
                                <td class="text-end fw-bold">{{ number_format((float)$r->total_cartons, 2) }}</td>
                                <td class="text-end fw-bold">{{ number_format((float)$r->total_amount, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="fas fa-circle-info me-1"></i> No data found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if(!$isPrint)
                <div class="mt-2 no-print">
                    {{ $rows->links('pagination::bootstrap-4') }}
                </div>
            @endif

            {{-- Print footer --}}
            @if($isPrint)
                <div class="mt-4 text-center text-muted" style="font-size:12px;">
                    Generated by System • {{ date('Y-m-d H:i') }}
                </div>
            @endif

    </div>
</main>
@endsection