@extends("layouts.admin.app")
@section("page-title")
    {{__("Branches")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Branches")}}</h1>
        </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="#">{{__("Branches")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    @include("includes.dialog")
    <div class="row">
        <div class="col-md-12">
            @if(isPermissionsAllowed("control-branches"))
            <div class="row">
                <div class="col-lg-6">
                    <div class="buttons-group">
                        <a href="{{route("admin.branches.create")}}" class="btn btn-primary"><i class="fas fa-plus"></i> {{__('Create Branch')}}</a>
                        <a href="{{route("admin.branches.index", ["page" => "sort"])}}" class="btn btn-primary"><i class="fas fa-sort"></i> {{__('Sort')}}</a>

                        <button type="button" class="btn btn-primary zooom" data-toggle="modal" data-target="#zoom">
                            {{ __("All Branch Locations") }}
                        </button>

                        <div class="modal fade" id="zoom" tabindex="-1" role="dialog" aria-labelledby="zoomLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="zoomLabel">{{ __("Branch Locations") }}</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>
                    </div>
                </div>
                <div class="col-lg-6 p-3 text-right">
                    <a href="{{route("admin.category-branch.index")}}" class="btn btn-primary"><i class="fa fa-copyright"></i><span class="app-menu__label">{{__("Category Branch")}}</span></a>
                </div>
            </div>
            @endif
               <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")}}</th>
                                <th>{{__("Region")}}</th>
                                <th>{{__("Phone Number")}}</th>
                                <th>{{__("Super Branch")}}</th>
                                <th>{{__("Address")}}</th>
                                <th>{{__("Location")}}</th>
                                <th>{{__("Activation")}}</th>
                                <th>{{__("Items")}}</th>
                                @if(isPermissionsAllowed("control-branches"))
                                <th>{{__("Control")}}</th>
                                @endif
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($branches as $key => $branch)
                                <tr>
                                    <td>{{$branch->id}}</td>
                                    <td>@if($branch->getFirstMediaFile()) <img src="{{ $branch->getFirstMediaFile()->url}}" alt="" width="50px">@endif</td>
                                    <td>{{$branch->getNameAttribute()}}</td>
                                    <td>{{$branch->category->getNameAttribute()}}</td>
                                    <td>{{$branch->phone_number}}</td>
                                    <td>
                                        <div class="toggle-flip changes-super">
                                            <label>
                                                <input type="checkbox" class="changes-super branch{{$branch->id}}" onclick="test(this)" data-url="{{route("ajax.branch.super_branch")}}" name="super" id="branch{{$branch->id}}}" data-status-type="branch" data-id="{{$branch->id}}" {{checked("super_branch", true, $branch)}}><span class="flip-indecator" data-toggle-on="{{__("Main")}}" data-toggle-off="{{__("Sub")}}"></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>{{$branch->address}}</td>
                                    <td> <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-primary zoom" data-max="{{$branch->max_distance_for_order}}" data-lat="{{$branch->latitude}}" data-lng="{{$branch->longitude}}" data-toggle="modal" data-target="#zoom">
                                            {{__("View Location")}}
                                        </button>
                                    </td>


                                    <!-- Modal -->
                                    <td class="text-center">
                                        <span class="status-box  @if($branch->status) bg-active-color @else bg-non-active-color @endif" style="font-size: 10px;">
                                            {{$branch->status ?__("Active") : __("Not Active")}}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{route("admin.branches.item", $branch->id)}}" class="btn btn-primary">{{__("Show")}}</a>
                                    </td>
                                    @if(isPermissionsAllowed("control-branches"))
                                    <td class="text-center">
                                        <a href="{{route("admin.branches.edit", $branch->id)}}" class="control-link edit"><i class="fas fa-edit"></i></a>
                                        <form action="{{route("admin.branches.destroy", $branch->id)}}" method="post" id="delete{{$branch->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 successfully")}}">@csrf @method("delete")</form>
                                        <span href="#" class="control-link remove form-confirm" data-form-id="#delete{{$branch->id}}"><i class="far fa-trash-alt"></i></span>
                                    </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() {
            $(".zooom").on("click", function () {
                var branches = @json($branches);
                var lat = 26;
                var lng = 49.194588353268;
                var max = 10;

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: { lat: lat, lng: lng },
                    zoom: 16,
                    scrollwheel: true,
                });

                const customIconBase = {
                    1: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                    0: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                };

                branches.forEach(function (branch) {
                    var customIconType = customIconBase[branch.status];
                    var branchName = branch.name_en; // Use the appropriate name property
                    var address = branch.address;
                    var phone = branch.phone_number;

                    var marker = new google.maps.Marker({
                        icon: {
                            url: customIconType,
                            scaledSize: new google.maps.Size(40, 40)
                        },
                        position: { lat: parseFloat(branch.latitude), lng: parseFloat(branch.longitude) },
                        map: map,
                        title: branch.name // Set marker's title for hover
                    });

                    // Create a custom HTML element for the marker's content
                    var contentString = '<div class="custom-infowindow">' +
                        '<span><strong>' + branchName + '</strong></span>' +
                        '<p>Address: ' + address + '</p>' +
                        '<p>Phone: ' + phone + '</p>' +
                        '</div>';

                    // Create an info window with the custom content
                    var infoWindow = new google.maps.InfoWindow({
                        content: contentString
                    });

                    // Add event listener for marker hover
                    marker.addListener('mouseover', function () {
                        infoWindow.open(map, marker);
                    });

                    // Close info window when mouseout
                    marker.addListener('mouseout', function () {
                        infoWindow.close();
                    });
                });

                // Add a new marker at a specific location
                var newMarker = new google.maps.Marker({
                    position: { lat: 26, lng: 49.194588353268 }, // Initial position of the new marker
                    draggable: true, // Allow the marker to be dragged
                    map: map,
                    title: 'New Marker'
                });

                // Event listener for when the new marker is dragged
                newMarker.addListener('dragend', function () {
                    var newPosition = newMarker.getPosition();
                    console.log('New marker ' +
                        ':', newPosition.lat(), newPosition.lng());

                });


                // if (customIconType === 1) {

                    newMarker.addListener('dragend', function () {
                        var newPosition = newMarker.getPosition();
                        console.log('New marker position:', newPosition.lat(), newPosition.lng());
                        var authToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiZjNhMDM1YTllZmJmYWE4YmU1YTJkZjI1YWI2YzgxMTU5NjkxZTIzY2UxNWE0NjM0NzU2MTAyNmI1M2U1M2RiMmIwMDFiMTI5YzNjMWMwYmEiLCJpYXQiOjE2OTI1MzA3OTUuNTc5OTgxMDg4NjM4MzA1NjY0MDYyNSwibmJmIjoxNjkyNTMwNzk1LjU3OTk4NDkwMzMzNTU3MTI4OTA2MjUsImV4cCI6MTcyNDE1MzE5NS41NzIxMjgwNTc0Nzk4NTgzOTg0Mzc1LCJzdWIiOiIxMyIsInNjb3BlcyI6W119.fZXdPZKsP2FhSvcMd0wdvNfEGfrj-NMFCK86mYV8y_qKxI_HzWnOy2QvGyv9PaxiCKAUS7Y1NtL-LjzRVCfZEOj_QQeCnJqgzd96syLkU1GZM9d6lIdNG6r5Umhb-1hzAZkeVTWggLKl_zs4P5gp5Hh_YMnUQT3tV8_Hdc_3nafM48yQHMIAzNkHmAVWbie8PyV-dEQvnK-sJLZ4FpPZEppYbQhnQvXu590DnuA2LqTbPc8_76TikWXHKfP2IwMUVQiFWKJoYxSq1pe18s5eJpAMxMkIlpvzo8p86JTemi9iCNCdFfw5pzQFW0NaXn3GS9M2GWyj3V6BWXQ9b4VNC9yMpgcOoUCTVTlCcTuFj9M7kpZ6_-_KF4sNF4UlIc_YjPhhkXoVp4GwAQiPcQpE3GvCCaWUsbJMeaAOV-aOmgXNB0LGTn6TepNUM1Z_l9v_g0djlkIBtfhG8S9JpGzpDASEbNY4ezUywS8qVeLs7i017U5MHOHl5uNu7Ty2frSMnYmIS9qqZ9jgutlPAGZBEEXh_lso2Y-KD2aESGSKCKGRJUA3PBKVjt44F6JDXZwObFZzqD5jlWlnjm21FqTAx62MzJHCOEERHuEHxXObuyf3CGfm47oc1ZYN0Qe7Y836fWHUhK4aPFlCT2LU3KqHZqT2pkote_DXLIsTXQ4Q6IY'; // Replace with your actual bearer token

                        // Make an AJAX request to the API with the authorization header


                        $.ajax({
                            url: 'https://hbdashboard.hunngrybunny.digisolapps.com/api/en/branch/by-lat-lng',
                            headers: {
                                Authorization: 'Bearer ' + authToken
                            },
                            data: {
                                lat: newPosition.lat(),
                                lng: newPosition.lng()
                            },

                            success: function (data) {
                                console.log(data)
                                var Name = data.data.name;
                                var phone = data.data.phone_number;


                                Swal.fire({

                                    title: 'Nearest Branch Information',
                                    html: "  Name : " + Name + "<br>" +
                                        "Phone Number: " + phone,
                                    icon: 'info'
                                });

                            },
                            error: function (error) {
                                console.error('Error fetching nearest branch:', error);
                            }

                        });
                    });

            });


            $(".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: map,
                    center: { lat: lat, lng: lng },
                    radius: parseInt(max) * 1000,
                });



            })



        }

    </script>
    <script type="text/javascript">
        $("#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>
{{--    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20/dist/sweetalert2.all.min.js"></script>--}}
@endsection