@extends('layout.app')
@section('title', 'Freight Submitted Bill 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 Submitted Bill 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-billing.create') }}" class="btn btn-sm btn-primary"><i
                    class="ri-add-circle-fill"></i> Create Bill</a>
        </div>
    </div>
</div>
<div class="app-body">
    <div class="row gx-3">
        <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">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>Invoice No.</th>
                                    <th>Party Name</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" style="text-align:right">Total:</th>
                                    <th id="grandTotal"></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'));

                $('#datatable').DataTable().draw();
            });

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

            $("#from_date, #to_date, #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-billing.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();
            }
        },
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false
            },
            {
                data: 'invoice_date',
                name: 'invoice_date'
            },
            {
                data: 'invoice_no',
                name: 'invoice_no'
            },
            {
                data: 'party_name',
                name: 'party_name'
            },
            {
                data: 'grand_total',
                name: 'grand_total'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ],
        drawCallback: function(settings) {
            var api = this.api();
            var total = api
                .column(4, {
                    page: 'current'
                }) // Column index for grand_total
                .data()
                .reduce(function(a, b) {
                    return parseFloat(a) + parseFloat(b);
                }, 0);

            $('#grandTotal').html(total.toFixed(2)); // Display total in tfoot
        }
    });

    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-billing') }}/' + 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