@extends('front.layouts.app')
@section('style1')

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
@endsection
@section('content')

<div class="page inner-page-layout activities">

    <div class="page-header" style="background-image: url({{url('assets/images/book-cover.jpg')}});">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="page-thumbnail-wrapper">
                        <img src="/assets/images/thums/thum-03.jpeg" class="page-thumbnail">
                        <div class="text-wrapper">
                            <p class="text m-0"> +{{getCount('events')}} فعالية </p>
                        </div><!-- text-wrapper -->
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="page-title-wrapper">
                        <h1 class="page-title"> الأنشطة والفعاليات </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="shape"></div>
    </div> <!-- page-header -->

    <div class="page-content">
        <div class="weekly-calendar-wrapper mb-4">
    
            <div class="container">
    
                <div class="calendar-container">
                    <button id="prev-week" class="nav-button"> <i class="fa fa-chevron-right"></i> </button>
                    <div id="week-display" class="week-display"></div>
                    <button id="next-week" class="nav-button"><i class="fa fa-chevron-left"></i></button>
                </div>
    
            </div>
    
        </div>

        <div class="date-filter-wrapper bg-white mb-5 py-5 d-none">

            <div class="container">
                <form action="" method="get">
                    <input type="hidden" name="date" id="datepicker" value="{{request()->has('date')? request()->get('date') : ''}}"> 
                    {{-- <input type="text" name="date" id="datepicker" class="flat-picker datepicker" style="display:none;" /> --}}

                </form>
            </div>

        </div>

        <div class="container">

            <div class="d-block mb-5">

                <div class="row mb-0" id="t-body">
                                    </div>

            </div><!-- d-block -->

            <div class="pagination-btn-wrapper">
                <div class="text-center">
                    <input type="hidden" name="page" id="page_no" value="2">
                    <a href="#" id="load_more" class="btn btn-primary w-300px"> عرض المزيد </a>
                </div>
            </div> <!-- pagination-btn-wrapper -->

        </div> <!-- container -->

    </div><!-- page-content -->

</div> <!-- page -->

@endsection
@section('js')

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>

<script>
    $(document).ready(function() {
        // تهيئة التقويم باللغة العربية
        $(".flat-picker").flatpickr({
            locale: "ar", // تحديد اللغة العربية
            dateFormat: "d-m-Y", // تنسيق التاريخ
            disableMobile: true, // تعطيل نمط الهاتف المحمول
            defaultDate: "2025-01-05", // تاريخ افتراضي
            enableTime: true, // تمكين الوقت
            inline: true
        });
    });
</script>

<script>

    $(document).ready(function(){
        $('#datepicker').on('change', function(e){
            $(this).closest('form').submit();
        });
        $('#load_more').on('click', function(e){
            e.preventDefault();
            var page = $('#page_no').val();
            $.get("{{route('page.events-ajx')}}?page="+page + "&s=" + $('#s_field').val()  + "&date=" + $('#datepicker').val())
            .done(function(res){
                if (res.next) {
                    $('#page_no').val(res.page);
                    $('#t-body').append(res.view);
                }else{
                    $('#t-body').append(res.view);
                    $('#load_more').remove();

                }
                
            })
        })
    });
</script>
@endsection