@extends('website_ar.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-control.is-invalid, .was-validated .form-control:invalid {
    background-position: left calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    padding-right: calc(-0.25em  + .75rem);
}
.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
    background-position: left .75rem center, center left 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
    padding-right: 0.625rem;
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(0.65em + .75rem);
    background-position: top calc(.375em + .1875rem) left calc(.375em + .1875rem);
}
        .form-select:focus {
            border-color: #AFBACA;
        }

        .form-select {
            padding: 15px 10px 15px 15px;
            border: 1px solid #AFBACA;
            color: #7E7E7E;
            background-position: left .75rem center;
        }

        .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" style="direction: rtl">
        <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 d-flex justify-content-center gy-md-5 gy-4">
                            <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">
                                        <div class="tabs-content text-md-end text-center">
                                            <h1>{{ $page->lead_heading_ar }}</h1>
                                            <p>{{ $page->lead_description_ar }}</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-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 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/lead_gen_page/' . $page->lead_image) }}"
                                                class="img-fluid w-100" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="lead_gen_p_s2" style="direction: rtl">
        <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_ar }}</h2>
                                        <p>{{ $page->lead_sub_description_ar }}</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>تعلم المزيد عن خدماتنا</h6>
                                                {{-- <div class="form-group">
                                                    <input type="name" name="name" id="name"
                                                        class="form-control mb-4" placeholder="Full Name">
                                                    <p></p>
                                                </div> --}}
                                                <div class="mb-1">
                                                    <input type="name" name="name" id="name"
                                                        class="form-control mb-1" placeholder="الاسم الكامل">
                                                    <p></p>
                                                </div>
                                                <div class="mb-1">
                                                    <input type="email" name="email" id="email"
                                                        class="form-control mb-1" placeholder="عنوان البريد الإلكتروني">
                                                    <p></p>
                                                </div>
                                                <div class="mb-1">
                                                    <input type="text" id="organization" name="organization"
                                                        class="form-control mb-1" placeholder="منظمة">
                                                    <p></p>
                                                </div>
                                                <div class="mb-1">
                                                    {{-- <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">
                                                        <option value="">كيف سمعت عنا؟</option>
                                                        <option value="Website">موقع إلكتروني</option>
                                                        <option value="Referral">الإحالة</option>
                                                        <option value="LinkedIn">ينكدين</option>
                                                        <option value="Facebook">فيسبوك</option>
                                                        <option value="Instagram">انستغرام</option>
                                                        <option value="X (Twitter)">إكس (تويتر)</option>
                                                        <option value="Google">جوجل</option>
                                                        <option value="Other">آخر</option>
                                                    </select>
                                                    <p></p>
                                                </div>
                                                <div class="mb-1">
                                                    <textarea name="message" id="message" rows="4" cols="4" class="form-control message mb-1"
                                                        placeholder="رسالة"></textarea>
                                                    <p></p>
                                                </div>
                                                <div class="mb-1">
                                                    <div class="g-recaptcha"
                                                        data-sitekey="6Lc30HgqAAAAADwcmEbsVbpFuOxTC5kv4mv9SlgU">
                                                    </div>
                                                </div>
                                                <div class="text-center pt-3">
                                                    <button class="btn_form_lead" type="submit">تواصل معنا</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" style="direction: rtl">
        <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-end text-center">
                                <div class="sms_service_content py-3">
                                    <h2>{{ $page->verification_heading_ar }}</h2>
                                    <p><b>{{ $page->verification_sub_heading_ar }}</b></p>
                                    <div class="p_main_div_no_p">
                                        <div class="pt-1">
                                            <span class="para_text">
                                                {{ $page->verification_description_ar }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="b_n_app_buttons">
                                        <!--<span class="faq">-->
                                        <!--    <a href="{{ $page->verification_link_en_ar }}">Submit</a>-->
                                        <!--</span>-->
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 text-lg-start 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" style="direction: rtl">
        <div class="container-fluid a_dashboard_bg py-lg-5 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_ar }}</h2>
                    <div class="row d-flex justify-content-center">
                        {{-- <div class="col-lg-7 col-md-8">
                            <p>{!! $page->application_hub_description_ar !!}</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 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_ar }}</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_ar }}</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_ar }}</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_ar }}</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_ar }}</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_ar }}
                                    </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-end ">
                                                            <h2>{{ $tab->title_ar }}</h2>
                                                            <h6>{{ $tab->description_ar }}</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 pe-2">
                                                                            {{ $item->item_ar }}</span>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started">
                                                                    @if ($tab->heading_ar == 'تتبع طلبي')
                                                                        <a>تتبع الآن</a>
                                                                    @else
                                                                        <a href="{{ $tab->apply_now_ar }}"> تقدم بطلبك
                                                                            الآن </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" style="direction: rtl">
            <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>الأسئلة المتداولة</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-end 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_ar, 9, '') !!}</h2>
                                                    @php
                                                        $words = explode(' ', $faq['description_ar']);
                                                        $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 }}">اقرأ
                                                        المزيد<i class="fa-solid fa-angle-left pe-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 ">
                                تحميل المزيد
                            </button>
                        </div>
                    </span>

                </div>
            </div>
        </section>
    @endif
@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 = 'اقرأ المزيد <i class="fa-solid fa-angle-right ps-2"></i>';;
            moreText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = 'اقرأ أقل <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('تحميل...');
                    $('#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_ar = faq.title_ar;
                            var faqId = faq.id;
                            var description_ar = faq.description_ar;


                            var words = description_ar.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-end 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_ar}</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}">
                                        اقرأ المزيد <i class="fa-solid fa-angle-left pe-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('تحميل المزيد').prop('disabled', false);
                        start = data.next; // Update the start index for pagination
                    } else {
                        $('#load_more_button').hide();
                    }
                }
            });
        });
    });
</script>