@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2 class="pro_duct_title">My Orders</h2>
                    </div>
                    <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>Employee Name</th>
                                        <th>Order ID</th>
                                        <th>Product Names</th>
                                        <th> Total costing</th>
                                        <th>Order Status</th>
                                        <th>Date And Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <tr>
                                        <td>01</td>
                                        <td>Jayesh </td>
                                        <td>E65895</td>
                                        <td>
                                            <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                                data-bs-target="#my_order"><i class="fa-solid fa-cart-plus"></i></button>
                                        </td>
                                        <td>
                                            <div class="coin_v">
                                                <img src="../assets/images/favicon.png" class="me-2" width="20px"> 150
                                            </div>
                                        </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>Jayesh </td>
                                        <td>E65895</td>
                                        <td>
                                            <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                                data-bs-target="#my_order"><i class="fa-solid fa-cart-plus"></i></button>
                                        </td>
                                        <td>
                                            <div class="coin_v">
                                                <img src="../assets/images/favicon.png" class="me-2" width="20px"> 150
                                            </div>
                                        </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>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->

    <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" class="m-0 p-0">
                        <!-- Product details will be populated here -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    {{-- <div class="modal fade" id="my_order" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content pb-5">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="login_module">
                        <h2>Product Names</h2>
                        <ul>
                            <!-- Product details will be appended here by JavaScript -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
@endsection
@section('js')
    <script>
        $('.datatable').DataTable({
            scrollX: true,
            language: {
                searchPlaceholder: "Search",
                paginate: {
                    previous: '<i class="fas fa-chevron-left"></i>',
                    next: '<i class="fas fa-chevron-right"></i>'
                }
            }
            // columnDefs: [
            //   { "width": "150px", "targets": [2,3] }
            // ]
        });

        @if (Auth::user())
            var carts = @json($carts);
            var orders = carts.map(function(cart) {
                return {
                    product_id: cart.product_id,
                    product_quantity: cart.quantity,
                    product_size: cart.size
                };
            });
            localStorage.setItem('orders', JSON.stringify(orders));

            var totalOrders = orders.length;
            $('#cart_items').html(totalOrders);
        @endif

        function getOrderDetails(id) {
            var buttonId = '#button_' + id;

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

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

            $.ajax({
                url: '{{ route('getOrderDetail') }}',
                type: 'POST',
                data: {
                    'order_id': id,
                    '_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 style="list-style: none;">' +
                                '<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 {}
                },
                error: function(jqXHR, textStatus, errorThrown) {},
                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('myOrderPaginate') }}",
                    data: function(d) {
                        _token: "{{ csrf_token() }}";
                    },
                },
                "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: 'employee_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'order_id',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'product_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_costing',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: true
                    },



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

            });

        }

        $(document).ready(function() {
            filterData();

            var orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.forEach(function(order, index) {
                var promise = $.ajax({
                    url: '/get-product-details',
                    method: 'POST',
                    data: {
                        product_id: order.product_id,
                        product_size: order.product_size,
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.error) {
                            orders = orders.filter(function(o) {
                                return !(o.product_id == order.product_id && o
                                    .product_size == order.product_size);
                            });
                            localStorage.setItem('orders', JSON.stringify(orders));
                            return;
                        }
                    },
                    error: function(xhr, status, error) {
                        orders = orders.filter(function(o) {
                            return !(o.product_id == order.product_id && o
                                .product_size == order.product_size);
                        });
                        localStorage.setItem('orders', JSON.stringify(orders));
                    }
                });
            });


        });
    </script>
@endsection