@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