@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Orders</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">Order</li>
                </ol>
            </nav>
        </div>
        <!-- End Page Title -->
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <div class="input-group">
                        <input type="text" class="form-control" id="dateRangePicker">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <div class="input-group">
                        <input type="text" class="form-control" id="dateRangePickertwo">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <div class="input-group">

                        <div class="input-group-append">
                            <button id="applyButton" class="btn btn-primary"
                                data-class="bg-white">Apply</button>
                        </div>
                    </div>
                </div>



            </div>
            <script>
                $(document).ready(function() {
                    $('#dateRangePicker').datepicker({
                        format: 'yyyy-mm-dd',
                        todayHighlight: true,
                        autoclose: true,
                        clearBtn: true,
                        orientation: 'bottom'
                    });
                    $('#dateRangePickertwo').datepicker({
                        format: 'yyyy-mm-dd',
                        todayHighlight: true,
                        autoclose: true,
                        clearBtn: true,
                        orientation: 'bottom'
                    });
                });
                document.getElementById('applyButton').addEventListener('click', function() {
                    // Get the values of the input fields
                    var dateRangePickerValue = document.getElementById('dateRangePicker').value;
                    var dateRangePickertwoValue = document.getElementById('dateRangePickertwo').value;

                    // Perform AJAX request using jQuery
                    $.ajax({
                        url: "{{ route('american.plastic.admin.filter.order') }}",// Replace with the actual route in your Laravel application
                        method: 'GET',
                        data: {
                            startDate: dateRangePickerValue,
                            endDate: dateRangePickertwoValue,
                        },
                        success: function(data) {

                            console.log('Orders retrieved:', data);
                            var tableBody = document.querySelector('.table tbody');
                            tableBody.innerHTML = '';
                            // Loop through the order data and append rows to the table
                            data.forEach(function(order) {
                                var row = document.createElement('tr');
                                var formattedDate = new Date(order.created_at).toLocaleDateString('en-US');
                                var status=order.processing;
                                // Add order details to the row
                                row.innerHTML = `
                                <td>${order.order_id}</td>
                                <td>${order.userid}</td>
                                <td class="text-center">${order.quantity}</td>
                                <td>LKR&nbsp;${order.service_fee}</td>
                                <td class="text-center">LKR&nbsp;${order.total}</td>
                                <td class="text-center">${order.tracking}</td>
                                <td class="text-center">${formattedDate}</td>`;

                                // Append the row to the table body
                                tableBody.appendChild(row);
                            });
                            // You can update the UI or perform further actions with the retrieved orders.
                        },
                        error: function(error) {
                            console.error('Error retrieving orders:', error);
                        }
                    });
                });
                function downloadOrder(orderId) {
    // Add your logic to handle the download for the specified order ID
    console.log('Downloading order:', orderId);
    // Add code to trigger the download, e.g., open a new window or make another AJAX request
}
            </script>


            <div class="row my-4">
                <div class="col-lg-12 col-md-6 mb-md-0 mb-4">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="row">
                                <div class="col-lg-6 col-7">
                                    <h6>Orders</h6>
                                </div>
                            
                            </div>
                        </div>
                        <div class="card-body px-0 pb-2 p-4">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Order ID</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Buyer</th>
                                                <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Quantity</th>
                                                <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Service Fee</th>
                                             
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Total</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Tracking</th>
                                                <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Ordered at</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>

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

            </div>
        </div>
        <script>
               $(document).ready(function() {
                    $('#dateRangePicker').datepicker({
                        format: 'yyyy-mm-dd',
                        todayHighlight: true,
                        autoclose: true,
                        clearBtn: true,
                        orientation: 'bottom'
                    });
                    $('#dateRangePickertwo').datepicker({
                        format: 'yyyy-mm-dd',
                        todayHighlight: true,
                        autoclose: true,
                        clearBtn: true,
                        orientation: 'bottom'
                    });
                });
        </script>
    </main>
@endsection