@extends('sidebaradmin')


@section('content')
    <section class="section">

        @include('message')



        <div class="card">
            <div class="card-header">
                Table anggota
            </div>
            <div class="card-body"style="overflow-x:auto;">
                <table class="table" id="table1">

                    <thead>
                        <tr>
                            <th>Nama Lengkap</th>
                            <th>No Ktp</th>
                            <th>Kontak</th>
                            <th>Jenis Kelamin</th>
                            <th>Alamat</th>
                            <th>Nama Usaha</th>
                            <th>logo Usaha</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

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

                                <td>{{ $item->namalengkap }}</td>
                                <td>{{ $item->no_ktp }}</td>
                                <td>{{ $item->no_telp }}</td>
                                <td>{{ $item->jenis_kelamin }}</td>
                                <td style="max-width: 400px;">{{ $item->alamat }}</td>
                                <td>{{ $item->nama_usaha }}</td>
                                <td>
                                    @if ($item->status == 1)
                                        <img src="{{ asset('logos') . '/' . $item->photo }}" alt="profile image"
                                            style="width: 150px" class="rounded">
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @if ($item->persetujuan == 0)
                                        <form action="{{ route('izin', Crypt::encryptString($item->id)) }}" method="post">
                                            @csrf
                                            <button type="submit" class="btn btn-secondary m-1">Belum disetujui</button>
                                        </form>
                                    @else
                                        <form action="{{ route('cabutizin', Crypt::encryptString($item->id)) }}"
                                            method="post">
                                            @csrf
                                            <button type="submit" class="btn btn-success m-1">Telah disetujui</button>
                                        </form>
                                    @endif

                                    <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-namalengkap="{{ $item->namalengkap }}" data-no_ktp="{{ $item->no_ktp }}"
                                        data-no_telp="{{ $item->no_telp }}"
                                        data-tempat_lahir="{{ $item->tempat_lahir }}"data-jenis_kelamin="{{ $item->jenis_kelamin }}"
                                        data-tanggal_lahir="{{ $item->tanggal_lahir }}" data-alamat="{{ $item->alamat }}"
                                        data-status="{{ $item->status }}" data-nama_usaha="{{ $item->nama_usaha }}"
                                        data-deskripsi_usaha="{{ $item->deskripsi }}" onclick="$('#modalEdit #formEdit')"
                                        class="open-AddBookDialog btn btn-info edit m-1" href=""><i
                                            class="bi bi-eye-fill"></i></a>
                                    <a href="" class="btn btn-danger m-1"data-bs-toggle="modal"
                                        data-bs-target="#modalDelete"
                                        onclick="$('#modalDelete #formDelete').attr('action', '{{ route('anggotacontrol.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">Informasi Anggota</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">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="namalengkap-edit">Nama Lengkap</label>
                            <input type="text" class="form-control" id="namalengkap-edit" name="namalengkap"
                                placeholder="Masukan Nama Lengkap"readonly>
                        </div>
                        <div class="form-group">
                            <label for="no_ktp-edit">No KTP</label>
                            <input type="number" class="form-control" id="no_ktp-edit" name="no_ktp"
                                placeholder="Masukan NO KTP"readonly>
                        </div>

                        <div class="form-group">
                            <label for="tempat_lahir-edit">Tempat Lahir</label>
                            <input type="text" class="form-control" id="tempat_lahir-edit" name="tempat_lahir"
                                placeholder="Masukan Tempat Lahir"readonly>
                        </div>
                        <div class="form-group">
                            <label for="jenis_kelamin-edit">Jenis Kelamin</label>
                            <select name="jenis_kelamin" id="jenis_kelamin-edit" class="form-control custom-select" required
                                readonly>

                                <option selected disabled>--Pilih Jenis Kelamin--</option>
                                <option value="laki-laki">Laki-Laki</option>
                                <option value="perempuan">Perempuan</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="tanggal_lahir-edit">Tanggal Lahir</label>
                            <input type="date" class="form-control" id="tanggal_lahir-edit" name="tanggal_lahir"
                                placeholder="Masukan Tanggal Lahir"readonly>
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="kecamatan_id-edit" name="kecamatan_id">
                        </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"readonly>
                        </div>
                        <div class="form-group">
                            <label for="no_telp-edit">Nomor Telepon</label>
                            <input type="number" class="form-control" id="no_telp-edit" name="no_telp"
                                placeholder="Masukan Nomor Telepon"readonly>
                        </div>

                        <div class="form-group">
                            <label for="status">Memiliki Wirausaha?</label>
                            <div>
                                <input type="radio" id="status-edit" name="status"
                                    placeholder="Masukan Nomor Telepon" value="0">
                                <label for="status-edit">Tidak</label>
                                <input type="radio" id="status1-edit" name="status"
                                    placeholder="Masukan Nomor Telepon" value="1">
                                <label for="status1-edit">Ya</label>
                            </div>

                        </div>
                        <div class="form-group hide" id="nama-usaha-edit">
                            <label for="nama_usaha-edit">Nama Usaha</label>
                            <input type="text" class="form-control" id="nama_usaha-edit" name="nama_usaha"
                                placeholder="Masukan Nama Usaha"readonly>
                        </div>

                        <div class="form-group hide" id="deskripsi-usaha-edit">
                            <label for="deskripsi">Deskripsi Wirausaha</label>
                            <textarea class="form-control" id="deskripsi-edit" name="deskripsi" rows="3"
                                placeholder="Masukan Deskripsi Satuan Karya"readonly></textarea>
                        </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>

                        </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 bg-warning">
                    <h5 class="modal-title">Tambahkan Kategori</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 delete --}}
    </div>


    </div>
    </div>

    @push('script-modal')
        <script>
            $(document).on('click', '#edit', function() {
                let namalengkap = $(this).data('namalengkap')
                let no_ktp = $(this).data('no_ktp')
                let no_telp = $(this).data('no_telp')
                let tempat_lahir = $(this).data('tempat_lahir')
                let tanggal_lahir = $(this).data('tanggal_lahir')
                let alamat = $(this).data('alamat')

                let jenis_kelamin = $(this).data('jenis_kelamin')
                let status = $(this).data('status')
                let nama_usaha = $(this).data('nama_usaha')
                let deskripsi_usaha = $(this).data('deskripsi_usaha')

                if (status == 0) {
                    $('.form-group #status-edit').click()
                } else {
                    $('.form-group  #status1-edit').click()
                }



                $('.form-group #namalengkap-edit').val(namalengkap)
                $('.form-group #no_ktp-edit').val(no_ktp)
                $('.form-group #no_telp-edit').val(no_telp)
                $('.form-group #tempat_lahir-edit').val(tempat_lahir)
                $('.form-group #tanggal_lahir-edit').val(tanggal_lahir)
                $('.form-group #alamat-edit').val(alamat)
                $('.form-group #jenis_kelamin-edit').val(jenis_kelamin)
                $('.form-group #nama_usaha-edit').val(nama_usaha)
                $('.form-group #deskripsi-edit').val(deskripsi_usaha)

            });
        </script>
    @endpush

    <script>
        const status_edit = document.getElementById('status-edit');
        const status1_edit = document.getElementById('status1-edit');

        const nama_edit = document.getElementById('nama-usaha-edit');
        const photo_edit = document.getElementById('photo-usaha-edit');
        const deskripsi_edit = document.getElementById('deskripsi-usaha-edit');
        const input_nama_edit = document.getElementById('nama_usaha-edit');

        const input_deskripsi_edit = document.getElementById('deskripsi-edit');

        status_edit.addEventListener("click", function() {
            if (status_edit.checked) {
                nama_edit.style.display = "none"
                deskripsi_edit.style.display = "none"
                input_nama_edit.required = false
                input_deskripsi_edit.required = false

            }
        });
        status1_edit.addEventListener("click", function() {
            if (status1_edit.checked) {
                nama_edit.style.display = "block"
                deskripsi_edit.style.display = "block"
                input_nama_edit.required = true
                input_deskripsi_edit.required = true


            }
        });
    </script>
@endsection