@extends('sidebaradmin')

@section('content')
    <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 Jenis Olahraga</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 Olahraga</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('olahraga.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="name">Nama Olahraga</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Masukan Jenis Olahraga" 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 ">
            Table Olahraga
        </div>
        <div class="card-body"style="overflow-x:auto;">
            <table class="table" id="table1">
                <thead>
                    <tr>
                        <th>Nama Olahraga</th>
                        <th>Action</th>

                    </tr>
                </thead>
                <tbody>


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

                            <td>{{ $item->name }}</td>

                            <td>
                                @if ($item->editable == 1)
                                    <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-name="{{ $item->name }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('olahraga.update', Crypt::encryptString($item->id)) }}')"
                                        class="open-AddBookDialog btn btn-primary edit" href=""><i
                                            class="bi bi-pencil-square"></i></a>
                                    <a href="" class="btn btn-danger"data-bs-toggle="modal"
                                        data-bs-target="#modalDelete"
                                        onclick="$('#modalDelete #formDelete').attr('action', '{{ route('olahraga.destroy', Crypt::encryptString($item->id)) }}')"><i
                                            class="bi bi-trash-fill"></i></a>
                                @else
                                    <a class="btn btn-secondary"> Not-Editable</a>
                                @endif


                            </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 Olahraga</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="name">Nama Olahraga</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Masukan  Jenis Olahraga" 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">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 Olahraga</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 name = $(this).data('name')

                $('.form-group #name').val(name)


            });
        </script>
    @endpush
@endsection