@extends('layouts.app')

@section('page-title', 'Cash Book Report')

@push('styles')
<style>
    /* =============================================
       REUSE BALANCE SHEET DESIGN TOKENS
    ============================================= */
    :root {
        --radius-xl: 20px;
        --radius-lg: 16px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
        --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
        --shadow-hover: 0 16px 48px rgba(0,0,0,0.13);
        --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        --color-primary: #667eea;
        --color-success: #11998e;
        --color-danger: #eb3349;
        --color-info: #4299e1;
        --color-warning: #fbbf24;
        --color-dark: #1a1a2e;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .cb-page { padding: 4px 0 28px; }

    /* =============================================
       PAGE HEADER
    ============================================= */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .page-header h2 {
        font-size: clamp(1.2rem, 3vw, 1.65rem);
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    .date-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(102,126,234,0.1);
        color: var(--color-primary);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* =============================================
       BUTTONS (reuse)
    ============================================= */
    .btn {
        border-radius: var(--radius-md);
        padding: 9px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        text-decoration: none;
        transition: var(--transition);
        cursor: pointer;
        white-space: nowrap;
        line-height: 1.2;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102,126,234,0.35);
    }

    .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .btn-secondary:hover { background: #e2e8f0; color: #334155; }

    .btn-w-full { width: 100%; }

    /* =============================================
       FILTER CARD (identical to balance sheet)
    ============================================= */
    .filter-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .filter-card .card-body { padding: 18px 20px; }

    .filter-grid {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 12px;
        align-items: end;
        margin-bottom: 12px;
    }

    .form-group { display: flex; flex-direction: column; gap: 6px; }

    .form-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin: 0;
    }

    .form-control {
        border-radius: var(--radius-md);
        border: 2px solid #e2e8f0;
        padding: 9px 13px;
        font-size: 0.88rem;
        font-weight: 500;
        color: #334155;
        background: #fff;
        transition: var(--transition);
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
    }

    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
        outline: none;
    }

    .filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* =============================================
       SUMMARY CARDS GRID
    ============================================= */
    .summary-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 20px;
    }

    .summary-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 18px 16px;
        transition: var(--transition);
        border-left: 4px solid transparent;
    }

    .summary-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .summary-card.primary   { border-left-color: var(--color-primary); }
    .summary-card.success   { border-left-color: var(--color-success); }
    .summary-card.danger    { border-left-color: var(--color-danger); }
    .summary-card.info      { border-left-color: var(--color-info); }

    .summary-card .card-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #64748b;
        margin-bottom: 6px;
    }

    .summary-card .card-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1a1a2e;
        line-height: 1.2;
    }

    .summary-card .card-icon {
        float: right;
        font-size: 2rem;
        opacity: 0.15;
        color: inherit;
    }

    /* =============================================
       TRANSACTIONS CARD & TABLE
    ============================================= */
    .transactions-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        overflow: hidden;
    }

    .transactions-card .card-header {
        padding: 14px 18px;
        background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.04));
        border-bottom: 2px solid rgba(102,126,234,0.2);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .transactions-card .card-header .header-icon {
        width: 34px; height: 34px;
        border-radius: var(--radius-sm);
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88rem;
        color: #fff;
    }

    .transactions-card .card-header h5 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        color: #1a1a2e;
    }

    .transactions-card .card-body { padding: 0; }

    /* Table styles (extend bs-table) */
    .cb-table {
        width: 100%;
        border-collapse: collapse;
    }

    .cb-table th {
        text-align: left;
        padding: 14px 18px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
    }

    .cb-table td {
        padding: 12px 18px;
        font-size: 0.87rem;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .cb-table tr:hover td {
        background: rgba(102,126,234,0.03);
    }

    .cb-table .amt {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Type badges */
    .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .badge-success {
        background: rgba(17,153,142,0.15);
        color: #0f766e;
    }

    .badge-danger {
        background: rgba(235,51,73,0.15);
        color: #be123c;
    }

    /* Empty state */
    .empty-row td {
        text-align: center;
        color: #94a3b8;
        font-size: 0.83rem;
        padding: 24px 18px;
        font-style: italic;
    }

    /* =============================================
       RESPONSIVE BREAKPOINTS
    ============================================= */

    /* Extra small < 480px */
    @media (max-width: 479px) {
        .cb-page { padding: 0 0 16px; }

        .page-header { flex-direction: column; align-items: stretch; }
        .page-header h2 { font-size: 1.2rem; }

        .filter-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .filter-actions .btn { width: 100%; }

        .summary-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .cb-table th,
        .cb-table td {
            padding: 10px 12px;
            font-size: 0.8rem;
        }
    }

    /* Small 480–575px */
    @media (min-width: 480px) and (max-width: 575px) {
        .filter-grid { grid-template-columns: 1fr; }
        .filter-actions .btn { width: 100%; }

        .summary-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .cb-table th,
        .cb-table td {
            padding: 10px 12px;
            font-size: 0.8rem;
        }
    }

    /* Medium 576–767px */
    @media (min-width: 576px) and (max-width: 767px) {
        .filter-grid { grid-template-columns: 1fr auto; }

        .summary-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
    }

    /* Tablet 768–991px */
    @media (min-width: 768px) and (max-width: 991px) {
        .summary-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .cb-table th,
        .cb-table td {
            padding: 10px 14px;
        }
    }

    /* Desktop 992px+ */
    @media (min-width: 992px) {
        .summary-grid { gap: 16px; }
    }

    /* Touch optimizations */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover { transform: none; }
        .summary-card:hover { transform: none; box-shadow: var(--shadow-sm); }
        .cb-table tr:hover td { background: transparent; }
        .btn { padding: 11px 18px; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }

    /* Focus visible */
    :focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Print */
    @media print {
        .filter-card { display: none !important; }
        .btn { display: none !important; }
        .cb-page { padding: 0; }

        .summary-card {
            box-shadow: none !important;
            border: 1px solid #ccc;
            page-break-inside: avoid;
        }

        .transactions-card {
            box-shadow: none !important;
            border: 1px solid #ccc;
        }

        .cb-table td { padding: 6px 8px !important; }
    }
</style>
@endpush

@section('content')
<div class="cb-page">

    {{-- ========================================
         PAGE HEADER WITH DATE RANGE
    ======================================== --}}
    <div class="page-header">
        <h2>Cash Book</h2>
        <span class="date-badge">
            <i class="fas fa-calendar-alt" style="font-size:0.75rem;"></i>
            {{ \Carbon\Carbon::parse($fromDate)->format('M d, Y') }} - {{ \Carbon\Carbon::parse($toDate)->format('M d, Y') }}
        </span>
    </div>

    {{-- ========================================
         FILTER CARD
    ======================================== --}}
    <div class="filter-card">
        <div class="card-body">
            <form method="GET" action="{{ route('reports.cash-book') }}">
                <div class="filter-grid">
                    <div class="form-group">
                        <label for="from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="from_date" name="from_date" value="{{ $fromDate }}">
                    </div>
                    <div class="form-group">
                        <label for="to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="to_date" name="to_date" value="{{ $toDate }}">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-w-full">
                            <i class="fas fa-chart-bar"></i> Generate
                        </button>
                    </div>
                </div>
                <div class="filter-actions">
                    <a href="{{ url('reports/cash-book/print?from_date=' . $fromDate . '&to_date=' . $toDate) }}"
                       target="_blank"
                       class="btn btn-secondary">
                        <i class="fas fa-print"></i> Print Report
                    </a>
                </div>
            </form>
        </div>
    </div>

    {{-- ========================================
         SUMMARY CARDS
    ======================================== --}}
    <div class="summary-grid">
        <div class="summary-card info">
            <div class="card-icon"><i class="fas fa-wallet"></i></div>
            <div class="card-label">Opening Balance</div>
            <div class="card-value">৳{{ number_format($openingBalance, 2) }}</div>
        </div>
        <div class="summary-card success">
            <div class="card-icon"><i class="fas fa-arrow-down"></i></div>
            <div class="card-label">Total Receipts</div>
            <div class="card-value">৳{{ number_format($totalReceipts, 2) }}</div>
        </div>
        <div class="summary-card danger">
            <div class="card-icon"><i class="fas fa-arrow-up"></i></div>
            <div class="card-label">Total Payments</div>
            <div class="card-value">৳{{ number_format($totalPayments, 2) }}</div>
        </div>
        <div class="summary-card primary">
            <div class="card-icon"><i class="fas fa-landmark"></i></div>
            <div class="card-label">Closing Balance</div>
            <div class="card-value">৳{{ number_format($closingBalance, 2) }}</div>
        </div>
    </div>

    {{-- ========================================
         TRANSACTIONS TABLE CARD
    ======================================== --}}
    <div class="transactions-card">
        <div class="card-header">
            <div class="header-icon">
                <i class="fas fa-list"></i>
            </div>
            <h5>Transaction Details</h5>
        </div>
        <div class="card-body">
            <table class="cb-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Details</th>
                        <th class="amt">Receipts</th>
                        <th class="amt">Payments</th>
                        <th class="amt">Balance</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $transaction)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($transaction->date)->format('M d, Y') }}</td>
                            <td>
                                @if($transaction->type == 'income')
                                    <span class="badge badge-success">Receipt</span>
                                @else
                                    <span class="badge badge-danger">Payment</span>
                                @endif
                            </td>
                            <td>{{ $transaction->details ?? '-' }}</td>
                            <td class="amt">
                                @if($transaction->type == 'income')
                                    ৳{{ number_format($transaction->amount, 2) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="amt">
                                @if($transaction->type == 'expense')
                                    ৳{{ number_format($transaction->amount, 2) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="amt">৳{{ number_format($transaction->balance_after, 2) }}</td>
                        </tr>
                    @empty
                        <tr class="empty-row">
                            <td colspan="6">No transactions found for the selected period.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection
