@extends('layout.app')
@section('title', 'Freight Commission')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.cs') }}s">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        /* Fix header alignment issue */
        div.dataTables_scrollHead table {
            margin-bottom: 0 !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);">Freight Commission</a>
            </li>
        </ol>
    </div>

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

            <!-- Filters -->
            <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 class="col-sm-3">
                <label class="form-label">Vehicle No.</label>
                {!! Form::select('vehicle_id', ['' => '--Select--'] + $vehicle, null, [
                    'class' => 'form-control select2',
                    'id' => 'vehicle_id',
                ]) !!}
            </div>

            <div class="col-sm-3">
                <label class="form-label">Party</label>
                {!! Form::select('party_id', ['' => '--Select--'] + $party, null, [
                    'class' => 'form-control select2',
                    'id' => 'party_id',
                ]) !!}
            </div>
            <div class="col-sm-3">
                <label class="form-label">Status</label>
                <select id="status_filter" class="form-control select2">
                    <option value="">--Select--</option>
                    <option value="Pending">Pending</option>
                    <option value="Done">Done</option>
                </select>
            </div>

            <!-- Table -->
            <div class="col-sm-12 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                    <tr>
                                        <th>S.no</th>
                                        <th>GR No</th>
                                        <th>Date</th>
                                        <th>Truck No</th>
                                        <th>Party Name</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>Freight Amount</th>
                                        <th>Commission %</th>
                                        <th>Commission Amount</th>
                                        <th>Amount After Commission</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th style="text-align:right">Total:</th>
                                        <th id="totalFreightAmount" style="text-align:right"></th>
                                        <th></th>
                                        <th id="totalCommissionAmount" style="text-align:right"></th>
                                        <th id="totalAmountAfterCommission" style="text-align:right"></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('footer_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 src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#from_date, #to_date').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            $('#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'));

                table.draw();
            });

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

            $("#from_date, #to_date, #vehicle_id, #party_id, #status_filter").on('change', function() {
                table.draw();
            });
        });

        var table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            paging: true,
            ajax: {
                url: '{{ route('freight-commission.getData') }}',
                data: function(d) {
                    d.startdate = moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                    d.enddate = moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                    d.vehicle_id = $('#vehicle_id').val();
                    d.party_id = $('#party_id').val();
                    d.status = $('#status_filter').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'lr_no',
                    name: 'lr_no'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'vehicle_no',
                    name: 'vehicle_no'
                },
                {
                    data: 'party_name',
                    name: 'party_name'
                },
                {
                    data: 'from_location',
                    name: 'from_location'
                },
                {
                    data: 'to_location',
                    name: 'to_location'
                },
                {
                    data: 'freight_amount',
                    name: 'freight_amount'
                },
                {
                    data: 'commission_percent',
                    name: 'commission_percent'
                },
                {
                    data: 'commission_amount',
                    name: 'commission_amount'
                },
                {
                    data: 'net_total',
                    name: 'net_total'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            drawCallback: function() {
                recalcFooterTotals();
            }
        });

        function recalcFooterTotals() {
            let api = $('#datatable').DataTable();

            let totalFreight = api
                .column(7, {
                    page: 'current'
                })
                .data()
                .reduce((a, b) => {
                    if (b) {
                        let valStr = String(b).replace(/<[^>]*>/g, '').replace(/,/g, '');
                        return a + (parseFloat(valStr) || 0);
                    }
                    return a;
                }, 0);

            let totalCommission = api
                .column(9, {
                    page: 'current'
                })
                .data()
                .reduce((a, b) => {
                    if (b) {
                        let matches = String(b).match(/data-id="(\d+)"/);
                        let id = matches ? matches[1] : null;
                        let inputEl = $('.commission_amount[data-id="' + id + '"]');
                        let val = 0;
                        if (inputEl.length > 0) {
                            val = parseFloat(inputEl.val()) || 0;
                        } else {
                            let valMatch = String(b).match(/value="([^"]*)"/);
                            val = valMatch ? (parseFloat(valMatch[1]) || 0) : 0;
                        }
                        return a + val;
                    }
                    return a;
                }, 0);

            let totalAmountAfter = api
                .column(10, {
                    page: 'current'
                })
                .data()
                .reduce((a, b) => {
                    if (b) {
                        let matches = String(b).match(/data-id="(\d+)"/);
                        let id = matches ? matches[1] : null;
                        let inputEl = $('.net_after_commission[data-id="' + id + '"]');
                        let val = 0;
                        if (inputEl.length > 0) {
                            val = parseFloat(inputEl.val()) || 0;
                        } else {
                            let valMatch = String(b).match(/value="([^"]*)"/);
                            val = valMatch ? (parseFloat(valMatch[1]) || 0) : 0;
                        }
                        return a + val;
                    }
                    return a;
                }, 0);

            function fmt(val) {
                return parseFloat(val || 0).toLocaleString('en-IN', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            $('#totalFreightAmount').html('₹ ' + fmt(totalFreight));
            $('#totalCommissionAmount').html('₹ ' + fmt(totalCommission));
            $('#totalAmountAfterCommission').html('₹ ' + fmt(totalAmountAfter));
        }

        function updateNetTotal(rowId) {
            let freight = parseFloat($('.freight_amount[data-id="' + rowId + '"]').text().replace(/,/g, '')) || 0;
            let commission = parseFloat($('.commission_amount[data-id="' + rowId + '"]').val()) || 0;
            let amountAfterCommission = (freight - commission).toFixed(2);

            $('.net_total[data-id="' + rowId + '"]').text(parseFloat(amountAfterCommission).toLocaleString('en-IN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }));
            $('.net_after_commission[data-id="' + rowId + '"]').val(amountAfterCommission);
            recalcFooterTotals();
        }

        $(document).on('focus', '.commission_percent, .commission_amount', function() {
            if ($(this).val() == 0 || $(this).val() == '0.00') {
                $(this).val('');
            }
        });

        $(document).on('input', '.commission_percent', function() {
            let rowId = $(this).data('id');
            let val = $(this).val();
            if (val === '') {
                $('.commission_amount[data-id="' + rowId + '"]').val('');
                updateNetTotal(rowId);
                return;
            }
            let percent = parseFloat(val) || 0;
            let freight = parseFloat($('.freight_amount[data-id="' + rowId + '"]').text().replace(/,/g, '')) || 0;
            let commission = (freight * percent / 100).toFixed(2);

            $('.commission_amount[data-id="' + rowId + '"]').val(commission);
            updateNetTotal(rowId);
        });

        $(document).on('input', '.commission_amount', function() {
            let rowId = $(this).data('id');
            let val = $(this).val();
            if (val === '') {
                $('.commission_percent[data-id="' + rowId + '"]').val('');
                updateNetTotal(rowId);
                return;
            }
            let commission = parseFloat(val) || 0;
            let freight = parseFloat($('.freight_amount[data-id="' + rowId + '"]').text().replace(/,/g, '')) || 0;
            if (freight > 0) {
                let percent = ((commission / freight) * 100).toFixed(2);
                $('.commission_percent[data-id="' + rowId + '"]').val(percent);
            } else {
                $('.commission_percent[data-id="' + rowId + '"]').val(0);
            }
            updateNetTotal(rowId);
        });


        $(document).on('click', '.edit-commission', function() {
            let id = $(this).data('id');
            $('.commission_percent[data-id="' + id + '"]').removeAttr('readonly');
            $('.commission_amount[data-id="' + id + '"]').removeAttr('readonly');
            $(this).removeClass('btn-warning edit-commission')
                .addClass('btn-success update-commission')
                .text('Update');
        });

        $(document).on('click', '.save-single, .update-commission', function() {
            let id = $(this).data('id');
            let isUpdate = $(this).hasClass('update-commission');

            let freight = parseFloat($('.freight_amount[data-id="' + id + '"]').text().replace(/,/g, '')) || 0;
            let commission = parseFloat($('.commission_amount[data-id="' + id + '"]').val()) || 0;

            if (commission > freight) {
                swal("Error", "Commission Amount cannot exceed Freight Amount.", "error");
                return;
            }

            $.ajax({
                url: '{{ route('freight-commission.store') }}',
                type: 'POST',
                data: {
                    freight_id: id,
                    commission_percent: $('.commission_percent[data-id="' + id + '"]').val() || 0,
                    commission_amount: $('.commission_amount[data-id="' + id + '"]').val() || 0,
                    net_after_commission: $('.net_after_commission[data-id="' + id + '"]').val() || 0,
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if (res.success) {
                        swal("Success", isUpdate ? "Commission updated successfully!" :
                            "Commission saved successfully!", "success");
                        table.ajax.reload(null, false);
                    } else {
                        swal("Error", res.error || "Something went wrong", "error");
                    }
                }
            });
        });
    </script>
@endpush