@extends('User/layout/app')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">
            @if (Auth::user()->user_role == 'Admin')
                <div class="row justify-content-end mb-4">
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectTLM"
                            name="selectTLM" onchange="getSLMDAta();">
                            <option value="" selected Default>Select TLM</option>
                            @foreach ($tlmList as $TLM)
                                <option value="{{ $TLM->position_code }}">{{ $TLM->employee_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSLM" name="selectSLM" onchange="getFLMDAta();">
                            <option value="" selected Default>Select SLM</option>
                        </select>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectFLM" name="selectFLM" >
                            <option value="" selected Default>Select PS</option>
                        </select>
                    </div>

                    {{-- <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSO" name="selectSO">
                            <option value="" selected Default>Select SO</option>
                        </select>
                    </div> --}}
                @else
                    <div class="col-lg-auto  col-md-6 col-sm-6 my-auto">
                        {{-- <input type="submit" name="getLocationButton" id="getLocationButton"> --}}
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectType" name="selectType">
                            <option value="" selected Default>Requested By </option>
                            <option value="self">Self</option>
                            @foreach ($ColleagueList as $list)
                                <option value="{{ $list->id }}">{{ $list->employee_name }}</option>
                            @endforeach
                        </select>
                    </div>
            @endif
           {{--  <div class="col-lg-auto  col-md-6 col-sm-6 my-auto">
                <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectStatus"
                    name="selectStatus">
                    <option value="" selected Default>Delivery Status </option>
                    <option value="Pending">Pending</option>
                    <option value="Ongoing">Ongoing</option>
                    <option value="Delivered">Completed</option>
                </select>
            </div> --}}


            <div class="col-lg-auto  col-md-auto col-sm-auto">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>
                    <input type="hidden" name="datefilter" id="datefilter">

                    <button type="submit" id="applyfilter"><a href="javascript:void(0)" class="btn btn-primary ms-2"><i
                                class="fa fa-search"></i></a></button>
                    <button type="submit" id="clearfilter"><a href="javascript:void(0)" class="btn btn-danger ms-2"><i
                                class="fa fa-times"></i></a></button>
                </div>
            </div>
            <!-- <div class="col-lg-auto  col-md-4 col-sm-4 my-auto">
                                                                                                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#show_dtails"><i class="fa-solid fa-plus me-2"></i>Add New Doctor</button>
                                                                                                                          </div> -->
        </div>

        <div class="row m-0">
            <div class="col-12 p-0">
                <div class="white_table">
                    <table id="tabs" class="table table-striped datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Requested By</th>
                                <th>Date Of Request</th>
                                <th>Next Purchase date</th>
                                <th>Doctor Name</th>
                                <th>Patient Name</th>
                                <th>Cartridges Purchase</th>
                                <th>Distance Travelled</th>
                                <th>Indication</th>
                                {{-- <th>Time Taken Per Delivery</th> --}}
                                {{-- <th>Uploaded Image</th> --}}
                                @if (Auth::user()->user_role == 'FLM')
                                    {{-- <th>Delivery Action</th> --}}
                                @endif
                                <th>Delivery Status</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>




    <div class="modal fade" id="delivery_status" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            {{ Form::open(['url' => '#', 'name' => 'InitiateDelivery', 'id' => 'InitiateDelivery', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalToggleLabel">Delivery Action</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body text-center">
                    <i class="fa-solid fa-circle-exclamation display-5 mb-3" style="color: #a75f49;"></i>
                    <h2 class=""> Are you sure ?</h2>
                    <h6 class=""> Do you want to initiate the delivery process for the cartridges?</h6>
                </div>
                <input type="hidden" id="initialRequestID" name="initialRequestID">
                <input type="hidden" id="latitude" name="latitude" value="0">
                <input type="hidden" id="longitude" name="longitude" value="0">

                <div class="modal-footer" style="    justify-content: center;">
                    <button type="submit" id="InitiateDeliverySubmit" class="btn btn-primary"> <i
                            class="fa-solid fa-check me-2"></i>
                        Submit</button>
                    <button type="button" class="btn btn-primary " data-bs-dismiss="modal"><i
                            class="fa-solid fa-ban  me-2"></i></i>Cancel</button>
                </div>
            </div>
            {{ Form::close() }}

        </div>
    </div>
    <div class="modal fade" id="photo_upload" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Upload File</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'EndDelivery', 'id' => 'EndDelivery', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                <div class="modal-body">
                    <div class="text-center">
                        <i class="fa-regular fa-image display-5 mb-3" style="color: #a75f49;"></i></>
                        <h4 class=" mb-3"> Kindly submit the required document for closing the delivery status.</h4>
                    </div>
                    <input type="hidden" id="finalRequestID" name="finalRequestID">
                    <input type="hidden" id="latitudeEnd" name="latitudeEnd" value="0">
                    <input type="hidden" id="longitudeEnd" name="longitudeEnd" value="0">
                    <div class="input-group">
                        {{-- <input type="file" class="form-control" id="delivery_file" aria-describedby="delivery_file"
                              aria-label="Upload"> --}}
                        <!-- <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04">Upload</button> -->
                    </div>
                    <div class="preview_img">
                        <div class="input_pre">
                            <input type="file" name="delivery_file" id="delivery_file" accept="image/*" onchange="previewImage()">
                            <span>Choose File</span>
                        </div>
                        <div class="img_pre">
                            <img src="{{ asset('/images/no-data.png') }}" id="delivery_file_prev">
                        </div>
                    </div>
                    <label id="delivery_file-error" class="error" for="delivery_file"></label>

                    {{-- <input type="hidden" id="delivery_file_log" name="delivery_file_log"> --}}

                    <div class="col-lg-12 col-sm-12 col-12 mt-3">
                        <div class="mb-3">
                            <label for="delivery_time_taken" class="form-label">Time Taken Per Delivery <span
                                    class="red_star">*</span></label>
                            <input type="number" class="form-control br_from" id="delivery_time_taken"
                                name="delivery_time_taken" placeholder="Enter Minutes">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button type="submit" id="EndDeliverySubmit" class="btn btn-primary"> <i
                            class="fa-solid fa-check me-2"></i>
                        Submit</button>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>

    {{-- <div id="uploadimageModal" class="modal " role="dialog" data-keyboard="false" data-backdrop="static"
        data-aos="fade-in">
        <div class="modal-dialog modal-dialog-centered modal-md ">
            <div class="modal-content ">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Crop Image</h1>
                    <div class="d-flex justify-content-end border-bottom-0 py-1 px-1">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                </div>

                <div class="modal-body">
                    <div>
                        <div class="col-md-12 text-center">
                            <div id="image_demo" class="responsive"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <div class="d-lg-flex d-md-flex justify-content-center">
                        <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="submit"><i
                                class="fas fa-undo" aria-hidden="true"></i></button>

                        <button class="btn btn-primary mt-3 crop_image p-3">Save</button>
                    </div>
                </div>

            </div>
        </div>
    </div> --}}
@endsection


@section('js')
    <script>
        function previewImage() {
            var input = document.getElementById('delivery_file');
            var preview = document.getElementById('delivery_file_prev');

            // Ensure that a file is selected
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                };

                // Read the selected file as a data URL
                reader.readAsDataURL(input.files[0]);
            }
        }
        $(document).ready(function() {
            $(document).ready(function() {
                $('#photo_upload').on('hidden.bs.modal', function() {
                    // Reset the form
                    $('#EndDelivery')[0].reset();

                    // Set all input fields to null
                    $('#delivery_time_taken').val(null);
                    // $('#delivery_file_log').val(null);
                    $('#delivery_file_prev').attr('src', "{{ asset('/images/no-data.png') }}");
                    var fileInput = document.getElementById('delivery_file');
                    fileInput.value = '';
                });
            });

            // boundaryWidth = 300;
            // boundaryHeight = 300;

            // viewportWidth = 200;
            // viewportHeight = 200;

            // $image_crop = $('#image_demo').croppie({
            //     viewport: {
            //         width: viewportWidth,
            //         height: viewportHeight,
            //         //type: 'square',
            //     },
            //     boundary: {
            //         height: boundaryHeight,
            //         width: boundaryWidth,
            //     },
            //     showZoomer: true,
            //     enableExif: true,
            //     enableOrientation: true
            // });

            // $('#delivery_file').on('change', function() {

            //     ext = this.value.split('.').pop();
            //     if (ext != 'png' && ext != 'jpg' && ext != 'jpeg')
            //         return false;

            //     var reader = new FileReader();
            //     reader.onload = function(event) {
            //         $image_crop.croppie('bind', {
            //             url: event.target.result
            //         }).then(function() {
            //             console.log('jQuery bind complete');
            //         });
            //     }
            //     reader.readAsDataURL(this.files[0]);
            //     $('#uploadimageModal').modal('show');
            //     var fileInput = document.getElementById('delivery_file');
            //     fileInput.value = '';
            // });

            // $('.imgRotate').on('click', function(ev) {
            //     $image_crop.croppie('rotate', parseInt($(this).data('rotate')));
            // });

            // $('.crop_image').click(function(event) {
            //     var croppieResultHeight = '300';
            //     var croppieResultWidth = '300';
            //     $image_crop.croppie('result', {
            //         type: 'canvas',
            //         // size: 'viewport'
            //         size: {
            //             height: croppieResultHeight,
            //             width: croppieResultWidth
            //         },
            //     }).then(function(response) {
            //         // $('body').append('<div class="loader"></div>');
            //         // $("#modelbtn").hide();
            //         // $("#preloader").addClass('loaded');
            //         $(".crop_image").html('Uploading.....');
            //         $(".crop_image").attr('disabled', true);
            //         $.ajax({
            //             url: "{{ route('UpdateCropImage') }}",
            //             type: "POST",
            //             data: {
            //                 "image": response,
            //                 '_token': '{{ csrf_token() }}'
            //             },
            //             success: function(data) {
            //                 $('#uploadimageModal').modal('hide');
            //                 $('#delivery_file_prev').attr('src',
            //                     "{{ asset('storage/Images') }}/" + data.imageName);
            //                 $("#delivery_file_log").val(data.imageName);
            //                 $('#delivery_file_log').valid();
            //                 // $("#modelbtn").show();
            //                 // $("#preloader").removeClass('loaded');

            //                 $(".crop_image").html('Save');
            //                 $(".crop_image").attr('disabled', false);
            //                 var fileInput = document.getElementById('delivery_file');
            //                 fileInput.value = '';
            //             }
            //         });
            //     })
            // });


            filterData();

            $('#applyfilter').click(function() {
                filterData();
            });

            $('#clearfilter').click(function() {
                window.location.reload();
            });

            function filterData() {
                var i = 1;
                var table = $('#tabs').DataTable({
                    scrollX: true,
                    destroy: true,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    autoWidth: false,
                    language: {
                        searchPlaceholder: "Search"
                    },
                    ajax: {
                        url: "{{ route('MyRequestPaginate') }}",
                        data: function(d) {
                            d._token = "{{ csrf_token() }}";
                            d.datefilter = $('#datefilter').val();
                            d.selectTLM = $('#selectTLM option:selected').val();
                            d.selectSLM = $('#selectSLM option:selected').val();
                            d.selectFLM = $('#selectFLM option:selected').val();
                            d.selectSO = $('#selectSO option:selected').val();
                            d.selectType = $('#selectType option:selected').val();
                           // d.selectStatus = $('#selectStatus option:selected').val();
                        },
                    },
                    "drawCallback": function(settings) {
                        new VenoBox({
                            selector: ".view_img",
                            numeration: true,
                            infinigall: true,
                            share: true,
                            spinner: 'plane'
                        });
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'delivery_type',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'date_of_purchase',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'next_purchase_date',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'doctor_name',
                            orderable: false,
                            searchable: true
                        },

                        {
                            data: 'patient_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'total_cartridges',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'distance_travelled',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'indication',
                            orderable: false,
                            searchable: true
                        },
                        // {
                        //     data: 'delivery_time_taken',
                        //     orderable: false,
                        //     searchable: true
                        // },
                        // {
                        //     data: 'delivery_file',
                        //     orderable: false,
                        //     searchable: false
                        // },
                        @if (Auth::user()->user_role == 'FLM')
                            // {
                            //     data: 'action',
                            //     orderable: false,
                            //     searchable: false
                            // },
                        @endif

                        {
                            data: 'delivery_status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'created_at',
                            orderable: false,
                            searchable: false

                        },

                    ],
                    columnDefs: [{
                        "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9,10,11], // Column to target
                        "mRender": function(data, type, full) {
                            if (data != null) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                    }, ],

                });
            };
        });

        function getSLMDAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectTLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectSLM').html('<option value="">Select SLM</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectSLM").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                    $('#selectFLM').html('<option value="">Select PS</option>');
                    $('#selectSO').html('<option value="">Select SO</option>');
                }
            })
        }

        function getFLMDAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectSLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectFLM').html('<option value="">Select PS</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectFLM").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                    $('#selectSO').html('<option value="">Select SO</option>');
                }
            })
        }

        function getSODAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectFLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectSO').html('<option value="">Select SO</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectSO").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                }
            })
        }
        // document.getElementById('getLocationButton').addEventListener('click', function() {
        //     if (navigator.geolocation) {
        //         navigator.geolocation.getCurrentPosition(function(position) {
        //             var latitude = position.coords.latitude;
        //             var longitude = position.coords.longitude;

        //             console.log('Latitude:', latitude);
        //             console.log('Longitude:', longitude);
        //         }, function(error) {
        //             console.error('Error getting location:', error.message);
        //         });
        //     } else {
        //         console.error('Geolocation is not supported by this browser.');
        //     }
        // });

        function refreshDataTable() {
            $('.table').DataTable().ajax.reload();
        }

        function finalRequestModel(finalRequestID) {
            $('#photo_upload').modal('show');
            $('#finalRequestID').val(finalRequestID);
            $("#EndDeliverySubmit").attr('disabled', true);
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    $("#latitudeEnd").val(latitude);
                    $("#longitudeEnd").val(longitude);
                }, function(error) {
                    console.error('Error getting location:', error.message);
                });
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
            $("#EndDeliverySubmit").attr('disabled', false);


        }

        function initialRequestModel(initialRequestID) {
            $('#delivery_status').modal('show');
            $('#initialRequestID').val(initialRequestID);
            $("#InitiateDeliverySubmit").attr('disabled', true);
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    $("#latitude").val(latitude);
                    $("#longitude").val(longitude);
                }, function(error) {
                    console.error('Error getting location:', error.message);
                });
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
            $("#InitiateDeliverySubmit").attr('disabled', false);


        }

        $('#EndDelivery').validate({
            ignore: ".ignore",
            rules: {
                finalRequestID: {
                    required: true,
                },
                latitudeEnd: {
                    required: true,
                },
                longitudeEnd: {
                    required: true,
                },
                delivery_file: {
                    required: true,
                },
                delivery_time_taken: {
                    required: true,
                },
            },
            messages: {

            },
            submitHandler: function(form) {
                $("#EndDeliverySubmit").attr('disabled', true);

                var formData = new FormData($("#EndDelivery")[0]);
                $.ajax({
                    url: "{{ route('EndDeliveryData') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#EndDeliverySubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            $('#photo_upload').modal('hide');
                            refreshDataTable();
                        } else {
                            // Error message
                            $("#EndDeliverySubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#EndDeliverySubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });

        $('#InitiateDelivery').validate({
            ignore: ".ignore",
            rules: {},
            messages: {},
            submitHandler: function(form) {
                $("#InitiateDeliverySubmit").attr('disabled', true);

                var formData = new FormData($("#InitiateDelivery")[0]);

                $.ajax({
                    url: "{{ route('InitiateDeliveryData') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#InitiateDeliverySubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            $('#delivery_status').modal('hide');
                            refreshDataTable();
                        } else {
                            // Error message
                            $("#InitiateDeliverySubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#InitiateDeliverySubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });

        $('#delivery_status').on('hidden.bs.modal', function() {
            // Reset the form
            $('#InitiateDelivery')[0].reset();
            var validator = $('#InitiateDelivery').validate();
            validator.resetForm();
        });
        $('#photo_upload').on('hidden.bs.modal', function() {
            // Reset the form
            $('#EndDelivery')[0].reset();
            var validator = $('#EndDelivery').validate();
            validator.resetForm();
        });
    </script>
@endsection