@extends('layout.app')

@section('title', 'Sales Register')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}" />
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}" />
@endpush

@section('content')

<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <i class="ri-home-8-line lh-1 pe-3 me-3 border-end"></i>
            <a href="{{ url('/') }}">Home</a>
        </li>
        <li class="breadcrumb-item text-primary" aria-current="page">
            <a href="javascript:void(0);">Sales Register</a>
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-3">
            <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 class="col-sm-5 text-end mt-4">
            <button type="button" class="btn btn-success" onclick="exportData()">
                <i class="ri-file-excel-2-line"></i> Export to Excel
            </button>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="sales_register_table" class="table table-bordered table-striped custom-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Particulars</th>
                                    <th>Voucher Type</th>
                                    <th>Voucher No.</th>
                                    <th>Invoice No.</th>
                                    <th>Taxable Value</th>
                                    <th>Gross Amount</th>
                                    <th>Sale Amount</th>
                                    @foreach($chargeHeaders as $header)
                                        <th>{{ $header }}</th>
                                    @endforeach
                                    @foreach($dynamicHeaders as $header)
                                        <th>{{ $header }}</th>
                                    @endforeach
                                    <th>Grand Total</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/moment.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>

<script>
    var table;

    // Helper to get URL parameters
    function getQueryParam(param) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    $(document).ready(function() {
        // Pre-fill dates from URL if they exist
        var fromDateParam = getQueryParam('from_date');
        var toDateParam = getQueryParam('to_date');
        
        if (fromDateParam) $('#from_date').val(fromDateParam);
        if (toDateParam) $('#to_date').val(toDateParam);

        $('#from_date, #to_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        }).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            reloadPageWithFilters();
        });

        $('#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':
                    window.location.href = "{{ route('reports.sales-register') }}";
                    return;
            }
            
            if(val !== 'custom' && val !== 'all') {
                $('#from_date').val(start.format('DD-MM-YYYY'));
                $('#to_date').val(end.format('DD-MM-YYYY'));
                reloadPageWithFilters();
            }
        });

        loadTable();
    });

    function reloadPageWithFilters() {
        var from = $('#from_date').val();
        var to = $('#to_date').val();
        var url = new URL("{{ route('reports.sales-register') }}");
        if (from && to) {
            url.searchParams.set('from_date', from);
            url.searchParams.set('to_date', to);
        }
        window.location.href = url.toString();
    }

    function loadTable() {
        if (table) {
            table.destroy();
        }

        var columns = [
            {data: 'voucher_date', name: 'voucher_date'},
            {data: 'particulars', name: 'particulars'},
            {data: 'voucher_type', name: 'voucher_type'},
            {data: 'voucher_no', name: 'voucher_no'},
            {data: 'invoice_no', name: 'invoice_no'},
            {data: 'taxable_value', name: 'taxable_value'},
            {data: 'gross_total', name: 'gross_total'},
            {data: 'sale_amount', name: 'sale_amount'},
        ];

        @foreach($chargeHeaders as $header)
            columns.push({data: '{{ $header }}', name: '{{ $header }}', defaultContent: '0'});
        @endforeach

        @foreach($dynamicHeaders as $header)
            columns.push({data: '{{ $header }}', name: '{{ $header }}', defaultContent: '0'});
        @endforeach

        columns.push({data: 'grand_total', name: 'grand_total'});

        table = $('#sales_register_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reports.sales-register.data') }}",
                data: function (d) {
                    d.from_date = $('#from_date').val();
                    d.to_date = $('#to_date').val();
                }
            },
            columns: columns,
            pageLength: 50
        });
    }

    function exportData() {
        var from = $('#from_date').val();
        var to = $('#to_date').val();
        window.location.href = "{{ route('reports.sales-register.export') }}?from_date=" + from + "&to_date=" + to;
    }
</script>
@endpush