@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')}}">

@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-6 col-12 ">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title mb-0">{{awtTrans('بيانات الطلب')}}</div>
                                <span style="float: left ; margin-left:2px">{{awtTrans('المسافة بين النقطتين ')}} <small class="distance"> </small> {{awtTrans(' كيلو متر ')}}</span>
                            </div>
                            <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>

                            <div class="card-body" style="overflow-x:scroll">
                                <table>
                                    <tbody class="w-100">
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('سعر المنتجات')}} </td>
                                            <td>{{$order->price}}</td>

                                            <td class="font-weight-bold">{{awtTrans('سعر التوصيل')}} </td>
                                            <td>{{$order->delivery_price}}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('نسبة التطبيق')}} </td>
                                            <td>{{$order->app_percentage}}</td>

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

                                            <td class="font-weight-bold">{{awtTrans('اجمالي الطلب')}} </td>
                                            <td>{{$order->total_price}}</td>

                                            <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
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('الكوبون')}} </td>
                                            <td>{{$order->coupon ?? awtTrans('لا يوجد')}}</td>

                                            <td class="font-weight-bold">{{awtTrans('قيمة الخصم')}} </td>
                                            <td>{{$order->coupon ? $order->discount : awtTrans('لا يوجد')}}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('نوع الطلب ')}} </td>
                                            @if ($order->type == 'special_stores')
                                                <td>{{awtTrans('متجر متعاقد')}}</td>
                                            @elseif($order->type == 'google_places')
                                                <td>{{awtTrans('متجر غير متعاقد')}}</td>
                                            @elseif($order->type == 'parcel_delivery')
                                                <td>{{awtTrans('توصيل باكدج')}}</td>
                                            @else
                                                <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>
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('حالة التوصيل')}} </td>
                                            @if($order->needs_delivery == 'true')
                                                <td>{{awtTrans('يحتاج توصيل')}}</td>
                                            @elseif($order->needs_delivery == 'false')
                                                <td>{{awtTrans('لا يحتاج توصيل')}}</td>
                                            @endif

{{--                                            <td class="font-weight-bold">{{awtTrans('فاتورة الطلب')}} </td>--}}
{{--                                            @if($order->have_invoice == 'true')--}}
{{--                                                <td><a target="blank" href="{{route('admin.orders.show-invoice',['id' => $order->id])}}">{{awtTrans('عرض')}}</a></td>--}}
{{--                                            @elseif($order->payment_status == 'false')--}}
{{--                                                <td>{{awtTrans('غير موجودة')}}</td>--}}
{{--                                            @endif--}}
                                            <td class="font-weight-bold">{{awtTrans('فاتورة الطلب')}} </td>
                                            @if($order->status == 'finished')
                                                <td><a target="blank" href="{{route('admin.invoice.show', $order->id)}}">{{awtTrans('عرض')}}</a></td>
                                            @else
                                                <td>{{awtTrans('غير موجودة')}}</td>
                                            @endif
                                        </tr>

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

                    <!-- information start -->
                    <div class="col-md-6 col-12 ">
                        {{-- store info  --}}
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title mb-0">{{awtTrans('بيانات المتجر')}}</div>
                                @if($order->store != null)
                                    <img src="{{$order->store?->icon_path}}" style="width: 50px ; height: 50px;">
                                @else
                                    <img src="https://ajeebhtest.4hoste.com/assets/uploads/settings/logo.png" style="width: 50px ; height: 50px;">
                                @endif
                                
                            </div>

                            <div class="card-body">
                                <table>

                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('اسم المتجر')}} </td>
                                        @if($order->store != null)
                                            <td>{{$order->store?->name}}</td>
                                        @else
                                            <td>{{$order->store_name}}</td>
                                        @endif
                                        
                                    </tr>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans(' نوع المتجر')}} </td>
                                        <td>{{$order->store?->has_contract == 'true' ? awtTrans('متجر متعاقد') : awtTrans('متجر غير متعاقد')  }}</td>
                                    </tr>

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

                                    @if ($order->type == 'special_stores')
                                        <tr>
                                            <td class="font-weight-bold">{{awtTrans('حالة الطلب عند المتجر')}} </td>
                                            <td class="main_store_div store_pending_div ">
                                                {{awtTrans('قيد الانتظار')}}
{{--                                                <span>--}}
{{--                                                    <button data-order_id="{{$order->id}}" data-status="accepted" style="padding: 9px" class="store_change   mr-1 ml-1 btn btn-primary">{{ awtTrans('قبول الطلب') }}</button>--}}
{{--                                                    <button data-order_id="{{$order->id}}" data-status="rejected" style="padding: 9px" class="store_change   mr-1 ml-1 btn btn-danger">{{ awtTrans('رفض الطلب') }}</button>--}}
{{--                                                </span>--}}
                                            </td>
                                            <td class="main_store_div store_accepted_div ">
                                                {{awtTrans('تم القبول')}}
{{--                                                <span>--}}
{{--                                                    <button data-order_id="{{$order->id}}" data-status="prepared" style="padding: 9px" class="store_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('تحضير الطلب') }}</button>--}}
{{--                                                </span>--}}
                                            </td>
                                            <td class="main_store_div store_prepared_div " >
                                                {{awtTrans('تم التجهيز')}}
                                            </td>
                                            <td class="main_store_div store_rejected_div " >
                                                {{awtTrans('تم الرفض')}}
                                            </td>
                                        </tr>
                                    @endif

                                </table>
                            </div>
                        </div>
                        {{-- delegate info --}}
                        <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>

                                        </tr>
                                    <tr>
                                        @if ($order->store_status == 'delivered' && $order->status !== 'closed' && $order->delivery_status == 'accepted')
                                            <td class="delivery_change_div delivery_accepted_div ">
                                                <span>
                                                    <button data-order_id="{{$order->id}}" data-status="delivering" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('جاري التوصيل') }}</button>
                                                </span>
                                            </td>
                                        @endif
                                            @if ($order->store_status == 'delivered' && $order->status !== 'closed' && $order->delivery_status == 'delivering')
                                            <td class="delivery_change_div delivery_delivering_div ">
                                                <span>
                                                    <button data-order_id="{{$order->id}}" data-status="delivered" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('تم التوصيل') }}</button>
                                                </span>
                                            </td>
                                        @endif

                                        @if ($order->store_status != 'pending' && $order->delivery_status == 'pending')
                                        <td class="delivery_change_div delivery_pending_div ">
                                            <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>
                                            </span>
                                        </td>
                                    @endif

                                    </tr>

                                    <tr>
                                        <td> {{trans('order.'.$order->statusForDelegate())}}</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())}}</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>

                    <!-- information start -->
                </div>
            </section>
            <!-- page users view end -->
            <div class="col-12 d-flex justify-content-center mt-3">
                <a href="{{ url()->previous() }}" type="reset" class="btn btn-outline-warning mr-1 mb-1">{{awtTrans(' رجوع ')}}</a>
            </div>
        </div>
<!-- END: Content-->
@endsection


@section('js')
    <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()
            $.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) =>  {
                    window.location.reload()
                }

            });
        });


        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) =>  {
                    window.location.reload()
                }

            });
        });
        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={{$setting['google_places']}}&callback=initMap" type="text/javascript"></script>

@endsection