@extends('site.master')
@section('page-title', __('language.ourbranch'))
@section('page-description', __('language.ourbranch'))
{{-- @section('page-image', asset($branch->image ?? $branch->image)) --}}
@section('main-content')
    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        @lang('language.ourbranch')</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                @lang('language.ourbranch') </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>


    <section class="bg-light pt-4">
        <div class="">

            <div class="container ">
                <div class="map-section bg-success bg-opacity-10">
                    <div id="map" style="width:100%; height: 600px; ">

                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="bg-light">
        <div class="py-5 ">
            <div class="container">
                <div class="">
                    <h3 class="text-uppercase fw-bold fs-4 text-custom-blue-dark2">
                        @lang('language.ourbranch')

                    </h3>
                </div>
            </div>

            <div class="container">
                <div class="d-flex flex-wrap row-cols-2 row-cols-lg-auto justify-content-around bg-white mb-3">
                    <a href="javascript:void(0)" data-value="all"
                        class="bg-danger text-black-50 active flex-grow-1 text-center py-2 fs-6 filter-link">All</a>

                    @foreach ($province as $item)
                        <a href="javascript:void(0)" data-value="{{ $item->slug }}"
                            class="text-black-50 flex-grow-1 text-center py-2 fs-6 filter-link">
                            {{ $item->shrtname }}
                        </a>
                    @endforeach
                </div>
                <div class="row">
                    @foreach ($branches as $key => $item)
                    <div class="col-lg-4 branch-item position-relative" data-value="{{ $item->getprovince->slug }}">
                        <div
                        class="shadow p-5 px-4 pb-3 position-relative rounded-2 relate-items mb-5 bg-hover-danger">
                            <h3 class="text-custom-blue-dark2 fw-bold fs-6 mb-4">{{ $item->title }} <span
                                    class="d-block fs-7 fw-normal mt-2">
                                    {{ session('localeSession') == 'en' ? $item->getprovince->title_en : $item->getprovince->title_np }}
                                </span></h3>
                            <div class="reser-conent">
                                <ul class="list-unstyled">
                                    @if ($item->branchmanager || $item->branchincharge)
                                        <li>
                                            <div class="d-flex justify-content-start">
                                                <span class="me-2"><i class="bi-person "></i></span>
                                                <span class="w-75 d-flex align-items-start gap-0 flex-column">
                                                    <span class="fs-7 fw-bold">
                                                        {{ $item->branchmanager ? 'Branch Manager' : 'Branch Incharge' }}
                                                    </span>
                                                    <span>
                                                        {{ $item->branchmanager ? $item->branchmanager : $item->branchincharge }}
                                                    </span>
                                                </span>
                                            </div>
                                        </li>
                                        @endif
                                    <li>
                                        <div class="d-flex justify-content-start">
                                            <span class="me-2"><i class="bi-map"></i></span>
                                            <span class="w-80">{{ $item->tole }},
                                                {{ session('localeSession') == 'en' ? $item->getmunicipality->title : $item->getmunicipality->title_np }}, {{ session('localeSession') == 'en' ? $item->getdistrict->title_en : $item->getdistrict->title_np }}, {{ session('localeSession') == 'en' ? $item->getprovince->title_en : $item->getprovince->title_np }}
                                            </span>
                                        </div>
                                    </li>
                                    @if ($item->fax_no)
                                        <li>
                                            <div class="d-flex justify-content-start">
                                                <span class="me-2"><i class="bi-printer"></i></span>
                                                <span class="w-75">{{ numEnToNp($item->fax_no) }}</span>
                                            </div>
                                        </li>
                                    @endif

                                    @if ($item->phonenumberbranch)
                                        <li>
                                            <div class="d-flex justify-content-start">
                                                <span class="me-2"><i class="bi-phone"></i></span>
                                                <span class="w-75">
                                                    @php
                                                        $phoneNumbers = explode(',', $item->phonenumberbranch);
                                                    @endphp
                                                    @foreach ($phoneNumbers as $phoneNumber)
                                                        <a class="text-dark"
                                                            href="tel:{{ trim($phoneNumber) }}">{{ numEnToNp(trim($phoneNumber)) }}</a>
                                                        @if (!$loop->last)
                                                            ,
                                                        @endif
                                                    @endforeach
                                                </span>
                                            </div>
                                        </li>
                                    @endif


                                    @if ($item->branchemail)
                                        <li>
                                            <div class="d-flex justify-content-start">
                                                <span class="me-2"><i class="bi-envelope"></i></span>
                                                <span class="w-75">
                                                    <a href="mailto:{{ $item->branchemail }}"
                                                        title="{{ $item->branchemail }}"
                                                        class="text-decoration-none text-dark">
                                                        {{ $item->branchemail }}
                                                    </a>
                                                </span>
                                            </div>
                                        </li>
                                    @endif

                                </ul>
                            </div>
                            <a href="{{ route('branches.show', ['slug'=> $item->slug ]) }}" class="stretched-link"></a>
                        </div>
                    </div>
                @endforeach
                    
                </div>
                <!-- No data found message -->
                <div id="no-data-message" class="p-4 bg-white text-center mt-4" style="display: none;">
                    <p class="mb-0">No data found</p>
                </div>
            </div>


        </div>
    </section>
@endsection
@push('script')
    <style>
        .contct-form-section {
            margin-top: -200px;
            background: white;
            float: left;
            width: 100%;
            padding: 20px;
        }



        .contct-form-section li .i-d-icon-holder {
            float: left;
            font-size: 1em;
            color: #3E4098;
            margin-right: 13px;
            margin-top: 6px;
        }



        .contct-form-section li .i-d-content a {
            font-size: 1.2em;
            font-weight: 600;
            color: #003688 !important;
        }

        .contct-form-section li .i-d-content span {

            display: block;
            color: rgba(41, 41, 41, 0.8);

        }
    </style>
    <script>
        // (function() {
        //     'use strict'
        //     // Fetch all the forms we want to apply custom Bootstrap validation styles to
        //     var forms = document.querySelectorAll('.needs-validation')
        //     // Get all form-groups in need of validation
        //     var validateGroup = document.getElementsByClassName('validate-me');
        //     // Loop over them and prevent submission
        //     Array.prototype.slice.call(forms)
        //         .forEach(function(form) {
        //             form.addEventListener('submit', function(event) {
        //                 if (!form.checkValidity()) {
        //                     event.preventDefault()
        //                     event.stopPropagation()
        //                 }

        //                 //Added validation class to all form-groups in need of validation
        //                 for (var i = 0; i < validateGroup.length; i++) {
        //                     validateGroup[i].classList.add('was-validated');
        //                 }
        //             }, false)
        //         })
        // })();

        // (function(){
        //     setTimeout(function(){
        //         $("#statuspage-msg").fadeOut(800);
        //     }, 5000)
        // })();
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterLinks = document.querySelectorAll('.filter-link');
            const branchItems = document.querySelectorAll('.branch-item');
            const noDataMessage = document.getElementById('no-data-message');

            // Function to handle filtering
            function filterBranches(filterValue) {
                let hasVisibleItems = false;

                branchItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-value') === filterValue) {
                        item.style.display = 'block'; // Show the item
                        hasVisibleItems = true;
                    } else {
                        item.style.display = 'none'; // Hide the item
                    }
                });

                // Show or hide the "No data found" message
                noDataMessage.style.display = hasVisibleItems ? 'none' : 'block';
            }

            // Set the default filter to "All"
            filterBranches('all');

            // Add click event listener to each filter link
            filterLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();

                    // Remove the active class from all filter links
                    filterLinks.forEach(l => {
                        l.classList.remove('bg-danger', 'text-white', 'active');
                        l.classList.add(
                            'text-black-50'
                        ); // Ensure text-black-50 remains after removing the active state
                    });
                    // Add the active class to the clicked link
                    this.classList.add('bg-danger', 'text-white', 'active');
                    this.classList.remove('text-black-50');
                    // Get the selected value from the clicked link
                    const filterValue = this.getAttribute('data-value');

                    // Apply the filter
                    filterBranches(filterValue);
                });
            });
        });
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBteR3fNtDSDFvG5bMb70mQf0WtKSYsHuo&callback=initMap"></script>
    <script>
        const apiKey = 'AIzaSyBteR3fNtDSDFvG5bMb70mQf0WtKSYsHuo';

        // Sample branch data
        const branches = [
            <br />
<b>Warning</b>:  Undefined variable $branches in <b>/home/nepalmicro/public_html/modules/Branches/Views/site/details.blade.php</b> on line <b>299</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/nepalmicro/public_html/modules/Branches/Views/site/details.blade.php</b> on line <b>299</b><br />
            // Add more branches here
        ];

        function initMap() {
            const map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 28.394857,
                    lng: 84.124008
                },
                zoom: 7.5,
            });

            const infowindow = new google.maps.InfoWindow();

            branches.forEach(branch => {
                const marker = new google.maps.Marker({
                    position: branch.location,
                    map: map,
                    title: branch.name,
                    icon: '{{ asset('site/img/micro-icon.png') }}', // Laravel asset helper for the icon URL
                });

                marker.addListener('click', () => {
                    let content = '<div>';
                    content += '<h3 class="text-primary fs-6 fw-bold">' + branch.name + '</h3>';
                    content += '<p class="mb-0"><strong> Address: ' + branch.content + '</strong></p>';
                    content += '<p class="mb-0"><strong> Email: ' + branch.email + '</strong></p>';
                    content += '<p class="mb-0"><strong> Phone: ' + branch.phone + '</strong></p>';
                    content += '<p class="mb-0"><strong> Fax: ' + branch.fax + '</strong></p>';
                    content += '</div>';

                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });
            });
        }
    </script>
@endpush