@extends('layouts.app')


@push('css')
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        :focus {
            outline: 0px;
        }

        .quiz_title {
            font-size: 30px;
            font-weight: 700;
            color: #292d3f;
            text-align: center;
            margin-bottom: 50px;
        }

        .quiz_card_area {
            position: relative;
            margin-bottom: 30px;
        }

        .single_quiz_card {
            border: 1px solid #efefef;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            -khtml-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .quiz_card_title {
            padding: 10px;
            text-align: center;
            background-color: #d6d6d6;
        }

        .quiz_card_title h3 {
            font-size: 16px;
            font-weight: 400;
            color: #292d3f;
            margin-bottom: 0;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            -khtml-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .quiz_card_title h3 i {
            opacity: 0;
        }

        .quiz_card_icon {
            max-width: 100%;
            min-height: 135px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quiz_icon {
            width: 70px;
            height: 75px;
            position: relative;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: auto;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            -khtml-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .quiz_icon1 {
            background-image: url('https://img.icons8.com/ios-filled/32/000000/maxcdn.png');
        }

        .quiz_icon2 {
            background-image: url('https://img.icons8.com/ios-filled/48/000000/download-2.png');
        }


        .quiz_checkbox {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            cursor: pointer;
        }

        .quiz_checkbox:checked~.single_quiz_card {
            border: 1px solid #2575fc;
        }

        .quiz_checkbox:checked:hover~.single_quiz_card {
            border: 1px solid #2575fc;
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_title {
            background-color: #2575fc;
            color: #ffffff;
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_title h3 {
            color: #ffffff;
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_title h3 i {
            opacity: 1;
        }

        .quiz_checkbox:checked:hover~.quiz_card_title {
            border: 1px solid #2575fc;
        }

        /*Icon Selector*/

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_icon {
            color: #2575fc;
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_icon .quiz_icon1 {
            background-image: url('https://img.icons8.com/nolan/32/000000/maxcdn.png');
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_icon .quiz_icon2 {
            background-image: url('https://img.icons8.com/color/48/000000/download-2.png');
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_icon .quiz_icon3 {
            background-image: url('https://img.icons8.com/color/48/000000/cloudflare.png');
        }

        .quiz_checkbox:checked~.single_quiz_card .quiz_card_content .quiz_card_icon .quiz_icon4 {
            background-image: url('https://img.icons8.com/material-outlined/80/000000/download-2.png');
        }

        .quiz_card_icon {
            font-size: 50px;
            color: #000000;
        }

        .quiz_backBtn_progressBar {
            position: relative;
            margin-bottom: 60px;
        }

        .quiz_backBtn {
            background-color: transparent;
            border: 1px solid #d2d2d3;
            color: #8e8e8e;
            border-radius: 50%;
            position: absolute;
            top: -17px;
            left: 0px;
            width: 40px;
            height: 40px;
            text-align: center;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none !important;
        }

        .quiz_backBtn:hover {
            color: #a9559b;
            border: 1px solid #2575fc;
        }

        .quiz_backBtn_progressBar .progress {
            margin-left: 50px;
            margin-top: 50px;
            height: 6px;
        }

        .quiz_backBtn_progressBar .progress-bar {
            background-color: #2575fc;
        }

        .quiz_next {
            text-align: center;
            margin-top: 50px;
        }

        .quiz_continueBtn {
            max-width: 315px;
            background-color: #2575fc;
            color: #ffffff;
            font-size: 18px;
            border-radius: 20px;
            padding: 10px 125px;
            border: 0;
        }

        .row {
            justify-content: center;
        }
    </style>
@endpush
@section('content')
    @include('includes.bread_crumb_with_header', [
   'header' => 'Orders',
   'bread_crumbs' => ['Home' => "","dispatched"=>""],
])
    {{-- {{dd($orders)}} --}}
    <div class="card mb-5 mb-xl-8 m-8">
        <!--begin::Header-->
        <div class="card-title d-flex p-10">
            <!--begin::Search-->
            <form action="{{ route('order.search.unpaid') }}" method="POST">
                @csrf
                <div class="d-flex align-items-center position-relative">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                    <span class="svg-icon svg-icon-1 position-absolute ms-4">

                        @if(\Request::is('admin/orders/dispatch/search'))
                            <a href="{{ url('admin/orders/paid/dispatched') }}" class="border-0 text-gray-400 btn"
                               style="background: transparent;margin-left: -20px;">

                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-x-lg" viewBox="0 0 16 16">
                          <path
                              d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                        </svg>


                                </a>
                        @else
                            <button class="border-0 text-gray-400" style="background: transparent;" type="submit">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                       class="bi bi-search" viewBox="0 0 16 16">
                          <path
                              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>

                        </button>
                        @endif
                    </span>
                    <!--end::Svg Icon-->
                    <input type="text" name="search" data-kt-ecommerce-product-filter="search"
                        class="form-control form-control-solid w-200px ps-14" placeholder="Search" {{\Request::is('admin/orders/dispatch/search')? "value=".$searchText." "."disabled" :''}} required>
                    <select class="form-control form-control-solid form-select float-right w-200px product-filter"
                        data-control="select2" data-hide-search="true" name="searchType">
                        <option value="order_number" selected>Order Number</option>
                        <option value="customer_name" >Customer Name</option>
                        {{-- <option value="title" >Title</option> --}}
                    </select>
                </div>
            </form>
            <!--end::Search-->
            {{-- <form action="" id="buyer_filter" class="d-flex gap-5 w-100">
                <span class="pr-5">
                    <select name="filter_by" class="form-control form-select float-right w-200px" data-control="select2">
                        <option value="buyer_username">Buyer Username</option>
                        <option value="buyer_name" selected>Buyer Name</option>
                        <option value="order_number">Order Number</option>
                        <option value="sales_record_number">Sales Record Number</option>
                        <option value="item_title">Item Title</option>
                        <option value="item_id">Item Id</option>
                        <option value="custom_label_sku">Custom Label(SKU)</option>
                    </select>
                </span>
                <button type="submit" id="buyer_filter_submit">Filter</button>
            </form> --}}

            <span class="pr-5" style="margin-left:auto;gap:10%">
                <select name="date_range" class="form-control form-control-solid form-select gap-5 float-right w-200px" data-control="select2">
                    <option value="last_90_days">Last 90 Days</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="this_week">This week</option>
                    <option value="last_week">Last week</option>
                    <option value="this_month">This month</option>
                    <option value="last_month">Last month</option>
                    {{-- <option value="custom">Custom</option> --}}
                </select>
            </span>
            <button type="submit" id="date_filter_submit" style="background-color:#f5f8fa;border:none; border-radius: 0px 10px 10px 0px; width:100px;">Filter</button>

        </div>
        <!--end::Header-->
        <!--begin::Body-->
        <div class="card-body py-3">
            <!--begin::Table container-->
            <div class="table-responsive">
                <!--begin::Table-->
                {{-- @if ($orders->count() > 0) --}}
                <table id="kt_datatable_column_rendering" class="table table-striped table-row-bordered gy-5 gs-7">
                    <thead>
                        <tr class="fw-semibold fs-6 text-gray-400">
                            <th></th>
                            <th>Order Number</th>
                            <th>Customer Name</th>
                            <th>Qty</th>
                            <th>Sold for</th>
                            <th>Total</th>
                            {{-- {{-- <th>Date sold</th> --}}
                            <th>Country Code</th>
                            <th>ZipCode</th>
                            <th>Tracking Number</th>
                            <th>Label</th>
                            {{-- <th class="min-w-100px text-end">Actions</th> --}}
                        </tr>
                    </thead>
                    <tbody id="filtered_data">
                        @foreach ($orders as $order)
                            <tr>
                                <td><i class="bi bi-question-circle order_details" id="{{ $order->id }}"></i></td>
                                <td>{{ $order->ebay_order_id }}</td>
                                <td>{{ substr($order->name, 0, 50) }}</td>
                                <td>{{ $order->total_quantity }}</td>
                                <td>{{ $order->name }}<br>({{ $order->email }})</td>
                                <td>{{ $order->total_amount }}</td>
                                {{-- {{-- <td>$100</td> --}}
                                <td style="text-align: center">{{ $order->country_id }}</td>
                                <td>{{ $order->zipcode }}</td>
                                <td>AA123456789GB</td>
                                <td><a href="{{ asset('storage/label/order-53369-label.pdf') }}" download>Dowload Label</a>
                                {{-- <td class="text-end ">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-150px py-4"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3 dispatch">
                                            <a class="menu-link px-3 product-edit d-flex gap-5">

                                                <i class="bi bi-exclamation-circle text-danger"></i>

                                                Alert Seller</a>
                                        </div>
                                        <!--end::Menu item-->

                                    </div>
                                    <!--end::Menu-->
                                </td> --}}
                            </tr>
                        @endforeach

                    </tbody>
                </table>
                {{ $orders->links() }}
                {{-- @else
                    <p>No orders found</p>
                @endif --}}
                <!--end::Table-->
            </div>
            <!--end::Table container-->
        </div>
        <!--begin::Body-->
    </div>
@endsection
@push('script')
    <script>
        var modalId = 'modal';
        $(document).on('click', '.order_details', async function() {
            // debugger;\\
            let orderDetails = $(this).attr('id');
            // console.log(orderDetails);
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                // loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/admin/orders/unpaid` + "/" + orderDetails;
                console.log(loadURL);
                await loadModal(modalId, loadURL);
            } catch (err) {
                toast.error("Could not load add Order Details popup. (error_ref: Order Details)");
                console.log("Order Details", err);
            } finally {
                resetButton(btn, btnTitle);
            }

        });

        $(document).ready(function() {
            $('#date_filter_submit').click(function() {
                var dateRange = $('select[name=date_range]').val();
                //   alert(dateRange);
                $.ajax({
                    url: "{{ route('filter.data') }}",
                    type: "POST",
                    data: {
                        date_range: dateRange,
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.length == 0) {
                            var newRow = $("<tr>").append($("<td>").attr('colspan', 8).addClass(
                                'text-center').text('Data not found'));
                            $('#filtered_data').html(newRow);
                        } else {
                            // Display filtered data with pagination
                            var pageSize = 10; // number of records to be shown per page
                            var rowsHtml =
                                ""; // create variable to store HTML content of all rows
                            for (var i = 0; i < response.length; i++) {
                                var order = response[i];
                                var newRow = $("<tr>");
                                newRow.append($("<td>").html(
                                    `<i class="bi bi-question-circle order_details" id="${order.id}"></i>`
                                ));
                                newRow.append($("<td>").text(order.ebay_order_id));
                                var customer = order.customer[0];
                                newRow.append($("<td>").text(customer.name));
                                newRow.append($("<td>").text(order.total_quantity));
                                newRow.append($("<td>").html(customer.name + `<br />` + '(' +
                                    customer.email + ')'));
                                newRow.append($("<td>").text(order.total_amount));
                                newRow.append($("<td>").text(customer.country_code));
                                newRow.append($("<td>").text(customer.zipcode));
                                rowsHtml += newRow.prop(
                                    'outerHTML'
                                ); // add HTML content of current row to the rowsHtml variable
                            }
                            // append all rows to the "#filtered_data" element
                            $('#filtered_data').html(rowsHtml);

                            // add pagination to the table
                            var totalRows = response.length;
                            var totalPages = Math.ceil(totalRows / pageSize);
                            var paginationHtml = '<ul class="pagination">';
                            for (var j = 1; j <= totalPages; j++) {
                                paginationHtml +=
                                    '<li class="page-item"><a class="page-link" href="#">' + j +
                                    '</a></li>';
                            }
                            paginationHtml += '</ul>';
                            $('#pagination').html(paginationHtml);

                            // show the first page of records by default
                            $('#filtered_data tr:gt(0)').hide();
                            var startIndex = 0;
                            var endIndex = pageSize;
                            $('#filtered_data tr').slice(startIndex, endIndex).show();

                            // add click event listener to the pagination links
                            $('.page-link').click(function(event) {
                                event.preventDefault();
                                var pageNumber = parseInt($(this).text());
                                startIndex = (pageNumber - 1) * pageSize;
                                endIndex = startIndex + pageSize;
                                $('#filtered_data tr').hide();
                                $('#filtered_data tr').slice(startIndex, endIndex)
                                    .show();
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error
                        console.log(xhr.responseText);
                    }
                });
            });
        });
    </script>
@endpush