@extends('layout.app')
@section('title', 'Pending Freight - Selection & Calculation')
@push('header_script')
    <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);">Pending Freight </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.index') }}" class="btn btn-sm btn-primary"><i
                        class="ri-arrow-left-circle-fill"></i> Back</a>
            </div>
        </div>
    </div>
    <div class="app-body">
        <div class="card-body">
            <div class="row gx-3">
                <div class="col-sm-12">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row mt-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-md-2 col-12">
                                    <label class="form-label" for="party_id">Select Party</label>
                                    {!! Form::select('party_id', ['' => '--Select--'] + $party, old('party_id'), [
                                        'class' => 'form-control select2',
                                        'id' => 'party_id',

                                    ]) !!}
                                    <div class="text-danger">{{ $errors->first('party_id') }} </div>
                                </div>
                                <div class="col-sm-2">
                                    <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',
                                    ]) !!}
                                </div>
                                {{-- Submit --}}
                                <div class="col-sm-2 text-end mt-3">
                                    <button type="button" class="btn btn-warning" id="proceedInvoice"
                                        onclick="proceedToGenerateInvoice()">
                                        Proceed to Generate Invoice
                                    </button>
                                </div>
                            </div>
                            <div class="row" id="FreightDataWithoutInvoice"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer_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'));

                getFreightData();
            });

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

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

            getFreightData();
        });

        function getFreightData() {
            var daterange = $('#from_date').val() + ' - ' + $('#to_date').val();
            var party_id = $('#party_id').val();
            var vehicle_id = $('#vehicle_id').val();
            $.ajax({
                url: '{{ route('freight-billing.getFreightPendingData') }}',
                type: 'GET',
                data: {
                    'daterange': daterange,
                    'party_id': party_id,
                    'vehicle_id': vehicle_id,
                },
                success: function(response) {
                    $('#FreightDataWithoutInvoice').html(response);
                    $('.select2').select2();
                }
            });

        }
    </script>
@endpush