@extends('admin.admin_dashboard')

@section('customcss')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<style>
    .report-shell {
        min-height: auto;
        padding-bottom: 18px;
    }

    .expense-report-card {
        border: 1px solid #e3e8ef;
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
        background: #fff;
    }

    .expense-report-card .content-title {
        border-bottom: 1px solid #e9eef4;
        background: #fff;
    }

    .expense-report-card .card-header {
        padding: 16px 20px;
    }

    .expense-report-card .card-body {
        padding: 20px;
    }

    .report-page-title {
        margin-bottom: 14px;
    }

    .report-page-title h4 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
    }

    .report-page-title p {
        margin: 4px 0 0;
        font-size: 13px;
        color: #6b7280;
    }

    .filter-grid .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

    .filter-grid .form-control,
    .filter-grid .form-select {
        height: 42px;
        border-radius: 10px;
    }

    .date-range-field {
        display: none;
    }

    .report-tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .report-tools-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .report-summary-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #dbe3ec;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }

    .report-count {
        color: #6b7280;
        font-weight: 600;
    }

    .report-table-wrap {
        overflow: hidden;
    }

    .report-table {
        width: 100%;
        margin-bottom: 0;
        table-layout: fixed;
        border-color: #dbe3ec;
    }

    .report-table thead th {
        background: #f8fafc;
        color: #111827;
        border-color: #dbe3ec;
        font-size: 13px;
        font-weight: 700;
        padding: 10px 8px;
        vertical-align: middle;
        white-space: normal;
    }

    .report-table tbody td,
    .report-table tfoot td {
        font-size: 13px;
        padding: 10px 8px;
        vertical-align: top;
        border-color: #dbe3ec;
        color: #1f2937;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .report-table tbody tr:nth-child(even) {
        background: #fcfdff;
    }

    .report-table tfoot td {
        background: #f8fafc;
        border-top: 2px solid #cfd8e3;
        font-weight: 700;
    }

    .summary-label {
        font-size: 14px;
        letter-spacing: .2px;
    }

    .col-sl {
        width: 4%;
        text-align: center;
    }

    .col-bill {
        width: 10%;
    }

    .col-installment {
        width: 10%;
        text-align: center;
    }

    .col-amount {
        width: 10%;
        text-align: right;
    }

    .col-payment-date {
        width: 10%;
    }

    .col-bill-date {
        width: 8%;
    }

    .col-method {
        width: 8%;
    }

    .col-payment-note {
        width: 14%;
    }

    .col-bill-note {
        width: 14%;
    }

    .sl-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #f1f5f9;
        font-size: 12px;
        font-weight: 700;
        color: #111827;
    }

    .bill-text {
        font-weight: 600;
        color: #111827;
        line-height: 1.4;
    }

    .amount-text {
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    .empty-report {
        text-align: center;
        padding: 26px 12px;
        color: #6b7280;
        font-size: 14px;
    }

    .print-school-header {
        display: none;
    }

    .print-school-logo-wrap {
        text-align: center;
        margin-bottom: 2px;
    }

    .print-school-logo {
        width: 52px;
        height: 52px;
        object-fit: contain;
    }

    .print-school-name {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .print-school-address,
    .print-school-contact,
    .print-report-title,
    .print-report-meta {
        text-align: center;
        color: #111827;
    }

    .print-school-address,
    .print-school-contact {
        font-size: 12px;
        line-height: 1.4;
    }

    .print-report-title {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 700;
    }

    .print-report-meta {
        margin-top: 3px;
        font-size: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #111827;
        margin-bottom: 10px;
    }

    @media (max-width: 991.98px) {
        .expense-report-card .card-header,
        .expense-report-card .card-body {
            padding: 16px;
        }

        .report-table thead th,
        .report-table tbody td,
        .report-table tfoot td {
            font-size: 12px;
            padding: 8px 6px;
        }
    }

    @media print {
        html,
        body {
            background: #fff !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: auto !important;
            overflow: visible !important;
        }

        .nav-header,
        .header,
        .footer,
        .dlabnav,
        .deznav,
        .sidebar,
        .menu-toggle,
        .hamburger,
        .page-titles,
        .no-print,
        #preloader {
            display: none !important;
        }

        #main-wrapper,
        .content-body,
        .container-fluid,
        .report-shell,
        .default-height {
            margin: 0 !important;
            padding: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
            min-height: auto !important;
            height: auto !important;
            overflow: visible !important;
            background: #fff !important;
        }

        .print-school-header {
            display: block !important;
            margin-bottom: 8px !important;
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        .expense-report-card {
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            margin: 0 !important;
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        .report-section-card {
            margin-top: 0 !important;
        }

        .report-section-card .card-header {
            padding: 4px 0 8px 0 !important;
            background: #fff !important;
            border-bottom: 0 !important;
        }

        .report-section-card .card-body {
            padding: 0 !important;
        }

        .report-tools {
            display: block !important;
        }

        .report-tools h5 {
            margin: 0 0 6px 0 !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #111827 !important;
        }

        .report-table-wrap {
            overflow: visible !important;
        }

        .report-table {
            width: 100% !important;
            table-layout: fixed !important;
            margin: 0 !important;
            page-break-inside: auto !important;
        }

        .report-table thead th,
        .report-table tbody td,
        .report-table tfoot td {
            font-size: 10px !important;
            padding: 5px 4px !important;
            color: #000 !important;
            background: #fff !important;
            border: 1px solid #cfd8e3 !important;
        }

        .report-table thead th {
            font-weight: 700 !important;
        }

        .sl-badge {
            background: #fff !important;
            border: 1px solid #cfd8e3 !important;
            width: 20px !important;
            height: 20px !important;
            font-size: 10px !important;
        }

        .col-sl { width: 4% !important; }
        .col-bill { width: 12% !important; }
        .col-category { width: 11% !important; }
        .col-vendor { width: 11% !important; }
        .col-installment { width: 8% !important; }
        .col-amount { width: 10% !important; }
        .col-payment-date { width: 13% !important; }
        .col-bill-date { width: 13% !important; }
        .col-method { width: 8% !important; }
        .col-payment-note { width: 5% !important; }
        .col-bill-note { width: 5% !important; }

        @page {
            size: A4 portrait;
            margin: 8mm;
        }
    }
</style>
@endsection

@section('admin')
@php
    $schoolLogo = !empty($schoolInfo?->school_logo)
        ? (file_exists(public_path('storage/' . ltrim($schoolInfo->school_logo, '/')))
            ? asset('storage/' . ltrim($schoolInfo->school_logo, '/'))
            : asset('core/storage/app/public/' . ltrim($schoolInfo->school_logo, '/')))
        : (file_exists(public_path('storage/school_logo.png'))
            ? asset('storage/school_logo.png')
            : asset('core/storage/app/public/school_logo.png'));

    $schoolName = $schoolInfo?->school_name ?: config('app.name');
    $schoolAddress = $schoolInfo?->address ?: 'N/A';

    $rows = $rows ?? collect();
    $totalAmount = (float) ($totalAmount ?? 0);
    $dateRangeText = $dateRangeText ?? (($filters['from_date'] ?? '') . ' to ' . ($filters['to_date'] ?? ''));
@endphp

<div class="content-body default-height report-shell">
    <div class="container-fluid">

        <div class="report-page-title no-print">
            <h4>Expense Report</h4>
            <p>Expense report based on selected filters.</p>
        </div>

        {{-- print only school info --}}
        <div class="print-school-header">
            <div class="print-school-logo-wrap">
                <img src="{{ $schoolLogo }}" alt="School Logo" class="print-school-logo">
            </div>

            <div class="print-school-name">{{ $schoolName }}</div>

            <div class="print-school-address">
                {{ $schoolAddress }}
            </div>

            <div class="print-school-contact">
                @if(!empty($schoolInfo?->phone))
                    Phone: {{ $schoolInfo->phone }}
                @endif

                @if(!empty($schoolInfo?->email))
                    @if(!empty($schoolInfo?->phone)) | @endif
                    Email: {{ $schoolInfo->email }}
                @endif
            </div>

            <div class="print-report-title">Expense Report</div>

            <div class="print-report-meta">
                <span><strong>Report Date:</strong> {{ now()->format('d-m-Y') }}</span>
                <span class="mx-2">|</span>
                <span><strong>Date Range:</strong> <span id="printDateRangeText">{{ $dateRangeText }}</span></span>
            </div>
        </div>

        {{-- Filter Section --}}
        <div class="card expense-report-card mb-3 no-print">
            <div class="content-title card-header">
                <h5 class="mb-0">Filter Section</h5>
            </div>

            <div class="card-body">
                <form id="expenseReportFilterForm" class="row g-3 filter-grid">
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <label class="form-label">Date Range</label>
                        <select name="range" id="rangeFilter" class="form-select">
                            <option value="today" {{ ($filters['range'] ?? 'today') === 'today' ? 'selected' : '' }}>Today</option>
                            <option value="last_7_days" {{ ($filters['range'] ?? '') === 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                            <option value="last_30_days" {{ ($filters['range'] ?? '') === 'last_30_days' ? 'selected' : '' }}>Last 30 Days</option>
                            <option value="this_month" {{ ($filters['range'] ?? '') === 'this_month' ? 'selected' : '' }}>This Month</option>
                            <option value="date_range" {{ ($filters['range'] ?? '') === 'date_range' ? 'selected' : '' }}>Date Range</option>
                        </select>
                    </div>

                    <div class="col-xl-3 col-lg-3 col-md-6 date-range-field" id="fromDateWrap">
                        <label class="form-label">From Date</label>
                        <input
                            type="text"
                            name="from_date"
                            id="fromDate"
                            value="{{ $filters['from_date'] ?? '' }}"
                            class="form-control"
                            placeholder="dd-mm-yyyy"
                            autocomplete="off"
                        >
                    </div>

                    <div class="col-xl-3 col-lg-3 col-md-6 date-range-field" id="toDateWrap">
                        <label class="form-label">To Date</label>
                        <input
                            type="text"
                            name="to_date"
                            id="toDate"
                            value="{{ $filters['to_date'] ?? '' }}"
                            class="form-control"
                            placeholder="dd-mm-yyyy"
                            autocomplete="off"
                        >
                    </div>

                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Expense Category</label>
                        <select name="category_id" class="form-select">
                            <option value="">All</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ (string) ($filters['category_id'] ?? '') === (string) $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Requested By</label>
                        <select name="requested_by" class="form-select">
                            <option value="">All</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" {{ (string) ($filters['requested_by'] ?? '') === (string) $user->id ? 'selected' : '' }}>
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Approved By</label>
                        <select name="approved_by" class="form-select">
                            <option value="">All</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" {{ (string) ($filters['approved_by'] ?? '') === (string) $user->id ? 'selected' : '' }}>
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
        </div>

        {{-- Report Section --}}
        <div class="card expense-report-card report-section-card" id="reportSection">
            <div class="content-title card-header">
                <div class="report-tools">
                    <div class="report-tools-left">
                        <h5 class="mb-0">Report Section</h5>

                        <span class="report-summary-pill no-print">
                            <span class="report-count" id="reportCount">Total: {{ $rows->count() }}</span>
                            <span>|</span>
                            <span id="reportTotalAmount">Total Amount: {{ number_format((float) $totalAmount) }}</span>
                        </span>
                    </div>

                    <div class="no-print">
                        <button type="button" class="btn btn-primary btn-sm" id="printReportBtn">
                            <i class="fa fa-print me-1"></i>Print
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body report-table-wrap" id="reportTableContainer">
                @include('admin.accounting.expense_bills.report_table', [
                    'rows' => $rows,
                    'totalAmount' => $totalAmount
                ])
            </div>
        </div>

    </div>
</div>
@endsection

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('expenseReportFilterForm');
    const rangeFilter = document.getElementById('rangeFilter');
    const fromWrap = document.getElementById('fromDateWrap');
    const toWrap = document.getElementById('toDateWrap');
    const reportTableContainer = document.getElementById('reportTableContainer');
    const reportCount = document.getElementById('reportCount');
    const reportTotalAmount = document.getElementById('reportTotalAmount');
    const printDateRangeText = document.getElementById('printDateRangeText');
    const printBtn = document.getElementById('printReportBtn');

    function toggleRangeInputs() {
        const isRange = rangeFilter.value === 'date_range';
        fromWrap.style.display = isRange ? 'block' : 'none';
        toWrap.style.display = isRange ? 'block' : 'none';
    }

    function updateSummary(count, totalAmount) {
        if (reportCount) {
            reportCount.textContent = `Total: ${count}`;
        }

        if (reportTotalAmount) {
            reportTotalAmount.textContent =
                `Total Amount: ${Number(totalAmount || 0).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                })}`;
        }
    }

    function updatePrintDateRange(text) {
        if (printDateRangeText) {
            printDateRangeText.textContent = text || '';
        }
    }

    function fetchReport() {
        const url = new URL('{{ route('admin.reports.expense.data') }}', window.location.origin);
        const params = new URLSearchParams(new FormData(form));
        url.search = params.toString();

        fetch(url.toString(), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        })
        .then((res) => res.json())
        .then((data) => {
            if (!data || data.success !== true) {
                throw new Error('Failed to load report data.');
            }

            reportTableContainer.innerHTML = data.html;
            updateSummary(data.count || 0, data.total_amount || 0);
            updatePrintDateRange(data.date_range_text || '');
        })
        .catch(() => {
            if (window.toastr) {
                toastr.error('Failed to load expense report.');
            }
        });
    }

    if (window.flatpickr) {
        window.flatpickr('#fromDate', {
            dateFormat: 'd-m-Y',
            allowInput: true
        });

        window.flatpickr('#toDate', {
            dateFormat: 'd-m-Y',
            allowInput: true
        });
    }

    form.addEventListener('change', function () {
        toggleRangeInputs();
        fetchReport();
    });

    form.addEventListener('input', function (e) {
        if (e.target.name === 'from_date' || e.target.name === 'to_date') {
            fetchReport();
        }
    });

    if (printBtn) {
        printBtn.addEventListener('click', function () {
            window.print();
        });
    }

    toggleRangeInputs();
    updateSummary({{ $rows->count() }}, {{ (float) $totalAmount }});
    updatePrintDateRange(@json($dateRangeText));
});
</script>
@endsection