@extends('admin.sidebar')
@section('content')
    @php
        use Carbon\Carbon;
    @endphp
    {{-- TABLE --}}
    <div class="card">
        <div class="card-header center">
            <h5 class="card-title">
                Event
            </h5>
        </div>
        @include('message')
        <div class="card-body" style="overflow-x:auto;">
            <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3"><i
                    class="bi bi-plus"></i>
                Tambahkan Event</a>
            <table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th>Logo</th>
                        <th>Nama Acara</th>
                        <th>Cabor</th>
                        <th>Nomor Tanding</th>
                        <th>Tanggal Mulai </th>
                        <th>Tanggal Berakhir </th>
                        <th>Tanggal Batas Pendaftaran</th>
                        <th>Data Pendaftar</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($event as $item)
                        <tr>
                            <td>
                                <img src="{{ asset('images/event') . '/' . $item->photo }}" alt="profile image"
                                    style="width: 150px" class="rounded">
                            </td>
                            <td>{{ $item->nama }}</td>
                            <td>{{ $item->cabor }}</td>
                            <td>{{ $item->nomor_tanding }}</td>

                            <td class="text-center">{{ Carbon::parse($item->tanggal_mulai)->formatLocalized('%d %b %Y') }}
                            </td>
                            <td class="text-center">
                                {{ Carbon::parse($item->tanggal_berakhir)->formatLocalized('%d %b %Y') }}</td>
                            <td class="text-center">{{ Carbon::parse($item->batas_daftar)->formatLocalized('%d %b %Y') }}
                            </td>
                            <td>


                                <a href="{{ route('pendaftar.show', Crypt::encryptString($item->id)) }}"
                                    class="btn btn-success m-1"><i class="bi bi-people-fill"></i> Data
                                    Pendaftar</a>
                            </td>
                            <td>
                                <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                    data-nama="{{ $item->nama }}" data-tanggal_mulai="{{ $item->tanggal_mulai }}"
                                    data-batas_daftar="{{ $item->batas_daftar }}"
                                    data-tanggal_berakhir="{{ $item->tanggal_berakhir }}" data-cabor="{{ $item->cabor }}"
                                    data-pengirim="{{ $item->pengirim }}" data-link="{{ $item->link }}"
                                    data-tempat ="{{ $item->tempat }}"
                                    onclick="$('#modalEdit #formEdit').attr('action', '{{ route('events.update', Crypt::encryptString($item->id)) }}')"
                                    class="open-AddBookDialog btn btn-primary m-1" href=""><i
                                        class="bi bi-pencil-square"></i></a>
                                <a href="" class="btn btn-danger m-1"data-bs-toggle="modal"
                                    data-bs-target="#modalDelete"
                                    onclick="$('#modalDelete #formDelete').attr('action', '{{ route('events.destroy', Crypt::encryptString($item->id)) }}')"><i
                                        class="bi bi-trash-fill"></i></a>

                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
    {{-- TABLE --}}
    {{-- Modal STORE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalAdd" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambahkan Event</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('events.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="photo">Logo event</label>
                            <input type="file" class="form-control" id="photo" name="photo" required>
                            <i>*Foto yang dimasukan tidak boleh lebih dari 300mb!</i>
                        </div>
                        <div class="form-group">
                            <label for="nama">Nama Event</label>
                            <input type="text" class="form-control" id="nama" name="nama" required>
                        </div>
                        <div class="form-group">
                            <label for="cabor">Cabang Olahraga</label>
                            <select id="cabor" name="cabor" class="form-control">
                                <option selected disabled>--Pilih Cabor--</option>
                                @foreach ($cabor as $item)
                                    <option value="{{ $item->nama }}">{{ $item->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <label for="nomor_tanding" style="margin-bottom: 10px">Nomor Tanding</label>

                        <div class="form-group" id="nomorTandingContainer">

                        </div>

                        <div class="form-group">
                            <label for="tempat">Tempat Acara</label>
                            <input type="text" class="form-control" id="tempat"
                                name="tempat"placeholder="masukan nama tempat berlangsungnya acara" required>
                        </div>
                        <div class="form-group">
                            <label for="tanggal_mulai">Tanggal Mulai</label>
                            <input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" required>
                        </div>
                        <div class="form-group">
                            <label for="tanggal_berakhir">Tanggal Berakhir</label>
                            <input type="date" class="form-control" id="tanggal_berakhir" name="tanggal_berakhir"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="batas_daftar">Batas Pendaftaran Event</label>
                            <input type="date" class="form-control" id="batas_daftar" name="batas_daftar" required>
                        </div>
                        <div class="form-group">
                            <label for="link">Masukan Link Informasi Event</label>
                            <input type="link"placeholder="Masukan link yang mengarah ke website event"
                                class="form-control" id="link" name="link" required>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal STORE||END|| --}}

    {{-- Modal UPDATE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalEdit" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data Event</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="" method="POST" id="formEdit" enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="photo">Logo event</label>
                            <input type="file" class="form-control" id="photo" name="photo">
                            <i>*Foto yang dimasukan tidak boleh lebih dari 300mb!</i>
                        </div>
                        <div class="form-group">
                            <label for="nama-edit">Nama Event</label>
                            <input type="text" class="form-control" id="nama-edit" name="nama" required>
                        </div>
                        <div class="form-group">
                            <label for="cabor-edit">Cabang Olahraga</label>
                            <select id="cabor-edit" name="cabor" class="form-control">
                                <option selected disabled>--Pilih Cabor--</option>
                                @foreach ($cabor as $item)
                                    <option value="{{ $item->nama }}">{{ $item->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <label for="nomor_tanding" style="margin-bottom: 10px">Nomor Tanding</label>
                        <div class="form-group">
                            <i>*jika tidak ingin mengubah nomor tanding,kosongkan opsi Nomor Tanding!</i>

                        </div>
                        <div class="form-group" id="nomorTandingContainerEdit">

                        </div>
                        <div class="form-group">
                            <label for="tempat-edit">Tempat Acara</label>
                            <input type="text" class="form-control" id="tempat-edit"
                                name="tempat"placeholder="masukan nama tempat berlangsungnya acara" required>
                        </div>
                        <div class="form-group">
                            <label for="tanggal-mulai-edit">Tanggal Mulai</label>
                            <input type="date" class="form-control" id="tanggal-mulai-edit" name="tanggal_mulai"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="tanggal-berakhir-edit">Tanggal Berakhir</label>
                            <input type="date" class="form-control" id="tanggal-berakhir-edit"
                                name="tanggal_berakhir" required>
                        </div>
                        <div class="form-group">
                            <label for="batas_daftar-edit">Batas Pendaftaran Event</label>
                            <input type="date" class="form-control" id="batas_daftar-edit" name="batas_daftar"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="link-edit">Masukan Link Informasi Event</label>
                            <input type="link"placeholder="Masukan link yang mengarah ke website event"
                                class="form-control" id="link-edit" name="link" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-warning ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal UPDATE||END|| --}}

    {{-- Modal DESTROY||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalDelete" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hapus Event</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formDelete" action="" method="post">
                        @csrf
                        @method('delete')
                        <div class="form-group" id="pass">
                            <h5>Apakah anda yakin ingin menghapus item?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-danger ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Delete</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal DESTROY||END|| --}}




    {{-- script --}}

    @push('script-ajax')
        <script>
            $(document).ready(function() {

                $('.form-group #cabor').change(function() {
                    var CaborPilihan = $(this).val();
                    var nomorTandingContainer = $('#nomorTandingContainer');

                    // Reset the checkboxes container
                    nomorTandingContainer.empty();

                    $.ajax({
                        url: '/get-nomorTanding/' + CaborPilihan,
                        type: 'GET',
                        success: function(data) {



                            if (data.length > 0) {
                                $.each(data, function(index, nomor_tanding) {


                                    console.log(index)
                                    var checkboxHtml =
                                        '<div><input type="checkbox" id="nomor_tanding' +
                                        index + '" value="' +
                                        nomor_tanding.name + '" name="nomor_tanding[]">';
                                    checkboxHtml +=
                                        '<label for="nomor_tanding' + index +
                                        '" style="margin-left:5px">' +
                                        nomor_tanding.name + '</label></div>';
                                    nomorTandingContainer.append(checkboxHtml);
                                });
                            } else {

                            }


                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                });
            });
        </script>
        <script>
            $(document).ready(function() {

                $('.form-group #cabor-edit').change(function() {
                    var CaborPilihan = $(this).val();
                    var nomorTandingContainerEdit = $('#nomorTandingContainerEdit');

                    // Reset the checkboxes container
                    nomorTandingContainerEdit.empty();

                    $.ajax({
                        url: '/get-nomorTanding/' + CaborPilihan,
                        type: 'GET',
                        success: function(data) {



                            if (data.length > 0) {
                                $.each(data, function(index, nomor_tanding) {


                                    console.log(index)
                                    var checkboxHtml =
                                        '<div><input type="checkbox" id="nomor_tanding' +
                                        index + '" value="' +
                                        nomor_tanding.name + '" name="nomor_tanding[]">';
                                    checkboxHtml +=
                                        '<label for="nomor_tanding' + index +
                                        '" style="margin-left:5px">' +
                                        nomor_tanding.name + '</label></div>';
                                    nomorTandingContainerEdit.append(checkboxHtml);
                                });
                            } else {

                            }


                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                });
            });
        </script>
    @endpush
    @push('script-modal')
        {{-- data modal Update --}}

        <script>
            $(document).on('click', '#edit', function() {
                let nama = $(this).data('nama')
                let tanggal_mulai = $(this).data('tanggal_mulai')
                let tanggal_berakhir = $(this).data('tanggal_berakhir')
                let batas_daftar = $(this).data('batas_daftar')
                let cabor = $(this).data('cabor');
                let tempat = $(this).data('tempat');

                let link = $(this).data('link')


                $('.form-group #nama-edit').val(nama)
                $('.form-group #tanggal-mulai-edit').val(tanggal_mulai)
                $('.form-group #tanggal-berakhir-edit').val(tanggal_berakhir)
                $('.form-group #batas_daftar-edit').val(batas_daftar)
                $('.form-group #cabor-edit').prop('value', cabor);
                $('.form-group #link-edit').val(link)
                $('.form-group #tempat-edit').val(tempat)

                var CaborPilihan = cabor;
                var nomorTandingContainerEdit = $('#nomorTandingContainerEdit');

                // Reset the checkboxes container
                nomorTandingContainerEdit.empty();

                $.ajax({
                    url: '/get-nomorTanding/' + CaborPilihan,
                    type: 'GET',
                    success: function(data) {



                        if (data.length > 0) {
                            $.each(data, function(index, nomor_tanding) {



                                var checkboxHtml =
                                    '<div><input type="checkbox" id="nomor_tanding' +
                                    index + '" value="' +
                                    nomor_tanding.name + '" name="nomor_tanding[]">';
                                checkboxHtml +=
                                    '<label for="nomor_tanding' + index +
                                    '" style="margin-left:5px">' +
                                    nomor_tanding.name + '</label></div>';
                                nomorTandingContainerEdit.append(checkboxHtml);
                            });
                        } else {
                            var messageHtml =
                                '<div class="bg-info text-secondary p-3 rounded shadow mb-3 text-white">' +
                                '<i class="bi bi-info-circle-fill"></i> Nomor tanding tidak tersedia,segera atur di menu Atur Cabor!' +
                                '</div>';

                            nomorTandingContainerEdit.html(messageHtml);
                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });
        </script>
    @endpush
    {{-- script --}}
@endsection