@extends("layouts.admin.app")
@section("page-title")
    {{__("Stations")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Stations")}}</h1>
            <p>{{__("All Stations")}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Stations")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    @include("layouts.main-parts.page-message")

    <div class="row">
        <div class="col-md-12">
            <a href="{{route("admin.stations.export.excel")}}"  class="btn btn-primary"><i class="far fa-fw fa-lg  fa-file-excel text-left"></i> {{__('Export As Excel')}}</a>
            <div class="tile">
                <div class="tile-body">
                    <div class="table-responsive" id="purchase_super">
                        <table class="table table-hover table-bordered text-center" id="sampleTable">
                            <thead>
                            <tr>
                                <th>{{__("ID")}}</th>
                                <th>{{__("Image")}}</th>
                                <th>{{__("Name English")}}</th>
                                <th>{{__("Name Arabic")}}</th>
                                <th>{{__("Phone Number")}}</th>
                                <th>{{__("Address English")}}</th>
                                <th>{{__("Address Arabic")}}</th>
                                <th>{{__("Area")}}</th>
                                <th>{{__("Location")}}</th>
                                <th>{{__("Activation")}}</th>
                                <th>{{__("zip")}}</th>
                                @if(isPermissionsAllowed("edit-stations" ,"delete-stations"))
                                    <th>{{__("Control")}}</th>
                                @endif

                            </tr>
                            </thead>
                            <tbody>
                            @foreach($stations as $key => $station)
                                <tr>
                                    <td>{{$station->id}}</td>
                                    <td><img src="{{$station->image_url}}" alt="" width="50px"></td>
                                    <td>{{$station->name_en}}</td>
                                    <td>{{$station->name_ar}}</td>
                                    <td>{{$station->phone_number}}</td>
                                    <td>{{$station->address_en}}</td>
                                    <td>{{$station->address_ar}}</td>
                                    <td>{{$station->area->name_en}}</td>
                                    <td> <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-primary zoom" data-max="5" data-lat="{{$station->latitude}}" data-lng="{{$station->longitude}}" data-toggle="modal" data-target="#zoom">
                                            {{__("View Location")}}
                                        </button>
                                    </td>
                                    <!-- Modal -->
                                    <td class="text-center">
                                        <span class="status-box @if($station->status) bg-active-color @else bg-non-active-color @endif">
                                            @if($station->status == 1)
                                                {{ __("Active") }}
                                            @elseif($station->status == 2)
                                                {{ __("Non-Active") }}
                                            @else
                                                {{ __("Under-Process") }}
                                            @endif
                                        </span>
                                    </td>
                                    <td>{{$station->zip}}</td>
                                    @if(isPermissionsAllowed("edit-stations" ,"delete-stations"))
                                        <td class="text-center">
                                            @if(isPermissionsAllowed("edit-stations"))
                                                <a href="{{route("admin.stations.edit", $station->id)}}" class="control-link edit"><i class="fas fa-edit"></i></a>
                                            @endif
                                            @if(isPermissionsAllowed("delete-stations"))
                                                <form action="{{route("admin.stations.destroy", $station->id)}}" method="post" id="delete{{$station->id}}" style="display: none" data-swal-title="{{__("Delete Branch")}}" data-swal-text="{{__("Are You Sure To Delete This Branch?")}}" data-yes="{{__("Yes")}}" data-no="{{__("No")}}" data-success-msg="{{__("the branch has been deleted succssfully")}}">@csrf @method("delete")</form>
                                                <span href="#" class="control-link remove form-confirm" data-form-id="#delete{{$station->id}}"><i class="far fa-trash-alt"></i></span>
                                            @endif
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                            <div class="modal fade" id="zoom" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Location</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div id="map"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")

    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
    {{--    <script type="module" src="{{asset("assets/js/modules/helpers.js")}}"></script>--}}
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
    <script type="text/javascript">
        if(document.location.hostname == 'pratikborsadiya.in') {
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap" type="text/javascript"></script>
    <script>
        let map;
        function initMap() {
            $(".zoom").on("click",function (){
                let max = $(this).data("max"), lat = $(this).data("lat"), lng = $(this).data("lng");
                console.log(lat, lng)
                map = new google.maps.Map(document.getElementById("map"), {
                    center: {lat: parseFloat(lat), lng: parseFloat(lng)},
                    zoom: 16,
                    scrollwheel: true,
                });

                let marker = new google.maps.Marker({
                    position: {"lat": parseFloat(lat),"lng": parseFloat(lng)},
                    map: map,
                    draggable: true
                });

                const cityCircle = new google.maps.Circle({
                    strokeColor: "#0914ea",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#0914ea",
                    fillOpacity: 0.35,
                    map,
                    center: {"lat": parseFloat(lat),"lng": parseFloat(lng)},
                    radius: parseInt(max) * 1000,
                });
            })
        }

    </script>
    <script type="text/javascript">
        // $(document).ready(function() {
        //
        //     function initMap() {
        //         var map = new google.maps.Map(document.getElementById('map'), {
        //             zoom: 10,
        //             center: new google.maps.LatLng(31.97579740000000000, 35.86237730000000000),
        //             mapTypeId: google.maps.MapTypeId.ROADMAP
        //         });
        //
        //         const cityCircle = new google.maps.Circle({
        //             strokeColor: "#FF0000",
        //             strokeOpacity: 0.8,
        //             strokeWeight: 2,
        //             fillColor: "#FF0000",
        //             fillOpacity: 0.35,
        //             map,
        //             center: citymap[city].center,
        //             radius: Math.sqrt(citymap[city].population) * 100,
        //         });
        //     }
        // })


        //        function test(e){
        //            let url = $(e).data("url"),
        //                id = $(e).data("id");
        //
        //            console.log(url)
        //
        //            $.ajax({
        //                type: "post",
        //                headers: {
        //                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //                },
        //                url: url,
        //                data: {"id":id},
        //                success:   function( response ) {
        //
        //                    let  oldid=response.data.oldid;
        //                    $(".branch"+oldid).attr("checked",true);
        //                    $(".branch"+id).attr("checked",true);
        //                },
        //                error : function (response) {
        //                    console.log("Error!");
        //                }
        //            });
        //
        //        }
        $("#purchase_super").on("click", ".changes-super input[type=\"checkbox\"]", function (){

            let url = $(this).data("url"),
                id = $(this).data("id"),
                type = $(this).data("status-type"),
                value = $(this)[0].checked ? 1 : 0,
                checkBox = $(this);

            console.log(url)

            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: url,
                data: {"id":id},
                success:   function( response ) {

                    let  oldid=response.data.oldid;
                    $(".branch"+oldid).removeAttr("checked");
                    $(".branch"+id).removeAttr("checked");
                    // $(".branch"+id).attr("checked",true);

                    console.log("test success"+oldid)
                    console.log("test success"+id)
                },
                error : function (response) {
                    console.log("Error!");
                }
            });

        });

    </script>

@endsection