@extends('layouts.app')

@section('title', 'Commission Reports')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col d-flex justify-content-between align-items-center">
                    <h2 class="page-title">
                        Commission Reports
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body p-0 overflow-x-hidden">
                    <div class="col-sm-12 col-md-12 mt-3 align-items-end border-top pt-3" id="customFilters"
                        style="display:none;">
                        <div class="row row-cards">
                            <div class="col-md">
                                <label for="startDate" class="mb-2">Start Date</label>
                                <div class="input-icon">
                                    <input type="text" class="form-control form-control startDate" id="startDate"
                                        autocomplete="off" value="{{ $startOfMonthFormatted }}" />
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                                            <path d="M16 3v4" />
                                            <path d="M8 3v4" />
                                            <path d="M4 11h16" />
                                            <path d="M11 15h1" />
                                            <path d="M12 15v3" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md">
                                <label for="endDate" class="mb-2">End Date</label>
                                <div class="input-icon">
                                    <input type="text" class="form-control form-control" id="endDate"
                                        autocomplete="off" value="{{ $endOfMonthFormatted }}" />
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                                            <path d="M16 3v4" />
                                            <path d="M8 3v4" />
                                            <path d="M4 11h16" />
                                            <path d="M11 15h1" />
                                            <path d="M12 15v3" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md">
                                <label for="adminFilter" class="mb-2">Admin</label>
                                <select id="adminFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($admins as $key => $value)
                                        <option value="{{ $key }}">{{ $value }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-auto d-flex align-items-end">
                                <button type="button" id="resetFilters" class="btn btn-outline-secondary w-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="20" height="20"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                                        <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                                    </svg>
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="table-default" class="dataTableContainer table-responsive">
                        <table class="table card-table table-vcenter" id="reports-commission-table">
                            <thead>
                                <tr>
                                    <th class="w-1 text-left"
                                        style="margin-top: 8px; margin-bottom:8px; min-width: 70px !important;">Date</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Total Bookings
                                    </th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Base Cost</th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Superadmin Commission</th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Admin Commission</th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Razorpay Commission</th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Total Amount</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    <th></th>
                                    <th>Total:</th>
                                    {{-- <th><strong><span id="bookingTotal">0.00</span></strong></th> --}}
                                    <th><strong>₹<span id="baseCostTotal">0.00</span></strong></th>
                                    <th><strong>₹<span id="superadminCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="adminCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="razorpayCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="totalAmountTotal">0.00</span></strong></th>
                                </tr>
                                <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    <th></th>
                                    <th>Gross Total:</th>
                                    {{-- <th><strong><span id="allBookingTotal">0.00</span></strong></th> --}}
                                    <th><strong>₹<span id="allBaseCostTotal">0.00</span></strong></th>
                                    <th><strong>₹<span id="allSuperadminCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="allAdminCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="allRazorpayCommissionAmount">0.00</span></strong></th>
                                    <th><strong>₹<span id="allTotalAmountTotal">0.00</span></strong></th>
                                </tr>
                            </tfoot>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="reports-commission-table_processing" class="dataTables_processing" style="display:none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let table;
        $(document).ready(function() {
            const defaultStartDate = @json($startOfMonthFormatted);
            const defaultEndDate = @json($endOfMonthFormatted);
            let startPicker, endPicker;

            startPicker = new Litepicker({
                element: document.getElementById('startDate'),
                format: 'DD MMM YYYY',
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
                setup: (picker) => {
                    picker.on('selected', (date1) => {
                        const selectedDate = date1.format('YYYY-MM-DD');

                        // Set minDate for endPicker (if needed)
                        if (endPicker) {
                            endPicker.setOptions({
                                minDate: selectedDate
                            });
                        }

                        // Set the default endDate (you mentioned you want it passed automatically)
                        document.getElementById('endDate').value = defaultEndDate;

                        // Trigger a single API call
                        table.ajax.reload();
                    });
                }
            });

            endPicker = new Litepicker({
                element: document.getElementById('endDate'),
                format: 'DD MMM YYYY',
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
                setup: (picker) => {
                    picker.on('selected', (date1) => {
                        const selectedDate = date1.format('YYYY-MM-DD');

                        // Optionally set maxDate for startDate to prevent future dates
                        if (startPicker) {
                            startPicker.setOptions({
                                maxDate: selectedDate
                            });
                        }

                        // Reload only if user manually changes end date
                        table.ajax.reload();
                    });
                }
            });

            table = $('#reports-commission-table').DataTable({
                ajax: {
                    url: '{{ route('reports.commission.data') }}',
                    type: 'GET',
                    data: function(d) {
                        d.startDate = $('#startDate').val();
                        d.endDate = $('#endDate').val();
                        d.admin_id = $('#adminFilter').val();
                    },
                    dataSrc: function(json) {
                        // Update footer total
                        $('#baseCostTotal').html(
                            parseFloat(json.base_cost_total || 0).toFixed(2)
                        );
                        $('#adminCommissionAmount').html(
                            parseFloat(json.admin_commission_amount || 0).toFixed(2)
                        );
                        $('#superadminCommissionAmount').html(
                            parseFloat(json.superadmin_commission_amount || 0).toFixed(2)
                        );
                        $('#razorpayCommissionAmount').html(
                            parseFloat(json.razorpay_commission_amount_total || 0).toFixed(2)
                        );
                        $('#totalAmountTotal').html(
                            parseFloat(json.total_amount_total || 0).toFixed(2)
                        );
                        return json.data;
                    }
                },
                columns: [{
                        data: 'booking_date',
                        name: 'booking_date',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_bookings',
                        name: 'total_bookings',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'base_cost',
                        name: 'base_cost',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'superadmin_commission_total',
                        name: 'superadmin_commission_total',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'admin_commission_total',
                        name: 'admin_commission_total',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'razorpay_commission_total',
                        name: 'razorpay_commission_total',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount',
                        orderable: false,
                        searchable: true
                    },
                ],
                // pageLength: 1,
                stateSave: true,
                processing: true,
                serverSide: false,
                scroller: true,
                responsive: true,
                scrollCollapse: true,
                language: {
                    "paginate": {
                        "previous": '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>',
                        "next": '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>'
                    }
                },
                oLanguage: {
                    sSearch: "Search"
                },
                aoColumnDefs: [{
                    // bSortable: false,
                    // aTargets: [0, 1, 2]
                }],
                stateLoadParams: function(settings, data) {
                    if (data.length) delete data.length;
                    if (data.start) delete data.start;
                    if (data.search) delete data.search;
                    if (data.order) delete data.order;
                },
                fnDrawCallback: function() {
                    var totalRecord = this.fnSettings().fnRecordsTotal();
                    if (totalRecord > 0) {
                        $("#reports-commission-table tbody tr td:nth-child(2)").addClass(
                            "text-left ps-3");
                        $("#reports-commission-table tbody tr td:nth-child(3)").addClass(
                            "text-left ps-3");
                        $("#reports-commission-table tbody tr td:nth-child(4)").addClass(
                            "text-left ps-3");
                        iniTooltip();
                    }
                },
                initComplete: function() {
                    // Move the filters into the DataTables control area
                    $('#customFilters').insertAfter(
                        '#reports-commission-table_wrapper div.row:first > div:last ').show();
                },
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();
                    @if (Auth::user()->role_id == 1)
                        // var bookingTotalIndex = 1;
                        var baseCostIndex = 2;
                        var superAdminCommissionIndex = 3;
                        var adminCommissionIndex = 4;
                        var razorpayCommissionIndex = 5;
                        var totalBookingAmountIndex = 6;
                    @elseif (Auth::user()->role_id == 2)
                        // var bookingTotalIndex = 1;
                        var baseCostIndex = 2;
                        var superAdminCommissionIndex = 3;
                        var adminCommissionIndex = 3;
                        var razorpayCommissionIndex = 4;
                        var franchiseEarningIndex = 5;
                        var totalBookingAmountIndex = 6;
                    @else
                        // var bookingTotalIndex = 1;
                        var baseCostIndex = 2;
                        var superAdminCommissionIndex = 3;
                        var adminCommissionIndex = 3;
                        var razorpayCommissionIndex = 4;
                        var franchiseEarningIndex = 5;
                        var totalBookingAmountIndex = 6;
                    @endif
                    // column indices

                    // helper to parse numbers from strings
                    var intVal = function(i) {
                        if (typeof i === 'string') {
                            return parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0;
                        }
                        return typeof i === 'number' ? i : 0;
                    };

                    // helper to calculate sum for a column
                    var sumColumn = function(colIndex, pageOnly = false) {
                        return api
                            .column(colIndex, pageOnly ? { page: 'current', search: 'applied' } : { search: 'applied' })
                            .data()
                            .reduce((a, b) => intVal(a) + intVal(b), 0);
                    };

                    // ---------- If there are NO records matching current filters, set all totals to 0 ----------
                    var visibleRowCount = api.rows({
                        search: 'applied'
                    }).count(); // reliable count
                    if (!visibleRowCount || visibleRowCount === 0) {
                        // page totals (currency use formatINR, booking/other numeric use plain 0)
                        $('#baseCostTotal').html(formatINR(0));
                        $('#superadminCommissionAmount').html(formatINR(0));
                        $('#adminCommissionAmount').html(formatINR(0));
                        $('#razorpayCommissionAmount').html(formatINR(0));
                        $('#bookingAmountTotal').html(formatINR(0));
                        $('#totalAmountTotal').html(formatINR(0));
                        $('#profitLossAmountTotal').html(formatINR(0));

                        // grand totals
                        $("#allBaseCostTotal").html(formatINR(0));
                        $("#allSuperadminCommissionAmount").html(formatINR(0));
                        $("#allAdminCommissionAmount").html(formatINR(0));
                        $("#allRazorpayCommissionAmount").html(formatINR(0));
                        $("#allBookingAmountTotal").html(formatINR(0));
                        $("#allTotalAmountTotal").html(formatINR(0));
                        $("#allProfitLossAmountTotal").html(formatINR(0));

                        // If you have non-currency totals (like booking counts) show plain 0
                        $('#bookingTotal').text(0);
                        $('#allBookingTotal').text(0);

                        return; // nothing else to do
                    }

                    // ---------- PAGE TOTALS ----------
                    // $('#bookingTotal').html(sumColumn(bookingTotalIndex,
                    //     true)); // <-- plain number, no ₹
                    $('#baseCostTotal').html(formatINR(sumColumn(baseCostIndex, true)));
                    $('#superadminCommissionAmount').html(formatINR(sumColumn(superAdminCommissionIndex,
                        true)));
                    $('#adminCommissionAmount').html(formatINR(sumColumn(adminCommissionIndex, true)));
                    $('#razorpayCommissionAmount').html(formatINR(sumColumn(razorpayCommissionIndex,
                        true)));
                    $('#totalAmountTotal').html(formatINR(sumColumn(totalBookingAmountIndex, true)));

                    // ---------- GRAND TOTALS ----------
                    // $('#allBookingTotal').html(sumColumn(bookingTotalIndex)); // <-- plain number
                    $('#allBaseCostTotal').html(formatINR(sumColumn(baseCostIndex)));
                    $('#allSuperadminCommissionAmount').html(formatINR(sumColumn(
                        superAdminCommissionIndex)));
                    $('#allAdminCommissionAmount').html(formatINR(sumColumn(adminCommissionIndex)));
                    $('#allRazorpayCommissionAmount').html(formatINR(sumColumn(
                        razorpayCommissionIndex)));
                    $('#allTotalAmountTotal').html(formatINR(sumColumn(totalBookingAmountIndex)));
                },
                dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + // top row: length + search
                    "<'row'<'col-sm-12'tr>>" + // table
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>", // bottom row: info + pagination
                order: []
            });
            $('#reports-commission-table_wrapper div.row:nth-child(1)').addClass('mx-2 my-3 text-muted');
            $('#reports-commission-table_wrapper').addClass('custom-table-scroll');
            $('#reports-commission-table_wrapper div.row:nth-child(2)').addClass('dt-row border-top');
            //$('#reports-commission-table_wrapper div.row:nth-child(2) .col-sm-12').addClass('table-responsive');
            $('#reports-commission-table_wrapper div.row:nth-child(3)').addClass(
                'card-footer d-flex align-items-center border-top text-muted bg-white');
            $('.dataTables_filter label').addClass('col-md-auto text-center search-field mt-md-0 mt-3 ');
            $('.dataTables_length label').addClass('align-items-center d-flex gap-2');

            $('#adminFilter').change(function() {
                table.ajax.reload();
            });

            $('#resetFilters').on('click', function() {
                resetFilters();
            });

            function formatINR(x) {
                x = parseFloat(x).toFixed(2);
                var lastThree = x.substring(x.length - 6);
                var otherNumbers = x.substring(0, x.length - 6);
                if (otherNumbers != '')
                    lastThree = ',' + lastThree;
                var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
                return res;
            }

            function resetFilters() {
                // Reset select input
                startPicker = new Litepicker({
                    element: document.getElementById('startDate'),
                    format: 'DD MMM YYYY',
                    startDate: defaultStartDate, // 👈 set default date
                    buttonText: {
                        previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" 
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M15 6l-6 6l6 6" /></svg>`,
                        nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" 
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M9 6l6 6l-6 6" /></svg>`,
                    },
                    setup: (picker) => {
                        picker.on('selected', (date1) => {
                            const selectedDate = date1.format('YYYY-MM-DD');

                            if (endPicker) {
                                endPicker.setOptions({
                                    minDate: selectedDate
                                });
                            }

                            document.getElementById('endDate').value = defaultEndDate;
                            table.ajax.reload();
                        });
                    }
                });

                // Reinitialize endPicker if you want
                endPicker = new Litepicker({
                    element: document.getElementById('endDate'),
                    format: 'DD MMM YYYY',
                    startDate: defaultEndDate
                });
                $('#adminFilter').val('');
                table.search('').draw();
                window.location.reload();
                // table.ajax.reload();
            }
        });
    </script>
@endsection