@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' => "","unpaid"=>""],
])
    {{-- {{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/search'))
                            <a href="{{ url('admin/orders/unpaid') }}" 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/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>Amount</th>
                            {{-- {{-- <th>Date sold</th> --}}
                            <th>Country Code</th>
                            <th>ZipCode</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) }}<br>({{ $order->email }})</td>
                                <td>{{ $order->total_quantity }}</td>
                                <td>{{ $order->total_amount }}</td>
                                {{-- {{-- <td>$100</td> --}}
                                <td style="text-align: center">{{ $order->country_id }}</td>
                                <td>{{ $order->zipcode }}</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