@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;
    }

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

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

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

    .closing-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;
    }

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

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

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

    .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) {
        .closing-report-card .card-header,
        .closing-report-card .card-body {
            padding: 16px;
        }

        .report-summary-pill {
            width: 100%;
            justify-content: space-between;
            border-radius: 12px;
        }
    }

    @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;
        }

        .closing-report-card {
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            margin: 0 !important;
        }

        .closing-report-card .card-body {
            padding: 0 !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';
@endphp

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

        <div class="report-page-title no-print">
            <h4>Accounting Closing Report</h4>
            <p>Income, expense and asset-wise closing summary for selected date range.</p>
        </div>

        <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
            </div>

            <div class="print-report-title">Accounting Closing 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>

        <div class="card closing-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="closingReportFilterForm" class="row g-3 filter-grid">
                    <div class="col-xl-3 col-lg-4 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="specific_date" {{ ($filters['range'] ?? '') === 'specific_date' ? 'selected' : '' }}>Specific Date</option>
                            <option value="date_range" {{ ($filters['range'] ?? '') === 'date_range' ? 'selected' : '' }}>Date Range</option>
                        </select>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-md-6 dynamic-date-field" id="specificDateWrap">
                        <label class="form-label">Specific Date</label>
                        <input
                            type="text"
                            name="specific_date"
                            id="specificDate"
                            value="{{ $filters['specific_date'] ?? '' }}"
                            class="form-control"
                            placeholder="dd-mm-yyyy"
                            autocomplete="off"
                        >
                    </div>

                    <div class="col-xl-3 col-lg-4 col-md-6 dynamic-date-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-4 col-md-6 dynamic-date-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>
                </form>
            </div>
        </div>

        <div class="card closing-report-card" id="reportSection">
            <div class="content-title card-header">
                <div class="report-tools">
                    <h5 class="mb-0">Closing Summary</h5>

                    <div class="report-summary-pill no-print">
                        <span id="summaryIncome">Income: {{ number_format((float) $totalIncome) }}</span>
                        <span>|</span>
                        <span id="summaryExpense">Expense: {{ number_format((float) $totalExpense) }}</span>
                        <span>|</span>
                        <span id="summaryProfit">Net Profit: {{ number_format((float) $netProfit) }}</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" id="reportTableContainer">
                @include('admin.reports.accounting.closing_report.partials.table', [
                    'incomeRows' => $incomeRows,
                    'expenseRows' => $expenseRows,
                    'assetRows' => $assetRows,
                    'totalIncome' => $totalIncome,
                    'totalExpense' => $totalExpense,
                    'netProfit' => $netProfit,
                    'totalAssets' => $totalAssets,
                    'rangeEndDate' => $rangeEndDate
                ])
            </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('closingReportFilterForm');
    const rangeFilter = document.getElementById('rangeFilter');
    const specificDateWrap = document.getElementById('specificDateWrap');
    const fromWrap = document.getElementById('fromDateWrap');
    const toWrap = document.getElementById('toDateWrap');
    const reportTableContainer = document.getElementById('reportTableContainer');
    const printDateRangeText = document.getElementById('printDateRangeText');

    const summaryIncome = document.getElementById('summaryIncome');
    const summaryExpense = document.getElementById('summaryExpense');
    const summaryProfit = document.getElementById('summaryProfit');

    const printBtn = document.getElementById('printReportBtn');

    function formatAmount(value) {
        return Number(value || 0).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

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

    function updateSummary(income, expense, profit) {
        summaryIncome.textContent = `Income: ${formatAmount(income)}`;
        summaryExpense.textContent = `Expense: ${formatAmount(expense)}`;
        summaryProfit.textContent = `Net Profit: ${formatAmount(profit)}`;
    }

    function fetchReport() {
        const url = new URL('{{ route('admin.reports.closing.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 closing report.');
            }

            reportTableContainer.innerHTML = data.html;
            updateSummary(data.total_income || 0, data.total_expense || 0, data.net_profit || 0);

            if (printDateRangeText) {
                printDateRangeText.textContent = data.date_range_text || '';
            }
        })
        .catch(() => {
            if (window.toastr) {
                toastr.error('Failed to load accounting closing report.');
            }
        });
    }

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

        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 (['specific_date', 'from_date', 'to_date'].includes(e.target.name)) {
            fetchReport();
        }
    });

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

    toggleRangeInputs();
});
</script>
@endsection