@extends('website_ar.layouts.app')
@section('content')

<section id="banner_doc_page" class="d_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 pt-4 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-5 pt-xl-4 pt-3">
                        <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->document_heading_ar }}</h1>

                                        <div class="tabs_buttons">
                                            <span class="get_started">
                                                <a href="{{ $page->apply_know_link_ar }}"> تقدم بطلبك الآن </a>
                                            </span>
                                            <span class="talk_sales">
                                                <a data-bs-toggle="modal" data-bs-target="#staticBackdrop"> تسجيل الدخول</a>
                                                {{-- <a href="{{ $page->sign_in_link }}"> Sign In </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/documents_page/' . $page->document_image) }}"
                                            class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->document_image, PATHINFO_FILENAME)) }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="d_s2" style="direction: rtl;">
    <div class="container-fluid">
        <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="d_s2_content text-center">
                <h2>{{ $page->sustainability_heading_ar }}</h2>
            </div>
            <div class="row pt-4 d-flex justify-content-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row gy-4 d-flex justify-content-center">
                        @if (count($sustanibility))
                        @foreach ($sustanibility as $document)
                        <div class="col-xl-4 col-lg-6 col-md-6 col-12 text-md-end text-center">
                            <div class="card shadow"
                                style="display: flex; flex-direction: column; height: 100%;">
                                <div class="card_content"
                                    style="display: flex; flex-direction: column; height: 100%;">
                                    <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                        target="_blank" style="text-decoration: none;">
                                        <img src="{{ asset('website/assets/images/document.png') }}"
                                            alt="Document" class="img-fluid doc_s2_img" />
                                        {{-- <p>PDF {{ number_format($document->size, 2) }}KB</p> --}}
                                        <h2 class="pt-lg-3 pt-3">{!! Str::limit($document->title_ar, 36, ' ...') !!}</h2>
                                        <h5>{!! Str::limit($document->description_ar, 85, ' ...') !!}</h5>
                                        <div class="download_btn" style="margin-top: auto;" target="_blank">
                                            <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                                target="_blank">
                                                تحميل قوات الدفاع الشعبي
                                                <i class="fa-solid fa-download pe-1"></i>
                                            </a>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="d_s3" style="direction: rtl;">
    <div class="container-fluid">
        <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="d_s3_content text-center">
                <h2>{{ $page->abstracts_heading_ar }}</h2>
            </div>

            <div class="row pt-md-3 d-flex justify-content-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row pt-1 d-flex justify-content-center">
                        <div class="col-lg-8 col-md-11">
                            <form method="GET" action="">
                                <div class="row pt-2 gy-3">
                                    <div class="col-lg-5 col-md-4">
                                        <div class="custom-select-icon">
                                            <select class="form-select" name="title"
                                                aria-label="Default select example">
                                                <option>عنوان</option>
                                                @if (count($documents) > 0)
                                                <!-- @foreach ($options as $option)
                                                            <option value="{{ $option->id }}">{{ $option->title_ar }}
                                                            </option>
                                                        @endforeach -->
                                                @foreach ($documents as $document)
                                                <option value="{{ $document->id }}"
                                                    @if (request()->get('title') == $document->id) selected @endif>
                                                    {{ $document->title_ar }}
                                                </option>
                                                @endforeach
                                                @endif

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-4">
                                        <div class="custom-date-icon">
                                            <input type="date" name="date" class="form-control"
                                                aria-label="Date select" value="{{ request()->get('date') }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3">
                                        <div class="custom-search-icon text-lg-end text-md-end text-center">
                                            <button class="bttn_search shadow">يبحث</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @if (count($abstracts) > 0)
            <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-lg-5 pt-md-5 pt-4 gy-4 gx-4 vertical-line-container_3" id="items_container">

                        @foreach ($abstracts as $index => $abstract)
                        @if ($index % 2 == 0)
                        <div class="col-xl-6">
                            <div class="row pt-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/pdf.png') }}"
                                            alt="Document" class="img-fluid" style="height: 81px;  width: 85px; object-fit: contain;">
                                    </div>
                                </div>
                                <div class="col-md-10 col-12">
                                    <div class="pdf_content">
                                        {{-- <p>PDF {{ number_format($abstract->size, 2) }}KB</p> --}}
                                        <h2>{!! Str::limit($abstract->title_ar, 36, ' ...') !!}</h2>
                                        <h5>{!! Str::limit($abstract->description_ar, 100, ' ...') !!}</h5>
                                        <div class="download_btn">
                                            <a href="{{ asset('uploads/documents/' . $abstract->path) }}"
                                                target="_blank">
                                                تحميل قوات الدفاع الشعبي
                                                <i class="fa-solid fa-download pe-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="col-xl-6 ">
                            <div class="row  pt-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/pdf.png') }}"
                                            alt="Document" class="img-fluid" style="height: 81px;  width: 85px; object-fit: contain;">
                                    </div>
                                </div>
                                <div class="col-md-10 col-12">
                                    <div class="pdf_content">
                                        {{-- <p>PDF {{ number_format($abstract->size, 2) }}KB</p> --}}
                                        <h2>{!! Str::limit($abstract->title_ar, 36, ' ...') !!}</h2>
                                        <h5>{!! Str::limit($abstract->description_ar, 100, ' ...') !!}</h5>
                                        <div class="download_btn">
                                            <a href="{{ asset('uploads/documents/' . $abstract->path) }}"
                                                target="_blank">
                                                تحميل قوات الدفاع الشعبي
                                                <i class="fa-solid fa-download pe-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endforeach

                    </div>
                    @if (count($abstracts) >= 4)
                    <div class="col-md-12">
                        <div class="text-center e_article_b_page_btn text-center">
                            <button id="load_more_button" data-page="{{ $abstracts->currentPage() + 1 }}"
                                class="e_art_b_page ">تحميل المزيد</button>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</section>

<style>
    .d_s4_bg {
        background: #F8F9FB;
    }
</style>

<section id="d_s4" class="d_s4_bg" style="direction: rtl;">
    <div class="container-fluid">
        <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="r_s4_content text-center">
                <h2>
                    أحدث محتوى
                </h2>
            </div>
            <section id="tabs_r_p">
                <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">
                            <button class="btn filt_btn_1 active" data-bs-toggle="pill" data-bs-target="#category1"
                                type="button">
                                مدونات
                            </button>

                            <button class="btn filt_btn_1" data-bs-toggle="pill" data-bs-target="#category2"
                                type="button">
                                وثائق الشركة
                            </button>
                            <button class="btn filt_btn_1" data-bs-toggle="pill" data-bs-target="#category3"
                                type="button">
                                النشرة الإخبارية
                            </button>
                        </div>

                        <div class="tab-content mt-md-5 mt-4" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="category1">
                                <div class="row d-flex justify-content-center gy-md-5 gy-3 pt-xl-4 pt-2">
                                    @if (!empty($blogsContent))
                                    @foreach ($blogsContent as $content)
                                    <div class="col-lg-4" data-tag="Category_1">
                                        <a href="{{ route('blog.details', $content->slug) }}"
                                            style="text-decoration: none;">
                                            <div class="card">
                                                <div class="card_img">
                                                    <img src="{{ asset('uploads/contents/profile/' . $content->profile_image) }}"
                                                        class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo(substr($content->profile_image,11), PATHINFO_FILENAME)) }}" />
                                                    @if ($content->category)
                                                    <a
                                                        class="img_tag">{{ $content->category->title_ar }}</a>
                                                    @endif
                                                </div>
                                                <div class="card-body">
                                                    <a href="{{ route('blog.details', $content->slug) }}"
                                                        style="text-decoration: none;">
                                                        <div class="row pt-1">
                                                            <div class="col-auto">
                                                                <h5>
                                                                    {{ $content->created_at->locale('ar')->translatedFormat('d F, Y') }}
                                                                    {{-- {{ $content->created_at->format('d F, Y') }} --}}
                                                                </h5>
                                                            </div>
                                                            <div class="col-auto me-auto">
                                                                @if (!empty($content->read_time))
                                                                <h6>وقت القراءة: {{$content->read_time}} دقائق</h6>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <h4>{!! Str::words($content->title_ar, 7, ' ...') !!}</h4>
                                                        {{-- <p>{!! Str::words($content->short_description_en, 11, ' ...') !!}</p> --}}
                                                        <p>{!! Str::words(strip_tags($content->short_description_ar), 11, ' ...') !!}</p>
                                                    </a>
                                                    {{-- <div class="e_article_btn">
                                                                    <a href="{{ route('blog.details', $content->slug) }}">Read
                                                    more<i
                                                        class="fa-solid fa-angle-right ps-1"></i>
                                        </a>
                                    </div> --}}
                                </div>
                            </div>
                            </a>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
                <div class="tab-pane fade" id="category2">
                    <div class="row d-flex justify-content-center gy-md-5 gy-3 pt-xl-4 pt-2 pb-0"
                        id="d_s2">
                        @if (count($documentsContent))
                        @foreach ($documentsContent as $document)
                        <div class="col-xl-4 col-lg-6 col-md-6 col-12 text-md-end text-center">
                            <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                target="_blank" style="text-decoration: none;">
                                <div class="card shadow"
                                    style="display: flex; flex-direction: column; height: 100%;">
                                    <div class="card_content"
                                        style="display: flex; flex-direction: column; height: 100%;">
                                        <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                            target="_blank" style="text-decoration: none;">
                                            <img src="{{ asset('website/assets/images/document.png') }}"
                                                alt="Document" class="img-fluid doc_s2_img" />
                                            {{-- <p>PDF {{ number_format($document->size, 2) }}KB</p> --}}
                                            <h2 class="pt-lg-3 pt-3">{!! Str::limit($document->title_ar, 36, ' ...') !!}</h2>
                                            <h5>{!! Str::limit($document->description_ar, 85, ' ...') !!}</h5>
                                        </a>
                                        <div class="download_btn" target="_blank"
                                            style="margin-top: auto;">
                                            <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                                target="_blank">
                                                تحميل قوات الدفاع الشعبي
                                                <i class="fa-solid fa-download pe-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
                <div class="tab-pane fade" id="category3">
                    <div class="row d-flex justify-content-center gy-md-5 gy-3 pt-xl-4 pt-2">
                        @if (!empty($newsContent))
                        @foreach ($newsContent as $content)
                        <div class="col-lg-4" data-tag="Category_1">
                            <a href="{{ route('blog.details', $content->slug) }}"
                                style="text-decoration: none;">
                                <div class="card">
                                    <div class="card_img">
                                        <img src="{{ asset('uploads/contents/profile/' . $content->profile_image) }}"
                                            class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo(substr($content->profile_image,11), PATHINFO_FILENAME)) }}" />
                                        @if ($content->category)
                                        <a
                                            class="img_tag">{{ $content->category->title_ar }}</a>
                                        @endif
                                    </div>
                                    <div class="card-body">
                                        <a href="{{ route('blog.details', $content->slug) }}"
                                            style="text-decoration: none;">
                                            <div class="row pt-1">
                                                <div class="col-auto">
                                                    <h5>{{ $content->created_at->locale('ar')->translatedFormat('d F, Y') }}</h5>
                                                </div>
                                                <div class="col-auto me-auto">
                                                    @if (!empty($content->read_time))
                                                    <h6>وقت القراءة: {{$content->read_time}} دقائق</h6>
                                                    @endif
                                                </div>
                                            </div>
                                            <h4>{!! Str::words($content->title_ar, 7, ' ...') !!}</h4>
                                            <p>{!! Str::words($content->short_description_ar, 11, ' ...') !!}</p>
                                        </a>
                                        {{-- <div class="e_article_btn">
                                                                    <a href="{{ route('blog.details', $content->slug) }}">Read
                                        more<i
                                            class="fa-solid fa-angle-right ps-1"></i>
                            </a>
                        </div> --}}
                    </div>
                </div>
                </a>
        </div>
        @endforeach
        @endif
    </div>
    </div>
    </div>
    </div>
    </div>
</section>
</div>
</div>
</section>
<section id="banner_need_app" class="b_n_app_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-lg-11 col-md-11">
                    <div class="row d-flex justify-content-center">
                        <div class="col-xxl-10 col-xl-10 col-lg-11 col-md-11">
                            <div class="b_n_app_content text-center">
                                <h2>{{ $preferences->application_heading_ar }}</h2>
                                <p>{{ $preferences->application_description_ar }}</p>
                                <div class="b_n_app_buttons">
                                    <span class="contact_us">
                                        <a href="{{ $preferences->application_contact_link_ar }}"> اتصل بنا </a>
                                    </span>
                                    <span class="faq">
                                        <a href="{{ $preferences->application_faq_link_ar }}"> الأسئلة الشائعة </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="b_n_app_img text-center">
                        <!--<img src="{{ asset('uploads/preferences_page/' . $preferences->application_image) }}"-->
                        <!--    class="img-fluid w-100" />-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- <section id="d_s5" class="d_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-lg-11 col-md-11">
                        <div class="row d-flex justify-content-center">
                            <div class="col-xxl-10 col-xl-10 col-lg-11 col-md-11 ">
                                <div class="b_n_app_content text-center">
                                    <h2>{{ $preferences->application_heading_en }}</h2>
<p>{{ $preferences->application_description_en }}</p>
<div class="b_n_app_buttons">
    <span class="contact_us">
        <a href="{{ $preferences->application_contact_link }}"> Contact Us </a>
    </span>
    <span class="faq">
        <a href="{{ $preferences->application_faq_link }}"> FAQs </a>
    </span>
</div>
</div>
</div>
</div>

<div class="b_n_app_img text-center">
    <img src="{{ asset('uploads/preferences_page/' . $preferences->application_image) }}"
        class="img-fluid w-100" alt="" />
</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>
    $(document).ready(function() {
        var start = 2;

        $('#load_more_button').click(function() {
            $.ajax({
                url: "{{ route('load.more') }}",
                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) {
                        function truncateDescription(description, maxLength) {
                            if (description.length > maxLength) {
                                return description.substring(0, maxLength) + '...';
                            }
                            return description;
                        }
                        var html = '';
                        for (var i = 0; i < data.data.length; i++) {
                            if (i % 2 === 0) {

                                html += `<div class="col-xl-6">
                                        <div class="row pt-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/pdf.png') }}"
                                                            alt="Document" class="img-fluid" style="height: 81px;  width: 85px; object-fit: contain;">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-12">
                                                <div class="pdf_content">
                                           
                                                    <h2>` + data.data[i].title_ar + `</h2>
                                                    <h5>` + truncateDescription(data.data[i].description_ar, 100) + `</h5>
                                                    <div class="download_btn">
                                                        <a href="/uploads/documents/${data.data[i].path}"
                                                            target="_blank">
                                                            تحميل قوات الدفاع الشعبي
                                                            <i class="fa-solid fa-download pe-1"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                            } else {
                                html += `<div class="col-xl-6">
                                        <div class="row  pt-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/pdf.png') }}"
                                                            alt="Document" class="img-fluid" style="height: 81px;  width: 85px; object-fit: contain;">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-12">
                                                <div class="pdf_content">
                                                     
                                                    <h2>` + data.data[i].title_ar + `</h2>
                                                    <h5>` + truncateDescription(data.data[i].description_ar, 100) + `</h5>
                                                    <div class="download_btn">
                                                        <a href="/uploads/documents/${data.data[i].path}"
                                                            target="_blank">
                                                            تحميل قوات الدفاع الشعبي
                                                            <i class="fa-solid fa-download pe-1"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                                // designClass = 'design2'; // Use design2 for odd indices
                            }
                            // html += `<div class="col-md-4 content_box">
                            //             <div>
                            //                 <h2>` + data.data[i].title + `</h2>
                            //                 <p>` + data.data[i].description + `</p>
                            //             </div>
                            //         </div>`;
                        }
                        //console.log(html);
                        //append data  without fade in effect
                        //$('#items_container').append(html);

                        //append data with fade in effect
                        $('#items_container').append($(html).hide().fadeIn(1000));
                        $('#load_more_button').html('تحميل المزيد');
                        $('#load_more_button').attr('disabled', false);
                        start = data.next;
                    } else {
                        // $('#load_more_button').html('No More Data Available');
                        $('#load_more_button').hide();
                        // $('#load_more_button').attr('disabled', true);
                    }
                }
            });
        });

    });
</script>