@extends('dashboard.layout.layout')

@section('content')
    <!-- page users view start -->
    <section class="page-users-view">
        <div class="row">
            <!-- account start -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header">

                        <div class="heading-elements">
                            <div class="badge badge-primary block badge-md mr-1 mb-1">
                                {{ $order->created_at->format('Y-m-d') }}
                            </div>


                        </div>

                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 custom-card-style">
                                <div class="card-title">{{ trans('dashboard.order.order_detail') }}</div>
                                <div class="users-view-image d-flex align-items-center justify-content-center">
                                    <span
                                        class="text-info users-avatar-shadow w-100 rounded d-flex align-items-center justify-content-center">
                                        <i class="feather icon-truck font-large-3"></i>
                                    </span>
                                </div>
                                <ul class="row">
                                    <li class="col-6"><label>{{ trans('dashboard.car_type.car_type') }}</label> :
                                        {{ optional($order->car->carType)->name }}</li>
                                        
                                        <li class="col-6"><label>{{ trans('dashboard.car_model.car_model') }}</label> :
                                        {{ optional($order->car)->car_name }}</li>
                                        
                                    <li class="col-6"><label>{{ trans('dashboard.selender.num_of_selenders') }}</label> :
                                        {{ optional($order->selender)->num_of_selenders }}</li>
                                        
                                        
                                    <li class="col-6"><label>{{ trans('dashboard.city.city') }}</label> :
                                        {{ optional($order->district)->name }}</li>
                                        
                                    <!--<li class="col-6"><label>{{ trans('dashboard.district.district') }}</label> :-->
                                    <!--    {{ optional($order->district)->name }}</li>-->
                                        
                                    <li class="col-6"><label>{{ trans('dashboard.available_day.day') }}</label> :
                                        {{ isset($order->available_day) ? ($order->available_day) : '' }}
                                    </li>
                                    <li class="col-6"><label>{{ trans('dashboard.favorite_time.favorite_time') }}</label> :
                                        {{ isset($order->favorite_time) ? \Carbon\Carbon::parse($order->favorite_time)->format('g:i A') : '' }}
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-12 custom-card-style">
                                <div class="card-title">{{ trans('dashboard.order.required_service') }}</div>
                                <div class="users-view-image d-flex align-items-center justify-content-center">
                                    <span
                                        class="text-info users-avatar-shadow w-100 rounded d-flex align-items-center justify-content-center">
                                        <i class="feather icon-truck font-large-3"></i>
                                    </span>
                                </div>
                                <ul class="row">
                                    @foreach ($order->orderCategories as $key => $order_cat)
                                        <li class="col-6">
                                            {{ optional($order_cat->main_category)->name }}
                                            {{ isset($order_cat->sub_category) ? '-' . optional($order_cat->sub_category)->name : '' }}
                                            {{ isset($order_cat->second_sub_category) ? '-' . optional($order_cat->second_sub_category)->name : '' }}
                                        </li>
                                    @endforeach

                                </ul>
                                <div class="custom-amount-section">
                                    <div class="text-info">
                                        {{ trans('dashboard.order.price_before_vat') }}
                                        <span> {{ $order->total_price_before_vat_amount.' ' .trans('dashboard.order.ryal') }} </span>
                                        </div>
                                    <div class="text-info">
                                        {{ trans('dashboard.order.vat_amount') }}

                                        <span> {{ $order->vat_amount.' '. trans('dashboard.order.ryal') }} </span>
                                    </div>
                                    <div class="text-info">
                                        {{ trans('dashboard.order.price_after_vat') }}
                                       <span> {{ $order->total_price_after_vat_amount.' '. trans('dashboard.order.ryal') }} </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 custom-card-style">
                                <div class="card-title">{{ trans('dashboard.order.client_details') }}</div>
                                <div class="users-view-image d-flex align-items-center justify-content-center">
                                    <span
                                        class="text-info users-avatar-shadow w-100 rounded d-flex align-items-center justify-content-center">
                                        <i class="feather icon-truck font-large-3"></i>
                                    </span>
                                </div>
                                <ul>



                                    <li><label>{{ trans('dashboard.order.fullname') }}</label> :
                                        {{ $order->user->fullname }}</li>
                                    <li><label>{{ trans('dashboard.order.phone') }}</label> : {{ $order->user->phone }}</li>
                                    <li><label>{{ trans('dashboard.order.location_description') }}</label> :
                                        {{ $order->location_description }}</li>
                                </ul>



                            </div>
                            <div class="col-sm-6 custom-card-style">
                                <div class="card-title" id="client_location" style="cursor: pointer">{{ trans('dashboard.order.client_location') }}</div>
                                <div id="map" style="width:100%;height:380px;"></div>
                                <div class="form-group row">
                                    <div class="col-lg-9">
                                        <input type="hidden" value="{{ isset($order) ? $order->lat : old('lat') }}"
                                            class="form-control" placeholder="latitude" id="lat">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-9">
                                        <input type="hidden" value="{{ isset($order) ? $order->lng : old('lng') }}"
                                            class="form-control" placeholder="latitude" id="lng">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <input type="text" id="pac-input" class="form-control bg-white"
                                        placeholder="ابحث في الخريطة" style="width: 500px;" />
                                    <div class="col-lg-12" style="width:100%; height:400px;" id="map"></div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
                <!-- account end -->

                <!-- information start -->
            </div>
    </section>

    <!-- page users view end -->
@endsection

@section('vendor_styles')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/vendors/css/forms/spinner/jquery.bootstrap-touchspin.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/extensions/swiper.min.css">
@endsection

@section('page_styles')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/app-user.css">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/app-ecommerce-details.css">
    <link rel="stylesheet" href="{{ asset('dashboardAssets') }}/global/css/custom/custom_rate.css">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/users.css">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/plugins/extensions/swiper.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    @include('dashboard.orders.styles')



@endsection

@section('vendor_scripts')
    <script src="{{ asset('dashboardAssets') }}/vendors/js/forms/spinner/jquery.bootstrap-touchspin.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/extensions/swiper.min.js"></script>
@endsection

@section('page_scripts')
    <script src="{{ asset('dashboardAssets') }}/js/scripts/pages/app-ecommerce-details.js"></script>
    <script src="{{ asset('dashboardAssets') }}/js/scripts/forms/number-input.js"></script>
    <script src="{{ asset('dashboardAssets') }}/js/scripts/pages/user-profile.js"></script>
    <script src="{{ asset('dashboardAssets') }}/js/scripts/extensions/swiper.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>



    <script src="{{ asset('dashboardAssets') }}/js/scripts/components/components-navs.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/lang/summernote-ar-AR.min.js"></script>
    <script>
        $('.editor').summernote({
            // airMode: true,
            tabsize: 10,
            height: 250,
            lang: "{{ app()->getLocale() == 'ar' ? 'ar-AR' : '' }}"
        });
    </script>



    <script>
        $('#client_location').click(()=>{
            var lat = $('#lat').val();
            var lng = $('#lng').val();
            url = 'https://www.google.com/maps/search/?api=1&query='+lat+','+lng
            window.open(url, '_blank');
        })
        function initMap() {
            //24.7135517
            //46.6752957
            var lat = $('#lat').val();
            var lng = $('#lng').val();
            var myLatlng = new google.maps.LatLng(lat, lng);
            var map;
            var myOptions = {
                zoom: 12,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            // marker refers to a global variable
           // console.log('https://www.google.com/maps/search/?api=1&query='+lat+','+lng);
            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                draggable: true,
                url: 'https://www.google.com/maps/search/?api=1&query='+lat+','+lng
            });


              marker.addListener("click", () => {
               
                window.open(marker.url, '_blank');
              });
            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });
            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                    if (!place.geometry) {
                        console.log("Returned place contains no geometry");
                        return;
                    }
                    // marker refers to a global variable
                    marker.setPosition(place.geometry.location);
                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                    document.getElementById("lat").value = place.geometry.location.lat();
                    document.getElementById("lng").value = place.geometry.location.lng();
                    //   document.getElementById("address").value = place.geometry.location.address();
                    console.log(place);
                });
                map.fitBounds(bounds);
            });
            google.maps.event.addListener(marker, "dragend", function(event) {
                // get lat/lon of click
                var clickLat = event.latLng.lat();
                var clickLon = event.latLng.lng();
                // show in input box
                document.getElementById("lat").value = clickLat.toFixed(5);
                document.getElementById("lng").value = clickLon.toFixed(5);
                /*document.getElementById("address").value = event.latLng.address();*/
            });
        }
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap&key=AIzaSyBHad3Ja0U-pPVUFA0dwd3sFj1v634aZjE">
    </script>

@endsection