@extends('admin.layouts.app')
@section('panel')
    @include('admin.components.tabs.manual_order_request')
        <div class="row">
        <div class="row">
            @foreach($requests as $manualOrder)

                <div class="col-12 col-sm-6 col-md-4 my-4 d-flex flex-wrap ">

                    <div class="card w-100">
                        <form method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" value="{{$manualOrder->id}}" name="manual_order_id">
                            <strong class="card-header text--green">{{$status[$manualOrder->items[0]->status]}}</strong>
                            <div class="card-body">
                                <div class="my-3">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            order price : ${{$manualOrder->order_price}}
                                        </li>
                                        <li class="list-group-item">
                                            final price : ${{$manualOrder->final_price}}
                                        </li>
                                        <li class="list-group-item">
                                            create at : {{$manualOrder->created_at}}
                                        </li>
                                        <li class="list-group-item">
                                            Order Items :
                                            <ul class="list-group list-group-flush">
                                                @foreach($manualOrder->order->products as $product)
                                                    <li class="list-group-item">
                                    <span>
                                    <a
                                        href="{{route("admin.product.edit",[$product->id])}}">{{$product->name}}</a>

                                        </span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                                <hr/>
                                <p class="card-text">{!! $manualOrder->description !!}  </p>
                                @if($manualOrder->status==2)
                                    <button type="submit"
                                            class="btn btn--primary btn-global mt-5">@lang('to complete')</button>
                                @endif
                            </div>


                        </form>
                        <div id="loadingSpinnerWrapper">
                            <div id="loadingSpinner"></div>
                            <div id="spinnerPercentage">0%</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-primary">%H</span> :<span class="btn btn-info">%M</span> : <span class="btn btn-primary"> %S </span>'));
            });
        });
    </script>
@endpush