@extends('layouts.master')
@section('content')

<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
            <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

                <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                    <div class="grow">
                        <h5 class="text-16">Race Pack {{$lokasi[0]->event_name}}</h5>
                    </div>
                    <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                        <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                            <a href="#!" class="text-slate-400 dark:text-zink-200">Peserta</a>
                        </li>
                        <li class="text-slate-700 dark:text-zink-100">
                            Race Pack {{$lokasi[0]->event_name}}
                        </li>
                    </ul>
                </div>
                <div class="card" id="productListTable">
                    <div class="card-body">
                        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-12">
                            <div class="xl:col-span-6">
                                <div class="relative">
                                    <input type="text" id="search" onkeyup="searchPeserta()" class="ltr:pl-8 rtl:pr-8 search form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Search for ..." autocomplete="on" autofocus>
                                    <i data-lucide="search" class="inline-block size-4 absolute ltr:left-2.5 rtl:right-2.5 top-2.5 text-slate-500 dark:text-zink-200 fill-slate-100 dark:fill-zink-600"></i>
                                </div>
                            </div>
                            <!--end col-->
                      
                           
                        </div><!--end grid-->
                    </div>
                    <div class="card-body">
                        <div class="">
                        
                        <div class="text-left 2xl:col-span-12">
                            <h4>Loket : {{ Session::get('loket') }}</h4>
                            <div id="peserta-list"></div>
                        </div>
                        </div>


                    </div>
                </div><!--end card-->

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

        @section('script')
        <script>
            const searchUrl = "{{ route('search', ['id' => $lokasi[0]->event_id]) }}";
        function searchPeserta() {
            var keyword = $('#search').val();
            if (keyword.length >= 3) {
                $.ajax({
                    url: searchUrl,
                    method: 'GET',
                    data: { search: keyword },
                    success: function(response) {
                        var pesertaList = '';
                        response.pesertas.forEach(function(peserta) {
                            pesertaList += `
                               
                                              

                                                 <div class="overflow-x-auto">
                                                        <table class="w-full ltr:text-left rtl:ext-right">
                                                            <tbody>
                                                                <tr>
                                                                    <div class="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-12">
                                                                        <div class="xl:col-span-4">
                                                                          
                                                                            <p class="mb-1 text-15 text-slate-500">Order ID</p>
                                                                            <p class="mb-1 text-15 text-slate-500">NIK</p>
                                                                            <p class="mb-1 text-15 text-slate-500">Nama</p>
                                                                            <p class="mb-1 text-15 text-slate-500">Alamat</p>
                                                                            <p class="mb-1 text-15 text-slate-500">Jenis Kelamin</p>
                                                                            <p class="mb-1 text-15 text-slate-500">Kategori</p>
                                                                            <p class="mb-1 text-15 text-slate-500">T-shirt</p>
                                                                        </div>
                                                                        <div class="xl:col-span-4">
                                                                        
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.order_id}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.dokumen_id}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.full_name}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.alamat}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.jenis_kelamin}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.nama_kategori} - ${peserta.nama_kat_event}</p>
                                                                            <p class="mb-1 text-15 text-black-500">${peserta.tshirt_size}</p>
                                                                        </div>
                                                                        <div class="xl:col-span-4">
                                                                        <h3 class="mb-1 text-15 text-red-500">
                                                                            ${peserta.konfirmasi_kehadiran == 1 
                                                                                ? 'Masih di Proses pada Loket ' + peserta.loket 
                                                                                : peserta.konfirmasi_kehadiran == 2 
                                                                                    ? 'Sudah di Proses pada Loket ' + peserta.loket 
                                                                                    : 'Status Tidak Diketahui'}
                                                                        </h3>
                                                                        
                                                                        </div>

                                                                    </div>
                                                                </tr>
                                                                
                                                            </tbody>
                                                        </table>
                                                    </div>

    
                                       
                                <div>
                                
                                 ${peserta.konfirmasi_kehadiran == 0 
                                    ? `<a href="/peserta/race_bw/${peserta.order_id}" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Cek</a>`
                                    : `<a href="#" class="text-gray-500"></a>`
                                }
                                    </div>
                            `;
                        });
                        $('#peserta-list').html(pesertaList);
                    }
                });
            } else {
                $('#peserta-list').html('');
            }
        }
    </script>

    <!-- <script>
        // Function to confirm attendance when the button is clicked
        function konfirmasiKehadiran(orderId) {
            // Show a confirmation dialog to the user
            if (confirm("Apakah Anda yakin ingin mengonfirmasi kehadiran?")) {
                // Make an AJAX request to confirm attendance
                $.ajax({
                    url: '/peserta/konfirmasi',  // Endpoint to handle the confirmation
                    method: 'POST',
                    data: { order_id: orderId },
                    success: function(response) {
                        // Handle the response from the server
                        if (response.success) {
                            // If the confirmation is successful, update the UI
                            alert('Kehadiran berhasil dikonfirmasi!');
                            // Optionally, you can update the button or hide it
                            $('#peserta-' + orderId + ' .confirm-button').text('Kehadiran Terkonfirmasi').prop('disabled', true);
                        } else {
                            alert('Gagal mengonfirmasi kehadiran. Silakan coba lagi.');
                        }
                    },
                    error: function() {
                        // If there is an error with the AJAX request
                        alert('Terjadi kesalahan saat mengonfirmasi kehadiran. Silakan coba lagi.');
                    }
                });
            }
        }
    </script> -->


    @endsection
@endsection