@section('page-title', __('language.contact'))
@section('page-description', __('language.contactus'))
@section('page-image', asset($detail->image ?? 'site/img/default.png'))
@extends('site.master')
@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.contactus')</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">Home</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                @lang('language.contactus') </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="py-5">
        <div class="container">
            <div class="row">
            <div class="d-flex flex-column flex-lg-row flex-md-row justify-content-between align-items-end">
                <div>
                    <h5 class="text-uppercase text-danger fw-bold fs-7"> @lang('language.contactus')</h5>
                    <h2 class="w-75 fw-bold fs-2 text-custom-blue-dark2">Secure Your Future with Confidence</h2>
                </div>


                <p class="text-gray fs-7 col-lg-6">
                    We are here to help protect your future with comprehensive insurance solutions" emphasizes the
                    insurance
                    company's commitment to safeguarding clients' long-term well-being by offering a range of coverage
                    options tailored to their needs.

                </p>
            </div>
                <div class="col-lg-5 d-flex flex-column">

                    <div class="mt-3">
                        <div class="row g-3">
                            @foreach ($offices as $key => $item)
                                <div class="col-lg-12">
                                    <div class="shadow p-5 px-4 position-relative rounded-2 bg-hover-danger">
                                        <h3 class="text-custom-blue-dark2 fw-bold fs-5 mb-4">{{ $item->title }} <span
                                                class="d-block fs-6 fw-normal">
                                                {{ session('localeSession') == 'en' ? $item->getprovince->title_en : $item->getprovince->title_np }}
                                            </span></h3>
                                        <div class="reser-conent">
                                            <ul class="list-unstyled">

                                                <li>
                                                    <div class="d-flex justify-content-start">
                                                        <span class="me-2"><i class="bi-map text-danger"></i></span>
                                                        <span class="w-75">{{ 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>
                                                <li>
                                                    <div class="d-flex justify-content-start">
                                                        <span class="me-2"><i class="bi-printer text-danger"></i></span>
                                                        <span class="w-75">{{ numEnToNp($item->fax_no) }}</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="d-flex justify-content-start">
                                                        <span class="me-2"><i class="bi-phone text-danger"></i></span>
                                                        <span class="w-75">
                                                            @php
                                                                $phoneNumbers = explode(',', $item->phonenumberbranch);
                                                            @endphp
                                                            @foreach ($phoneNumbers as $phoneNumber)
                                                                <a
                                                                    href="tel:{{ trim($phoneNumber) }}">{{ numEnToNp(trim($phoneNumber)) }}</a>
                                                                @if (!$loop->last)
                                                                    ,
                                                                @endif
                                                            @endforeach
                                                        </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="d-flex justify-content-start">
                                                        <span class="me-2"><i class="bi-envelope text-danger"></i></span>
                                                        <span class="w-75">
                                                            <a href="mailto:{{ $item->branchemail }}"
                                                                title="{{ $item->branchemail }}"
                                                                class="text-decoration-none">
                                                                {{ $item->branchemail }}
                                                            </a>
                                                        </span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                    <form method="POST" action="{{ url(session('localeSession') . '/insertfeedback') }}"
                        class="m-auto px-5 py-3 mt-3">
                        @csrf()
                        <div class="mb-3">
                            <div class="row">
                                <div style="display: none;">
                                    <input type="text" name="website" id="website" />
                                </div>
                                <div class="col-lg-6 mb-4 mt-3">
                                    <select name="tobranch" id="tobranch" class="form-control">
                                        <option value="">Select Branch</option>
                                        @foreach ($cmbranchs as $item)
                                            <option value="{{ $item->id }}">{{ $item->title }}</option>
                                        @endforeach

                                    </select>
                                </div>

                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">Full Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="full_name" id="" class="form-control">
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Email <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="email" id="" class="form-control">
                                    </div>

                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Mobile Number <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="contactnumber" id="" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">Subject  <span
                                    class="text-danger">*</span></label>
                                <input type="text" name="subject" id="" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">Message  <span
                                    class="text-danger">*</span></label>
                                <textarea type="text" name="messege" rows="6" id="" class="form-control" required></textarea>
                            </div>
                           @if (!empty($setting->google_recaptcha_site_key))
                                <div class="mb-3">
                                    <div class="g-recaptcha" data-sitekey="{{ $setting->google_recaptcha_site_key }}"></div>
                                </div>
                            @endif

                            <div class="d-flex">
                                <button type="submit" class="btn btn-primary px-5">send</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

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

            <div class="container ">
                <div class="map-section bg-primary 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">
                            {{ session('localeSession') == 'en' ? $item->title_en : $item->title_np }}
                        </a>
                    @endforeach
                </div>
                <div class="row">
                    @foreach ($branches as $key => $item)
                        <div class="col-lg-4 branch-item " 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>
                            </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/resources/viewsold/site/contact.blade.php</b> on line <b>453</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/nepalmicro/public_html/resources/viewsold/site/contact.blade.php</b> on line <b>453</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