@extends('website.layouts.app')
@section('content')
    <section id="banner_doc_page" class="d_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->document_heading_en }}</h1>

                                            <div class="tabs_buttons">
                                                <span class="get_started">
                                                    <a href="{{ $page->apply_know_link }}"> Apply Now </a>
                                                </span>
                                                <span class="talk_sales">
                                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Sign In </a>
                                                    {{-- <a href="{{ $page->sign_in_link }}"> Sign In </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/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" class="s-p-tb">
        <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_en }}</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-start 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_en, 36, ' ...') !!}</h2>
                                                    <h5>{!! Str::limit($document->description_en, 85, ' ...') !!}</h5>
                                                    <div class="download_btn" style="margin-top: auto;" target="_blank">
                                                        <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                                            target="_blank">
                                                            Download PDF
                                                            <i class="fa-solid fa-download ps-1"></i>
                                                        </a>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="d_s3" class="s-p-tb">
        <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_en }}</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" id="titleSelect">
                                                    <option value="">Title</option>
                                                    @if (count($documents) > 0)
                                                        {{-- @foreach ($documents as $document)
                                                            <option value="{{ $document->id }}">{{ $document->title_en }}
                                                            </option>
                                                        @endforeach --}}
                                                        @foreach ($documents as $document)
                                                            <option value="{{ $document->id }}"
                                                                @if (request()->get('title') == $document->id) selected @endif>
                                                                {{ $document->title_en }}
                                                            </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"> --}}
                                                <input type="date" name="date" class="form-control"
                                                    aria-label="Date select" value="{{ request()->get('date') }}"
                                                    id="dateInput">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-3">
                                            <div class="custom-search-icon text-lg-start text-center">
                                                <button class="bttn_search shadow" id="searchButton">Search</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-start 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_en, 36, ' ...') !!}</h2>
                                                        <h5>{!! Str::limit($abstract->description_en, 100, ' ...') !!}</h5>
                                                        <div class="download_btn">
                                                            <a href="{{ asset('uploads/documents/' . $abstract->path) }}"
                                                                target="_blank">
                                                                Download PDF
                                                                <i class="fa-solid fa-download ps-1"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="col-xl-6 ">
                                            <div class="row  pt-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/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_en, 36, ' ...') !!}</h2>
                                                        <h5>{!! Str::limit($abstract->description_en, 100, ' ...') !!}</h5>
                                                        <div class="download_btn">
                                                            <a href="{{ asset('uploads/documents/' . $abstract->path) }}"
                                                                target="_blank">
                                                                Download PDF
                                                                <i class="fa-solid fa-download ps-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 ">Load More</button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @else
                <section id="d_s4" class="pt-0 pb-0 pt-3">
                    <div class="r_s4_content">
                        <h2><center>Document not Found</center></h2>
                    </div>
                </section>
                @endif
            </div>
        </div>
    </section>

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

    <section id="d_s4" class="d_s4_bg s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="r_s4_content text-center">
                    <h2>
                        latest content
                    </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">
                                    Blogs
                                </button>

                                <button class="btn filt_btn_1" data-bs-toggle="pill" data-bs-target="#category2"
                                    type="button">
                                    Corporate Documents
                                </button>
                                <button class="btn filt_btn_1" data-bs-toggle="pill" data-bs-target="#category3"
                                    type="button">
                                    Newsletter
                                </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_en }}</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->format('d F, Y') }}
                                                                            </h5>
                                                                        </div>
                                                                        <div class="col-auto ms-auto">
                                                                            @if (!empty($content->read_time))
                                                                                <h6>Read Time:
                                                                                    {{ $content->read_time }} Minutes</h6>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                    <h4>{!! Str::words($content->title_en, 7, ' ...') !!}</h4>
                                                                    {{-- <p>{!! Str::words($content->short_description_en, 11, ' ...') !!}</p> --}}
                                                                    <p>{!! Str::words(strip_tags($content->short_description_en), 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-start 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_en, 36, ' ...') !!}</h2>
                                                                    <h5>{!! Str::limit($document->description_en, 85, ' ...') !!}</h5>
                                                                </a>
                                                                <div class="download_btn" target="_blank"
                                                                    style="margin-top: auto;">
                                                                    <a href="{{ asset('uploads/documents/' . $document->path) }}"
                                                                        target="_blank">
                                                                        Download PDF
                                                                        <i class="fa-solid fa-download ps-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_en }}</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->format('d F, Y') }}
                                                                            </h5>
                                                                        </div>
                                                                        <div class="col-auto ms-auto">
                                                                            @if (!empty($content->read_time))
                                                                                <h6>Read Time: {{ $content->read_time }}
                                                                                    Minutes</h6>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                    <h4>{!! Str::words($content->title_en, 7, ' ...') !!}</h4>
                                                                    <p>{!! Str::words($content->short_description_en, 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">
        <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" />-->
                        </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() {
        // Function to check if either the select or date is filled
        function checkFormValidity() {
            if ($('#titleSelect').val() !== '' || $('#dateInput').val() !== '') {
                $('#searchButton').prop('disabled', false); // Enable button
            } else {
                $('#searchButton').prop('disabled', true); // Disable button
            }
        }

        // Add event listeners to inputs
        $('#titleSelect').on('change', checkFormValidity);
        $('#dateInput').on('change', checkFormValidity);

        // Initial check on page load
        checkFormValidity();
    });
    $(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('Loading...');
                    $('#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-start 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_en + `</h2>
                                                    <h5>` + truncateDescription(data.data[i].description_en, 100) + `</h5>
                                                    <div class="download_btn">
                                                        <a href="/uploads/documents/${data.data[i].path}"
                                                            target="_blank">
                                                            Download PDF
                                                            <i class="fa-solid fa-download ps-1"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                            } else {
                                html += `<div class="col-xl-6">
                                        <div class="row  pt-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/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_en + `</h2>
                                                    <h5>` + truncateDescription(data.data[i].description_en, 100) + `</h5>
                                                    <div class="download_btn">
                                                        <a href="/uploads/documents/${data.data[i].path}"
                                                            target="_blank">
                                                            Download PDF
                                                            <i class="fa-solid fa-download ps-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');
                        $('#load_more_button').attr('disabled', false);
                        start = data.next;
                    } else {
                        // $('#load_more_button').html('No More Data Available');
                        $('#load_more_button').html('No More Data Available').hide();
                        $('#load_more_button').attr('disabled', true);
                    }
                }
            });
        });

    });
</script>