@extends('layouts.app')
@section('title')
    <title>Baboon - Pranimi i Porosisë</title>
@endsection

@section('content')
<div id="accepted-cont">
    <div class="container">
        <div class="row title-row">
            <div class="col-md-8 col-md-offset-1 col-xs-6">
                <h2>Porosia u krye</h2>
                <h1>Porosia juaj në {{session('order') ? session('order')['restaurantName'] : '' }}</h1>
            </div>
            <div class="col-md-3 col-xs-6 ">
                <img src="{{session('order') ? session('order')['logo'] : '' }}" class="" width="130" height="130">
            </div>
        </div>
        <div class="row">
            <div class="col-md-7 col-md-offset-1">
                <div class="order-status accepted-status">
                    <h1>Porosia u krye  </h1>
                    <h1>Porosia juaj u pranua !</h1>
                    <h3>Porosia juaj do të jetë gati në {{ session('order')? session('order')['deliveryTime'] : '30'}} minuta. Mos harro të lësh një vlerësim për restorantin.</h3>
                    <h4> Yjet mund të duan 24 H për të dalë!</h4>
                    <img src="{{asset('images/order_statuses/accepted.gif')}}">
                    <div>
                        <span class="counting"  id="count"> {{session('order') ? session('order')['deliveryTime'].":00" : '30:00' }}</span>
                    </div>
                    <div class="row">
                        <div class="col-md-11">
                            <h2>{{session('order') ? session('order')['address'] : '' }} {{session('order') ? ', '.session('order')['addressdetails'] : '' }}</h2>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="col-md-12 new-restaurant-cont menu-category cart-tab add-cart-tab">
                    <p class="single-order-detail-rate "><b>Porosia juaj:</b></p>
                    @if(session('order'))
                        @foreach(session('order')['items'] as $item )
                            <div class="cart-item-container">
                                <p class="cart-p">
                                    <span class="cart-item-quantity ">{{$item['quantity']}}</span>
                                    x
                                    <span class="cart-item-name">{{$item['name']}}</span>
                                    <span class="cart-item-tot-price pull-right">{{$item['price']}} L</span>
                                </p>
                            </div>
                        @endforeach
                    @endif

                    <div class="cart-divider"></div>

                    <p class="cart-p" > Subtotali <span class="pull-right single-order-detail-title" id="cart-subtotal">{{session('order')['subtotal']}} L</span></p>
                    <p class="cart-p" > Ulje e aplikuar <span class="pull-right single-order-detail-title" id="cart-sconto">0 L</span></p>
                    <p class="cart-p" > Kosto Transporti <span class="pull-right single-order-detail-title" id="cart-del-cost">{{session('order')['transportCost']}} L</span></p>
                    <p class="cart-p" id="cart-total-p"><b> Totali </b> <span class="single-order-detail-title pull-right" id="cart-total">{{session('order')['total']}} L</span></p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom-js')
    <script>
        $(document).ready(function() {
            var counter = parseInt($("#count").html()) * 60;
            var setCounter = setInterval(function () {
                counter--;
                var min = parseInt(counter / 60);
                var sec = Math.abs(counter - (min * 60));
                $("#count").html(min + " : " + sec);

                if (counter >= 0) {
                    span = document.getElementById("count");
                }
                if (counter === 0) {
                    //alert('sorry, out of time');
                    clearInterval(setCounter);
                }
            }, 1000);

            var statusIterval =setInterval(function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    method: "POST",
                    url: '{{route('order.status')}}',
                    success: function(msg){
                        console.log(msg.status)
                        if(msg.status === 'DELIVERED'){
                            console.log(msg.status);
                            clearInterval(statusIterval);
                            window.location.href = '{{route("delivered")}}';

                        }

                        if(msg.status === 'COOKED'){
                            console.log(msg.status);
                            clearInterval(statusIterval);
                            window.location.href = '{{route("cooked")}}';

                        }
                        else if(msg.status === 'REJECTED'){
                            console.log(msg.status);
                            clearInterval(statusIterval);

                            $('#refused-status-form').attr('action', '{{route('refused')}}');
                            document.getElementById('refused-status-form').submit();

                        }
                    },
                    error: function(msg){
                        console.log(msg.status);
                    }
                });

            }, 2000 );
        });

    </script>
@endsection