@extends('website.layouts.app')
@section('content')
    <style>
        .form-label {
            color: #054776;
            font-weight: 800;
            line-height: 107%;
            text-transform: capitalize;
            font-family: "Roboto", sans-serif;
            font-size: 16px;
            margin-bottom":4px;

        }

        .form-select:focus {
            border-color: #AFBACA;
        }

        .form-select {
            padding: 15px 10px 15px 15px;
            border: 1px solid #AFBACA;
            color: #7E7E7E;
        }

        .p_main_div_no_p {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        @media (min-width: 301px) and (max-width: 600px) {
            #track_my_ap_s5 .sms_service_img img {
                height: auto;
            }
        }

        @media (min-width: 601px) and (max-width: 991px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 100%;
            }
        }

        @media (min-width: 992px) and (max-width: 1028px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 431px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1029px) and (max-width: 1400px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 490px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1401px) and (max-width: 1440px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 545px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1441px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 490px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }

        }
    </style>
    <section id="lead_gen_p_banner" class="lead_gen_p_banner_bg">
        <div class="container-fluid banner_height align-content-center">
            <div class="col-lg-10 col-md-10 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row d-flex justify-content-center ">
                            <div class="col-xl-7 col-lg-7 col-md-6 col-12 align-content-center">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12">
                                        <div class="tabs-content text-md-start text-center">
                                            <h1>{{ $page->lead_heading_en }}</h1>
                                            <p>{{ $page->lead_description_en }}</p>
                                            <div class="b_n_app_buttons">
                                                <!--<span class="faq">-->
                                                <!--    <a href="{{ $page->lead_get_started_en }}">Get Started </a>-->
                                                <!--</span>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5 col-lg-5 col-md-6 col-12 align-content-center ">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/lead_gen_page/' . $page->lead_image) }}"
                                                class="img-fluid " alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="lead_gen_p_s2" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row gy-3">
                            <div class="col-xl-6">
                                <div class="col-md-11 col-12">
                                    <div class="l_gen_s2_r_content pt-xl-4">
                                        <h2>{{ $page->lead_sub_heading_en }}</h2>
                                        <p>{{ $page->lead_sub_description_en }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="col-md-11 col-12">
                                    <div class="l_gen_s2_l_content">
                                        <form id="leadGenForm" name="leadGenForm">
                                            @csrf
                                            <div class="card shadow">
                                                <h6>Learn more about our services</h6>
                                                <div class="mb-3">
                                                    <input type="name" name="name" id="name"
                                                        class="form-control mb-1" placeholder="Full Name" required>
                                                    <span class="invalid-feedback"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <input type="email" name="email" id="email"
                                                        class="form-control mb-1" placeholder="Email Address" required>
                                                    <span class="invalid-feedback"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <input type="text" id="organization" name="organization"
                                                        class="form-control mb-1" placeholder="Organization" required>
                                                    <span class="invalid-feedback"></span>
                                                </div>
                                                <div class="mb-3">
                                                    {{-- <label class="form-label ps-lg-1">How did you hear about us?</label> --}}
                                                    <select name="about_us" id="about_us"
                                                        class="form-select form-contro mb-1" required>
                                                        <option value="">How did you hear about us?</option>
                                                        <option value="Website">Website</option>
                                                        <option value="Referral">Referral</option>
                                                        <option value="LinkedIn">LinkedIn</option>
                                                        <option value="Facebook">Facebook</option>
                                                        <option value="Instagram">Instagram</option>
                                                        <option value="X (Twitter)">X (Twitter)</option>
                                                        <option value="Google">Google</option>
                                                        <option value="Other">Other</option>
                                                    </select>
                                                    <p></p>
                                                </div>
                                                <div class="mb-3">
                                                    <textarea name="message" id="message" rows="4" cols="4" class="form-control message mb-1"
                                                        placeholder="Message"></textarea>
                                                    <span class="invalid-feedback"></span>
                                                </div>
                                                <input type="hidden" name="form_type" value="leadGenForm">
                                                <input type="hidden" name="g-recaptcha-response">
                                                <div class="text-center pt-3">
                                                    <button class="btn_form_lead" type="submit">Get in Touch</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--<section id="track_my_ap_s5" class="track_my_ap_s5_bg">-->
    <!--    <div class="container-fluid ">-->
    <!--        <div class="col-lg-10 col-md-12 col-12 mx-auto ">-->
    <!--            <div class="row d-flex justify-content-center">-->
    <!--                <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12 track_my_ap_s5_bg_l">-->
    <!--                    <div class="row px-xl-5 px-lg-5 px-md-3 px-2 gy-4">-->
    <!--                        <div class="col-xl-6 col-lg-6  align-content-center text-lg-start text-center">-->
    <!--                            <div class="sms_service_content py-3">-->
    <!--                                <h2>{{ $page->verification_heading_en }}</h2>-->
    <!--                                <p><b>{{ $page->verification_sub_heading_en }}</b></p>-->
    <!--                                <div class="p_main_div_no_p">-->
    <!--                                    <div class="pt-1">-->
    <!--                                        <span class="para_text">-->
    <!--                                            {{ $page->verification_description_en }}-->
    <!--                                        </span>-->
    <!--                                    </div>-->
    <!--                                </div>-->
    <!--                                <div class="b_n_app_buttons">-->
                                        <!--<span class="faq">-->
                                        <!--    <a href="{{ $page->verification_link_en }}">Submit</a>-->
                                        <!--</span>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                        <div class="col-xl-6 col-lg-6 text-lg-end text-center">-->
    <!--                            <div class="sms_service_img">-->
    <!--                                <img src="{{ asset('uploads/lead_gen_page/' . $page->verification_image) }}"-->
    <!--                                    class="img-fluid" alt="">-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

    <section id="application_dashboard">
        <div class="container-fluid a_dashboard_bg py-lg-0 py-3">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="a_dashboard_content text-center">
                    <h2>{{ $home->application_hub_en }}</h2>
                    <div class="row d-flex justify-content-center">
                        {{-- <div class="col-lg-7 col-md-8">
                            <p>{!! $page->application_hub_description_en !!}</p>
                        </div> --}}
                    </div>
                </div>

                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gy-md-4 gy-3 d-flex justify-content-evenly pt-lg-5 pt-md-4 pt-3">
                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-12 custom_col">
                                <div class="card border-0 shadow">
                                    <div class="card-body px-2 text-center">
                                        <img src="{{ asset('website/assets/images/Dedicated Customer support 2.png') }}"
                                            class="img-fluid" alt=""
                                            style="width:64px; height:64px; object-fit: contain;" />
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 pt-3">
                                                <h6>{{ $home->dedicated_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-12 custom_col">
                                <div class="card border-0 shadow">
                                    <div class="card-body text-center">
                                        <img src="{{ asset('website/assets/images/Fast Processing Time.png') }}"
                                            class="img-fluid" alt=""
                                            style="width:64px; height:64px; object-fit: contain;" />
                                        <div class="row">
                                            <div class="col-xxl-12 col-xl-12 col-lg-12 pt-3">
                                                <h6>{{ $home->processing_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-12 custom_col">
                                <div class="card border-0 shadow">
                                    <div class="card-body text-center">
                                        <img src="{{ asset('website/assets/images/global coverage.png') }}"
                                            class="img-fluid" alt=""
                                            style="width:64px; height:64px; object-fit: contain;" />
                                        <div class="row">
                                            <div class="col-xxl-12 col-xl-12 col-lg-12 pt-3">
                                                <h6>{{ $home->global_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-12 custom_col">
                                <div class="card border-0 shadow">
                                    <div class="card-body text-center">
                                        <img src="{{ asset('website/assets/images/leaders in verification ۲.png') }}"
                                            class="img-fluid" alt=""
                                            style="width:64px; height:64px; object-fit: contain;" />
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 pt-3">
                                                <h6>{{ $home->leaders_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-12 custom_col">
                                <div class="card border-0 shadow">
                                    <div class="card-body text-center">
                                        <img src="{{ asset('website/assets/images/Competitive Pricing.png') }}"
                                            class="img-fluid" alt=""
                                            style="width:64px; height:64px; object-fit: contain;" />
                                        <div class="row">
                                            <div class="col-xxl-12 col-xl-12 col-lg-12 pt-3">
                                                <h6>{{ $home->competitive_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section id="tabs">
                    <div class="row d-flex justify-content-center">
                        <div class="col-xl-11 col-lg-11 col-md-12 col-12">
                            <div class="custom-nav-pills text-center" role="tablist">
                                @foreach ($services as $tab)
                                    <button class="btn filt_btn_1 {{ $loop->first ? 'active' : '' }}"
                                        data-bs-toggle="pill" data-bs-target="#category{{ $tab->id }}"
                                        type="button">
                                        {{ $tab->heading_en }}
                                    </button>
                                @endforeach
                            </div>

                            <div class="tab-content mt-xl-1 mt-4" id="pills-tabContent">
                                @foreach ($services as $tab)
                                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                        id="category{{ $tab->id }}">
                                        <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-4 pt-2">
                                            <div class="col-xl-6 col-lg-12 col-md-12">
                                                <div class="row d-flex justify-content-center">
                                                    <div class="col-xxl-11 col-xl-11 col-lg-12 px-lg-0">
                                                        <div class="tabs-content text-xl-start ">
                                                            <h2>{{ $tab->title_en }}</h2>
                                                            <h6>{{ $tab->description_en }}</h6>
                                                            <div class="p_main_div">
                                                                @foreach ($tab->serviceItems as $item)
                                                                    <div class="pt-2 alignsline">
                                                                        {{-- <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                            class="itm_margin" /> --}}
                                                                        <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                            class="lmrg" />
                                                                        <span class="para_text ps-2">
                                                                            {{ $item->item_en }}</span>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started">
                                                                    @if ($tab->heading_en == 'Track My Application')
                                                                        <a href="https://track.quadrabay.com/">Track
                                                                            Now</a>
                                                                    @else
                                                                        <a href="{{ $tab->apply_now_en }}"> Apply Now </a>
                                                                    @endif
                                                                </span>
                                                                {{-- <span class="get_started"><a
                                                                        href="{{ $tab->apply_now_en }}">Apply
                                                                        Now</a></span> --}}
                                                                {{-- <span class="talk_sales"><a
                                                                        href="{{ $tab->read_more_en }}">Read
                                                                        More</a></span> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-lg-12 col-md-12 align-content-center">
                                                <div class="row d-flex justify-content-center">
                                                    <div class="col-xxl-11 col-xl-11 col-lg-12 px-lg-0">
                                                        <div class="tabs_img">
                                                            <img src="{{ asset('uploads/services/' . $tab->image) }}"
                                                                class="img-fluid w-100" alt="" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <div id="faqs"></div>
    @if (!empty($faqs))
        <section id="c_p_s4" class="s-p-tb">
            <div class="container-fluid pb-xl-4 pb-lg-5 pb-4">
                <div class="col-lg-10 col-md-12 col-12 mx-auto">
                    <div class="c_p_s4_content text-center">
                        <h2>frequently asked questions</h2>
                    </div>
                    <div class="row d-flex justify-content-center">
                        <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                            <div class="row gx-4 pt-md-5 pt-3 gy-4" id="items_container">

                                @foreach ($faqs as $index => $faq)
                                    <div class="col-xl-6">
                                        <div class="row pt-md-2 bottom_line text-md-start text-center">
                                            <div class="col-md-2 col-12">
                                                <div class="pdf_img">
                                                    <img src="{{ asset('website/assets/images/faq.png') }}"
                                                        alt="" class="img-fluid"
                                                        style=" width:82px; height: 82px; object-fit: contain;" />
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-12">
                                                <div class="frequently_content">
                                                    <h2>{!! Str::words($faq->title_en, 9, '') !!}</h2>
                                                    @php
                                                        $words = explode(' ', $faq['description_en']);
                                                        $previewWords = implode(' ', array_slice($words, 0, 10)); // First 10 words
                                                        $remainingWords = implode(' ', array_slice($words, 10)); // Remaining words
                                                    @endphp
                                                    <h5>
                                                        <!-- Display a preview of the first 10 words -->
                                                        <span
                                                            id="previewText{{ $index }}">{{ $previewWords }}</span><span
                                                            id="dots{{ $index }}">...</span>
                                                        <!-- The remaining text, hidden initially -->
                                                        <span id="moreText{{ $index }}"
                                                            style="display: none;">{{ $remainingWords }}</span>
                                                    </h5>
                                                    <button onclick="toggleReadMore({{ $index }})"
                                                        class="read-more" id="readMoreBtn{{ $index }}">Read more<i
                                                            class="fa-solid fa-angle-right ps-2"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <span id="faq_s3">
                        <div class="e_article_b_page_btn text-center">
                            <button id="load_more_button" data-page="{{ $faqs->currentPage() + 1 }}"
                                class="e_art_b_page ">
                                Load More
                            </button>
                        </div>
                    </span>

                </div>
            </div>
        </section>
    @endif
    {{-- <section id="track_my_ap_s6">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="c_p_s4_content text-center">
                    <h2>frequently asked questions</h2>
                </div>
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gx-4 pt-md-5 pt-3 gy-4">
                            @foreach ($faqs as $faq)
                                <div class="col-xl-6">
                                    <div class="row pt-md-2 bottom_line text-md-start text-center">
                                        <div class="col-md-2 col-12">
                                            <div class="pdf_img">
                                                <img src="{{ asset('website/assets/images/message-question.svg') }}"
                                                    alt="" />
                                            </div>
                                        </div>
                                        <div class="col-md-10 col-12">
                                            <div class="frequently_content">
                                                <h2>{{ $faq->title_en }}</h2>

                                                @php
                                                    // Get the first 40 characters of the description
                                                    $preview = \Illuminate\Support\Str::limit(
                                                        $faq->description_en,
                                                        40,
                                                        '',
                                                    );

                                                    // Get the remaining part of the description starting from character 40
                                                    $remainingContent = substr($faq->description_en, 40);
                                                @endphp

                                                <h5>{{ $preview }}</h5>

                                                <!-- Unique ID for the collapse content -->
                                                @if (strlen($remainingContent) > 0)
                                                    <div class="collapse" id="{{ $faq->id }}">
                                                        <div class="">
                                                            <h5>{{ $remainingContent }}</h5>
                                                            <!-- Show the remaining content here -->
                                                        </div>
                                                    </div>

                                                    <!-- Unique "Read more" button linked to the above collapse -->
                                                    <div class="e_article_btn mt-3">
                                                        <a class="read-more" data-bs-toggle="collapse"
                                                            href="#{{ $faq->id }}" role="button"
                                                            aria-expanded="false" aria-controls="{{ $faq->id }}">
                                                            Read more
                                                            <i class="fa-solid fa-angle-right ps-2"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
@endsection
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script>
    function toggleReadMore(index) {
        var dots = document.getElementById("dots" + index);
        var moreText = document.getElementById("moreText" + index);
        var btnText = document.getElementById("readMoreBtn" + index);

        if (dots.style.display === "none") {
            dots.style.display = "inline";
            btnText.innerHTML = 'Read more <i class="fa-solid fa-angle-right ps-2"></i>';;
            moreText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = 'Read less <i class="fa-solid fa-angle-right ps-2"></i>';;
            moreText.style.display = "inline";
        }
    }
    $(document).ready(function() {

        var start = 4;

        $('#load_more_button').click(function() {
            $.ajax({
                url: "{{ route('leadgen.faqs.loadmore') }}",
                method: "GET",
                data: {
                    start: start
                },
                dataType: "json",
                beforeSend: function() {
                    $('#load_more_button').html('Loading...');
                    $('#load_more_button').attr('disabled', true);
                },
                success: function(data) {
                    if (data.data.length > 0) {
                        var html = '';
                        data.data.forEach(function(faq, index) {
                            // Extract the title and description from the response
                            var title_en = faq.title_en;
                            var faqId = faq.id;
                            var description_en = faq.description_en;


                            var words = description_en.split(' ');
                            var preview = words.slice(0, 10).join(
                                ' '); // First 20 words
                            var remainingContent = words.slice(10).join(
                                ' '); // Remaining words

                            html += `
                            <div class="col-xl-6">
                                <div class="row pt-md-2 bottom_line text-md-start text-center">
                                    <div class="col-md-2 col-12">
                                        <div class="pdf_img">
                                             <img src="{{ asset('website/assets/images/faq.png') }}"  alt="" class="img-fluid" style=" width:82px; height: 82px; object-fit: contain;" />
                                        </div>
                                    </div>
                                    <div class="col-md-10 col-12">
                                        <div class="frequently_content">
                                            <h2>${title_en}</h2>
                                            <h5>
                                                <!-- Display a preview of the first 100 characters -->
                                                <span id="previewText${faqId}">${preview}</span>
                                                <span id="dots${faqId}">...</span>
                                                <!-- The remaining text, hidden initially -->
                                                <span id="moreText${faqId}" style="display: none;">${remainingContent}</span>
                                            </h5>`;

                            // If there's remaining content, add the "Read more" button
                            if (remainingContent.length > 0) {
                                html += `
                                <div class="e_article_btn">
                                    <button onclick="toggleReadMore(${faqId})" class="read-more" id="readMoreBtn${faqId}">
                                        Read more <i class="fa-solid fa-angle-right ps-2"></i>
                                    </button>
                                </div>
                                `;
                            }

                            html += `
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                            `;
                        });

                        // Append the generated HTML to the container with a fade-in effect
                        $('#items_container').append($(html).hide().fadeIn(1000));
                        $('#load_more_button').text('Load More').prop('disabled', false);
                        start = data.next; // Update the start index for pagination
                    } else {
                        $('#load_more_button').text('No More FAQs Available').prop(
                            'disabled', true);
                    }
                }
            });
        });
    });
</script>