@extends('layout.app')
@section('title','Create Freight Bill')
@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);">Create Freight Bill</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">
                            {!! Form::open(['route' => ['freight-billing.store'], 'onsubmit'=>'BtnSubmit.disabled = true','class'=>'row g-3 needs-validation',  'method' => 'post', 'autocomplete'=>'off','files'=>true]) !!}
                            <div class="row mt-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-md-3 col-12">
                                    <label class="form-label" for="party_id">Select Party<span
                                            class="text-danger">*</span></label>
                                    {!! Form::select('party_id', [''=>'--Select--',]+$party, old('party_id'), ['class'=>'form-control select2','id'=>'party_id','required']) !!}
                                    <div class="text-danger">{{$errors->first('party_id')}} </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']) !!}
                                </div>
                            </div>
                            <div class="row" id="FreightDataWithoutInvoice"></div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer_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("D MMM, YYYY") + " - " + end.format("D MMM, YYYY")
            );
        }

        $(".custom-daterange").daterangepicker(
            {
                opens: "right",
                startDate: start,
                endDate: end,
                locale: {
                    format: "DD-MM-YYYY"   // <-- Correct format
                },
                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 () {
            getFreightData();
        });

        $(document).ready(function () {
            getFreightData();
        });

        function getFreightData() {
            var daterange = $('#daterange').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