@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>
                                @if(!empty($order->deliver_lat) && !empty($order->deliver_long) && !empty($order->receive_lat) && !empty($order->receive_long))
                                    <span style="float: left ; margin-left:2px">{{awtTrans('المسافة بين النقطتين ')}} <small class="distance"> </small> {{awtTrans(' كيلو متر ')}}</span>

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

                            <div>
                                <div id="map" style="height: 400px; margin: 10px"></div>
                                <input type="hidden" id="deliver_lat" value="{{$order->deliver_lat}}">
                                <input type="hidden" id="deliver_long" value="{{$order->deliver_long}}">
                                <input type="hidden" id="receive_lat" value="{{$order->receive_lat}}">
                                <input type="hidden" id="receive_long" value="{{$order->receive_long}}">
                            </div>
                            @endif

                            <div class="card-body">
                                <div class="contain-table-n">
                                    <table>
                                    <tbody class="w-100">
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('القسم الفرعي')}} </td>
                                            <td>{{$order->category?->name}}</td>

                                            <td class="font-weight-bold">{{awtTrans('نوع مقدم الخدمة')}} </td>
                                            <td>
                                                @if($order->provider_type == 'company')
                                                    {{  awtTrans('شركة') }}
                                                @elseif($order->provider_type == 'member')
                                                    {{  awtTrans('فرد') }}
                                                @else
                                                    {{  awtTrans('كلاهما') }}
                                                @endif
                                            </td>

                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('نوع الطلب')}} </td>
                                            <td>{{$order->order_type == 1 ? awtTrans('مجدول') : awtTrans('عادي')}}</td>

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

                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('رقم جوال المستلم')}} </td>
                                            <td>{{$order->receiver_phone}}</td>

                                            <td class="font-weight-bold">{{awtTrans('نوع السيارة')}} </td>
                                            <td>{{$order->carType?->name}}</td>
                                        </tr>

                                        @if($order->order_type == 1)
                                        <tr>
                                                <td class="font-weight-bold">{{awtTrans('تاريخ الطلب')}} </td>
                                                <td>{{$order->order_date}}</td>

                                                <td class="font-weight-bold">{{awtTrans('وقت الطلب')}} </td>
                                                <td>{{$order->order_time}}</td>
                                        </tr>
                                        @endif

                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('موقع الاستلام')}} </td>
                                            <td>{{$order->deliver_address}}</td>
                                        </tr>

                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('موقع التسليم')}} </td>
                                            <td>{{$order->receive_address}}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('سعر الطلب')}} </td>
                                            <td>{{$order->price}}</td>

                                            <td class="font-weight-bold">{{awtTrans('نسبة التطبيق')}} </td>
                                            <td>{{$order->app_percentage}}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('القيمة المضافة')}} </td>
                                            <td>{{$order->added_value}}</td>

                                            <td class="font-weight-bold">{{awtTrans('اجمالي الطلب')}} </td>
                                            <td>{{$order->total_price}}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('طريقة الدفع ')}} </td>
                                            @if ($order->payment_type == 'wallet')
                                                <td>{{awtTrans('من المحفظة')}}</td>
                                            @elseif($order->payment_type == 'cash')
                                                <td>{{awtTrans('كاش')}}</td>
                                            @elseif($order->payment_type == 'online')
                                                <td>{{awtTrans('اونلاين')}}</td>
                                            @endif

                                            <td class="font-weight-bold">{{awtTrans('حالة الدفع')}} </td>
                                            @if($order->payment_status == 'true')
                                                <td>{{awtTrans('تم الدفع')}}</td>
                                            @elseif($order->payment_status == 'false')
                                                <td>{{awtTrans('لم يتم الدفع')}}</td>
                                            @endif
                                        </tr>

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

                    <!-- information start -->
                    <div class="col-md-12 col-12 row m-0">

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

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

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

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

                        @if($order->delegate_id != null )
                            {{-- delegate info --}}
                            <div class="col-6 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>

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

                                    </table>
                                </div>
                            </div>
                        @endif

                        {{-- user info --}}
                        <div class="col-6 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>

                                    @if($order->status == 'intransit' || $order->status == 'start_delivering' || $order->status == 'delivered' || $order->status == 'provider_finished')
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('انهاء الطلب')}} </td>
                                            <td><button type="submit" class="btn btn-primary float-right btn-inline finish_order" data-id="{{$order->id}}">{{awtTrans('انهاء الطلب')}}</button>
                                        </tr>
                                    @endif

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


                        @if($order->deliveryOffers()->count() >0 )

                            <div class="col-6 card">
                                <div class="card-header">
                                    <div class="card-title mb-0">{{awtTrans('** عروض الأسعار **')}}</div>
                                </div>

                                @foreach($order->deliveryOffers as $offer)
                                    <div class="card-body m-2" style="background-color: #12273d;border-radius: 10px">
                                        <table>
                                            <tr>
                                                <td class="font-weight-bold">{{awtTrans('مقدم الخدمة')}} </td>
                                                <td>{{$offer->order?->provider?->name}}</td>
                                            </tr>

                                            @if($offer->delegate_id != null )
                                                <tr>
                                                    <td class="font-weight-bold">{{awtTrans('اسم المندوب')}} </td>
                                                    <td>{{$offer->delegate ?  $offer->delegate->name : 'لم يتم تحديدة بعد'}}</td>
                                                </tr>
                                            @endif

                                            <tr>
                                                <td class="font-weight-bold">{{awtTrans('سعر الخدمة')}} </td>
                                                <td>{{$offer->price}}</td>
                                            </tr>

                                            <tr>
                                                <td class="font-weight-bold">{{awtTrans('العربون')}} </td>
                                                <td>{{$offer->deposit}}</td>
                                            </tr>

                                            <tr>
                                                <td class="font-weight-bold">{{awtTrans('حالة العرض')}} </td>
                                                <td>{{$offer->statusText}}</td>
                                            </tr>

                                        </table>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                       @if($order->status=='closed' || $order->status=='canceled')
                        <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>

                    <!-- information start -->
                </div>
            </section>
            <!-- page users view end -->

        </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,
                })
            }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') {
                                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

    <script>
        $(document).on('click' , '.finish_order', function (e) {
            // e.preventDefault()
            $.ajax({
                type: "post",
                url: "{{url('admin/orders/finish-order')}}",
                data: {id : $(this).data('id')},
                dataType: "json",
                success:  (response) =>  {
                    toastr.success(response.message)
                    $(this).parent().html('--')
                    setTimeout(() => {
                        location.reload();
                    }, 500);
                }
            });
        });

    </script>
@endsection