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

    <section id="banner_blog_page" class="b_p_banner_bg" style="direction: rtl;">
        <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="container-fluid">
                <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 d-flex justify-content-center gy-md-5 gy-4 pt-xl-4 pt-3">
                            <div class="col-xl-6 col-lg-6  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">
                                            <div class="category">
                                                <span class="category_content">فئة</span>
                                                <span>
                                                    <a class="category_link">
                                                        {{ $firstBlog->category->title_ar }}
                                                    </a>
                                                </span>
                                            </div>
                                            <h2><a href="{{ route('blog.details.ar', $firstBlog->slug) }}"
                                                    style="text-decoration: none; color:white;">{!! Str::words($firstBlog->title_ar, 7, ' ...') !!}
                                                    <p>{{ $firstBlog->created_at->locale('ar')->translatedFormat('d F, Y') }}
                                                    </p>
                                                </a>
                                            </h2>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 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/contents/profile/' . $firstBlog->profile_image) }}"
                                                class="img-fluid w-100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="b_sec_2" class="b_sec_2_bg" style="direction: rtl;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="b_sec_2_content text-center">
                    <h2>{{ $page->explore_more }}</h2>
                </div>
                <div class="row pt-md-4 pt-0 d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gy-3 pt-xl-3 pt-2 ">
                            <div class="col-lg-6">
                                <a href="{{ route('blog.details.ar', $secondBlog->slug) }}">
                                    <div class="card" id="card1">
                                        <img src="{{ asset('uploads/contents/profile/' . $secondBlog->profile_image) }}"
                                            class="img-fluid card_img_1">
                                        <h1 class="text-center">{!! Str::words($secondBlog->title_ar, 7, ' ...') !!}</h1>
                                        <h6>{{ $secondBlog->created_at->locale('ar')->translatedFormat('d F, Y') }}</h6>
                                        <a class="link_cate">{{ $secondBlog->category->title_ar }}</a>
                                        <a href="{{ route('blog.details.ar', $secondBlog->slug) }}" class="link_read">
                                            اقرأ المزيد
                                            <i class="fa-solid fa-angle-left "></i>
                                        </a>
                                    </div>
                                </a>
                            </div>
                            @if (count($threeBlog) > 0)
                                @foreach ($threeBlog as $blog)
                                    <div class="col-lg-3">
                                        <a href="{{ route('blog.details.ar', $blog->slug) }}">
                                            <div class="card" id="card2">
                                                <img src="{{ asset('uploads/contents/profile/' . $blog->profile_image) }}"
                                                    class="img-fluid card_img_2">
                                                <div class="card_2_content">
                                                    <p>{{ $blog->created_at->locale('ar')->translatedFormat('d F, Y') }}
                                                    </p>
                                                    <h2>{!! Str::words($blog->title_ar, 5, '') !!}</h2>
                                                    <h6>{!! Str::words($blog->short_description_ar, 9, ' ...') !!}</h6>
                                                    <a href="{{ route('blog.details.ar', $blog->slug) }}">
                                                        <!--Read more-->
                                                        <!--<i class="fa-solid fa-angle-right "></i>-->
                                                    </a>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="h_card ">
                            <div class="card shadow ">
                                <div class="row g-0">
                                    <div class="col-lg-6">
                                        <a href="{{ route('blog.details', $fourBlog->slug) }}">
                                            <img src="{{ asset('uploads/contents/profile/' . $fourBlog->profile_image) }}"
                                                class="img-fluid w-100 img_v_card">
                                        </a>
                                    </div>
                                    <div class="col-lg-6 align-content-center">
                                        <div class="card-body">
                                            <a href="{{ route('blog.details.ar', $fourBlog->slug) }}">
                                                <a class="_v_c_link_cate">{{ $fourBlog->category->title_ar }}<a>
                                                        <a href="{{ route('blog.details.ar', $fourBlog->slug) }}"
                                                            style="text-decoration: none;">
                                                            {{-- <p>{{ $fourBlog->created_at->format('d F, Y') }}</p> --}}
                                                            <p>{{ $fourBlog->created_at->locale('ar')->translatedFormat('d F, Y') }}
                                                            </p>
                                                            <h2>{!! Str::words($fourBlog->title_ar, 10, ' ...') !!}</h2>
                                                            <h6>{!! Str::words($fourBlog->short_description_ar, 12, ' ...') !!}</h6>
                                                        </a>
                                                        <a href="{{ route('blog.details.ar', $fourBlog->slug) }}"
                                                            class="v_card_link_read">
                                                            <!--Read more-->
                                                            <!--<i class="fa-solid fa-angle-right "></i>-->
                                                        </a>
                                                    </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="b_sec_3" style="direction: rtl;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="b_sec_3_content text-center">
                    <h2>{{ $page->latest_article_heading_ar }}</h2>
                    <p>{!! $page->latest_article_description_ar !!}</p>
                </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 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="category"
                                                    aria-label="Default select example">
                                                    <option>فئة</option>
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->title_ar }}
                                                        </option>
                                                    @endforeach
                                                </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">
                                            </div>
                                        </div>
                                        <div class="col-lg-2  col-md-3">
                                            <div class="custom-search-icon   text-lg-start text-md-end text-center">
                                                <button type="submit" class="bttn_search shadow"> يبحث</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row pt-md-5 pt-4 gy-lg-5 gy-3" id="blog_container">
                            {{-- <div class="row"> --}}
                            @if (count($blogs) > 0)
                                @foreach ($blogs as $blog)
                                    <div class="col-lg-4 col-md-6">
                                        <div class="card">
                                            {{-- <a href="{{ route('blog.details', $blog->slug) }}"> --}}
                                            <div class="card_img">
                                                <img src="{{ asset('uploads/contents/profile/' . $blog->profile_image) }}"
                                                    class="img-fluid w-100">
                                                <a class="img_tag">{{ $blog->category->title_ar }}</a>
                                            </div>
                                            <div class="card-body">
                                                <a href="{{ route('blog.details.ar', $blog->slug) }}"
                                                    style="text-decoration: none;">
                                                    <div class="row">
                                                        <div class="col-auto">
                                                            {{-- <h5>{{ $blog->created_at->format('d F, Y') }}</h5> --}}
                                                            <h5>{{ $blog->created_at->locale('ar')->translatedFormat('d F, Y') }}</h5>
                                                        </div>
                                                        <div class="col-auto me-auto">
                                                            @if (!empty($blog->read_time))
                                                                <h6>وقت القراءة: {{$blog->read_time}} دقائق</h6>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <h4>{!! Str::words($blog->title_ar, 6, '') !!}</h4>
                                                    <!-- <p>{!! Str::words($blog->short_description_ar, 11, '...') !!}</p> -->
                                                    <p>{{ Str::words(strip_tags(trim($blog->short_description_ar)), 11, '...') }}</p>
                                                </a>
                                            </div>
                                            {{-- </a> --}}
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            {{-- </div> --}}
                        </div>
                    </div>
                    <div class="e_article_b_page_btn text-center">
                        <button id="load_more_button" data-page="{{ $blogs->currentPage() + 1 }}" class="e_art_b_page ">
                            تحميل المزيد
                        </button>
                    </div>
                    {{-- <div class="e_article_b_page_btn text-center"> --}}
                    {{-- <span class="e_art_b_page ">
                            <a href="{{ route('blogs') }}">
                                View all Blogs
                            </a>
                        </span> --}}
                    {{-- <button id="load_more_button" data-page="{{ $blogs->currentPage() + 1 }}" class="e_art_b_page ">
                            Load More
                        </button>                        
                    </div> --}}
                </div>
            </div>
        </div>
    </section>
    <style>
        .e_article_b_page_btn .e_art_b_page {
            color: #054776;
            font-weight: bold;
            line-height: 140%;
            text-decoration: none;
            font-family: "Roboto", sans-serif;
            border-radius: 15px;
            background: #fff;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
            border: 1px solid #d5d5d5;
            transition: all 1s;
            letter-spacing: 0.2px;
            padding: 16px 30px 16px 30px;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 175px;
        }

        .e_article_b_page_btn .e_art_b_page:hover {
            color: #fff;
            background: #054776;
        }

        .b_s4_bg {
            background: #064877;
        }
    </style>
    <section id="b_s4" class="b_s4_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-lg-11 col-md-12 col-12">
                        <div class="row gy-md-4 gy-3 d-flex justify-content-center">
                            <div class="col-xl-4 col-lg-12">
                                <div class="row">
                                    <div class="col-lg-10">
                                        <div class="r_account_c_1_content">
                                            <h2>{{ $preferences->register_heading_ar }}</h2>
                                            <p>{{ $preferences->register_description_ar }}</p>
                                            <div class="r_account_btn">
                                                <a href="{{ $preferences->register_link_ar }}">
                                                    اتصل بنا
                                                    <i class="fa-solid fa-angle-left pe-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4 col-lg-6 ps-xxl-4 ps-xl-2" id="card_1">
                                <div class="card shadow px-lg-4 py-lg-5 ">
                                    <div class="r_account_c_2_content">
                                        <h2>{{ $preferences->corporate_heading_ar }}</h2>
                                        <p>{{ $preferences->corporate_description_ar }}</p>
                                        {{-- <h4>$80/<span class="year">Yr</span></h4> --}}
                                        <div class="r_account_c_2_buttons">
                                            <span class="apply_now">
                                                <a href="{{ $preferences->corporate_link_ar }}"> تقدم بطلبك الآن</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 ps-xxl-4 ps-xl-2">
                                <div class="card shadow px-lg-4 py-lg-5 border-0">
                                    <div class="r_account_c_3_content">
                                        <h2>{{ $preferences->individual_heading_ar }}</h2>
                                        <p>{{ $preferences->individual_description_ar }}</p>
                                        {{-- <h4>$80/<span class="year">Yr</span></h4> --}}
                                        <div class="r_account_c_3_buttons">
                                            <span class="apply_now">
                                                <a href="{{ $preferences->individual_link_ar }}"> تقدم بطلبك الآن</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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 truncateWords(text, limit) {
            if (!text) return ''; // Handle undefined or null text

            // Remove HTML tags
            text = text.replace(/<[^>]*>/g, '');

            // Remove special characters (except spaces)
            text = text.replace(/[^\w\s]/gi, '');

            // Remove extra spaces
            text = text.replace(/\s+/g, ' ').trim();

            var words = text.split(' '); // Split text into words
            return words.length > limit ? words.slice(0, limit).join(' ') + '...' : text;
        }
        // Define the route URL in JavaScript
        var blogDetailUrl = "{{ route('blog.details', ['slug' => '__slug__']) }}";
        var start = 6;
        $('#load_more_button').click(function() {
            $.ajax({
                url: "{{ route('blogs.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 blogHtml = ''; // Variable for blog cards

                        data.data.forEach(function(data) {
                            var truncatedTitle = truncateWords(data.title_ar, 6);

                            // Truncate paragraph to 11 words
                            var truncatedParagraph = truncateWords(data
                                .short_description_ar, 11);
                            // Parse the date
                            var date = new Date(data.created_at);
                            // Get the day and add leading zero if less than 10
                            var day = date.getDate() < 10 ? '0' + date.getDate() :
                                date.getDate();

                            // Get the month (full name), and add leading zero if month number is less than 10
                            var month = date.toLocaleString('default', {
                                month: 'long'
                            });

                            // Get the year
                            var year = date.getFullYear();

                            // Format the date in "d F, Y" format (e.g., "25 November, 2024")
                            // var formattedDate = day + ' ' + month + ', ' + year;
                            // Arabic month translations
                            const arabicMonths = {
                                January: 'يناير',
                                February: 'فبراير',
                                March: 'مارس',
                                April: 'أبريل',
                                May: 'مايو',
                                June: 'يونيو',
                                July: 'يوليو',
                                August: 'أغسطس',
                                September: 'سبتمبر',
                                October: 'أكتوبر',
                                November: 'نوفمبر',
                                December: 'ديسمبر'
                            };

                            // Ensure month is properly translated, even if not valid
                            const arabicMonth = arabicMonths[month] || month; // Fallback to English if translation not found

                            // Format the date in Arabic style
                            const formattedDate = `${day} ${arabicMonth}, ${year}`;
                            // Replace the slug in the route URL
                            var blogUrl = blogDetailUrl.replace('__slug__', data
                                .slug);

                            blogHtml += `
                            <div class="col-lg-4">
                                <a href="${blogUrl}">
                                    <div class="card">
                                        <div class="card_img">
                                            <img src="uploads/contents/profile/${data.profile_image}" class="img-fluid w-100">
                                            <a class="img_tag">${data.category.title_ar}</a>
                                        </div>
                                        <div class="card-body">
                                            <a href="${blogUrl}" style="text-decoration: none;">
                                                <div class="row">
                                                    <div class="col-auto">
                                                        <h5>${formattedDate}</h5>
                                                    </div>
                                                    <div class="col-auto me-auto">
                                                        ${data.read_time ? `<h6>وقت القراءة: ${data.read_time} دقائق</h6>` : ''}
                                                    </div>
                                                </div>
                                                <h4>${truncatedTitle}</h4>
                                                <p>${truncatedParagraph}</p>
                                            </a>
                                        </div>
                                    </div>
                                </a>
                            </div>`;
                        });

                        // Append blog cards to the container with a fade-in effect
                        // $('#blog_container').append($(blogHtml).hide().fadeIn(1000));
                        $('#blog_container').append($(blogHtml).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').hide();
                        $('#load_more_button').hide();
                        // $('#load_more_button').attr('disabled', true);
                    }
                }
            });
        });
    });
</script>