@extends('admin/app/layout')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <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">
                                                                            <option selected Default>Select User</option>
                                                                            <option value="1">User 1</option>
                                                                            <option value="2">User 2</option>
                                                                            <option value="3">User 3</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">
                                                                            <option selected Default>Select Doctor</option>
                                                                            <option value="1">Doctor 1</option>
                                                                            <option value="2">Doctor 2</option>
                                                                            <option value="3">Doctor 3</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">
                                                                            <option selected Default>Select Speciality</option>
                                                                            <option value="1">Speciality 1</option>
                                                                            <option value="2">Speciality 2</option>
                                                                            <option value="3">Speciality 3</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">
                                                                            <option selected Default>Select State</option>
                                                                            <option value="1">Gujrat</option>
                                                                            <option value="2">Mumbai</option>
                                                                            <option value="3">Delhi</option>
                                                                          </select>
                                                                        </div> -->


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

                    <button id="applyfilter" class="btn btn-primary ms-2"><i class="fa fa-search"></i></button>
                    <button id="clearfilter" class="btn btn-danger ms-2"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <!-- <div class="col-lg-auto  col-md-auto col-sm-auto 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 class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 text-center">
                <button type="button" id="ExportProductData" class="btn btn-light"> <img
                        src="{{ asset('admin-assets/images/excel.png') }}" class="me-2">
                    Export</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" id="table_1" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Order ID</th>
                                <th>Employee Name</th>
                                <th>Employee Code</th>
                                <th>Employee Card No</th>
                                <th>Total Price</th>
                                <th>Products Details</th>
                                <th>Address</th>
                                <th>Mobile No.</th>
                                <th>Status</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td>01</td>
                                <td>9878254 </td>
                                <td>Ajay </td>
                                <td>XUT9879</td>
                                <td>
                                    <div class="card_number">
                                        <i class="fa-regular fa-credit-card me-2"></i> 9879 9879 8789 9877
                                    </div>
                                </td>
                                <td>
                                    <span class="badge text-bg-success">15,000/-</span>
                                </td>
                                <td>Portable device for connecting to a telecommunications network in order </td>
                                <td>92654 Erwin Fords, Euclid, Louisiana - 27561, Micronesia</td>
                                <td>99250 99250</td>
                                <td>
                                    <div class="timer new_pending">
                                        <i class="fa-regular fa-clock me-2"></i> Pending
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0">
                                        <span class="d-flex justify-content-center align-items-center"><i
                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                        <span class="d-flex justify-content-center align-items-center time_span"><i
                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>9878254 </td>
                                <td>Ajay </td>
                                <td>XUT9879</td>
                                <td>
                                    <div class="card_number">
                                        <i class="fa-regular fa-credit-card me-2"></i> 9879 9879 8789 9877
                                    </div>
                                </td>
                                <td>
                                    <span class="badge text-bg-success">15,000/-</span>
                                </td>
                                <td>Portable device for connecting to a telecommunications network in order </td>
                                <td>92654 Erwin Fords, Euclid, Louisiana - 27561, Micronesia</td>
                                <td>99250 99250</td>
                                <td>
                                    <div class="d-flex">
                                        <div class="checker new_checker">
                                            <i class="fa-regular fa-circle-check me-2"></i> Completed
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0">
                                        <span class="d-flex justify-content-center align-items-center"><i
                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                        <span class="d-flex justify-content-center align-items-center time_span"><i
                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                    </p>
                                </td>
                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Product Details</h5>
                    <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">
                    <ul id="productList">
                        <!-- Product details will be populated here -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $('#applyfilter').click(function() {
            filterData();
        });

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

        $('#ExportProductData').on('click', function() {
            // var select_user = $('#select_user').val();
            var datefilter = $('#datefilter').val();
            var url = "{{ route('downloadOrderData') }}" + "?datefilter=" + datefilter;
            window.location.replace(url);
        });

        function status(id) {
            $.ajax({
                url: "{{ route('updateOrderStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");
                        filterData()
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function getOrderDetails(orderId) {
            var buttonId = '#getOrderDetailsButton_' + (orderId);

            $(buttonId).attr('disabled', true);

            $('#productList').empty();

            $.ajax({
                url: "{{ route('getOrderDetailAdmin') }}",
                type: 'POST',
                data: {
                    'order_id': orderId,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.products.length > 0) {
                        var ulElement = $('<ul></ul>');

                        response.products.forEach(function(product) {
                            var imageUrl = product.image ? "{{ asset('storage/product-images/') }}" +
                                '/' + product.image : "{{ asset('assets/images/pro.png') }}";
                            var listItem = '<li>' +
                                '<div class="checkout_product">' +
                                '<div class="left">' +
                                '<div class="check_img">' +
                                '<img src="' + imageUrl + '">' +
                                '</div>' +
                                '<div class="check_count"></div>' +
                                '</div>' +
                                '<div class="right">' +
                                '<h4>' + product.product_name + '</h4>' +
                                '<span><img src="{{ asset('assets/images/coin.png') }}"> 105</span>' +
                                '<p><b>Size :</b> ' + product.size + ' (' + product.sku_code + ')</p>' +
                                '<p><b>Qty :</b> ' + product.quantity + '</p>' +
                                '</div>' +
                                '</div>' +
                                '</li>';

                            ulElement.append(listItem);
                        });

                        $('#productList').append(ulElement);
                        $('#orderModal').modal('show'); // Show modal after data is loaded
                    } else {
                    }
                },
                complete: function() {
                    $(buttonId).attr('disabled', false);
                }
            });
        }







        function filterData() {
            var i = 1;
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search"
                },
                ajax: {
                    url: "{{ route('orderDetailPaginate') }}",
                    data: function(d) {
                        _token: "{{ csrf_token() }}";
                        d.datefilter = $('#datefilter').val();
                    },
                },
                "drawCallback": function(settings) {
                    // new VenoBox({
                    //     selector: ".vbox-item",
                    //     numeration: true,
                    //     infinigall: true,
                    //     share: true,
                    //     spinner: 'plane'
                    // });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'order_id',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'employee_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'employee_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'card_number',
                        orderable: false,
                        searchable: true
                    },

                    {
                        data: 'total_costing',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'product_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'employee_address',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'employee_number',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: true
                    },


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

            });

        }


        $(document).ready(function() {
            filterData();
        });
    </script>
@endsection