@extends('sidebaradmin')
@section('content')
    <section class="section">
        <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3">
            <i <i class="bi bi-plus"></i>
            Tambahkan Event</a>
        @include('message')
        {{-- modal ADD --}}
        <!--BorderLess Modal Modal -->
        <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('event.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="title">Judul</label>
                                <input type="text" class="form-control" id="title" name="title"
                                    placeholder="Masukan Judul Event" required>
                            </div>
                            {{-- <div class="form-group">
                                <label for="deskripsi">Deskripsi</label>
                                <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3" placeholder="Masukan Deskripsi " required></textarea>
                            </div> --}}
                            <div class="form-group">
                                <label for="Tag_id">Tag</label>
                                <select name="tag_id" id="tag_id" class="form-control custom-select" required>
                                    <option selected disabled>-Pilih Tag-</option>
                                    @foreach ($tag as $item)
                                        <option value="{{ $item->id }}" style="background-color: {{ $item->color }}">
                                            {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="alamat">Alamat</label>
                                <input type="text" class="form-control" id="alamat" name="alamat"
                                    placeholder="Masukan Alamat" required>
                            </div>
                            <div class="form-group">
                                <label for="tanggal">Tanggal</label>
                                <input type="date" class="form-control" id="tanggal" name="tanggal"
                                    placeholder="dd/mm/yyyy" required>
                            </div>
                            <div class="form-group">
                                <label for="jam">Jam</label>
                                <input type="time" class="form-control" id="jam" name="jam" required>
                            </div>
                            <div class="form-group">
                                <label for="link-edit"> link Event</label>
                                <input class="form-control" type="text"id="link-edit" name="link"
                                    placeholder="Masukkan Link event">
                            </div>

                            <div class="form-group">
                                <label for="keterangan-wrapper">Keterangan</label>
                                <div class="mt-3" id="keterangan-wrapper ">
                                    <input type="radio" class="btn-check m-3" name="keterangan"
                                        id="hideInput"autocomplete="off"value="1">
                                    <label class="btn btn-success" for="hideInput">Gratis</label>
                                    <input type="radio" class="btn-check m-3" name="keterangan" id="showInput"
                                        autocomplete="off"value="0">
                                    <label class="btn btn-primary" for="showInput">Berbayar</label>
                                </div>
                            </div>
                            <div id="inputBiaya" class="form-group">
                                <label for="biaya"> Masukan biaya (optional)</label>
                                <input class="form-control m-3" type="number" name="biaya" placeholder="Masukkan Biaya">
                            </div>

                            <div class="form-group">
                                <label for="photo">Photo Event</label>
                                <input type="file" class="form-control" id="photo" name="photo" 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 ADD End --}}


        <div class="card">
            <div class="card-header fw-bold center ">
                Event
            </div>
            <div class="card-body"style="overflow-x:auto;">
                <table class="table" id="table1">
                    <thead>
                        <tr>


                            <th>photo</th>
                            <th>Judul Event</th>
                            <th>waktu</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>


                        @foreach ($event as $item)
                            <tr>

                                <td><img src="{{ asset('images') . '/' . $item->photo }}" alt="profile image"
                                        style="width: 150px" class="rounded"></td>
                                <td>{{ $item->title }}</td>
                                <td>{{ $item->tanggal }} Pukul:{{ $item->jam }}</td>
                                <td>


                                    <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-title="{{ $item->title }}" data-link="{{ $item->link }}"
                                        data-tag_id="{{ $item->tag_id }}"data-alamat="{{ $item->alamat }}"
                                        data-keterangan="{{ $item->keterangan }}" data-biaya="{{ $item->biaya }}"
                                        data-jam="{{ $item->jam }}" data-tanggal="{{ $item->tanggal }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('event.update', Crypt::encryptString($item->id)) }}')"
                                        class="open-AddBookDialog btn btn-primary edit m-2" href=""><i
                                            class="bi bi-pencil-square"></i></a>
                                    <a href="" class="btn btn-danger m-2"data-bs-toggle="modal"
                                        data-bs-target="#modalDelete"
                                        onclick="$('#modalDelete #formDelete').attr('action', '{{ route('event.destroy', Crypt::encryptString($item->id)) }}')"><i
                                            class="bi bi-trash-fill"></i></a>


                                </td>


                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </section>
    <!-- Basic Tables end -->
    {{-- modal edit --}}
    <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 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="formEdit" action="" method="post"enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="title-edit">Judul</label>
                            <input type="text" class="form-control" id="title-edit" name="title"
                                placeholder="Masukan Judul Event" required>
                        </div>
                        {{-- <div class="form-group">
                            <label for="deskripsi-edit">Deskripsi</label>
                            <textarea class="form-control" id="deskripsi-edit" name="deskripsi" rows="3" placeholder="Masukan Deskripsi "
                                required></textarea>
                        </div> --}}
                        <div class="form-group">
                            <label for="Tag_id-edit">Tag</label>
                            <select name="tag_id" id="tag_id-edit" class="form-control custom-select" required>
                                <option selected disabled>-Pilih Tag-</option>
                                @foreach ($tag as $item)
                                    <option value="{{ $item->id }}" style="background-color: {{ $item->color }}">
                                        {{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="alamat-edit">Alamat</label>
                            <input type="text" class="form-control" id="alamat-edit" name="alamat"
                                placeholder="Masukan Alamat" required>
                        </div>
                        <div class="form-group">
                            <label for="tanggal-edit">Tanggal</label>
                            <input type="date" class="form-control" id="tanggal-edit" name="tanggal"
                                placeholder="dd/mm/yyyy" required>
                        </div>
                        <div class="form-group">
                            <label for="jam-edit">Jam</label>
                            <input type="time" class="form-control" id="jam-edit" name="jam" required>
                        </div>
                        <div class="form-group">
                            <label for="link-edit"> link Event</label>
                            <input class="form-control m-3" type="text"id="link-edit" name="link"
                                placeholder="Masukkan Link event">
                        </div>
                        <div class="form-group">
                            <label for="keterangan-wrapper">Keterangan</label>
                            <div class="mt-3" id="keterangan-wrapper">
                                <input type="radio" class="radio btn-check m-3" name="keterangan"
                                    id="hideInput2"autocomplete="off"value="1">
                                <label class="btn btn-success" for="hideInput2">Gratis</label>
                                <input type="radio" class="radio btn-check m-3" name="keterangan" id="showInput2"
                                    autocomplete="off"value="0">
                                <label class="btn btn-primary" for="showInput2">Berbayar</label>
                            </div>
                            <div id="inputBiaya2" class="form-group mt-3" style="display:none;">
                                <label for="biaya"> Masukan biaya (optional)</label>
                                <input class="form-control m-3" type="text" id="biaya" name="biaya"
                                    placeholder="Masukkan Biaya">
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="photo-edit">Photo Event</label>
                            <input type="file" class="form-control" id="photo-edit" name="photo">
                        </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">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>



    {{-- modal edit --}}
    {{-- modal delete --}}
    <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-primary 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 delete --}}
    </div>


    </div>
    </div>

    @push('script-modal')
        <script>
            $(document).on('click', '#edit', function() {
                let title = $(this).data('title')
                let tanggal = $(this).data('tanggal')
                // let deskripsi = $(this).data('deskripsi')
                let tag_id = $(this).data('tag_id')
                let jam = $(this).data('jam')
                let alamat = $(this).data('alamat')
                let keterangan = $(this).data('keterangan')
                let biaya = $(this).data('biaya')
                let link = $(this).data('link')
                console.log(keterangan);

                if (keterangan == 1) {
                    $('.form-group #hideInput2').attr("checked", true)
                }
                if (keterangan == 0) {
                    $('.form-group #showInput2').attr("checked", true)
                    $('.form-group #inputBiaya2').css("display", "block")
                }

                $('.form-group #title-edit').val(title)
                // $('.form-group #deskripsi-edit').val(deskripsi)
                $('.form-group #tanggal-edit').val(tanggal)
                $('.form-group #tag_id-edit').val(tag_id)
                $('.form-group #link-edit').val(link)
                $('.form-group #jam-edit').val(jam)
                $('.form-group #alamat-edit').val(alamat)
                $('.form-group #biaya').val(biaya)




            });
        </script>
        <script>
            // Ambil elemen-elemen yang diperlukan
            const showInputRadio = document.getElementById("showInput");
            const hideInputRadio = document.getElementById("hideInput");
            const showInputRadio2 = document.getElementById("showInput2");
            const hideInputRadio2 = document.getElementById("hideInput2");
            const inputBiaya2 = document.getElementById("inputBiaya2");

            // Tambahkan event listener pada radio button
            showInputRadio.addEventListener("change", function() {
                if (this.checked) {
                    inputBiaya.style.display = "block";
                }
            });

            hideInputRadio.addEventListener("change", function() {
                if (this.checked) {
                    inputBiaya.style.display = "none";
                }
            });
            showInputRadio2.addEventListener("change", function() {
                if (this.checked) {
                    inputBiaya2.style.display = "block";
                }
            });

            hideInputRadio2.addEventListener("change", function() {
                if (this.checked) {
                    inputBiaya2.style.display = "none";
                }
            });
        </script>
    @endpush
@endsection