@extends('front.layout.app')
@section('content')
    <!-- <section class="innerBanner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-5 col-sm-6">
                    <div class="innerBanner-content">
                        <h1>Contact Us</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-7 col-sm-6">
                    <div class="innerBanner-img">
                        <figure>
                            <img src="images/generation.png" class="img-fluid object-fit" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section> -->
    <section class="contactUs">
        <div class="container">
            <!-- <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="opurtunity">
                        <form>
                            <ul>
                                <li>
                                    <span><input type="text" placeholder="City, State, or Zip Code"></span>
                                </li>
                                <li>
                                    <div class="dropdown show">
                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button"
                                            id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Distance
                                            <span>5 miles</span>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                            <a class="dropdown-item" href="#">5 miles</a>
                                            <a class="dropdown-item" href="#">10 miles</a>
                                            <a class="dropdown-item" href="#">25 miles</a>
                                            <a class="dropdown-item" href="#">50 miles</a>
                                            <a class="dropdown-item" href="#">100 miles</a>
                                            <a class="dropdown-item" href="#">150 miles</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <button class="showBtn">
                                        Show Offices
                                    </button>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div> -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="contactTitle">
                        <!-- <h2 class="sectionHeading text-center">Unlocking Opportunities in Every Location</h2> -->
                        <h2 class="sectionHeading text-center">Ready for the next opportunity?</h2>
                        <p>Tell our experienced recruiters about your skills, interests and goals - what you liked about
                            places you've worked and what you want in your next position. Helping you find the job you
                            want
                            is our top priority.</p>
                        {{--<iframe id="dynamic-iframe" width="100%" height="640" frameborder="0" style="border:0"
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.912846736188!2d-118.13600182373818!3d33.94336962347042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cd97a540323f%3A0x871828f5f9f1c2e2!2s10913%20La%20Reina%20Ave%20b%2C%20Downey%2C%20CA%2090241%2C%20USA!5e0!3m2!1sen!2s!4v1698408461290!5m2!1sen!2s" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade" title="USA Map"></iframe>--}}
                    </div>
                </div>
                @php
                    $decodedContent = json_decode($contact->content, true);
                @endphp

                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="nearSearches" data-lenis-prevent>
                                <nav>
                                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                        @foreach ($decodedContent['phone'] as $index => $location)
                                            <button class="nav-item nav-link"
                                                    id="nav-location-tab-{{ $index }}"
                                                    data-toggle="tab"
                                                    onclick="initMap({{ $index }})"
                                                    role="tab"
                                                    aria-controls="nav-location"
                                                    aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                                            >
                                                <div class="locationBox">
                                                    <div class="iconLoc">
                                                        <span><i class="fas fa-map-marker"><div>{{ $index + 1 }}</div></i></span>
                                                        <div class="content"> {{ $decodedContent['location_heading'][$index] }}</div>
                                                    </div>
                                                    <p>{{ $decodedContent['address'][$index] }}</p>
                                                    <a href="tel:{{ $decodedContent['phone'][$index] }}" class="cal">
                                                        <i class="fas fa-phone-alt"></i>{{ $decodedContent['phone'][$index] }}
                                                    </a>
                                                    <a href="{{ $decodedContent['map_link'][$index] }}" target="_blank" class="get">
                                                        <i class="fas fa-paper-plane"></i>Get Directions
                                                    </a>
                                                </div>
                                            </button>
                                        @endforeach
                                    </div>
                                </nav>
                            </div>
                        </div>

                <div class="col-md-8">
                    <iframe
                        id="dynamic-iframe"
                        width="100%"
                        height="640"
                        frameborder="0"
                        style="border:0"
                        src=""
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Map Viewer"
                    ></iframe>
                </div>
            </div>
        </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="contactForm">
                        <h3>Contact Us</h3>
                        <form action="{{ route('contact.info') }}" method="POST" class="inputFlied">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <input type="text" name="firstname" placeholder="First Name*">
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" name="lastname" placeholder="Last Name*">
                                </div>
                                <div class="col-lg-6">
                                    <input type="tel" name="phone_no" placeholder="Phone Number*" maxlength="15">
                                </div>
                                <div class="col-lg-6">
                                    <input type="email" name="email" placeholder="Email Address*">
                                </div>
                                <div class="col-lg-12">
                                    <textarea type="text" name="msg" cols="6" rows="7" placeholder="Message"></textarea>
                                </div>
                                <div class="col-lg-12">
                                    <button type="submit" class="themeBtn">Submit</button>
                                </div>
                            </div>
                        </form>
                        <div id="signupFormResult2"></div>
                    </div>
                </div>
                <!-- <div class="col-lg-5">
                    <div class="contactInfo">
                        <ul class="calFoter">
                            <li>
                                <p>
                                    <img src="images/icons/locationicon.png" class="img-fluid" alt="">
                                    <span>10913 La Reina Ave Suite B Downey CA 90241
                                    </span>
                                </p>
                            </li>
                            <li>
                                <a href="tel:+13239178044"><img src="images/icons/callicon.png" class="img-fluid" alt=""><span>(323) 917-8044</span></a>
                            </li>
                            <li>
                                <a href="mailto:info@osistaff.net"><img src="images/icons/mailicon.png" class="img-fluid" alt=""><span>info@osistaff.net</span></a>
                            </li>
                        </ul>
                        <ul class="sociallinks">
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div> -->
            </div>
        </div>
    </section>

    {{--<script>
        var currentLocationIndex = 0;

        function changeIframeSrc(index) {
            // Get the iframe element by its ID
            var iframe = document.getElementById('dynamic-iframe');

            // Get the link for the clicked location
            var link = "{{ $decodedContent['map_link'][0] }}"; // Default to the first link

            if (index >= 0 && index < {{ count($decodedContent['map_link']) }}) {
                link = "{{ $decodedContent['map_link'][$index] }}";

            }

            // Update the iframe source
            iframe.src = link;
        }

    </script>--}}
    <!-- Latest version of jQuery -->


    <!-- Load Google Maps API script -->
    <!-- Test without API key (not recommended for production) -->
    {{--    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap" async defer></script>--}}

@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log("Document ready");
            initMap(currentLocationIndex); // Initialize the map on document ready
        });

        var currentLocationIndex = 0;

        function initMap(index) {
            var iframe = document.getElementById('dynamic-iframe');
            var mapLinks = {!! json_encode($decodedContent['map_link']) !!};

            if (index >= 0 && index < mapLinks.length) {
                iframe.src = mapLinks[index];
                console.log("Updated iframe with link:", mapLinks[index]);
                currentLocationIndex = index; // Update the current index
            } else {
                console.error("Invalid index:", index);
            }
        }
    </script>
@endsection