@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Member Personal') }}
@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">
            {{-- <p class="text-jacarta-700 font-display">Beranda <span style="color: #BA3C3C">></span> Keanggotaan</p> --}}
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Daftar Anggota') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>

        <div class="container py-10">
            <div class="w-full lg:flex mt-4">
                <input type="text" name="" class="w-full rounded-full my-5 mx-0 lg:mx-5"
                    placeholder="{{ __('message.Nama Anggota') }}" id="search" style="border-color: #D9D9D9">

                <select name=""
                    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-700 dark:text-white dark:placeholder:text-jacarta-300"
                    id="status_personnel" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Semua Personil') }}</option>
                    @forelse ($memberPersonalStatusPersonil as $value)
                        <option value="{{ $value->status_personnel }}">{{ $value->statusPersonnel->name }}</option>
                    @empty
                    @endforelse
                </select>
                <select name=""
                    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-700 dark:text-white dark:placeholder:text-jacarta-300"
                    id="type_company" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Semua Perusahaan') }}</option>
                    @forelse ($memberPersonalJenisPerusahaan as $value)
                        <option value="{{ $value->type_company }}">{{ $value->type_company }}</option>
                    @empty
                    @endforelse
                </select>
                <select name=""
                    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-700 dark:text-white dark:placeholder:text-jacarta-300"
                    id="province" style="border-color: #D9D9D9">
                    <option value="">{{ __('message.Semua Lokasi') }}</option>
                    @forelse ($memberPersonalLokasi as $value)
                        <option value="{{ $value->province }}">{{ $value->getProvince->nama }}</option>
                    @empty
                    @endforelse
                </select>
                <button onclick="search()"
                    class=" w-full my-5 mx-0 lg:mx-5 bg-accent text-white px-10 py-1 rounded-full">Mencari</button>
            </div>
        </div>
    </section>

    <section class="relative py-16 bg-light-base">
        <div id="loadingOverlay" style="display: none">
            <div id="loadingIndicator"></div>
        </div>

        <div class="container">
            <div class="flex flex-wrap" id="article_body">
            </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()" 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.member.personal.list') }}',
            beforeSend: function() {
                $('#loadingOverlay').show();
            },
            complete: function() {
                setTimeout(function() {
                    $('#loadingOverlay').hide();
                }, 600);
            },
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {},
            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('search', $('#search').val());
            formData.append('status_personnel', $('#status_personnel').val());
            formData.append('type_company', $('#type_company').val());
            formData.append('province', $('#province').val());

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

            $.ajax({
                url: '{{ route('landing.member.personal.list') }}',
                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('search', $('#search').val());
            formData.append('status_personnel', $('#status_personnel').val());
            formData.append('type_company', $('#type_company').val());
            formData.append('province', $('#province').val());

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

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

            $.ajax({
                url: '{{ route('landing.member.personal.list') }}',
                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>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
@endsection