@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 style="background-color: #ffffff;">
        <div class="container mb-6">
            <div class="align-items-center justify-center row-flex">
                <div id="order-current-status" class="col-md-8 justify-center mb-6 pt-6 row-flex" style="max-width: 100%;background-color: #F8F8F8;">
                    <div class="col-xs-12" style="max-width: 450px;">
                        @switch($order['status'])
                            @case('PENDING')
                            @include('user.account.order.statuses.pending')
                            @break

                            @case('ACCEPTED')
                            @include('user.account.order.statuses.accepted')
                            @break

                            @case('REJECTED')
                            @include('user.account.order.statuses.refused')
                            @break

                            @case('COOKED')
                            @include('user.account.order.statuses.cooked')
                            @break

                            @case('ACCEPTED_TO_PICK_UP')
                            @include('user.account.order.statuses.accepted_to_pickup')
                            @break

                            @case('COLLECTED')
                            @include('user.account.order.statuses.collected')
                            @break

                            @case('DELIVERED')
                            @include('user.account.order.statuses.delivered')
                            @break

                            @default
                            @include('user.account.order.statuses.pending')
                        @endswitch
                    </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 currentStatus = "{{ $order['status'] }}";
            var statusIterval = setInterval(function () {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    method: "POST",
                    url: '{{route('order.checkStatus', ['id' => $order['orderID']])}}',
                    success: function (msg) {
                        if (currentStatus != msg.status) {
                            $('#order-current-status > div').html(msg.html);
                            currentStatus = msg.status
                        }
                    },
                    error: function (msg) {
                        console.log(msg.status);
                    }
                });

            }, 2000);
        });
    </script>

    <script>
        function initMap() {
            // The location of Uluru
            const businessLocation = {lat: {{$order['restaurant']['latitude']}}, lng: {{$order['longitude']}}};
            const yourLocation = {lat: {{$order['latitude']}}, lng: {{$order['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['restaurant']['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