<!-- Modal start -->
<div class="modal fade" id="exampleModalExtraLarge" tabindex="-1" aria-labelledby="exampleModalExtraLargeTitle" aria-hidden="true">
<div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalExtraLargeTitle">ADD DISPATCH FEE</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        
        <!-- Row start -->
        <div class="row gutters">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                
     <form id="deliverylocation">
         @csrf
                    <!-- Field wrapper start -->
                    <div class="field-wrapper-group">
                    <div class="field-wrapper">
                        <select class="select-multiple js-states" name="location_name" id="ddlViewByDelivery" title="Select Product Category" multiple="multiple" onchange="getpriceLocation()">
                            @foreach($location as $location)
                             <option value="{{$location->id}}">{{$location->location_name}}</option>
                             @endforeach
                        </select>
                        <div class="field-placeholder">Select Location</div>
                    </div>
                    <button type="button" class="input-icon-block btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Kindly Select the Delivery Location">
                        <i class="icon-info-with-circle m-0"></i>
                    </button>
                </div>
                <!-- Field wrapper end -->

            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                
                <!-- Field wrapper start -->
                <div class="field-wrapper">
                    <input class="form-control" name="location_price" type="text" id="location_p" readonly required>
                    <div class="field-placeholder">Cost <span class="text-danger">*</span></div>
                    <div class="form-text">
                        Price of Location
                    </div>
                </div>
                <!-- Field wrapper end -->

            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                
                <!-- Field wrapper start -->
                <div class="field-wrapper">
                    <button class="btn btn-outline-primary" type="submit"><i class="icon-directions_car" aria-hidden="true"></i> Add Fee</button>
                </div>
                <!-- Field wrapper end -->

            </div>
            </div>
            
        </div>
        <!-- Row end -->
     </form>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="closeDelivery" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
<!-- Modal end -->




<script>
    function getpriceLocation() {
        var e = document.getElementById("ddlViewByDelivery");

            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                document.getElementById('location_p').value = this.responseText
            }
            xhttp.open("GET", "/get-delivery-price/"+e.value);
            xhttp.send();
    }



    $("#deliverylocation").on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                type: "post",
                url: "{{route('locationPrice')}}",
                dataType: "json",
                data: $('#deliverylocation').serialize(),
                success: function(data){
                    $("#tabler").load(" #tabler");
                    document.getElementById('closeDelivery').click();
                    const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                    })

                    Toast.fire({
                    icon: 'success',
                    title: 'Delivery Fee Added Successfully'
                    })
                },
                error: function(data){
                    Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                     text: 'Something went wrong!',
                    footer: '<a href="">Why do I have this issue?</a>'
                    })
                }
            });
        });
</script>