@extends('layouts.basic')

@section('styles')
    <style>

    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>Delivery Orders</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Delivery</li>
                        <li class="breadcrumb-item active">Delivery Orders</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content content-card">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <br>
                         <h5>Search</h5> 
                            <form id="filterForm">
                                <div class="row gy-2 gx-3 align-items-center filter-row">
                                    <div class="col-md-4">
                                        <label for="customer_id">Customer Name</label>
                                        <select name="customer_id" id="customer_id">
                                            <option value="">select customer name</option>
                                            @foreach ($cutomers as $customer)
                                                <option value="{{ $customer->id }}">{{ $customer->customer_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="user_id">Marketing manager</label>
                                        <select name="user_id" id="user_id">
                                            <option value="">select Marketing manager</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="date">Date Range</label>
                                        <input type="text" name="date" id="date" class="form-control">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center filter-btn-group">
                                            <button type="btn" class="btn filter-clear" id="clear"
                                                style="margin-top:1.5rem">clear</button>
                                            <button type="submit" class="btn btn-dark" id="filterData"
                                                style="margin-top:1.5rem">Filter</button>
                                            <button type="btn" class="btn btn-info" id="export"
                                                style="margin-top:1.5rem" data-href="{{ route('delivery.export-delivery') }}">Export</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="content content-card">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center table-top-div">
                                {{-- <div class="col-lg-12">
                        <div>
                           <h6 class="table-headings">Delivery Orders</h6>
                        </div>
                     </div> --}}
                            </div>
                            <br>
                            {{-- <h4 style="text-decoration:underline;">Delivery Orders-list</h4> --}}

                            <div class="table-responsive table-holder">
                                <table class="table table-bordered" id="deliverylist">
                                    <thead class="thead-dark">
                                        <tr class="table-secondary">
                                            <th scope="col">S.NO</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">DO-number</th>
                                            <th scope="col">Reference no</th>
                                            <th scope="col">Customer name</th>
                                            <th scope="col">Contact no</th>
                                            <th scope="col">Total</th>
                                            <th scope="col">Delivery Status</th>
                                            <th scope="col">Delivery Order Action</th>
                                            <th scope="col">Purchase Order Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>





                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>



        <!-- Modal -->

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header content-padding1 ">
                        <h5 class="modal-title" id="staticBackdropLabel">Upload Files</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="uploadForm" enctype="multipart/form-data">
                            <span style="color:red">Max* 2 MB</span>
                            <input type="file" class="form-control" id="file_upload" name="file_upload" required>
                            <input type="text" id="file_id" name="file_id" hidden>
                            <span id="file_error" style="color:red"></span>
                    </div>
                    <br>
                    <div class="modal-footer">
                        <br>
                        <button type="button" class="btn btn-secondary" id="cls" data-bs-dismiss="modal">Close</button>
                        <button type="reset" class="btn btn-info">Reset</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#customer_id').select2({
                placeholder: "Choose customer name",
                minimumInputLength: 1
            });

            $('#quotationNumber').select2({
                placeholder: "Choose Conversion number",
                minimumInputLength: 1
            });

            $('#user_id').select2({
                placeholder: "Choose Marketing manager",
                minimumInputLength: 1
            });
        });

        $(function() {


            $('#date').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
                maxDate: new Date(),
            });

            $("#date").attr("placeholder", "Choose date range");

            $('#date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY'));
            });

            $('#date').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

        });




        $(document).ready(function() {



            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            var table = $('#deliverylist').DataTable({
                processing: true,
                serverSide: true,
                columnDefs: [{
                    searchable: false,
                    orderable: false,
                    targets: 0,
                    render: function(data, type, row, meta) {
                        var currentPage = table.page.info().page;
                        var rowNumber = meta.row + 1 + (currentPage * table.page.info().length);
                        return rowNumber;
                    }
                }],
                ajax: {
                    url: "{{ route('delivery.index') }}",

                    data: function(filter) {

                        filter.customer_id = $("#customer_id").val();
                        filter.user_id = $("#user_id").val();
                        filter.date = $("#date").val();
                    }
                },

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'date',
                        name: 'date',

                    },
                    {
                        data: 'do_number',
                        name: 'do_number',

                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no',

                    },
                    {
                        data: 'customer_name',
                        name: 'customer_name',

                    },
                    {
                        data: 'mobile',
                        name: 'mobile',

                    },
                    {
                        data: 'total',
                        name: 'total',

                    },
                    {
                        data: 'delivery_status',
                        name: 'delivery_status',

                    },
                    {
                        data: 'actions1',
                        name: 'actions1',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions2',
                        name: 'actions2',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
            $('#filterForm').on('submit', function(e) {
                e.preventDefault();
                table.draw();
            });

            $('#clear').on('click', function(e) {
                e.preventDefault();
                $('#customer_id').val('').trigger('change');
                $('#user_id').val('').trigger('change');
                $('#quotationNumber').val('').trigger('change');
                $('#date').val('');
                $("#date").attr("placeholder", "Choose date range");

                table.search('').draw();
            });


        });




        $(document).ready(function() {
    $('#export').on('click', function(e) {
        var url = $(this).data('href');
        var customer_id = $('#customer_id').val();
        var user_id = $('#user_id').val();
        var date = $('#date').val();

        e.preventDefault();
       // Check if at least one field has a value
       if (customer_id === '' && user_id === '' && date === '') {

        iziToast.warning({
                    message: 'Please choose at least one input !',
                    position: 'topRight'
                });

        } else {
           
            var redirectUrl = url + '?customer_id=' + customer_id + '&user_id=' + user_id + '&date=' + date;
            window.location.href = redirectUrl;
        }
    });
});



        $(document).ready(function() {
            $('.delivery_status').change(function() {
                var selectedOption = $(this).find('option:selected');
                var quotationId = selectedOption.attr('data_id');
                //  console.log(quotationId);
                //   var quotationId =0 // Assuming you have the quotation ID available
                var selectedStatus = $(this).val();

                if (selectedStatus === 'delivered') {
                    $('.delivery_sta_' + quotationId).prop('disabled', true);
                }
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: 'update-delivery-status/' + quotationId,

                    method: 'POST',
                    data: {
                        delivery_status: selectedStatus
                    },
                    success: function(response) {
                        // Display success alert

                        iziToast.question({
                            timeout: false,
                            close: false,
                            overlay: true,
                            displayMode: 'once',
                            id: 'confirm',
                            zindex: 999,
                            title: 'Delivery Status',
                            message: 'Are you sure want to update the status?',
                            position: 'center',
                            buttons: [
                                ['<button><b>Yes</b></button>', function(instance,
                                    toast) {
                                    // Delete the record
                                    instance.hide({
                                        transitionOut: 'fadeOut'
                                    }, toast, 'button');

                                    iziToast.success({
                                        title: 'success',
                                        message: response.success,
                                    });


                                }, true],
                                ['<button>No</button>', function(instance, toast) {
                                    instance.hide({
                                        transitionOut: 'fadeOut'
                                    }, toast, 'button');
                                }]
                            ]
                        });


                    },
                    error: function(xhr) {
                        // Display error alert
                        iziToast.error({
                            title: 'error',
                            message: xhr.responseText,

                        });


                    }
                });
            });
        });





        $(document).ready(function() {
            $('#uploadForm').submit(function(e) {
                e.preventDefault(); // Prevent the default form submission

                var fileSize = $('#file_upload')[0].files[0].size; // Get file size in bytes
                var maxSize = 2 * 1024 * 1024; // 2 MB in bytes

                if (fileSize > maxSize) {
                    $('#file_error').text('File size exceeds the limit of 2 MB.');
                    return false; // Prevent form submission
                } else {
                    $('#file_error').text(''); // Clear error message
                }

                var formData = new FormData(this); // Create a new FormData object

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ route('file.upload') }}', // URL to the upload route
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            iziToast.success({
                                title: 'Success',
                                message: response.message,
                            });
                            $('#cls').trigger('click');
                            document.getElementById("uploadForm").reset();
                            // table.draw();
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        } else {
                            $('#file_error').html('Please select a file!');
                            // Handle other error scenarios if needed
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                    }
                });
            });

        });



        $(document).ready(function() {
            $('#staticBackdrop').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var dataId = button.data('id');
                $('#file_id').val(dataId);
            });
        });
    </script>
@endsection