@include('htmlpage.frontent.layout.app')
<!-- Start Page Banner Area -->
<main class="main">
    <div class="modal fade" id="ModalApplyJobForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-x3l modal-dialog-centered">
            <div class="modal-content apply-job-form">

                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body pl-30 pr-30 pt-50 activetab">
                    <div id="notification"></div>
                    <!-- OTP Verification Section -->
                    <div id="otp-verification-section">
                        <h2 class="mt-30 mb-5 text-brand-1 text-capitalize text-center">
                            Please enter your email to receive an OTP for verification:
                        </h2>
                        <form id="otp-form" class="login-register text-start mt-20 pb-30" action="#">
                            @csrf
                            <div class="form-group">
                                <label class="form-label" for="email">Email *</label>
                                <input class="form-control" id="email" type="email" required name="email"
                                    placeholder="mail@zillionit.com">
                            </div>
                            <div id="otp-field" class="form-group" style="display: none;">
                                <label class="form-label" for="otp">Enter OTP *</label>
                                <input class="form-control" id="otp" type="text" required name="otp"
                                    placeholder="Enter the OTP" disabled>
                            </div>
                            <div class="col-md-12 mt-30">
                                <button type="button" class="btn btn-apply-icon btn-apply btn-apply-big hover-up"
                                    id="sendOtp">Get OTP</button>
                            </div>
                        </form>



                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                        <script>
                            $(document).ready(function() {
                                $('#sendOtp').on('click', function() {
                                    var email = $('#email').val();
                                    if (email) {
                                        $(this).prop('disabled', true);
                                        $.ajax({
                                            url: "{{ route('send.otp') }}",
                                            type: "POST",
                                            data: {
                                                _token: "{{ csrf_token() }}",
                                                email: email
                                            },
                                            success: function(response) {
                                                $('#notification').html('<div class="alert alert-success">' +
                                                    response.message + '</div>');
                                                $('#otp-field').show();
                                                $('#otp').removeAttr('disabled').focus().val('');
                                                $('#verify-otp-section').show();
                                                autoHideNotification();
                                            },
                                            error: function(xhr) {
                                                $('#notification').html('<div class="alert alert-danger">' + xhr
                                                    .responseJSON.message + '</div>');
                                                $('#sendOtp').prop('disabled', false);
                                                autoHideNotification();
                                            }
                                        });
                                    } else {
                                        $('#notification').html('<div class="alert alert-warning">Please enter an email</div>');
                                        autoHideNotification();
                                    }
                                });

                                $('#otp').on('input', function() {
                                    var otp = $(this).val();
                                    var email = $('#email').val();

                                    if (otp.length === 6) {
                                        $.ajax({
                                            url: "{{ route('verify.otp') }}",
                                            type: "POST",
                                            data: {
                                                otp: $('#otp').val(),
                                                _token: "{{ csrf_token() }}"
                                            },
                                            success: function(response) {
                                                console.log('Response received:', response);
                                                if (response.success) {
                                                    $('#notification').html('<div class="alert alert-success">' +
                                                        response.message + '</div>');
                                                    autoHideNotification();

                                                    // Hide the OTP form
                                                    $('#otp-verification-section').hide();

                                                    // Show the tabs and content

                                                    $('#Formarea').show();
                                                } else {
                                                    $('#notification').html('<div class="alert alert-danger">' +
                                                        response.message + '</div>');
                                                    autoHideNotification();
                                                }
                                            },
                                            error: function(xhr, status, error) {
                                                console.log('Error:', xhr.responseText, status, error);
                                                $('#notification').html(
                                                    '<div class="alert alert-danger">An error occurred. Please try again later.</div>'
                                                );
                                                autoHideNotification();
                                            }
                                        });



                                    } else {
                                        // Hide the tabs container if OTP is not exactly 6 characters
                                        $('#tabs-container').hide();
                                    }
                                });

                                function autoHideNotification() {
                                    setTimeout(function() {
                                        $('#notification').fadeOut('slow', function() {
                                            $(this).empty().show(); // Clear the notification after fading out
                                        });
                                    }, 5000); // 5000 milliseconds = 5 seconds
                                }
                            });
                        </script>
                    </div>

                    <div class="row" style="display: none;" id="Formarea">

                        <div class="col-md-12">
                            <!-- <form class="form-contact contact_form" action="" method="post" id="contactForm" novalidate="novalidate"> -->

                            <h2 class="mt-30 mb-25 text-brand-1 text-capitalize text-center">
                                Select our experts to your team
                            </h2>
                            <p class="text-center">Please specify your requirements below, so that our representative
                                can
                                get in
                                touch with you.!</p>
                            <form class="login-register text-start mt-20 pb-30" id="TeamForm"
                                action="{{ route('team.teamStore') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="form-group">

                                        <input class="form-control" id="team" type="hidden" required=""
                                            name="team" value="{{ $team->team }}">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="name">First Name *</label>
                                            <input class="form-control" id="name" type="text" name="name"
                                                placeholder="John Mathew">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="company">Company</label>
                                            <input class="form-control" id="company" type="text" name="company"
                                                placeholder="Zillion IT Solutions">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="email">Company Email *</label>
                                            <input class="form-control" id="email" type="text" name="email"
                                                placeholder="mail@zillionit.com" value="{{ session('verified_email') }}"
                                                readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="phone">Company Phone *</label>
                                            <input class="form-control" id="phone" type="text" name="phone"
                                                placeholder="(+01) 234 567 89">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="seniority_level">Seniority level </label>
                                            <select class="form-control" id="seniority_level" name="seniority_level">
                                                <option value="">Choose Seniority level</option>
                                                <option value="Senior Developer">Senior Developer</option>
                                                <option value="Mid Developer">Mid Developer</option>
                                                <option value="Junior Developer">Junior Developer</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="engagement_duration">Engagement Duration
                                            </label>
                                            <select class="form-control" id="engagement_duration"
                                                name="engagement_duration">
                                                <option value="">Engagement Duration</option>
                                                <option value="0 - 3 Months">0 - 3 Months</option>
                                                <option value="3 - 6 Months">3 - 6 Months</option>
                                                <option value="6 - 11 Months">6 - 11 Months</option>
                                                <option value="1 Year">1 Year</option>
                                                <option value="3+ Year">3+ Year</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="about">About *</label>
                                            <textarea name="about" id="about" cols="20" rows="10"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-center">

                                        <button class="btn btn-default hover-up w-50" type="submit">Schedule
                                            Your
                                            Meeting</button>
                                    </div>
                                </div>
                            </form>

                            <div class="text-muted text-center">Do you need support? <a href="#">Contact
                                    Us</a>
                                <p class="font-sm text-muted mb-30">Your phone number will not be used for marketing
                                    purposes</p>
                            </div>


                            <script>
                                $(document).ready(function() {
                                    $('#TeamForm').on('submit', function(event) {
                                        event.preventDefault(); // Prevent the default form submission

                                        var formData = $(this).serialize(); // Serialize the form data

                                        $.ajax({
                                            url: $(this).attr('action'), // Get the action URL from the form
                                            type: 'POST',
                                            data: formData,
                                            success: function(response) {
                                                if (response.success) {
                                                    // Success notification
                                                    $('#notification').html('<div class="alert alert-success">' +
                                                        response.message + '</div>');
                                                    $('#TeamForm')[0].reset(); // Reset the form fields
                                                    $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                                } else {
                                                    // Handle other success cases if needed (for now, we assume success only sends a success message)
                                                    $('#notification').html('<div class="alert alert-danger">' +
                                                        response.message + '</div>');
                                                    $('#notification').fadeOut(5000);
                                                }
                                            },
                                            error: function(xhr) {
                                                // Error handling (e.g., validation errors)
                                                var errorMessage = 'An error occurred while processing your request.';
                                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                                    errorMessage = xhr.responseJSON.message;
                                                }

                                                $('#notification').html('<div class="alert alert-danger">' +
                                                    errorMessage + '</div>');
                                                $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                            }
                                        });
                                    });
                                });
                            </script>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <section class="section-box">
        <div class="breacrumb-cover">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                        <h2 class="mb-10">Hire overseas experts so you may never run out of
                            expertise in your work.</h2>
                        <p class="font-lg color-text-paragraph-2">Hire overseas experts so you may never run out of
                            expertise in your work.</p>
                    </div>
                    <div class="col-lg-5 text-end">
                        <ul class="breadcrumbs mt-40">
                            <li><a class="home-icon" href="index.html">Home</a></li>
                            <li>Hire Experts</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-12 col-sm-12 col-12">
                    <div class="box-border-single">
                        <div class="row mt-10">
                            <div class="col-lg-8 col-md-12">
                                <h3>{{ $team->page_name }}</h3>

                            </div>
                            <div class="col-lg-4 col-md-12 text-lg-end">
                                <div class="btn btn-apply-icon btn-apply btn-apply-big hover-up"
                                    data-bs-toggle="modal" data-bs-target="#ModalApplyJobForm">Hire</div>
                            </div>
                        </div>
                        <div class="border-bottom pt-10 pb-10"></div>
                        <div class="banner-hero banner-image-single mt-10 mb-20"><img
                                src="{{ asset('storage/' . $team->image_path) }}" alt="#"></div>

                        <div class="content-single">

                            <p>
                                {!! $team->content !!}
                            </p>
                            <h4>{{ $team->section1_heading }}</h4>

                            <p>
                                {{ $team->section1_content }}
                            </p>
                            <ul class="liststyle p-0">
                                @foreach ($teambenifits as $teambenifit)
                                    <li style="list-style: none;"><i class="mdi mdi-check"></i>
                                        {{ $teambenifit->title }}</li>
                                @endforeach

                            </ul>
                        </div>
                        <div class="content-single1">
                            <div class="row">
                                <h4>
                                    {{ $team->section2_heading }}
                                </h4>
                                @foreach ($teamlevels as $teamlevel)
                                    <div class="col-md-6">
                                        <div class="services-box pt-0">
                                            <!-- Dynamic Icon -->
                                            <div class="service-content">
                                                <h4 class="pb-15">{{ $teamlevel->title }}
                                                </h4> <!-- Dynamic Title -->
                                                {!! $teamlevel->content !!}
                                            </div><!-- .Service-content ends here -->
                                        </div><!-- .Services-box ends here -->
                                    </div>
                                @endforeach
                                <!-- Left column: Display first 3 dynamic services -->
                            </div><!-- .Row ends here -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12 pl-40 pl-lg-15 mt-lg-30">
                    <div class="sidebar-border">

                        <div class="sidebar-list-job">
                            <div class="box-map">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d244.5602397018362!2d75.80978654395871!3d11.264068751490141!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba65b4c86e44a23%3A0x5dfb8fa491f9bdc9!2sKairali%20Complex!5e0!3m2!1sen!2sin!4v1732061455461!5m2!1sen!2sin"
                                    allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <ul class="ul-disc">
                                <li>Second Floor, Kairali Complex Thondayad, Calicut -17 Kerala, India</li>
                                <li>Phone: (123) 456-7890</li>
                                <li>Email: mail@zillioit.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="sidebar-border">
                        <h6 class="f-18">Similar posts</h6>
                        <div class="sidebar-list-job">
                            <ul>
                                @foreach ($recentteam as $teamm)
                                    <li>
                                        <div class="card-list-4 wow animate__ animate__fadeIn hover-up animated"
                                            style="visibility: visible; animation-name: fadeIn;">
                                            <div class="image"><a
                                                    href="{{ route('dedicated-offshore-team', ['url' => str_replace(' ', '-', strtolower($teamm->url))]) }}"><img
                                                        src="{{ asset('storage/' . $teamm->image_path) }}"
                                                        alt="#" width="50"></a>
                                            </div>
                                            <div class="info-text">
                                                <h5 class="font-md font-bold color-brand-1"><a
                                                        href="{{ route('dedicated-offshore-team', ['url' => str_replace(' ', '-', strtolower($teamm->url))]) }}">{{ $team->page_name }}</a>
                                                </h5>
                                                <div class="mt-0">
                                                    <span class="card-briefcase p-0">{!! Str::words($teamm->content, 10) !!}</span>
                                                </div>


                                            </div>
                                        </div>
                                    </li>
                                @endforeach


                            </ul>
                        </div>
                    </div>
                </div>

                <h4 class="pt-20 pb-20">{{ $team->section3_heading }}</h4>
                @foreach ($teamservices as $teamservice)
                    <div class="col-lg-4 col-md-12">
                        <div class="box-radius-8 bg-9 hover-up">
                            <div class="image">
                                <figure><img src="{{ asset('storage/' . $teamservice->image_path) }}" alt="zillion">
                                </figure>
                            </div>
                            <div class="text-info">
                                <h5>{{ $teamservice->title }}</h5>
                                <p class="font-sm color-text-paragraph-2">
                                    {!! $teamservice->content !!}</p>
                            </div>
                        </div>
                    </div>
                @endforeach


                <div class="col-md-12">
                    <div class="single-apply-jobs">
                        <div class="row align-items-center">
                            <div class="col-md-5">
                                <div class="btn btn-apply-icon btn-apply btn-apply-big hover-up"
                                    data-bs-toggle="modal" data-bs-target="#ModalApplyJobForm">Hire</div>
                            </div>
                            <div class="col-md-7 text-lg-end social-share">
                                <h6 class="color-text-paragraph-2 d-inline-block d-baseline mr-10">Share this</h6>
                                <a class="mr-5 d-inline-block d-middle" href="#"><img alt="#"
                                        src="{{ asset('img/share-fb.svg') }}"></a><a
                                    class="mr-5 d-inline-block d-middle" href="#"><img alt="#"
                                        src="img/share-tw.svg"></a><a class="mr-5 d-inline-block d-middle"
                                    href="#">
                                    <img alt="#" src="{{ asset('img/share-red.svg') }}"></a><a
                                    class="d-inline-block d-middle" href="#"><img alt="#"
                                        src="{{ asset('img/share-whatsapp.svg') }}"></a>
                                {{ asset('img/share-red.svg') }}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-50 mb-20">
        <div class="container">
            <div class="box-newsletter">
                <div class="row">
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-left.png') }}" alt="zillion"></div>
                    <div class="col-lg-12 col-xl-6 col-12">
                        <h2 class="text-md-newsletter text-center">New Things Will Always<br> Update Regularly
                        </h2>
                        <div class="box-form-newsletter mt-40">
                            <form class="form-newsletter">
                                <input class="input-newsletter" type="text" value=""
                                    placeholder="Enter your email here">
                                <button class="btn btn-default font-heading icon-send-letter">Subscribe</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-right.png') }}" alt="zillion"></div>
                </div>
            </div>
        </div>
    </section>
</main>



@include('htmlpage.frontent.layout.footer')