@extends('layouts.master')
@section('content')
    @php
        $getAuthUserTypeId = getAuthUserTypeId();
    @endphp
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="row g-5 g-xl-10">
                <div class="col-xl-3">
                    <a href="{{ route('assets.loads.addnew') }}" class="card card-xl-stretch mb-xl-8 theme-dark-bg-body"
                        style="background-color: #F7D9E3">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column">
                                <div class="text-gray-900 fw-bold fs-3 mb-10">Wizard
                                </div>
                                <span class="text-gray-900 fw-bold fs-1x lh-5">Add Load By Wizard</span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3">
                    <a href="javascript:void(0)"  onclick="copyBox()" class="card card-xl-stretch mb-xl-8 theme-dark-bg-body"
                        style="background-color: #d6f4bb">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column">
                                <div class="text-gray-900 fw-bold fs-3 mb-10">Copy
                                </div>
                                <span class="text-gray-900 fw-bold fs-1x lh-5">Add Load By copy</span>
                            </div>
                        </div>
                    </a>
                </div>

                @if($getAuthUserTypeId == 'CARRIER')
                    <div class="col-xl-3">
                        <a href="{{ route('assets.loads.add_load_carrier') }}" class="card card-xl-stretch mb-xl-8 theme-dark-bg-body"
                            style="background-color: #CBF0F4">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex flex-column">
                                    <div class="text-gray-900 fw-bold fs-3 mb-10">Carrier
                                    </div>
                                    <span class="text-gray-900 fw-bold fs-1x lh-5">Add Load By Carrier</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endif

                @if($getAuthUserTypeId == 'DISPATCHER')
                    <div class="col-xl-3">
                        <a href="{{ route('assets.loads.add_load_dispatcher') }}" class="card card-xl-stretch mb-xl-8 theme-dark-bg-body"
                            style="background-color: #CBD4F4">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex flex-column">
                                    <div class="text-gray-900 fw-bold fs-3 mb-10">Dispatch
                                    </div>
                                    <span class="text-gray-900 fw-bold fs-1x lh-5">Add Load By Dispatcher</span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>


    <div class="modal fade" id="expenseModal" tabindex="-1" aria-labelledby="addTruckModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">                  
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="#" id="search_form">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        
                                        <div class="col-md-3">
                                        <label class="fs-4 form-label fw-bold text-gray-900">Search</label>
                                            <div class="position-relative">
                                                <i class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                                <input type="text" class="form-control form-control-solid ps-10" name="search"
                                                    value="" id="search" placeholder="Search">
                                            </div>
                                        </div>
                                        <div class="col-md-3"> 
                                             <label class="fs-4 form-label fw-bold text-gray-900">Pickup Date</label>
                                                <div class="d-flex">
                                                    <div id="range"
                                                        style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                        <i class="fa fa-calendar"></i>&nbsp;
                                                        <span></span> <i class="fa fa-caret-down"></i>
                                                    </div>
                                                    <input type="hidden" class="form-control sm" name="start_date" id="start_date">
                                                    <input type="hidden" class="form-control sm" name="end_date" id="end_date">
                                                    <input type="hidden" class="form-control sm" name="request_status" id="request_status" value="">
                                                </div>                                            
                                        </div>

                                        <div class="col-md-3"> 
                                            <label class="fs-4 form-label fw-bold text-gray-900">Delivery Date</label>
                                            <div class="d-flex">
                                                <div id="delivery_range"
                                                    style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                    <i class="fa fa-calendar"></i>&nbsp;
                                                    <span></span> <i class="fa fa-caret-down"></i>
                                                </div>
                                                <input type="hidden" class="form-control sm" name="delivery_start_date" id="delivery_start_date">
                                                <input type="hidden" class="form-control sm" name="delivery_end_date" id="delivery_end_date">
                                            </div>                                        
                                        </div>
                                        <div class="col-md-3"> 
                                            <div class="d-flex mb-5" style="margin: 0 auto; !important">
                                                <button type="button" id="submit" class="btn btn-primary btn-sm me-5 mt-8">Search</button>
                                                <button type="button" id="clear" class="btn btn-primary btn-sm me-5  mt-8">Clear</button>
                                            </div>                                  
                                        </div>
                                    </div>     
                                    
                            </div>
                        </form>

                                <div class="table-responsive p-5">
                                    {!! $dataTable->table() !!}
                                </div>
                                       
                         </div>
                     </div>
              </div>
    </div>
@endsection()
@section('script')
{!! $dataTable->scripts() !!}
<script>



        $(function() {
            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                defaultDate: '',
                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()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);

        });

        $(function() {

            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb2(start, end) {
                $('#delivery_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#delivery_start_date").val(start.format('YYYY-MM-DD'));
                $("#delivery_end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#delivery_range').daterangepicker({
                defaultDate: '',
                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()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb2);

            var request_start_date = '{{ !empty(request()->get('delivery_start_date')) ? request()->get('delivery_start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('delivery_end_date')) ? request()->get('delivery_end_date') : '' }}';
            if(request_start_date != '' && request_end_date != ''){
                $('#delivery_start_date').val(request_start_date);
                $('#delivery_end_date').val(request_end_date);
                var d_start = moment(request_start_date);
                var d_end = moment(request_end_date);
                cb2(d_start, d_end);

                // $('#delivery_range span').html(request_start_date.format('MMMM D, YYYY') + ' - ' + request_end_date.format('MMMM D, YYYY'));

            }

        });
        const table = $('#load-table');
        // var statusFromRequest = "{{ request('status') }}";
    

        function getTotalIncome(){
            $.ajax({
                type: "GET",
                url: "{{ route('assets.loads.totalincome') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    search : $("#search").val(),
                    status : '{{request()->get('status')}}',
                    start_date:$("#start_date").val(),
                    end_date:$("#end_date").val(),
                    delivery_start_date:$("#delivery_start_date").val(),
                    delivery_end_date:$("#delivery_end_date").val(),
                    delivery_end_date:$("#delivery_end_date").val(),
                    request_status:$("#request_status").val(),
                    invoice: '{{request()->get('invoice')}}',
                    readytoinvoice:'{{request()->get('readytoinvoice')}}',

                },
                success: function(response) {
                    var formattedTotalIncome = response.toLocaleString("en-US", { style: "currency", currency: "USD" });
                    // $("#total_income").html("<b>Total Income : $" + formattedTotalIncome + "</b>");
                },
                error: function(xhr, status, error) {
                    $("#success-message").hide();
                }
            });
        }


        function  copyBox(){
    $('#expenseModal').modal('show');
}

$(document).ready(function () {
    $("#submit").on("click", function (e) {
        e.preventDefault(); 
     
        table.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();
            data.delivery_start_date = $('#delivery_start_date').val();
            data.delivery_end_date = $('#delivery_end_date').val();
            data.request_status = '{{ !empty(request()->get('request_status')) ? request()->get('request_status') : '' }}'
            data.status = $('#status').val();
            data.pickupState = $('#pickupState').val();
            data.deliveryState = $('#deliveryState').val();
          
        });
        table.DataTable().ajax.reload();
    
    });

    $('#search').on('keyup', function () {
    
        table.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search').val();         
          
        });
        table.DataTable().ajax.reload();
});

    // Clear button functionality
    $("#clear").on("click", function () {
        $("#search_form")[0].reset();            
        $("#start_date, #end_date, #delivery_start_date, #delivery_end_date, #request_status").val("").trigger("change");
        $("#range span").text('');
        $("#delivery_range span").text('')
        table.DataTable().ajax.reload();  
    });
});

</script>
@endsection()