@extends('admin.layout.master')
@section('title', "الرحلة")
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .checked {
            color: orange;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">الرحلة</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">


            <div class="card-box">
                <h4 class="header-title">الرحلة</h4>
                <table class="table table-bordered dt-responsive nowrap"
                       style="margin-bottom: 30px; border-collapse: collapse; border-spacing: 0; width: 100%;">
                    <thead>
                    <tr style="font-size: large ; font-family: cairo">
                        <th>رقم الرحلة</th>
                        <th>العميل</th>
                        <th>السائق</th>
                        <th>الدولة</th>
                        <th>عنوان البدايه</th>
                        <th>عنوان النهاية</th>
                        <th>الفئة</th>
                        <th>الحالة</th>
                        <th>عدد الكيلوميتر</th>
                        <th>نوع الدفع</th>
                        <th>كود الخضم</th>
                        <th>السعر الكلى</th>

                    </tr>
                    </thead>
                    <tbody>

                    <tr>
                        <td>{{$row->trip_code}}</td>
                        <td>
                            <a href="{{route('users.show', $row->client_id)}}">{{$row->client->fullname}}</a>
                        </td>
                        <td>

                            <a href="{{$row->captain_id ? route('captains.show', $row->captain_id) : ''}}"> {{$row->captain_id ? $row->captain->fullname : 'لم يخصص بعد'  }}</a>
                        </td>
                        <td>
                            {{$row->country->name['ar']}}
                        </td>
                        <td>
                            {{$row->start_address}}
                        </td>
                        <td>
                            {{$row->end_address ?  $row->end_address : 'لم يحدد بعد'}}
                        </td>
                        <td>
                            {{$row->class->name['ar']}}
                        </td>
                        <td>
                            {{trip_status($row->status)}}
                        </td>
                        <td>
                            {{$row->kilos ? $row->kilos : 'لم يحدد بعد'}}
                        </td>
                        <td>
                            {{$row->payment == 'cash' ? 'نقدى' : 'من المحفظه'}}
                        </td>
                        <td>
                            {{$row->coupon_id ? 'يوجد' : 'لا يوجد'}}
                        </td>
                        <td>
                            {{$row->total_price ? $row->total_price : 'لم يحدد بعد'}}
                        </td>

                    </tr>


                    </tbody>
                </table>
                <table class="table table-bordered dt-responsive nowrap"
                       style="margin-bottom: 30px; border-collapse: collapse; border-spacing: 0; width: 100%;">
                    <thead>
                    <tr style="font-size: large ; font-family: cairo">

                        <th>وقت الانتظار</th>
                        <th>التخطى</th>
                        <th>نوع الالغاء ان وجد</th>
                        <th>عدد الكيلوميتر</th>
                        <th>نوع الدفع</th>
                        <th>كود الخضم</th>
                        <th>السعر الكلى</th>

                    </tr>
                    </thead>
                    <tbody>

                    <tr>
                        <td>{{$row->waiting_minutes ? $row->waiting_minutes : 'لم يحدد بعد'}}</td>

                        <td>{{$row->skip == 'true' ? 'نعم' : 'لا'}}</td>

                        <td>
                            @if($row->cancel == 'paid')
                                الغاء برسوم
                            @elseif($row->cancel == 'free')
                                الغاء مجانى
                            @else
                                غير ملغي
                            @endif
                        </td>

                        <td>
                            {{$row->kilos ? $row->kilos : 'لم يحدد بعد'}}
                        </td>
                        <td>
                            {{$row->payment == 'cash' ? 'نقدى' : 'من المحفظه'}}
                        </td>
                        <td>
                            {{$row->coupon_id ? 'يوجد' : 'لا يوجد'}}
                        </td>
                        <td>
                            {{$row->total_price ? $row->total_price : 'لم يحدد بعد'}}
                        </td>

                    </tr>


                    </tbody>
                </table>

            </div>

        </div>


        <!-- /.col-md-12 -->
        <div class="col-md-6 col-xs-12">
            <div style="padding: 15px" class="box-content card">
                <h4 class="box-title">مكان الالغاء او الانسحاب</h4>
                <!-- /.box-title -->
                <div class="card-content">
                    <div id="map-marker" style="width: 100%; height: 320px"></div>
                </div>
                <!-- /.card-content -->
            </div>
            <!-- /.box-content card -->
        </div>
        <!-- /.col-md-6 -->
        <div class="col-md-6 col-xs-12">
            <div style="padding: 15px" class="box-content card">
                <h4 class="box-title"> مكان بدأ وانتهاء الرحلة</h4>
                <!-- /.box-title -->

                <div class="card-content">
                    <div id="map-poly" style="width: 100%; height: 320px"></div>
                </div>
                <!-- /.card-content -->
            </div>
            <!-- /.box-content card -->
        </div>
        <!-- /.col-md-6 -->


    </div> <!-- end row -->



@stop


@section('scripts')
    <!-- Google Map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD84ST3FIRNNVS1CEm_IE9KoR-lAIw8OPo"
            type="text/javascript"></script>
    <script>
        if ($("#map-marker").length) {
            var mapCanvas = document.getElementById("map-marker");
            var mapOptions = {
                center: new google.maps.LatLng(23.8336786, 54.1113817),
                zoom: 3
            };
            // var driver_lat;
            // var driver_lng;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng('{{$row->lat}}', {{$row->lng}}),
                animation: google.maps.Animation.BOUNCE
            });
            var map = new google.maps.Map(mapCanvas, mapOptions);
            marker.setMap(map);
        }


        if ($("#map-poly").length) {
            var start_lat = '{{$row->start_lat}}';
            var start_lng = '{{$row->start_lng}}';
            var end_lat = '{{$row->end_lat}}';
            var end_lng = '{{$row->end_lng}}';
            var stavanger = new google.maps.LatLng(start_lat, start_lng);
            var amsterdam = new google.maps.LatLng(end_lat, end_lng);

            var mapCanvas = document.getElementById("map-poly");
            var mapOptions = {center: amsterdam, zoom: 13};
            var markers = new google.maps.Marker({position: stavanger});
            var markers2 = new google.maps.Marker({position: amsterdam});

            var map = new google.maps.Map(mapCanvas, mapOptions);

            var infowindow = new google.maps.InfoWindow({
                content: "<h6 style='    font-family: Cairo, sans-serif !important;\n" +
                    "    font-weight: bolder;\n" +
                    "    padding: 0;\n" +
                    "    margin: 0;\n" +
                    "    margin-bottom: 1px;\n" +
                    "    padding-right: 23px;'>مكان بدأ الرحلة</h6>"
            });
            infowindow.open(map, markers);

            var infowindow2 = new google.maps.InfoWindow({
                content: "<h6 style='    font-family: Cairo, sans-serif !important;\n" +
                    "    font-weight: bolder;\n" +
                    "    padding: 0;\n" +
                    "    margin: 0;\n" +
                    "    margin-bottom: 1px;\n" +
                    "    padding-right: 23px;'>مكان إنتهاء الرحلة</h6>"
            });
            infowindow2.open(map, markers2);

            markers.setMap(map);
            markers2.setMap(map);

            var flightPath = new google.maps.Polyline({
                path: [stavanger, amsterdam],
                strokeColor: "#0000FF",
                strokeOpacity: 0.8,
                strokeWeight: 2
            });
            flightPath.setMap(map);
        }
    </script>
@endsection