@extends('sidebar')


@section('content')
    <section class="section">
        <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3"
            {{-- onclick="$('#modalEdit2 #formEdit').attr('action', '{{ route('users.update', Crypt::encryptString($data->id)) }}')" --}}>
            <i class="bi bi-plus"></i>
            Tambahkan Anggota</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 Anggota Organisasi</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('anggotas.store') }}" method="POST"enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="namalengkap">Nama Lengkap</label>
                                <input type="text" class="form-control" id="namalengkap" name="namalengkap"
                                    placeholder="Masukan Nama Lengkap">
                            </div>
                            <div class="form-group">
                                <label for="no_ktp">No KTP</label>
                                <input type="number" class="form-control" id="no_ktp" name="no_ktp"
                                    placeholder="Masukan NO KTP">
                            </div>

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

                                    <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">
                                <input type="hidden" class="form-control" id="kecamatan_id" name="kecamatan_id"
                                    value="{{ $anggota_byid->kecamatan_id }}">
                            </div>
                            <div class="form-group">
                                <label for="alamat">Alamat</label>
                                <input type="text" class="form-control" id="alamat" name="alamat"
                                    placeholder="Masukan Alamat">
                            </div>
                            <div class="form-group">
                                <label for="no_telp">Nomor Telepon</label>
                                <input type="number" class="form-control" id="no_telp" name="no_telp"
                                    placeholder="Masukan Nomor Telepon">
                            </div>
                            <div class="form-group">
                                <label for="status">Memiliki Wirausaha?</label>
                                <div>
                                    <input type="radio" id="status" name="status" placeholder="Masukan Nomor Telepon"
                                        value="0">
                                    <label for="status">Tidak</label>
                                    <input type="radio" id="status1" name="status" placeholder="Masukan Nomor Telepon"
                                        value="1">
                                    <label for="status1">Ya</label>
                                </div>

                            </div>
                            <div class="form-group hide" id="jenis-usaha">
                                <label for="nama_usaha">Jenis Usaha</label>
                                <select class="form-control" name="jenis_usaha" id="jenis_usaha">
                                    <option selected disabled>-pilih jenis usaha-</option>
                                    <option value="Kelautan dan perikanan">Kelautan dan perikanan</option>
                                    <option value="Pertanian">Pertanian</option>
                                    <option value="Lingkungan hidup dan kehutanan">Lingkungan hidup dan kehutanan</option>
                                    <option value="Energi dan sumber daya mineral">Energi dan sumber daya mineral</option>
                                    <option value="Ketenaganukliran">Ketenaganukliran</option>
                                    <option value="Perindustrian">Perindustrian</option>
                                    <option value="Perdagangan">Perdagangan</option>
                                    <option value="Pekerjaan umum dan perumahan rakyat">Pekerjaan umum dan perumahan rakyat
                                    </option>
                                    <option value="Transportasi">Transportasi</option>
                                    <option value="Kesehatan, obat dan makanan">Kesehatan, obat dan makanan</option>
                                    <option value="Pendidikan dan kebudayaan">Pendidikan dan kebudayaan</option>
                                    <option value="Pariwisata">Pariwisata</option>
                                    <option value="Keagamaan">Keagamaan</option>
                                    <option value="Pos, telekomunikasi, penyiaran, serta sistem dan transaksi elektronik">
                                        Pos, telekomunikasi, penyiaran, serta sistem dan transaksi elektronik</option>
                                    <option value="Pertahanan dan keamanan">Pertahanan dan keamanan</option>
                                    <option value="Ketenagakerjaan">Ketenagakerjaan</option>
                                    <option value="Keuangan">Keuangan</option>
                                </select>
                            </div>
                            <div class="form-group hide" id="nama-usaha">
                                <label for="nama_usaha">Nama Usaha</label>
                                <input type="text" class="form-control" id="nama_usaha" name="nama_usaha"
                                    placeholder="Masukan Nama Usaha">
                            </div>
                            <div class="form-group hide" id="photo-usaha">
                                <label for="photo">Logo Usaha</label>
                                <input type="file" class="form-control" id="photo" name="photo">
                            </div>
                            <div class="form-group hide" id="deskripsi-usaha">
                                <label for="deskripsi">Deskripsi Wirausaha</label>
                                <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3"
                                    placeholder="Masukan Deskripsi Satuan Karya"></textarea>
                            </div>
                            <input type="hidden" name="user_id" value="{{ $anggota_byid->id }}">

                            <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">
                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>Tempat Dan tanggal Lahir</th>
                            <th>Memiliki 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>{{ $item->tempat_lahir }},{{ $item->tanggal_lahir }}</td>
                                <td>{{ $item->status == 1 ? 'Ya' : 'Tidak' }}</td>
                                <td>
                                    @if ($item->status == 1)
                                        <img src="{{ asset('logos') . '/' . $item->photo }}" alt="profile image"
                                            style="width: 150px" class="rounded">
                                    @else
                                        -
                                    @endif
                                </td>
                                <td><a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-namalengkap="{{ $item->namalengkap }}" data-no_ktp="{{ $item->no_ktp }}"
                                        data-kecamatan_id="{{ $anggota_byid->kecamatan_id }}"
                                        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 }}"
                                        data-jenis_usaha="{{ $item->jenis_usaha }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('anggotas.update', Crypt::encryptString($item->id)) }}')"
                                        class="open-AddBookDialog btn btn-primary edit 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('anggotas.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 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">
                        </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">
                        </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">
                        </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>

                                <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">
                        </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">
                        </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">
                        </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="jenis-usaha-edit">
                            <label for="nama_usaha-edit">Jenis Usaha</label>
                            <select class="form-control" name="jenis_usaha" id="jenis_usaha-edit">
                                <option selected disabled>-pilih jenis usaha-</option>
                                <option value="Kelautan dan perikanan">Kelautan dan perikanan</option>
                                <option value="Pertanian">Pertanian</option>
                                <option value="Lingkungan hidup dan kehutanan">Lingkungan hidup dan kehutanan</option>
                                <option value="Energi dan sumber daya mineral">Energi dan sumber daya mineral</option>
                                <option value="Ketenaganukliran">Ketenaganukliran</option>
                                <option value="Perindustrian">Perindustrian</option>
                                <option value="Perdagangan">Perdagangan</option>
                                <option value="Pekerjaan umum dan perumahan rakyat">Pekerjaan umum dan perumahan rakyat
                                </option>
                                <option value="Transportasi">Transportasi</option>
                                <option value="Kesehatan, obat dan makanan">Kesehatan, obat dan makanan</option>
                                <option value="Pendidikan dan kebudayaan">Pendidikan dan kebudayaan</option>
                                <option value="Pariwisata">Pariwisata</option>
                                <option value="Keagamaan">Keagamaan</option>
                                <option value="Pos, telekomunikasi, penyiaran, serta sistem dan transaksi elektronik">
                                    Pos, telekomunikasi, penyiaran, serta sistem dan transaksi elektronik</option>
                                <option value="Pertahanan dan keamanan">Pertahanan dan keamanan</option>
                                <option value="Ketenagakerjaan">Ketenagakerjaan</option>
                                <option value="Keuangan">Keuangan</option>
                            </select>
                        </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">
                        </div>
                        <div class="form-group hide" id="photo-usaha-edit">
                            <label for="photo">Logo Usaha</label>
                            <input type="file" class="form-control" id="photo-edit" name="photo">
                        </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"></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>
                            <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 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 kecamatan_id = $(this).data('kecamatan_id')
                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')
                let jenis_usaha = $(this).data('jenis_usaha')

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



                $('.form-group #namalengkap-edit').val(namalengkap)
                $('.form-group #kecamatan_id-edit').val(kecamatan_id)
                $('.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)
                $('.form-group #jenis_usaha-edit').val(jenis_usaha)

            });
        </script>
    @endpush

    <script>
        const status = document.getElementById('status');
        const status1 = document.getElementById('status1');



        const nama = document.getElementById('nama-usaha');
        const jenis = document.getElementById('jenis-usaha');
        const photo = document.getElementById('photo-usaha');
        const deskripsi = document.getElementById('deskripsi-usaha');

        const input_nama = document.getElementById('nama_usaha');
        const input_photo = document.getElementById('photo');
        const input_deskripsi = document.getElementById('deskripsi');
        const input_jenis = document.getElementById('jenis_usaha');

        status.addEventListener("click", function() {
            if (status.checked) {
                nama.style.display = "none"
                jenis.style.display = "none"
                photo.style.display = "none"
                deskripsi.style.display = "none"


                // input_nama.setAttribute("required", "false");
                // input_photo.setAttribute("required", "false");
                // input_deskripsi.setAttribute("required", "false");

            }
        });
        status1.addEventListener("click", function() {
            if (status1.checked) {
                nama.style.display = "block"
                jenis.style.display = "block"
                photo.style.display = "block"
                deskripsi.style.display = "block"


                // input_nama.setAttribute("required", "true");
                // input_photo.setAttribute("required", "true");
                // input_deskripsi.setAttribute("required", "true");



            }
        });
        const status_edit = document.getElementById('status-edit');
        const status1_edit = document.getElementById('status1-edit');

        const nama_edit = document.getElementById('nama-usaha-edit');
        const jenis_edit = document.getElementById('jenis-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_photo_edit = document.getElementById('photo-edit');
        const input_deskripsi_edit = document.getElementById('deskripsi-edit');

        status_edit.addEventListener("click", function() {
            if (status_edit.checked) {
                nama_edit.style.display = "none"
                jenis_edit.style.display = "none"
                deskripsi_edit.style.display = "none"
                photo_edit.style.display = "none"

                // input_nama_edit.setAttribute("required", "false");
                // input_deskripsi_edit.setAttribute("required", "false");


            }
        });
        status1_edit.addEventListener("click", function() {
            if (status1_edit.checked) {
                nama_edit.style.display = "block"
                jenis_edit.style.display = "block"
                photo_edit.style.display = "block"
                deskripsi_edit.style.display = "block"

                // input_nama_edit.setAttribute("required", "true");
                // input_deskripsi_edit.setAttribute("required", "true");

            }
        });
    </script>
@endsection