@extends($activeTemplate.'layouts.master')
        @section('content')
            <div class="col-xl-9 col-lg-12 p-4" style="background: white">
                @include('admin.components.tabs.manual_order_my_requests')

                <div class="row">

                    @foreach($requests as $manualOrder)

                        <div class="my-3 col-md-6 col-xl-4">
                            <div class="card text-black">
                                <div style="position:relative;">
                                    <img
                                        src="{{ getImage(getFilePath('productThumbnail').'/'.@$manualOrder->order->products[0]->thumbnail)}}"
                                        alt="Image" class="card-img-top" style="width:100%;">
                                    @if($manualOrder->items[0]->status==1)
                                    <div class="d-flex justify-content-between total font-weight-bold mt-2  "  style="position: absolute ; top: 10px;left: 10px" >
                                        <div data-countdown="{{$manualOrder->items[0]->deadline*1000}}" class="p-0 m-auto"></div>
                                    </div>
                                    @endif
                                </div>

                                <div class="card-body">
                                    <div class="text-center">
                                        <h5 class="card-title">{{$manualOrder->order->products[0]->name}}</h5>
                                        <p class="text-muted mb-4"> {{$manualOrder->order->products[0]->category->name}}</p>
                                    </div>


                                    <div class="d-flex justify-content-between total font-weight-bold mt-2">
                                        <span>Quantity</span><span>{{$manualOrder->order->products[0]->pivot->product_quantity}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between total font-weight-bold mt-2">
                                        <span>Total</span><span>${{$manualOrder->final_price}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-muted  mt-4">
                                        <span>Created At : </span>
                                        <span>{{$manualOrder->created_at}}</span>
                                    </div>

                                    <div class="d-flex justify-content-between total font-weight-bold mt-2">
                                        @if($manualOrder->status==2)

                                            <a href="{{ route('user.manualOrder.complete',$manualOrder->id) }}"  class="btn btn--primary btn--base  w-100 py-2 ">
                                            @lang('Complete Request')
                                        </a>
                                        @else
                                            <a href="{{ route('user.manualOrder.complete',$manualOrder->id) }}"  class="btn btn--primary btn--base  w-100 py-2 ">
                                                @lang('View')
                                            </a>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>

                    @endforeach


                </div>
            </div>

        @endsection


        @push('style')
            <style>

                #loadingSpinnerWrapper {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: none;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 9999;
                    width: 100%;
                    height: 100vh;
                }


                #loadingSpinner {
                    position: relative;
                    width: 60px;
                    height: 60px;
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #3498db;
                    border-radius: 50%;
                    animation: spin 2s linear infinite;
                    z-index: 999999;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }


                @keyframes spin {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }

                #spinnerPercentage {
                    position: absolute;
                    top: 52%;
                    left: 51%;
                    font-size: 14px;
                    color: white;
                }
            </style>
        @endpush
        @push('script')
            <script src="/assets/count-down/dist/jquery.countdown.js"></script>
            <script>
                $('[data-countdown]').each(function() {
                    var $this = $(this), finalDate = $(this).data('countdown');
                    $this.countdown(finalDate, function(event) {
                        $this.html(event.strftime('<span class="btn btn-info py-2  px-3"  >%H</span> : <span class="btn btn-info py-2  px-3">%M</span> : <span class="btn btn-info py-2  px-3"> %S </span>'));
                    });
                });
            </script>
            <script>
                $('form').submit(function (e) {

                    e.preventDefault();

                    var formData = new FormData(this);


                    var loadingSpinnerWrapper = $('#loadingSpinnerWrapper');
                    var loadingSpinner = $('#loadingSpinner');
                    var spinnerPercentage = $('#spinnerPercentage');

                    loadingSpinnerWrapper.fadeIn();
                    loadingSpinner.css('opacity', '1');

                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function (event) {
                        if (event.lengthComputable) {
                            var progress = Math.round((event.loaded / event.total) * 100);
                            spinnerPercentage.text(progress + '%');
                        }
                    });

                    xhr.open("POST", "{{route('admin.manualOrder.accept-request')}}");

                    // Success
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            var response = JSON.parse(xhr.responseText);
                            if (response.hasOwnProperty('message')) {
                                Toast.fire({
                                    icon: 'success',
                                    title: response.message
                                });
                            }

                            loadingSpinnerWrapper.fadeOut();

                        } else if (xhr.status === 422) {

                            loadingSpinnerWrapper.fadeOut();
                            spinnerPercentage.text('0%').fadeOut();

                            var response = JSON.parse(xhr.responseText);
                            if (response.hasOwnProperty('errors')) {
                                var errors = response.errors;
                                var errorMessage = '';

                                Object.keys(errors).forEach(function (key) {
                                    errorMessage = errors[key][0];
                                });

                                Toast.fire({
                                    icon: 'error',
                                    title: errorMessage
                                });
                            }
                        } else if (xhr.status === 403) {

                            loadingSpinnerWrapper.fadeOut();
                            spinnerPercentage.text('0%').fadeOut();

                            var response = JSON.parse(xhr.responseText);
                            if (response.hasOwnProperty('errors')) {
                                var errors = response.errors;
                                var errorMessage = '';


                                Toast.fire({
                                    icon: 'error',
                                    title: errors
                                });
                            }
                        } else {

                            if (xhr.status === 500) {
                                loadingSpinnerWrapper.fadeOut();
                                spinnerPercentage.text('0%').fadeOut();
                                errorMessage = 'Can not Accept Request. Please try again later.';

                                Toast.fire({
                                    icon: 'error',
                                    title: errorMessage
                                });
                            } else {
                                loadingSpinnerWrapper.fadeOut();
                                spinnerPercentage.text('0%').fadeOut();
                                var errorMessage = 'Can not Accept Request. Please try again later.';
                                Toast.fire({
                                    icon: 'error',
                                    title: errorMessage
                                });
                            }
                        }
                    };

                    // Error
                    xhr.onerror = function () {

                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();

                        var errorMessage = 'An error occurred during the request. Please try again later.';
                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    };

                    xhr.send(formData);
                });
            </script>


    @endpush