@extends('layouts.front-end.app')

@section('title', translate('Branches'))

@push('css_or_js')
    <style>
        .branches_list {
            height: 80vh;overflow-y: scroll;
        }



        @media (min-width: 560px) {
            .exit_btn {display: none}
        }
        @media (max-width: 560px) {
            .branches_list {
                height: auto;
            }
            .map_card {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100%;
                width: 400px;
                max-width: 100%;
                background: white;
                z-index: 1050;
                transition: right 0.3s ease-in-out;
                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
            }

            .map_card.open {
                right: 0;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container for-container rtl">
        <h2 class="text-center py-4 fs-24 font-semi-bold text-capitalize">{{ translate('Branches')}}</h2>
        <div class="row">
            <div class="col-lg-4 col-12 branches_list">

                @if(isset($branches) && $branches->count() > 0)
                    @foreach($branches as $branch)
                        <div class="card p-3 mb-2 cursor-pointer" data-lat="{{ $branch->lat ?? '30.0444' }}" data-lng="{{ $branch->lng ?? '31.2357' }}" onclick="showBranchLocation(this)">
                            <h5 class="mb-2">{{$branch->name}}</h5>
                            <p class="text-gray-400">
                                {{$branch->address}}
                            </p>
                            @foreach(json_decode($branch->phones) as $key => $phone)
                                <p class="bold mb-1">
                                    {{translate('Phone')}} {{$key + 1}} :

                                    <a href="tel:{{$phone}}">
                                        <span class="text-danger">
                                            {{$phone}}
                                        </span>
                                    </a>
                                </p>
                            @endforeach
                            <a  href="https://www.google.com/maps/dir/?api=1&destination={{ $branch->lat ?? '30.0444' }},{{ $branch->lng ?? '31.2357' }}" target="_blank" class="btn btn-sm btn--primary mt-2 fw-bold">
                                {{translate('Get Directions')}}
                            </a>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="col-lg-8 col-12 map_card" id="map_card">
                <div class="card p-3 position-relative" style="height: 100%;">

                <button class=" position-absolute top-0 end-0 m-3 btn btn-danger btn-sm exit_btn" style="z-index: 9999;" onclick="closeMapSidebar()" >
                    x
                </button>
                <div id="map_view" style="height: 100%; min-height: 400px;">

                </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')

    <script
        src="https://maps.google.com/maps/api/js?key=AIzaSyB-uADMlF6PqwccIr3q6Vpyl0wJgJNsxOM&libraries=places&region=eg&language=ar&sensor=true"></script>


    <script>
        let map;

        // Initialize the map
        function initMap() {
            const defaultLocation = { lat: 30.0444, lng: 31.2357 };  // Default location (e.g., Cairo)
            map = new google.maps.Map(document.getElementById("map_view"), {
                center: defaultLocation,
                zoom: 12
            });
        }

        function showBranchLocation(card) {
            const lat = parseFloat(card.getAttribute('data-lat'));
            const lng = parseFloat(card.getAttribute('data-lng'));
            const branchLocation = { lat: lat, lng: lng };

            // Show sidebar
            document.getElementById('map_card').classList.add('open');

            // Set and update the map
            map.setCenter(branchLocation);
            map.setZoom(15);

            new google.maps.Marker({
                position: branchLocation,
                map: map,
                title: card.querySelector('h5').innerText
            });
        }

        function closeMapSidebar() {
            document.getElementById('map_card').classList.remove('open');
        }


        // Initialize the map once the page is ready
        window.onload = initMap;
    </script>
@endpush