@extends('layout.app')
@section('title', 'Freight Entry List')
@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') }}">
@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 Entry List</a>
            </li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1 day-sorting">
                <a href="{{ route('freight-entry.create') }}" class="btn btn-sm btn-primary"><i
                        class="ri-add-circle-fill"></i> Add</a>
            </div>
        </div>
    </div>
    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-3">
                <label class="form-label" for="daterange">Filter by Daterange</label>
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="ri-calendar-2-line"></i>
                    </span>
                    <input type="text" id="daterange" value="" name="daterange"
                        class="form-control custom-daterange">
                </div>
            </div>

            <div class="col-sm-3">
                <label class="form-label">Filter by Vehicle No.</label>
                {!! Form::select('vehicle_id', ['' => '--Select--'] + $vehicle, old('vehicle_id'), [
                    'class' => 'form-control select2',
                    'id' => 'vehicle_id',
                    'required',
                ]) !!}
            </div>
            <div class="col-sm-3">
                <label class="form-label">Filter by Party</label>
                {!! Form::select('party_id', ['' => '--Select--'] + $party, old('party_id'), [
                    'class' => 'form-control select2',
                    'id' => 'party_id',
                    'required',
                ]) !!}
            </div>
            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card-body">
                        <!-- Table starts -->
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                    <tr>
                                        <th>S.no.</th>
                                        <th>Date</th>
                                        <th>Bilty/GR No.</th>
                                        <th>Vehicle No.</th>
                                        <th>Consignor/Transporter</th>
                                        <th>Consignee</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>Weight</th>

                                        <th>Amount</th>
                                        <th>Freight Paid By</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="8" style="text-align:right">Total Weight:</th>
                                        <th id="totalWeight"></th>
                                        <th style="text-align:right">Total Amount:</th>
                                        <th id="totalAmount"></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>
        // Custom Date Range
        var start = moment().subtract(29, "days");
        var end = moment();

        function cb(start, end) {
            $(".custom-daterange span").html(
                start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY")
            );
        }
        $(".custom-daterange").daterangepicker({
                opens: "right",
                startDate: start,
                endDate: end,
                locale: {
                    format: "DD-MM-YYYY" // <--- Important!
                },
                ranges: {
                    Today: [moment(), moment()],
                    Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
                    "Last 7 Days": [moment().subtract(6, "days"), moment()],
                    "Last 30 Days": [moment().subtract(29, "days"), moment()],
                    "Last Month": [
                        moment().subtract(1, "month").startOf("month"),
                        moment().subtract(1, "month").endOf("month"),
                    ],
                },
            },
            cb
        );
        cb(start, end);

        $("#daterange, #vehicle_id, #party_id").on('change', function() {
            $('#datatable').DataTable().draw(false);
        });

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('freight-entry.getData') }}',
                data: function(d) {
                    let dr = $('#daterange').val();

                    if (dr) {
                        let dates = dr.split(" - ");
                        let start = moment(dates[0], "DD/MM/YYYY").format("YYYY-MM-DD");
                        let end = moment(dates[1], "DD/MM/YYYY").format("YYYY-MM-DD");
                        d.startdate = start;
                        d.enddate = end;
                    }

                    d.vehicle_id = $('#vehicle_id').val();
                    d.party_id = $('#party_id').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'lr_no',
                    name: 'lr_no'
                },
                {
                    data: 'vehicle_no',
                    name: 'vehicle_no'
                },
                {
                    data: 'consignor_name',
                    name: 'consignor_name'
                },
                {
                    data: 'consignee_name',
                    name: 'consignee_name'
                },
                {
                    data: 'from_location',
                    name: 'from_location'
                },
                {
                    data: 'to_location',
                    name: 'to_location'
                },
                {
                    data: 'weight_mt',
                    name: 'weight_mt'
                },
                {
                    data: 'net_total',
                    name: 'net_total'
                },
                {
                    data: 'paid_by',
                    name: 'paid_by'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            drawCallback: function() {
                var api = this.api();

                // Calculate total weight
                var totalWeight = api
                    .column(8, {
                        page: 'current'
                    }) // Column index for weight_mt
                    .data()
                    .reduce((a, b) => {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                // Calculate total amount
                var totalAmount = api
                    .column(9, {
                        page: 'current'
                    }) // Column index for net_total
                    .data()
                    .reduce((a, b) => {
                        return parseFloat(a) + parseFloat(b);
                    }, 0);

                // Display the totals in the footer
                $('#totalWeight').html(totalWeight);
                $('#totalAmount').html(totalAmount.toFixed(2));
            }
        });

        function deleteIt(id) {
            swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this data!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, I am sure!',
                    cancelButtonText: "No, cancel it!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    cancelButtonClass: 'btn-default btn-md waves-effect',
                    confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
                },
                function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: '{{ url('freight-entry') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function() {
                                $("#datatable").DataTable().draw(false);
                            }
                        });
                        swal("Deleted!", "Data has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }

                });
        }
    </script>
@endpush