@extends('admin.layout.master')

@section('css')
    <link rel="stylesheet" type="text/css"
          href="{{asset('admin/app-assets/css-rtl/core/colors/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/css-rtl/pages/app-user.css')}}">

    <link rel="stylesheet" type="text/css"
          href="{{ asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}">
    <style>
        .contain-table-n {
            overflow-y: auto;
            overflow-x: scroll;
            white-space: nowrap !important;
        }

        .contain-table-n::-webkit-scrollbar {
            display: none;
        }

        .contain-table table {
            width: 100%;
            /*min-width: 700px;*/

        }
    </style>

@endsection

@section('content')

    <div class="content-body">
        <!-- page users view start -->
        <section class="page-users-view">
            <div class="row">

                <!-- information start -->
                <div class="col-md-12 col-12 ">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title mb-0">{{awtTrans('بيانات الطلب')}}</div>

                        </div>

                        <div class="card-body">
                            <div class="contain-table-n">
                                <table>
                                    <tbody class="w-100">
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans(' رقم الطلب ')}} </td>
                                        <td>{{$order->id}}</td>

                                        <td class="font-weight-bold">{{awtTrans(' كود الطلب ')}} </td>
                                        <td>{{$order->ref_code}}</td>
                                        <td class="font-weight-bold">{{awtTrans('نوع الطلب')}} </td>
                                        <td>{{$order->is_scheduled==0? awtTrans('طارئ'): awtTrans('مجدول')}}</td>

                                    </tr>

                                    <tr>

                                        <td class="font-weight-bold">{{awtTrans(' نوع الصيانة ')}} </td>
                                        <td>{{$order->carModel?->name}}</td>
                                        <td class="font-weight-bold">{{awtTrans(' عدد نقاط الصيانة  ')}} </td>
                                        <td>{{$order->points_count}}</td>

                                    </tr>

                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans(' تاريخ تنفيذ الخدمة  ')}} </td>
                                        <td>{{$order->deliver_date ? \Carbon\Carbon::parse($order->deliver_date)->format('Y-m-d') : 'لا توجد بيانات' }}</td>
                                        <td class="font-weight-bold">{{awtTrans(' وقت تنفيذ الخدمة  ')}} </td>
                                        <td>{{$order->deliver_time ? \Carbon\Carbon::parse($order->deliver_time)->format('h:i a') : 'لا توجد بيانات'}}</td>
                                    </tr>



                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                @if($order->description)
                <div class="col-md-12 col-12 ">

                    {{-- description info --}}
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title mb-0">{{ awtTrans('تفاصيل اضافية') }}</div>
                        </div>
                        <div class="card-body">
                            <p>
                                {{ $order->description ?? 'لا توجد بيانات' }}
                            </p>
                        </div>
                    </div>
                </div>
                @endif
                <!-- information start -->
                <div class="col-md-12 col-12 ">

                    {{-- delegate info --}}
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title mb-0">{{awtTrans('بيانات المقدم')}}</div>
                            @if ($order->delegate)
                                <img src="{{$order->delegate->avatar_path ?? ''}}" style="width: 50px ; height: 50px;">
                            @endif
                        </div>

                        <div class="card-body">
                            <table>
                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('اسم المقدم')}} </td>
                                    <td>{{$order->delegate ?  $order->delegate->name : 'لم يتم تحديدة بعد'}}</td>
                                </tr>


                               @if($order->status=='open')
                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('تعيين المقدم ')}} </td>

                                            <td class="d-flex align-items-baseline" >

                                                {{awtTrans('في انتظار اختيار المقدم')}}
                                                <span class="mr-1 ml-1 col-3">
                                                    <select style="width: 120px" name="delegate_id" class="form-control select_delegate" >
                                                        <option value>{{awtTrans('اختر المقدم')}}</option>
                                                        @foreach ($delegates as $delegate)
                                                            <option value="{{$delegate->id}}">{{$delegate->name}}</option>
                                                        @endforeach

                                                    </select>
                                                </span>

                                                <button data-order_id="{{$order->id}}" data-status="accepted" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('تعيين المقدم') }}</button>

                                            </td>


                                </tr>
                               @endif
                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('رقم هاتف المقدم')}} </td>
                                    <td>{{$order->delegate ?  $order->delegate->phone : 'لم يتم تحديدة بعد'}}</td>
                                </tr>

                            </table>
                        </div>
                    </div>



                    {{-- user info --}}
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title mb-0">{{awtTrans('بيانات المستخدم')}}</div>
{{--                            <img src="{{$order->user->avatar_path ?? ''}}" style="width: 50px ; height: 50px;">--}}
                        </div>

                        <div class="card-body">
                            <table>
                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('اسم المستخدم')}} </td>
                                    <td>{{$order->user->name ?? ''}}</td>
                                </tr>

                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('رقم هاتف المستخدم')}} </td>
                                    <td>{{$order->user->phone ?? ''}}</td>
                                </tr>

                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('حالة الطلب')}} </td>
                                    <td> {{trans('order.'.$order->statusForUser()['in'])}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>


                    @if($order->status=='closed')
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title mb-0">{{awtTrans('اسباب الالغاء')}}</div>
                            </div>

                            <div class="card-body">
                                <table>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('  السبب')}} </td>
                                        <td>{{$order->close_reason }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </section>

    </div>
    <!-- END: Content-->
@endsection


@section('js')

    <script
        src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}">
    </script>
    <script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script>

    <script>
        var active_delivery = '{{$order->delivery_status}}'
        $('.delivery_change_div').removeClass('d-flex').addClass('d-none')
        setTimeout(() => {
            $('.delivery_' + active_delivery + '_div').removeClass('d-none').addClass('d-flex')
        }, 1000);

        $(document).on('click', '.delegate_change', function (e) {
            e.preventDefault()
            if ($('.select_delegate').val() == '') {
                Swal.fire({
                    position: 'top-center',
                    type: 'error',
                    title: '{{ awtTrans('عذراً يجب اختيار مقدم') }}',
                    showConfirmButton: true,
                    timer: 3000,
                    confirmButtonClass: 'btn btn-primary',
                    buttonsStyling: false,
                    confirmButtonText: "{{trans('admin.ok')}}",
                })
            } else {
                $.ajax({
                    type: "post",
                    url: "{{url('admin/orders/delegate-change')}}",
                    data: {
                        status: $(this).data('status'),
                        order_id: $(this).data('order_id'),
                        delegate: $('.select_delegate').val()
                    },
                    dataType: "json",
                    success: (response) => {
                        if (response.delivery_status == 'accepted') {
                            if (response.status == 'fail') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.msg,
                                    confirmButtonText: "{{trans('admin.ok')}}",
                                });
                                // toastr.error(response.msg)
                            } else {
                                window.location.reload()
                            }
                        } else {
                            // $('.delivery_change_div').removeClass('d-flex').addClass('d-none')
                            // setTimeout(() => {$('.delivery_'+response.delivery_status+'_div').removeClass('d-none').addClass('d-flex')}, 1000);
                        }
                    }

                });
            }
        });


        var active = '{{$order->store_status}}'
        $('.main_store_div').fadeOut()
        $('.store_' + active + '_div').fadeIn()


        $(document).on('click', '.store_change', function (e) {
            e.preventDefault()
            $.ajax({
                type: "post",
                url: "{{url('admin/orders/store-change')}}",
                data: {status: $(this).data('status'), order_id: $(this).data('order_id')},
                dataType: "json",
                success: (response) => {
                    Swal.fire({
                        position: 'top-start',
                        type: 'success',
                        title: response.msg,
                        showConfirmButton: false,
                        timer: 1500,
                        confirmButtonClass: 'btn btn-primary',
                        buttonsStyling: false,
                    })

                    // $('.main_store_div').fadeOut(1000)
                    // setTimeout(() => {$('.store_'+response.store_status+'_div').fadeIn()}, 1000);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 3000);
                }

            });
        });

    </script>
    @if(!empty($order->deliver_lat) && !empty($order->deliver_long) && !empty($order->receive_lat) && !empty($order->receive_long))

        <script>
            function initMap() {

                var receive_lat = Number($('#receive_lat').val()),
                    receive_long = Number($('#receive_long').val()),
                    deliver_lat = Number($('#deliver_lat').val()),
                    deliver_long = Number($('#deliver_long').val())

                const directionsRenderer = new google.maps.DirectionsRenderer({
                    map: new google.maps.Map(document.getElementById("map"), {}),
                    // directions: result,
                    routeIndex: 0,
                    polylineOptions: {
                        strokeColor: "red"
                    }
                });

                calculateAndDisplayRoute(new google.maps.DirectionsService(), directionsRenderer, receive_lat, receive_long, deliver_lat, deliver_long);
                $('.distance').html(haversine_distance(receive_lat, receive_long, deliver_lat, deliver_long))
            }

            function calculateAndDisplayRoute(directionsService, directionsRenderer, lat1, lng1, lat2, lng2) {
                directionsService.route({
                    origin: {lat: lat1, lng: lng1},
                    destination: {lat: lat2, lng: lng2},
                    travelMode: google.maps.TravelMode['DRIVING'],
                }).then((response) => {
                    directionsRenderer.setDirections(response);
                }).catch((e) => window.alert("Directions request failed due to " + status));
            }

            function haversine_distance(lat1, lng1, lat2, lng2) {
                var R = 3958.8; // Radius of the Earth in miles
                var rlat1 = lat1 * (Math.PI / 180); // Convert degrees to radians
                var rlat2 = lat2 * (Math.PI / 180); // Convert degrees to radians
                var difflat = rlat2 - rlat1; // Radian difference (latitudes)
                var difflon = (lng2 - lng1) * (Math.PI / 180); // Radian difference (longitudes)

                var d = 2 * R * Math.asin(Math.sqrt(Math.sin(difflat / 2) * Math.sin(difflat / 2) + Math.cos(rlat1) * Math.cos(rlat2) * Math.sin(difflon / 2) * Math.sin(difflon / 2)));
                return Math.round(d, 5);
            }
        </script>

        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key={{ $settings['google_places'] }}&callback=initMap"
                type="text/javascript"></script>
    @endif
@endsection