@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Kalender Kegiatan') }}
@endsection

<style>
    #loadingOverlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #loadingIndicator {
        position: absolute;
        top: 50%;
        left: 50%;
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Kalender Kegiatan') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">

            <div class="w-full lg:flex mt-4">
                <input type="text" name="kegiatan"
                    class="w-full rounded-full my-5 mx-0 lg:mx-5 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                    placeholder="{{ __('message.Cari Kegiatan') }}" id="kegiatan" style="border-color: #D9D9D9">

                <select name="status"
                    class="w-full  md:block my-5 mx-0 lg:mx-5 border-jacarta-500 py-1 rounded-full hover:ring-2 hover:ring-accent/10 focus:ring-accent dark:border-jacarta-600 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                    id="status" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Pilih Status') }}</option>
                    <option value="1">{{ __('message.Sudah Dilaksanakan') }}</option>
                    <option value="2">{{ __('message.Belum Dilaksanakan') }}</option>
                </select>
                <select name="jenis"
                    class="w-full  md:block my-5 mx-0 lg:mx-5 border-jacarta-500 py-1 rounded-full hover:ring-2 hover:ring-accent/10 focus:ring-accent dark:border-jacarta-600 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                    id="jenis" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Jenis Acara') }}</option>
                    <option value="1">{{ __('message.Event') }}</option>
                    <option value="2">{{ __('message.Pengabdian Masyarakat') }}</option>
                    <option value="3">{{ __('message.Pelatihan') }}</option>
                    <option value="4">{{ __('message.Sertifikasi') }}</option>
                </select>
                <select name="bulan"
                    class="w-full my-5 mx-0 lg:mx-5  md:block contact-form-input border-jacarta-500 py-1 rounded-full hover:ring-2 hover:ring-accent/10 focus:ring-accent dark:border-jacarta-600 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                    id="bulan" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Pilih Bulan') }}</option>
                    <option value="01">{{ __('message.Januari') }}</option>
                    <option value="02">{{ __('message.Februari') }}</option>
                    <option value="03">{{ __('message.Maret') }}</option>
                    <option value="04">{{ __('message.April') }}</option>
                    <option value="05">{{ __('message.Mei') }}</option>
                    <option value="06">{{ __('message.Juni') }}</option>
                    <option value="07">{{ __('message.Juli') }}</option>
                    <option value="08">{{ __('message.Agustus') }}</option>
                    <option value="09">{{ __('message.September') }}</option>
                    <option value="10">{{ __('message.Oktober') }}</option>
                    <option value="11">{{ __('message.November') }}</option>
                    <option value="12">{{ __('message.Desember') }}</option>
                </select>
                <button onclick="search()"
                    class="w-full my-5 mx-0 lg:mx-5 bg-accent text-white px-2 py-1 rounded-full">{{ __('message.Mencari') }}</button>
            </div>
        </div>
    </section>

    <section style="position: relative;">
        <div id="loadingOverlay" style="display: none">
            <div id="loadingIndicator"></div>
        </div>

        <div class="container py-10">
            <div>
                <div class="grid grid-cols-1 gap-[1.875rem] sm:grid-cols-2 md:grid-cols-3" id="article_body">
                </div>
            </div>
        </div>
    </section>

    <section id="button_load_more" style="display: none">
        <div class="flex justify-center">
            <div class="container py-10" style="text-align: center;">
                <input id="count_artickel" type="hidden" value="">
                <button onclick="loadSpinFunc(true, '.datatable')"
                    class="w-full mx-5 bg-accent text-white px-2 py-1 rounded-full" style="width: 500px;height: 50px;">
                    {{ __('message.Memuat Lebih Banyak') }}</button>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <script>
        $.ajax({
            url: '{{ route('landing.calendar.list.event') }}',
            beforeSend: function() {
                $('#loadingOverlay').show();
            },
            complete: function() {
                setTimeout(function() {
                    $('#loadingOverlay').hide();
                }, 600);
            },
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'kegiatan': $('#kegiatan').val(),
                'status': $('#status').val(),
                'jenis': $('#jenis').val(),
                'bulan': $('#bulan').val(),
            },
            processData: false,
            contentType: false,
            success: function(r) {
                if (r.total > r.limit) {
                    setTimeout(function() {
                        $('#button_load_more').show();
                    }, 600);
                }
                $('#count_artickel').val(r.limit);
                $('#article_body').html(r.data);
            },
            error: function(error) {}
        });

        function search() {
            $('#button_load_more').hide();
            var formData = new FormData();

            formData.append('kegiatan', $('#kegiatan').val());
            formData.append('status', $('#status').val());
            formData.append('jenis', $('#jenis').val());
            formData.append('bulan', $('#bulan').val());
            formData.append('limit', 6);
            formData.append('offset', 1);

            $.ajax({
                url: '{{ route('landing.calendar.list.event') }}',
                beforeSend: function() {
                    $('#loadingOverlay').show();
                },
                complete: function() {
                    setTimeout(function() {
                        $('#loadingOverlay').hide();
                    }, 600);
                },
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(r) {
                    if (r.total > r.limit) {
                        setTimeout(function() {
                            $('#button_load_more').show();
                        }, 600);
                    }
                    $('#count_artickel').val(r.limit);
                    $('#article_body').html(r.data);
                },
                error: function(error) {}
            });
        }

        function loadSpinFunc() {
            $('#button_load_more').hide();
            var formData = new FormData();

            formData.append('kegiatan', $('#kegiatan').val());
            formData.append('status', $('#status').val());
            formData.append('jenis', $('#jenis').val());
            formData.append('bulan', $('#bulan').val());

            var limit = parseInt($('#count_artickel').val()) + 6;
            $('#count_artickel').val(limit);

            formData.append('limit', limit);
            formData.append('offset', 1);

            $.ajax({
                url: '{{ route('landing.calendar.list.event') }}',
                beforeSend: function() {
                    $('#loadingOverlay').show();
                },
                complete: function() {
                    setTimeout(function() {
                        $('#loadingOverlay').hide();
                    }, 600);
                },
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(r) {
                    if (r.total < limit) {
                        $('#button_load_more').hide();
                    } else {
                        $('#button_load_more').show();
                    }
                    $('#article_body').html(r.data);
                },
                error: function(error) {}
            });
        }
    </script>
@endsection