@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"
            {{-- onclick="$('#modalEdit2 #formEdit').attr('action', '{{ route('users.update', Crypt::encryptString($data->id)) }}')" --}}>
            <i class="bi bi-plus"></i>
            Tambahkan Surat Rekomendasi</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 Surat Rekomendasi</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 style="" method="POST" action="{{ route('rekomendasi.store') }}"
                            enctype="multipart/form-data">
                            @csrf
                            @include('message')

                            <div id="additionalFields">
                                <div class="mb-3">
                                    <label for="namalengkap1" class="form-label">Nama Lengkap</label>
                                    <input type="text" class="form-control" id="namalengkap1" name="namalengkap1"
                                        placeholder="Masukan nama Lengkap"required>
                                    <label for="nik1" class="form-label">NIK</label>
                                    <input type="number" class="form-control" id="nik1" name="nik1"
                                        placeholder="Masukan nama Lengkap"required>

                                </div>
                            </div>
                            <button type="button" id="tambahDiv" style="width: fit-content" class="btn btn-info"><i
                                    class="bi bi-plus-lg"></i>Tambah Nama
                                Pemohon</button>

                            <div class="mb-3">
                                <label for="organisasi" class="form-label">Organisasi</label>
                                <input type="text" class="form-control" id="organisasi" name="organisasi"
                                    placeholder="Masukan nama Organisasi"required>

                            </div>
                            <div class="mb-3">
                                <label for="no_telp" class="form-label">Nomor Telepon</label>
                                <input type="text" class="form-control" id="no_telp" name="no_telp"
                                    placeholder="Masukan Nomor Telepon"required>

                            </div>
                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <input type="text" class="form-control" id="alamat" name="alamat"
                                    placeholder="Masukan Alamat"required>

                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email"
                                    placeholder="Masukan email"required>

                            </div>
                            <div class="mb-3">
                                <label for="dasar">Dasar</label>
                                <textarea name="dasar" id="dasar"placeholder="masukan dasar surat"></textarea>
                                <script>
                                    ClassicEditor
                                        .create(document.querySelector('#dasar'))
                                        .catch(error => {
                                            console.error(error);
                                        });
                                </script>

                            </div>


                            <div class="form-group">
                                <label for="tujuan">Tujuan</label>
                                <textarea name="tujuan" id="tujuan" placeholder="Rapikan setelah Copy!"></textarea>
                                <script>
                                    ClassicEditor
                                        .create(document.querySelector('#tujuan'))
                                        .catch(error => {
                                            console.error(error);
                                        });
                                </script>

                            </div>
                            <div class="form-group">
                                <label for="surat_dasar">Surat Dasar</label>
                                <input type="file" class="form-control" id="surat_dasar" name="surat_dasar"required>

                            </div>

                            <button type="submit" class="btn btn-primary">Tambahkan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- modal ADD End --}}


        <div class="card">
            <div class="card-header fw-bold center ">
                Surat Rekomendasi DISPORAPAR
            </div>
            <div class="card-body"style="overflow-x:auto;">
                <table class="table" id="table1">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th>Nama Pengaju</th>
                            <th>Tanggal</th>
                            <th>Status</th>
                            <th>Action</th>

                        </tr>
                    </thead>
                    <tbody>


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

                                <td>{{ $item->email }}</td>
                                <td>{{ $item->namalengkap1 }}</td>
                                <td>{{ $item->tanggal }}</td>
                                <td>{{ $item->status == 1 ? 'terkirim' : 'Belum Terkirim' }}</td>

                                <td>
                                    <a class="btn btn-info"
                                        href="{{ route('rekomendasiadmin.show', Crypt::encryptString($item->id)) }}"><i
                                            class="bi bi-eye-fill"></i></a>
                                    <a href="" class="btn btn-danger"data-bs-toggle="modal"
                                        data-bs-target="#modalDelete"
                                        onclick="$('#modalDelete #formDelete').attr('action', '{{ route('rekomendasiadmin.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 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 Permohonan Rekomendasi</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).ready(function() {
                var maxDivs = 4; // Jumlah maksimal div yang diizinkan.

                $("#tambahDiv").click(function() {
                    var num = $("#additionalFields .mb-3").length + 1; // Hitung jumlah div yang sudah ada.

                    if (num <= maxDivs) {
                        // Jika jumlah div belum mencapai batas maksimal, buat dan tambahkan div baru.
                        var newDiv = $("<div class='mb-3'>" +
                            "<label for='namalengkap" + num + "' class='form-label'>Nama Lengkap " + num +
                            "</label>" +
                            "<input type='text' class='form-control' id='namalengkap" + num +
                            "' name='namalengkap" + num + "'" +
                            "placeholder='Masukkan Nama Lengkap " + num + "' required>" +
                            "<label for='nik" + num + "' class='form-label'>NIK " + num + "</label>" +
                            "<input type='number' class='form-control' id='nik" + num + "' name='nik" +
                            num + "'" +
                            "placeholder='Masukkan NIK " + num + "' required>" +
                            "</div>");

                        // Tambahkan div baru ke dalam div dengan ID "additionalFields".
                        $("#additionalFields").append(newDiv);
                    } else {
                        // Jika jumlah div sudah mencapai batas maksimal, tampilkan pesan kesalahan.
                        alert("Anda telah mencapai jumlah maksimal pemohon !.");
                    }
                });
            });
        </script>
    @endpush
@endsection