@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 Club Olaraga</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 Club</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 method="POST" action="{{ route('tambahClub') }}" enctype="multipart/form-data">
                            @csrf

                            <h3>Account</h3>
                            @include('message')
                            <div class="mb-3">
                                <label for="username" class="form-label">Username</label>
                                <input type="text" class="form-control" id="username" name="username"
                                    placeholder="Username">

                            </div>
                            <div class="mb-3">
                                <label for="namalengkap" class="form-label">Nama Lengkap</label>
                                <input type="text" class="form-control" id="namalengkap"
                                    name="namalengkap"placeholder="Nama Lengkap">
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email"name="email"
                                    aria-describedby="emailHelp"placeholder="Email">
                            </div>
                            <div class="mb-3">
                                <label for="no_telp" class="form-label">Contact</label>
                                <input type="number" class="form-control" id="no_telp"name="no_telp"
                                    placeholder="Nomor Telpon">
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <div class="d-flex">
                                    <input type="password" class="form-control" id="password"
                                        name="password"placeholder="Password">
                                    <span toggle="#password" class=" eye m-2"><i class="bi bi-eye-fill"></i></span>
                                </div>

                            </div>
                            <input type="hidden" name="role"value="1" id="role">
                            <h3>Organization</h3>

                            <div class="mb-3">
                                <label for="organisasi" class="form-label">Nama Organisasi</label>
                                <input type="text" class="form-control" id="organisasi"
                                    name="organisasi"placeholder="Organisasi">
                            </div>
                            <div class="mb-3">
                                <label for="jenis_keanggotaan" class="form-label">Jenis Keanggotaan(optional)</label>
                                <input type="text" class="form-control" id="jenis_keanggotaan"
                                    name="jenis_keanggotaan"placeholder="Jenis Keanggotaan">
                            </div>
                            <div class="mb-3">
                                <label for="legalitas" class="form-label">NO.Legalitas</label>
                                <input type="text" class="form-control" id="legalitas"
                                    name="legalitas"placeholder="NO.Legalitas">
                            </div>
                            <div class="mb-3">
                                <label for="ketua" class="form-label">Ketua Organisasi</label>
                                <input type="text" class="form-control" id="ketua" name="ketua"
                                    placeholder="Ketua">
                            </div>
                            <div class="mb-3">
                                <label for="periode" class="form-label">Periode</label>
                                <input type="text" class="form-control" id="periode" name="periode"
                                    placeholder="Tahun - Tahun">
                            </div>
                            <div class="form-group">
                                <label for="kecamatan_id">Kecamatan</label>
                                <select name="kecamatan_id" id="kecamatan_id" class="form-control custom-select"
                                    required>
                                    <option selected disabled>-Pilih Kecamatan-</option>
                                    @foreach ($kecamatan as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="kelurahan_id">Kelurahan</label>
                                <select name="kelurahan_id" id="kelurahan_id" class="form-control custom-select"
                                    required>
                                    <option selected disabled>-Pilih Kelurahan-</option>
                                    @foreach ($kelurahan as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <input type="text" class="form-control" id="alamat"
                                    name="alamat"placeholder="Alamat">
                            </div>
                            <div id="inputClub">
                                <h3>Sport</h3>
                                <div class="form-group">
                                    <label for="deskripsiclub">Deskripsi Organisasi Olahraga</label>
                                    <textarea class="form-control" id="deskripsiclub" name="deskripsiclub" rows="3"
                                        placeholder="Masukan Deskripsi tentang Organisasi Olahraga"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="olahraga_id">Cabang Olahraga</label>
                                    <select name="olahraga_id" id="olahraga_id" class="form-control custom-select"
                                        required>
                                        <option selected disabled>-Pilih Olahraga-</option>
                                        @foreach ($olahraga as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="gedung" class="form-label">Jumlah Gedung Yang Tersedia</label>
                                <input type="number" class="form-control" id="gedung"
                                    name="gedung"placeholder="tuliskan jumlah gedung yang tersedia dan aktif">
                            </div>
                            <div class="mb-3">
                                <label for="photo" class="form-label">Photo Profile</label>
                                <input type="file" class="form-control" id="photo"
                                    name="photo"placeholder="Photo Profile">
                            </div>
                            <h3>Specific Location</h3>
                            <div class="mb-3">
                                <label for="koordinat" class="form-label">Koordinat Googlemaps</label>
                                <input type="text" id="koordinat" class="form-control" name="koordinat">

                            </div>

                            <button type="submit" class="btn btn-success">Sign In</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- modal ADD End --}}


        <div class="card w-100">
            <div class="card-header fw-bold center ">
                CLUB OLAHRAGA
            </div>
            <div class="card-body w-100"style="overflow-x:auto;">
                <table class="table w-100" id="table1">
                    <thead>
                        <tr>
                            <th>Photo</th>
                            <th>Nama Club</th>
                            <th>Olahraga</th>
                            <th>Contact</th>
                            <th>Kecamatan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach ($club as $item)
                            <tr>
                                <td><img src="{{ asset('images') . '/' . $item->photo }}" alt="profile image"
                                        style="width: 150px" class="rounded"></td>
                                <td class="overflow-auto">{{ $item->organisasi }}</td>
                                <td class="overflow-auto">{{ $item->club->olahraga->name }}</td>
                                <td class="overflow-auto " style="max-width: 300px;">{{ $item->no_telp }}</td>
                                <td class="overflow-auto " style="max-width: 300px;">{{ $item->kecamatan->name }}</td>

                                <td>
                                    @if ($item->persetujuan == 0)
                                        <form action="{{ route('aksesPemuda', Crypt::encryptString($item->id)) }}"
                                            method="post">
                                            @csrf
                                            <input type="hidden" name="role" value="2">
                                            <button type="submit" class="btn btn-secondary m-2">Belum disetujui</button>
                                        </form>
                                    @else
                                        <form action="{{ route('lepasAksesPemuda', Crypt::encryptString($item->id)) }}"
                                            method="post">

                                            @csrf
                                            <input type="hidden" name="role" value="2">
                                            <button type="submit" class="btn btn-success m-2">Telah disetujui</button>
                                        </form>
                                        <a href="{{ route('anggotacontrol.show', Crypt::encryptString($item->id)) }}"
                                            class="btn btn-info m-2">Anggota</a>
                                    @endif

                                    <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-username="{{ $item->username }}"
                                        data-namalengkap="{{ $item->namalengkap }}" data-email="{{ $item->email }}"
                                        data-no_telp="{{ $item->no_telp }}" data-password="{{ $item->password }}"
                                        data-organisasi="{{ $item->organisasi }}" data-status="{{ $item->status }}"
                                        data-jenis_keanggotaan="{{ $item->jenis_keanggotaan }}"
                                        data-legalitas="{{ $item->legalitas }}" data-ketua="{{ $item->ketua }}"
                                        data-periode="{{ $item->periode }}" data-kecamatan="{{ $item->kecamatan_id }}"
                                        data-kelurahan="{{ $item->kelurahan_id }}" data-alamat="{{ $item->alamat }}"
                                        data-deskripsi="{{ $item->club->deskripsi }}"data-olahraga="{{ $item->club->olahraga_id }}"
                                        data-gedung="{{ $item->gedung }}"
                                        data-koordinat="{{ $item->lat }},{{ $item->lng }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('ubahClub', 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('hapusClub', 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 Club</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
                        <h3>Account</h3>
                        @include('message')
                        <div class="mb-3 form-group">
                            <label for="username-edit" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username-edit" name="username"
                                placeholder="Username">

                        </div>
                        <div class="mb-3 form-group">
                            <label for="namalengkap-edit" class="form-label">Nama Lengkap</label>
                            <input type="text" class="form-control" id="namalengkap-edit"
                                name="namalengkap"placeholder="Nama Lengkap">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="email-edit" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email-edit"name="email"
                                aria-describedby="emailHelp"placeholder="Email">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="no_telp-edit" class="form-label">Contact</label>
                            <input type="number" class="form-control" id="no_telp-edit"name="no_telp"
                                placeholder="Nomor Telpon">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <div class="d-flex">
                                <input type="text" class="form-control" id="password"
                                    name="password"placeholder="kosongkan jika tidak ingin mengganti password">

                            </div>

                        </div>
                        <input type="hidden" name="role"value="1" id="role">
                        <h3>Organization</h3>
                        <div class="form-group">
                            <label for="status-edit">Status</label>
                            <select name="status" id="status-edit" class="form-control custom-select" required>
                                <option selected disabled>-Pilih Kelurahan-</option>

                                <option value="0">Tidak Aktif</option>
                                <option value="1">Aktif</option>

                            </select>
                        </div>

                        <div class="mb-3 form-group">
                            <label for="organisasi-edit" class="form-label">Nama Organisasi</label>
                            <input type="text" class="form-control" id="organisasi-edit"
                                name="organisasi"placeholder="Organisasi">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="jenis_keanggotaan-edit" class="form-label">Jenis Keanggotaan(optional)</label>
                            <input type="text" class="form-control" id="jenis_keanggotaan-edit"
                                name="jenis_keanggotaan"placeholder="Jenis Keanggotaan">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="legalitas-edit" class="form-label">NO.Legalitas</label>
                            <input type="text" class="form-control" id="legalitas-edit"
                                name="legalitas"placeholder="NO.Legalitas">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="ketua-edit" class="form-label">Ketua Organisasi</label>
                            <input type="text" class="form-control" id="ketua-edit" name="ketua"
                                placeholder="Ketua">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="periode-edit" class="form-label">Periode</label>
                            <input type="text" class="form-control" id="periode-edit" name="periode"
                                placeholder="Tahun - Tahun">
                        </div>
                        <div class="form-group">
                            <label for="kecamatan_id-edit">Kecamatan</label>
                            <select name="kecamatan_id" id="kecamatan_id-edit" class="form-control custom-select"
                                required>
                                <option selected disabled>-Pilih Kecamatan-</option>
                                @foreach ($kecamatan as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="kelurahan_id-edit">Kelurahan</label>
                            <select name="kelurahan_id" id="kelurahan_id-edit" class="form-control custom-select"
                                required>
                                <option selected disabled>-Pilih Kelurahan-</option>
                                @foreach ($kelurahan as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 form-group">
                            <label for="alamat-edit" class="form-label">Alamat</label>
                            <input type="text" class="form-control" id="alamat-edit"
                                name="alamat"placeholder="Alamat">
                        </div>
                        <div id="inputClub">
                            <h3>Sport</h3>
                            <div class="form-group">
                                <label for="deskripsiclub-edit">Deskripsi Organisasi Olahraga</label>
                                <textarea class="form-control" id="deskripsiclub-edit" name="deskripsiclub" rows="3"
                                    placeholder="Masukan Deskripsi tentang Organisasi Olahraga"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="olahraga_id-edit">Cabang Olahraga</label>
                                <select name="olahraga_id" id="olahraga_id-edit" class="form-control custom-select"
                                    required>
                                    <option selected disabled>-Pilih Olahraga-</option>
                                    @foreach ($olahraga as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 form-group">
                            <label for="gedung-edit" class="form-label">Jumlah Gedung Yang Tersedia</label>
                            <input type="number" class="form-control" id="gedung-edit"
                                name="gedung"placeholder="tuliskan jumlah gedung yang tersedia dan aktif">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="photo" class="form-label">Photo Profile</label>
                            <input type="file" class="form-control" id="photo"
                                name="photo"placeholder="Photo Profile">
                        </div>
                        <h3>Specific Location</h3>
                        <div class="mb-3 form-group">
                            <label for="koordinat-edit" class="form-label">Koordinat Googlemaps</label>
                            <input type="text" id="koordinat-edit" class="form-control" name="koordinat">

                        </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 Club</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 username = $(this).data('username')
                let namalengkap = $(this).data('namalengkap')
                let email = $(this).data('email')
                let no_telp = $(this).data('no_telp')
                let organisasi = $(this).data('organisasi')
                let jenis_keanggotaan = $(this).data('jenis_keanggotaan')
                let legalitas = $(this).data('legalitas')
                let ketua = $(this).data('ketua')
                let periode = $(this).data('periode')
                let kecamatan = $(this).data('kecamatan')
                let kelurahan = $(this).data('kelurahan')
                let alamat = $(this).data('alamat')
                let status = $(this).data('status')
                let deskripsi = $(this).data('deskripsi')
                let olahraga = $(this).data('olahraga')
                let gedung = $(this).data('gedung')
                let koordinat = $(this).data('koordinat')




                $('.form-group #username-edit').val(username)
                $('.form-group #namalengkap-edit').val(namalengkap)
                $('.form-group #email-edit').val(email)
                $('.form-group #status-edit').val(status)
                $('.form-group #no_telp-edit').val(no_telp)
                $('.form-group #organisasi-edit').val(organisasi)
                $('.form-group #jenis_keanggotaan-edit').val(jenis_keanggotaan)
                $('.form-group #legalitas-edit').val(legalitas)
                $('.form-group #ketua-edit').val(ketua)
                $('.form-group #periode-edit').val(periode)
                $('.form-group #kecamatan_id-edit').val(kecamatan)
                $('.form-group #kelurahan_id-edit').val(kelurahan)
                $('.form-group #alamat-edit').val(alamat)
                $('.form-group #olahraga_id-edit').val(olahraga)
                $('.form-group #deskripsiclub-edit').val(deskripsi)
                $('.form-group #koordinat-edit').val(koordinat)
                $('.form-group #gedung-edit').val(gedung)

            });
        </script>
        <script>
            var clicked = true;
            const togglePassword = document.querySelector('.eye');
            const password = document.querySelector('#password');

            togglePassword.addEventListener('click', function() {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                if (clicked) {
                    togglePassword.style.cssText =
                        'color:#5bc0de!important;';
                } else {
                    togglePassword.style.cssText =
                        'color:#333!important;';

                }
                clicked = !clicked;
            });
        </script>
    @endpush
@endsection