@extends('layout.app')
@section('title', 'Account Ledger Report')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container {
        width: 100% !important;
    }
</style>
@endpush

@section('content')

<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Account Ledger Report</a>
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3">

        {{-- LEDGER SELECTOR --}}
        <div class="col-sm-4">
            <label class="form-label">Select Account Ledger</label>
            <select id="account_ledger_id" class="form-control select2">
                <option value="">-- Select Ledger --</option>
                @foreach ($ledgers as $ledger)
                <option value="{{ $ledger->id }}">{{ $ledger->ledger_name }}</option>
                @endforeach
            </select>
        </div>

        {{-- DATE RANGE FILTER --}}
        <div class="col-sm-2">
            <label class="form-label" for="date_period">Period</label>
            <select id="date_period" class="form-select">
                <option value="all" selected>All</option>
                <option value="today">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="last_7">Last 7 Days</option>
                <option value="last_30">Last 30 Days</option>
                <option value="this_month">This Month</option>
                <option value="last_month">Last Month</option>
                <option value="custom">Custom Range</option>
            </select>
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="from_date">From Date</label>
            <input type="text" id="from_date" class="form-control datepicker" value="{{ $financial_year_start }}">
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="to_date">To Date</label>
            <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
        </div>

    </div>

    {{-- RESULT --}}
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="ledger_report_table">
                        <p class="text-muted text-center mt-3">Select an Account Ledger to view the report.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: '-- Select Ledger --',
            allowClear: true
        });

        // Default dates: parse URL params or use current month
        var urlParams = new URLSearchParams(window.location.search);
        var paramLedger = urlParams.get('ledger_id') || '';
        var paramFrom   = urlParams.get('from_date') || '';
        var paramTo     = urlParams.get('to_date')   || '';

        var start = paramFrom ? moment(paramFrom, 'YYYY-MM-DD') : moment("{{ $financial_year_start }}", "DD-MM-YYYY");
        var end   = paramTo   ? moment(paramTo,   'YYYY-MM-DD') : moment();

        $('#from_date, #to_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('#from_date').data('daterangepicker').setStartDate(start);
        $('#from_date').data('daterangepicker').setEndDate(start);
        $('#from_date').val(start.format('DD-MM-YYYY'));

        $('#to_date').data('daterangepicker').setStartDate(end);
        $('#to_date').data('daterangepicker').setEndDate(end);
        $('#to_date').val(end.format('DD-MM-YYYY'));

        if (paramFrom || paramTo) {
            $('#date_period').val('custom');
        }

        function loadReport() {
            var ledgerId = $('#account_ledger_id').val();
            if (!ledgerId) {
                $('#ledger_report_table').html('<p class="text-muted text-center mt-3">Select an Account Ledger to view the report.</p>');
                return;
            }
            $.ajax({
                url: "{{ route('account-ledger-report.getData') }}",
                type: "GET",
                data: {
                    account_ledger_id: ledgerId,
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val()
                },
                success: function(res) {
                    $('#ledger_report_table').html(res);
                },
                error: function() {
                    $('#ledger_report_table').html('<p class="text-danger text-center mt-3">Error loading report.</p>');
                }
            });
        }

        $('#date_period').on('change', function() {
            var val = $(this).val();
            var start, end;
            
            switch(val) {
                case 'today':
                    start = moment();
                    end = moment();
                    break;
                case 'yesterday':
                    start = moment().subtract(1, 'days');
                    end = moment().subtract(1, 'days');
                    break;
                case 'last_7':
                    start = moment().subtract(6, 'days');
                    end = moment();
                    break;
                case 'last_30':
                    start = moment().subtract(29, 'days');
                    end = moment();
                    break;
                case 'this_month':
                    start = moment().startOf('month');
                    end = moment().endOf('month');
                    break;
                case 'last_month':
                    start = moment().subtract(1, 'month').startOf('month');
                    end = moment().subtract(1, 'month').endOf('month');
                    break;
                case 'all':
                    start = moment("{{ $financial_year_start }}", "DD-MM-YYYY");
                    end = moment();
                    break;
                default:
                    return;
            }
            
            $('#from_date').data('daterangepicker').setStartDate(start);
            $('#from_date').data('daterangepicker').setEndDate(start);
            $('#from_date').val(start.format('DD-MM-YYYY'));
            
            $('#to_date').data('daterangepicker').setStartDate(end);
            $('#to_date').data('daterangepicker').setEndDate(end);
            $('#to_date').val(end.format('DD-MM-YYYY'));
            
            loadReport();
        });

        $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            $('#date_period').val('custom');
            loadReport();
        });

        // Auto-load on filter change
        $('#account_ledger_id').on('change', function() { loadReport(); });
        $('#from_date, #to_date').on('change', function() { loadReport(); });

        // Auto-select + auto-load if ledger_id is in the URL (drilldown from Balance Sheet)
        if (paramLedger) {
            $('#account_ledger_id').val(paramLedger).trigger('change.select2');
            loadReport();
        }
    });
</script>
@endpush