@extends('layouts.app')
@section('content')
    @include('includes.bread_crumb_with_header', [
   'header' => 'Orders',
   'bread_crumbs' => ['Home' => "","dispatched"=>""],
])
    <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">
                    <!--end::Svg Icon-->
                    <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>Order Seller</th>
                        <th>Total quantity</th>
                        <th>Total amount</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody id="filtered_data" class="table-body">


                    @foreach ($orders as $order)
                        {{--                        {{ dd($order->orderLog) }}--}}
                        <tr>
                            <td class="d-flex flex-column gap-2"><i class="bi bi-info-circle fs-5 order_details"
                                                                    style="cursor: pointer;" id="{{ $order->id }}">
                                    ITEMS</i>
                                <i class="bi bi-exclamation-triangle mt-3 fs-5 order_errors text-danger"
                                   style="cursor: pointer;"> ERRORS</i></td>
                            <td>{{ $order->ebay_order_id }}</td>
                            <td>{{ $order->name }}<br/> ({{ $order->email }})</td>
                            <td>{{ $order->total_quantity }}</td>
                            <td>€{{ $order->total_amount }}</td>
                            <td>{{ $order->created_at }}</td>
                            <td>
                                <div class="dropdown show">
                                    <a class="btn btn-secondary dropdown-toggle h-40px" href="#" role="button"
                                       id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        Action
                                    </a>

                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                        <a class="dropdown-item dispatch-btn" data-id="{{ $order->id }}">Dispatch</a>
                                    </div>
                                </div>


                            </td>

                        </tr>
                        <tr class="error-table d-none">
                            <td style="width:100%;" colspan="7">
                                <a class="btn btn-danger close-error-btn" style="position: absolute; right:10px;"><i
                                        class="bi bi-x-lg"></i></a>
                                <table>
                                    <thead>
                                    <tr>
                                        <td style="width: 100%;"></td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($order->orderLog as $log)
                                        <tr>
                                            <td style="background-color: #ff6a6a; padding: 10px; color:white; text-align: left !important;">
                                                <i class="bi bi-exclamation-triangle fs-2 text-white m-3"></i>{{ json_decode($log['error_message'])->message }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                    @endforeach

                    </tbody>
                </table>
                {{ $orders->links() }}
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        let modalId = 'modal';
        let LabelUrl = "{{ asset('storage/labels') }}";


        $(document).on('click', '.order_details', async function () {
            let orderId = $(this).attr('id');
            try {
                let loadURL = `${baseUrl}/admin/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);
            }

        });


        $(document).on('click', '.dispatch-btn', async function () {
            let orderId = $(this).data('id');
            try {
                let loadURL = `${baseUrl}/admin/orders/orderDispatch` + "/" + orderId;
                console.log(loadURL);
                await loadModal(modalId, loadURL);
                $('select.service-type').select2({
                    dropdownParent: $('.modal'),
                });
            } catch (err) {
                toast.error("Could not load add Order Details popup. (error_ref: Order Details)");
                console.log("Order Details", err);
            }

        });


        $(document).on("submit", ".order-dispatch-modal-form", (async function (e) {
            let btn = $(".dispatch-order-btn");
            e.preventDefault();
            try {
                loadButton(btn);
                let t = new HttpRequest("{{ url('admin/orders/dispatch') }}", "POST");
                t.set_data_by_form_object($(this));
                let response = await t.call();
                $(".modal").modal("hide");
                toastr.success(response);
                location.reload()
            } catch (err) {
                console.log(err);
                $('.error-message-alert-box').removeClass('d-none');
                $('.error-message-alert').text(err);
                toastr.error(err)
            } finally {
                resetButton(btn, "Dispatch")
            }
        }))


        $(document).on('click', '.order_errors', function () {
            $(this).closest('tr').next().removeClass('d-none');
        });
        $(document).on('click', '.close-error-btn', function () {
            $(this).closest('tr').addClass('d-none')
        });

        $(document).on('click', '.view-pdf', async function () {
            let label = $(this).data('label');
            try {
                let loadURL = `${baseUrl}/admin/orders/viewLabel` + "/" + label;
                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);
            }
        });


        $(document).on("keyup", ".search-field", (async function () {
            try {
                let t = new HttpRequest("{{ url('admin/orders/awaiting_dispatch/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('admin/orders/awaiting_dispatch/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('admin/orders/awaiting_dispatch/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></td>
                            <td class="text-gray-400">Searching   <i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
               `);
            setTimeout(function () {
                tableBody.html("");

                if (response.length == 0) {
                    tableBody.append(`
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>No Data Found</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
               `);
                }
                for (let i = 0; i < response.length; i++) {
                    // console.log(response[i].order_log);
                    tableBody.append(`
                        <tr>

  <td class="d-flex flex-column gap-2"><i class="bi bi-info-circle fs-5 order_details"
                                                                    style="cursor: pointer;" id="${response[i].id}">
                                    ITEMS</i>
                                <i class="bi bi-exclamation-triangle mt-3 fs-5 order_errors text-danger"
                                   style="cursor: pointer;"> ERRORS</i></td>

                            <td>${response[i].ebay_order_id}</td>
                            <td>${response[i].name}<br/> (${response[i].email})</td>
                            <td>${response[i].total_quantity}</td>
                            <td>€${response[i].total_amount}</td>
                            <td>${response[i].created_at.slice(0, 19).replace("T", "   ")}</td>
                            <td>
                                <div class="dropdown show">
                                    <a class="btn btn-secondary dropdown-toggle h-40px" href="#" role="button"
                                       id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        Action
                                    </a>

                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                        <a class="dropdown-item"  data-id="">Dispatch</a>
                                    </div>
                                </div>


                            </td>

                        </tr>
         <tr class="error-table d-none">
                            <td style="width:100%;" colspan="7">
                                <a class="btn btn-danger close-error-btn" style="position: absolute; right:10px;"><i
                                        class="bi bi-x-lg"></i></a>
                                <table>
                                    <thead>
                                    <tr>
                                        <td style="width: 100%;"></td>
                                    </tr>
                                    </thead>
                                    <tbody class="error-messages-body">



                    </tbody>
                </table>
            </td>
        </tr>
`);

                    for (let j = 0; j < response[i].order_log.length; j++) {

                        $('.error-messages-body').append(`
                              <tr>
                        <td style="background-color: #ff6a6a; padding: 10px; color:white; text-align: left !important;">
                            <i class="bi bi-exclamation-triangle fs-2 text-white m-3"></i>${JSON.parse(response[i].order_log[j].error_message).message}
                    </td>
                </tr>
                        `);

                    }

                }
            }, 3000)
        }

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