@extends('layouts.app')
@section('meta.title')
    <title>Baboon - Finalizimi i Porosise</title>
@endsection

@section('meta.description')
    <meta name="description" content="Baboon eshte aplikacion shqiptar ku porosit ushqim online nga kompjuteri, tablet apo celulari.">
@endsection

@section('meta.keywords')
    <meta name="keywords" content="Baboon Albania, pizza taxi, sherbim taksi 24 ore, delivery and food tirana, restorante ne tirane, fast food ne tirane,ushqim i castit.">
@endsection

@section('custom-css')
    <style>
        .button-minus-cart, .button-plus-cart, .quantity-field-cart {
            border: 1px solid #eeeeee;
            box-sizing: border-box;
            margin: 0;
            outline: none;
            padding: 10px;
        }

        .button-minus-cart, .button-plus-cart {
            -webkit-appearance: button;
            cursor: pointer;
            color: green;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .input-group .button-minus-cart, .input-group .button-plus-cart {
            background-color: #eeeeee;
            min-width: 3rem;
            width: auto;
            transition: all 300ms ease;
        }

        .input-group .button-minus-cart,
        .input-group .button-plus-cart {
            font-weight: bold;
            height: 3rem;
            padding: 0;
            width: 3rem;
            position: relative;
        }

        .input-group .quantity-field-cart {
            position: relative;
            height: 3rem;
            left: -6px;
            text-align: center;
            width: 4rem;
            display: inline-block;
            font-size: 13px;
            margin: 0 0 5px;
            resize: vertical;
        }

        .button-plus-cart {
            left: -13px;
        }

        span.cart-item-name {
            font-size: 12px;
        }

        .collapse#restaurant-coupon {
            display: none !important;
        }

        .collapse.in#restaurant-coupon {
            display: flex !important;
        }

        .order-details-text {
            width: 46rem;
            margin: -4rem 0 -7rem -5rem;
        }

        .shopping-cart-btn {
            all: unset;
            cursor: pointer;
        }

        .shopping-cart-btn > img {
            width: 36rem;
        }

        span.select2.select2-container {
            width: unset !important;
            margin-bottom: -6rem;
            z-index: 1;
        }

        #phone-input {
            padding-left: 10rem;
            padding-top: .3rem;
        }

        .select2-selection.select2-selection--single {
            border: none;
            margin-left: 1px;
        }

        .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
            border: none;
        }

        h4 {
            margin-bottom: 5px;
            margin-top: 5px;
        }
    </style>
@endsection

@section('content')
    <div id="map" class="order-create-profile-bg"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-6 pt-2" style="background: #f6f6f9; color: black; margin-bottom: 4rem">
                <h1 class="text-center">Finalizimi i porosisë</h1>
                <div class="panel-body mb-4">
                    <form class="form-horizontal" method="POST" action="{{route('waiting')}}">
                        {{ csrf_field() }}

                        <div class="form-group form-group-add">
                            <div class="col-md-12">
                                <input type="hidden" name="address" value="{{$data['address']}}">
                                <input type="hidden" name="latitude" id="order-add-lat" value="{{ $data['latitude'] }}">
                                <input type="hidden" name="longitude" id="order-add-lng" value="{{ $data['longitude'] }}">
                                <input type="hidden" name="phone" id="order-add-lng" value="{{ $data['phone'] }}">

                                <div class="row">
                                    <div class="col-md-11">
                                        <h2>{{$data['address']}} </h2>
                                    </div>
                                    <div class="col-md-1">
                                        <i class="fa fa-check pull-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group form-group-add">

                            <div class="col-md-12">
                                <input type="hidden"  name="addressdetails" value="{{$data['addressdetails']}}">
                                <h3>{{$data['addressdetails']}}</h3>

                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="col-md-12">
                                <textarea class="form-control" rows="5" name="description" placeholder="Detaje mbi porosinë? Shkruaji këtu"  id="add-order-detail">{{ session('order')? session('order')['description'] :'' }}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <button type="submit" class="btn btn-primary" id="order-now-step1">
                                    <span class="pull-left">{{count(session('order')['items'])}}</span>POROSIT <span class="pull-right" id="order-total">
                                        {{ $selectedCountry->currency->isSymbolAfterAmount ? round(session('order')['total'], $selectedCountry->currency->decimalPlaces) . ' ' . $selectedCountry->currency->symbol : $selectedCountry->currency->symbol . ' ' . round(session('order')['total'], $selectedCountry->currency->decimalPlaces) }}
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-4 pt-6" style="background: #f9f9f9 !important;">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="single-order-detail-title menu-title">Porosia
                            te {{$order['restaurantName']}}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 new-restaurant-cont menu-category cart-tab pl-5" style="background: #f9f9f9 !important;">
                        <div class="cart-item-container">
                            @if($order['restaurantID'] == $order['restaurantID'] && isset($order['items']))
                                @foreach($order['items'] as $item)
                                    <div class="row cart-item-list" id="cart-item-list-{{$item['id']}}">
                                        <div class="col-md-8">
                                        <span class="cart-item-name"
                                              data-name="{{ preg_replace('/\s+/', '', $item['name']) }}">{{$item['quantity']}} X {{$item['name']}}</span>
                                        </div>
                                        <div class="col-md-4">
                                        <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>

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

                        <div class="cart-divider"></div>
                        <p 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 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 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>
@endsection

@section('custom-js')
    <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