@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-6 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->order_num??''}}</td>
                                    </tr>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('العنوان')}} </td>
                                        <td>{{$order->city->name??$order->address}}</td>
                                    </tr>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('تاريخ الطلب')}} </td>
                                        <td>{{ $order->created_at ? $order->created_at->format('Y-m-d') : '' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('القسم الرئيسي')}} </td>
                                        <td>{{$order->category->name??''}}</td>
                                    </tr>
                                    <tr>
                                        <td class="font-weight-bold">{{awtTrans('طريقة الدفع')}} </td>
                                        @if ($order->payment_type == 'wallet')
                                            <td>{{awtTrans('المحفظة')}}</td>
                                        @elseif($order->payment_type == 'online')
                                            <td>{{awtTrans('اون لاين')}}</td>
                                            {{--                                            @elseif($order->payment_type == 'online')--}}
                                            {{--                                                <td>{{awtTrans('اونلاين')}}</td>--}}
                                        @endif
                                    </tr>
                                    <tr>

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

                                    </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>
                                        @if($order->status=='cancel')
                                            <td class="font-weight-bold">{{awtTrans('الألغاء من طرف العميل')}} </td>
                                        @endif
                                        @if($order->status=='refused')
                                            <td class="font-weight-bold">{{awtTrans('الألغاء من طرف الاداره')}} </td>
                                        @endif
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- information start -->
                <div class="col-md-6 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>
                                <tr>
                                    <td class="font-weight-bold">{{awtTrans('حالة الطلب ')}} </td>
                                    @if ($order->store_status != 'pending' && $order->status !== 'closed')
                                        <td> {{trans('order.'.$order->statusForDelegate())}}</td>
                                        {{--                                            <td class="delivery_change_div delivery_accepted_div d-flex align-items-baseline" >--}}
                                        {{--                                                {{awtTrans('تم قبول الطلب')}}--}}
                                        {{--                                                <button data-order_id="{{$order->id}}" data-status="delivered" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('انهاء الطلب') }}</button>--}}
                                        {{--                                            </td>--}}

                                        {{-- <td class="delivery_change_div delivery_delivering_div d-flex align-items-baseline" >
                                            {{awtTrans('جاري التوصيل')}}
                                            <button data-order_id="{{$order->id}}" data-status="reached_store" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('الوصول للمطعم') }}</button>
                                        </td>

                                        <td class="delivery_change_div delivery_reached_store_div d-flex align-items-baseline" >
                                            {{awtTrans('وصل للمتجر')}}
                                            <button data-order_id="{{$order->id}}" data-status="reached_receive_location" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('الوصول لمكان الاستلام') }}</button>
                                        </td>

                                        <td class="delivery_change_div delivery_reached_receive_location_div d-flex align-items-baseline" >
                                            {{awtTrans('وصل مكان الاستلام')}}
                                            <button data-order_id="{{$order->id}}" data-status="reached_deliver_location" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('الوصول لمكان التسليم') }}</button>
                                        </td>

                                        <td class="delivery_change_div delivery_reached_deliver_location_div d-flex align-items-baseline" >
                                            {{awtTrans('وصل مكان التسليم')}}
                                            <button data-order_id="{{$order->id}}" data-status="delivered" style="padding: 9px" class="delegate_change  mr-1 ml-1 btn btn-primary">{{ awtTrans('انهاء الطلب') }}</button>
                                        </td> --}}

                                        <td class="delivery_change_div delivery_delivered_div d-flex align-items-baseline">{{awtTrans('تم التوصيل')}}</td>
                                    @endif
                                </tr>

                                <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>
                        </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->fullPhone ?? ''}}</td>
                                </tr>

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

                                </tr>

                            </table>
                        </div>
                    </div>
                    @if($order->status != 'finished' && $order->status != 'canceled' && $order->status != 'refused')
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title mb-0">{{ awtTrans('الغاء الطلب') }}</div>
                            </div>
                            <div class="card-body">
                                <table>
                                    <tr>
                <span class="text-danger">
                    <form action="{{ route('admin.orders.cancel', $order->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-danger">
                            {{ awtTrans('هل أنت متأكد من إلغاء الطلب؟') }}
                        </button>
                    </form>
                </span>

                                    </tr>
                                </table>
                            </div>
                        </div>
                        {{--                    @elseif($order->status=='in_progress')--}}
                        {{--                        <div class="card">--}}
                        {{--                            <div class="card-header">--}}
                        {{--                                <div class="card-title mb-0">{{ awtTrans('الغاء الطلب') }}</div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="card-body">--}}
                        {{--                                <table>--}}
                        {{--                                    <tr>--}}
                        {{--                <span class="text-danger">--}}
                        {{--                    <form action="{{ route('admin.orders.cancel', $order->id) }}" method="POST">--}}
                        {{--                        @csrf--}}
                        {{--                        <button type="submit" class="btn btn-danger">--}}
                        {{--                            {{ awtTrans('هل أنت متأكد من إلغاء الطلب؟') }}--}}
                        {{--                        </button>--}}
                        {{--                    </form>--}}
                        {{--                </span>--}}
                        {{--                                    </tr>--}}
                        {{--                                </table>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                    @endif

                    <a href="{{ route('admin.orders.chat', ['id' => $order->id]) }}" class="btn btn-primary">
                        {{ awtTrans('عرض الشات') }}
                    </a>
                    {{--                    @if($order->status=='finished'&&$order->servecie_type='sale'&& $order->payment_type=='wallet')--}}
                    {{--                        @if($order->payment_status=='true')--}}
                    {{--                            <a class="btn btn-success">--}}
                    {{--                                {{ 'تم تحويل المبلغ' }}--}}
                    {{--                            </a>--}}
                    {{--                        @endif--}}
                    {{--                        @if($order->payment_status=='false')--}}
                    {{--                            <form action="{{ route('admin.orders.update_payment_status', $order->id) }}" method="POST">--}}
                    {{--                                @csrf--}}
                    {{--                                <button type="submit" class="btn btn-danger">--}}
                    {{--                                    {{ 'لم يتم تحويل المبلغ' }}--}}
                    {{--                                </button>--}}
                    {{--                            </form>--}}
                    {{--                        @endif--}}
                    {{--                    @endif--}}


                    @if($order->status=='cancel')
                        <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->cancel_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
@endsection