@extends('layouts.app')
@section('title')
    <title>Baboon - Në pritje të porosisë</title>
@endsection
@section('custom-css')
    <style>
        .order-status-bar {
            background-color: white !important;
            border-radius: 5px;
            box-shadow: 0 1px 0 0 lightgray;
        }
        body {
            background-color: #F8F8F8 !important;
        }
    </style>
@endsection
@section('content')
    <div id="map" class="order-create-profile-bg"></div>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
{{--    <div id="waiting-cont">--}}
{{--        <div class="container">--}}
{{--            <div class="row title-row">--}}
{{--                <div class="col-md-8 col-md-offset-1 col-xs-6">--}}
{{--                    <h2>Në pritje ...</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 waiting-status">--}}
{{--                         <h1>Në pritje ... </h1>--}}
{{--                         <h1>Restoranti po lexon kërkesën ...</h1>--}}
{{--                         <h3>Ju lutem prisni disa sekonda ...</h3>--}}
{{--                        <img src="{{asset('images/order_statuses/waiting.gif')}}" >--}}

{{--                    </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>--}}

    <div class="container mb-6">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6 pt-6">
                <div class="row">
                    <div class="col-md-12 order-status-bar">
                        <div class="col-md-3" style="padding-left: 0">
                            <img height="80px" src="{{asset('images/order_statuses/waiting.svg')}}" alt="plate"/>
                        </div>
                        <div class="col-md-9" style="margin-top: 2rem">
                            <h4>Porosia juaj te {{$order['restaurantName']}} është në pritje</h4>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <h3 class="single-order-detail-title">Porosia
                            te {{$order['restaurantName']}} #{{$order['orderID']}}</h3>
                    </div>
                    <div class="col-md-12 menu-category cart-tab pl-5">
                        <div class="cart-item-container">
                            @if($order['restaurantID'] == $order['restaurantID'] && isset($order['items']))
                                @foreach($order['items'] as $item)
                                    <div class="row cart-item-list" style="font-size: 18px; margin-left: 0" id="cart-item-list-{{$item['id']}}">
                                        <div class="col-md-8" style="padding-left: 0">
                                        <span class="cart-item-name"
                                              data-name="{{ preg_replace('/\s+/', '', $item['name']) }}">{{$item['quantity']}} X {{$item['name']}}</span>
                                        </div>
                                        <div class="col-md-4 text-right">
                                        <span class="cart-item-tot-price">
                                            {{ $selectedCountry->currency->isSymbolAfterAmount ? round($item['price'], $selectedCountry->currency->decimalPlaces) . ' ' . $selectedCountry->currency->symbol : $selectedCountry->currency->symbol . ' ' . round($item['price'], $selectedCountry->currency->decimalPlaces) }}
                                        </span>
                                            <input type="hidden" value="{{$item['id']}}"
                                                   class="cart-input-id">
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <h4>Detaje mbi porosinë:</h4>
                        <p style="font-size: 18px">{{$order['description'] ?? 'Nuk ka'}}</p>

                        <h3 class="mt-5">Totali</h3>

                        <div class="cart-divider"></div>
                        <p style="font-size: 18px" class="cart-p">
                            Delivery
                            <span class="pull-right single-order-detail-title" id="cart-del-cost">
                            {{ $selectedCountry->currency->isSymbolAfterAmount ? round($order['transportCost'], $selectedCountry->currency->decimalPlaces) . ' ' . $selectedCountry->currency->symbol : $selectedCountry->currency->symbol . ' ' . round($order['transportCost'], $selectedCountry->currency->decimalPlaces) }}
                        </span>
                        </p>
                        <p style="font-size: 18px" class="cart-p"> Kuponi <span class="pull-right single-order-detail-title" id="cart-sconto">
                        {{ $selectedCountry->currency->isSymbolAfterAmount ? round($order['couponValue'] ?? 0, $selectedCountry->currency->decimalPlaces) . ' ' . $selectedCountry->currency->symbol : $selectedCountry->currency->symbol . ' ' . round($order['couponValue'] ?? 0, $selectedCountry->currency->decimalPlaces) }}
                        </span>
                        </p>
                        <p style="color: black; font-weight: 900; font-size: 20px" class="cart-p" id="cart-total-p"> Totali për të paguar<span
                                    class="single-order-detail-title pull-right" id="cart-total">
                            {{ $selectedCountry->currency->isSymbolAfterAmount ? round(($order ? $order['total'] : 0), $selectedCountry->currency->decimalPlaces) . ' ' . $selectedCountry->currency->symbol : $selectedCountry->currency->symbol . ' ' . round($order ? $order['total'] : 0, $selectedCountry->currency->decimalPlaces) }}
                        </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form type="hidden" id="refused-status-form" action="" method="GET">

    </form>
@endsection
@section('custom-js')
    <script>
        $(document).ready(function() {
        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 ==='PENDING'){
                        console.log(msg.status);
                    }
                    else if(msg.status === 'ACCEPTED'){
                        clearInterval(statusIterval);
                        window.location.href = '{{route("accepted")}}';

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

                    }
                    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>

    <script>
        function initMap() {
            // The location of Uluru
            const businessLocation = { lat: {{$order['latitude']}}, lng: {{$order['longitude']}} };
            const yourLocation = { lat: {{$data['latitude']}}, lng: {{$data['longitude']}} };
            // The map, centered at Uluru
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 14.5,
                center: businessLocation,
            });

            map.setOptions({
                styles: [
                    {
                        featureType: "poi",
                        stylers: [{ visibility: "off" }],
                    },
                    {
                        featureType: "transit",
                        elementType: "labels.icon",
                        stylers: [{ visibility: "off" }],
                    },
                ],
                mapTypeControl: false,
                streetViewControl: false,
                disableDefaultUI: true,
            });

            const marker = new google.maps.Marker({
                position: businessLocation,
                map: map,
                label: {
                    text: '{{$order['restaurantName']}}',
                    color: "black",
                    fontWeight: "bold"
                },
                icon: {
                    labelOrigin: new google.maps.Point(11, 50),
                    size: new google.maps.Size(22, 40),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(11, 40),
                },
            });

            const yourLocationMarker = new google.maps.Marker({
                position: yourLocation,
                map: map,
                label: {
                    text: 'Vendndodhja juaj',
                    color: "black",
                    fontWeight: "bold"
                },
                icon: {
                    labelOrigin: new google.maps.Point(11, 50),
                    size: new google.maps.Size(22, 40),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(11, 40),
                },
            });
        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEIy2YqySuqOgFZXll0182KrQ6CkMMY0o&libraries=places&callback=initMap&v=weekly"
            async defer></script>
@endsection