@extends('master.app')
@section('title', 'Customer Balance Sheet')

@section('pageCSS')
    {{-- Bootstrap Icons --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        :root{
            --primary:#0d6efd;
            --soft:#f6f9ff;
            --dark:#0b1220;
            --muted:#6c757d;
        }

        .page-wrap{
            background: radial-gradient(circle at 10% 10%, #e8f1ff 0%, transparent 40%),
                        radial-gradient(circle at 90% 20%, #e9fff3 0%, transparent 42%),
                        radial-gradient(circle at 30% 90%, #fff3e8 0%, transparent 45%);
            border-radius:18px;
            padding:16px;
        }

        .header-hero{
            border-radius:16px;
            padding:16px 18px;
            color:#fff;
            background: linear-gradient(135deg, #0d6efd 0%, #4f46e5 45%, #06b6d4 100%);
            position:relative;
            overflow:hidden;
        }
        .header-hero:before{
            content:"";
            position:absolute;
            width:280px;height:280px;
            border-radius:999px;
            background: rgba(255,255,255,.14);
            top:-120px; right:-120px;
        }
        .header-hero:after{
            content:"";
            position:absolute;
            width:220px;height:220px;
            border-radius:999px;
            background: rgba(0,0,0,.08);
            bottom:-120px; left:-120px;
        }
        .hero-title{
            font-weight:900;
            letter-spacing:.2px;
            margin:0;
        }
        .hero-sub{
            opacity:.92;
            margin:2px 0 0;
            font-size:12px;
        }

        .glass-card{
            background: rgba(255,255,255,.78);
            border:1px solid rgba(255,255,255,.65);
            border-radius:16px;
            box-shadow: 0 12px 26px rgba(11,18,32,.06);
            backdrop-filter: blur(8px);
        }

        .filter-card{
            border-radius:16px;
        }
        .filter-card .form-label{
            font-size:12px;
            color: var(--muted);
            margin-bottom:6px;
        }

        .kpi-card{
            border:1px solid #edf0f7;
            border-radius:16px;
            padding:12px 14px;
            background:#fff;
            box-shadow:0 8px 20px rgba(11,18,32,.05);
            position:relative;
            overflow:hidden;
            transition: all .2s ease;
        }
        .kpi-card:hover{
            transform: translateY(-2px);
            box-shadow:0 14px 30px rgba(11,18,32,.09);
        }
        .kpi-label{
            font-size:12px;
            color:#6c757d;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .kpi-value{
            font-size:18px;
            font-weight:900;
            margin-top:4px;
        }
        .kpi-icon{
            width:28px;height:28px;
            border-radius:10px;
            display:flex;
            align-items:center;
            justify-content:center;
            background: var(--soft);
            color: var(--primary);
            font-size:14px;
        }

        .summary-strip{
            border-radius:16px;
            background:#fff;
            border:1px dashed #e7ebf3;
            padding:10px 12px;
            font-size:12px;
            color:#334155;
            display:flex;
            flex-wrap:wrap;
            gap:10px 16px;
            align-items:center;
            justify-content:space-between;
        }
        .summary-strip .pill{
            background:#f8fafc;
            border:1px solid #eef2f7;
            border-radius:999px;
            padding:6px 10px;
            display:flex;
            gap:8px;
            align-items:center;
            white-space:nowrap;
        }
        .pill i{ color:#64748b; }

        .table-modern{
            border-radius:16px;
            overflow:hidden;
            border:1px solid #eef2f7;
            box-shadow:0 10px 22px rgba(11,18,32,.05);
            background:#fff;
        }
        .table-modern table{ margin:0; }
        .table-modern thead th{
            background: #f6f8ff !important;
            position: sticky;
            top: 0;
            z-index: 2;
            font-size:12px;
            color:#334155;
            text-transform: uppercase;
            letter-spacing:.4px;
        }
        .table-modern tbody tr{
            transition: all .15s ease;
        }
        .table-modern tbody tr:hover{
            background:#f8fafc;
        }

        .money-pos{ color:#16a34a; font-weight:800; }
        .money-neg{ color:#dc2626; font-weight:800; }
        .money-neutral{ color:#0f172a; font-weight:900; }

        .btn-soft{
            background: rgba(255,255,255,.18);
            color:#fff;
            border:1px solid rgba(255,255,255,.35);
        }
        .btn-soft:hover{ background: rgba(255,255,255,.28); color:#fff; }

        @media print{
            .no-print{ display:none !important; }
            body{ background:#fff !important; }
            .card, .glass-card, .table-modern{ box-shadow:none !important; }
            .header-hero{ background:#0d6efd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .table-modern thead th{ background:#f2f2f2 !important; -webkit-print-color-adjust: exact; }
        }
    </style>
@endsection

@section('body')
    <main class="app-content">
        <div class="page-wrap">

            {{-- HERO HEADER --}}
            <div class="header-hero mb-3 d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-2">
                <div>
                    <h4 class="hero-title">
                        <i class="bi bi-clipboard-data me-1"></i> Customer Balance Sheet
                    </h4>
                    <div class="hero-sub">
                        Opening + Period Movements = Closing
                    </div>
                </div>

                <div class="no-print d-flex gap-2">
                    <a href="{{ route('customer_balance_sheet.index') }}" class="btn btn-sm btn-soft">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                    </a>
                    <button onclick="window.print()" class="btn btn-sm btn-soft">
                        <i class="bi bi-printer me-1"></i> Print
                    </button>
                </div>
            </div>

            {{-- FILTERS --}}
            <div class="glass-card filter-card p-3 mb-3 no-print">
                <form method="GET" action="{{ route('customer_balance_sheet.index') }}" class="row g-2 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label"><i class="bi bi-person-badge me-1"></i> 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') == $c->id ? 'selected' : '' }}>
                                    {{ $c->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label"><i class="bi bi-cash-coin me-1"></i> 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') == $cur->id ? 'selected' : '' }}>
                                    {{ $cur->title_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label"><i class="bi bi-calendar2-week me-1"></i> 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"><i class="bi bi-calendar2-week-fill me-1"></i> To</label>
                        <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control">
                    </div>

                    <div class="col-md-2 d-grid">
                        <button class="btn btn-primary">
                            <i class="bi bi-search me-1"></i> Search
                        </button>
                    </div>
                </form>
            </div>

            {{-- KPI --}}
            <div class="row g-2 mb-3">
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-box-arrow-in-right"></i></span>
                            Opening
                        </div>
                        <div class="kpi-value money-neutral">{{ number_format($kpi->opening, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-graph-up-arrow"></i></span>
                            Sale
                        </div>
                        <div class="kpi-value money-pos">{{ number_format($kpi->sale, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-wallet2"></i></span>
                            Received
                        </div>
                        <div class="kpi-value money-neg">{{ number_format($kpi->received, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-arrow-return-left"></i></span>
                            Return
                        </div>
                        <div class="kpi-value money-neg">{{ number_format($kpi->returned, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-piggy-bank"></i></span>
                            Advance
                        </div>
                        <div class="kpi-value money-neg">{{ number_format($kpi->advance, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="kpi-card">
                        <div class="kpi-label">
                            <span class="kpi-icon"><i class="bi bi-check2-circle"></i></span>
                            Closing
                        </div>
                        <div class="kpi-value money-neutral">{{ number_format($kpi->closing, 2) }}</div>
                    </div>
                </div>
            </div>

            {{-- SUMMARY STRIP --}}
            <div class="summary-strip mb-3">
                <div class="pill">
                    <i class="bi bi-funnel"></i>
                    <span><b>Filters:</b>
                        Customer: <b>{{ request('customer_id','all') }}</b>,
                        Currency: <b>{{ request('currency_id','all') }}</b>,
                        From: <b>{{ request('from_date','-') }}</b>,
                        To: <b>{{ request('to_date','-') }}</b>
                    </span>
                </div>
                <div class="pill">
                    <i class="bi bi-info-circle"></i>
                    <span>Tip: Print will keep header colors.</span>
                </div>
            </div>

            {{-- TABLE --}}
            <div class="table-modern table-responsive">
                <table class="table table-bordered table-sm align-middle">
                    <thead>
                        <tr>
                            <th style="width:60px;">#</th>
                            <th><i class="bi bi-person me-1"></i> Customer</th>
                            <th style="width:90px;"><i class="bi bi-currency-exchange me-1"></i> CUR</th>
                            <th class="text-end" style="width:130px;">Opening</th>
                            <th class="text-end" style="width:130px;">Sale</th>
                            <th class="text-end" style="width:130px;">Received</th>
                            <th class="text-end" style="width:130px;">Return</th>
                            <th class="text-end" style="width:130px;">Advance</th>
                            <th class="text-end" style="width:130px;">Closing</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $i => $r)
                            @php
                                $closingClass = $r->closing > 0 ? 'money-pos' : ($r->closing < 0 ? 'money-neg' : 'money-neutral');
                            @endphp
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td class="fw-semibold">{{ $customerNames[$r->customer_id] ?? 'Unknown' }}</td>
                                <td>{{ $currencyNames[$r->currency_id] ?? '-' }}</td>

                                <td class="text-end fw-bold">{{ number_format($r->opening, 2) }}</td>
                                <td class="text-end money-pos">{{ number_format($r->sale, 2) }}</td>
                                <td class="text-end money-neg">{{ number_format($r->received, 2) }}</td>
                                <td class="text-end money-neg">{{ number_format($r->returned, 2) }}</td>
                                <td class="text-end money-neg">{{ number_format($r->advance, 2) }}</td>

                                <td class="text-end {{ $closingClass }}">{{ number_format($r->closing, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">
                                    <i class="bi bi-inbox fs-4 d-block mb-1"></i>
                                    No data found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>
    </main>
@endsection