@extends('layouts.app')


@section('content')
    @include('includes.bread_crumb_with_header', [
     'header' => 'Orders',
     'bread_crumbs' => ['Dashboard' => "","paid"=>""],
 ])
    <div class="card mb-5 mb-xl-8 m-8">
        <div class="card-title d-flex p-10">
            <form class="searchForm" method="POST">
                @csrf
                <div class="d-flex align-items-center position-relative">
                    <input type="text" name="search" data-kt-ecommerce-product-filter="search"
                           class="form-control form-control-solid w-300px ps-14 search-field" 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="seller_name">Seller Name</option>
                    </select>
                </div>
            </form>
            <span class="pr-5" style="margin-left:auto;gap:10px;display: flex">

                <form action="" class="d-flex gap-3 d-none custom-filter-form">
                    @csrf
                    <input type="date" name="startDate" class="form-control" required/>
                    <input type="date" name="endDate" class="form-control" required/>
                    <button class="btn btn-primary filter-custom-date-btn" type="submit"> Search</button>
                </form>

                <select name="date_range"
                        class="form-control form-control-solid form-select gap-5 float-right w-200px date-filter"
                        data-control="select2" data-hide-search="true">
                    <option value="all">All</option>
                    <option value="today">Today</option>
                    <option value="week">Week</option>
                    <option value="custom">Custom</option>
                </select>

            </span>

        </div>
        <div class="card-body py-3">
            <div class="table-responsive">
                <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>Total quantity</th>
                        <th>Total amount</th>
                        <th>Tracking id</th>
                    </tr>
                    </thead>
                    <tbody id="filtered_data" class="table-body">

                    @foreach ($orders as $order)

                        <tr>
                            <td><i class="bi bi-info-circle fs-1 order_details" id="{{ $order->id }}"></i></td>
                            <td>{{ $order->ebay_order_id }}</td>
                            <td>{{ $order->total_quantity }}</td>
                            <td>€{{ $order->total_amount }}</td>
                            <td>{{ $order->tracking_number }}</td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
                {{ $orders->links() }}
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        var modalId = 'modal';
        $(document).on('click', '.order_details', async function () {
            let orderId = $(this).attr('id');
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                let loadURL = `${baseUrl}/orders/orderDetails` + "/" + orderId;
                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).on("keyup", ".search-field", (async function () {
            try {
                let t = new HttpRequest("{{ url('orders/paid/search') }}", "POST");
                t.set_data_by_form_object($('.searchForm'));
                let response = await t.call();
                pushRows(response)
            } catch (t) {
                toastr.error(t)
            }
        }));

        $(document).on("change", ".product-filter", (async function () {
            try {
                let t = new HttpRequest("{{ url('orders/paid/search') }}", "POST");
                t.set_data_by_form_object($('.searchForm'));
                let response = await t.call();
                pushRows(response)
            } catch (t) {
                toastr.error(t)
            }
        }));

        $(document).on("change", ".date-filter", (async function () {
            if ($(this).val() == "custom") {
                $('.custom-filter-form').removeClass('d-none');
                $('.table-body').html("");
            } else {
                $('.custom-filter-form').addClass('d-none');
                try {
                    let filterType = $(this).val();
                    let t = new HttpRequest("{{ url('orders/paid/dateFilter') }}/" + filterType, "GET");
                    let response = await t.call();
                    pushRows(response)
                } catch (t) {
                    toastr.error(t)
                }
            }
        }));

        function pushRows(response) {
            console.log(response);
            let tableBody = $('.table-body');
            tableBody.html("");
            tableBody.append(`
                        <tr>
                            <td></td>
                            <td></td>
                            <td class="text-gray-400">Searching   <i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
                            <td></td>
                            <td></td>
                        </tr>
               `);
            setTimeout(function () {
                tableBody.html("");

                if (response.length == 0) {
                    tableBody.append(`
                        <tr>
                            <td></td>
                            <td></td>
                            <td>No Data Found</td>
                            <td></td>
                            <td></td>
                        </tr>
               `);
                }
                for (let i = 0; i < response.length; i++) {
                    tableBody.append(`
                        <tr>
                            <td><i class="bi bi-info-circle fs-1 order_details" id="${response[i].id}"></i></td>
                            <td>${response[i].ebay_order_id}</td>
                            <td>${response[i].total_quantity}</td>
                            <td>€${response[i].total_amount}</td>
                            <td>${response[i].tracking_number}</td>
                        </tr>
               `);
                }
            }, 3000)
        }

        $(document).on('submit','.custom-filter-form',(async function (e){
            e.preventDefault();
            try {
                let t = new HttpRequest("{{ url('orders/paid/dateFilter/custom') }}", "POST");
                t.set_data_by_form_object($(this));
                let response = await t.call();
                pushRows(response)
            } catch (t) {
                toastr.error(t)
            }
        }));


    </script>
@endpush