@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 Anggota Saka</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 Satuan Karya</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('agtsaka.store') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="namalengkap">Nama Lengkap</label>
                                <input type="text" class="form-control" id="namalengkap" name="namalengkap"
                                    placeholder="Masukan Kategori">
                            </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">
                                <input type="hidden" class="form-control" id="kecamatan_id" name="kecamatan_id"
                                    value="{{ $saka->kecamatan_id }}">
                            </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">
                                <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">
                                <input type="hidden" class="form-control" id="user_id" name="user_id"
                                    value="{{ $id }}" placeholder="Masukan Nomor Telepon">
                            </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"style="overflow-x:auto;">
            <div class="card-header">
                Table anggota
            </div>
            <div class="card-body">
                <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>Alamat</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->alamat }}</td>
                                <td><a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-namalengkap="{{ $item->namalengkap }}"
                                        data-no_ktp="{{ $item->no_ktp }}"data-jenis_kelamin="{{ $item->jenis_kelamin }}"
                                        data-no_telp="{{ $item->no_telp }}"
                                        data-tempat_lahir="{{ $item->tempat_lahir }}"
                                        data-tanggal_lahir="{{ $item->tanggal_lahir }}"
                                        data-alamat="{{ $item->alamat }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('agtsaka.update', $item->id) }}')"
                                        class="open-AddBookDialog btn btn-primary edit mb-3" 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('agtsaka.destroy', $item->id) }}')">Delete</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="basicInput">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">
                            <input type="hidden" class="form-control" id="kecamatan_id" name="kecamatan_id"
                                value="{{ $saka->kecamatan_id }}">
                        </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="alamat">Alamat</label>
                            <input type="text" class="form-control" id="alamat" name="alamat"
                                placeholder="Masukan Alamat">
                        </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">
                            <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">
                            <input type="hidden" class="form-control" id="user_id" name="user_id"
                                value="{{ $id }}" placeholder="Masukan Nomor Telepon">
                        </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">Hapus 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="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')

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

            });
        </script>
    @endpush
@endsection