@extends('template')

@section('content')
    <div class="container center h-screen inter pt-5">
        <div class="box w-80 p-5 w-100 m-5">
            <div class="d-flex align-items-center flex-column flex-lg-row align-items-center justify-content-center p-5">
                <img src="{{ asset('assets/images/content/folder.png') }}" style="width: 250px;heigt:250px;" alt="">
                <h1 class="text-green-dark">Rekomendasi <br> Organisasi Kepemudaan</h1>
            </div>

            <div class="">
                <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 button-outline"><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="dasar">Contoh Dasar I</label>

                        <textarea class="form-control" id="textarea1" cols="40" rows="10"readonly>
 1.Surat dari Asisten Deputi Potensi Kemandirian Pemuda, Deputi Bidang 
Pemberdayaan Pemuda, Kementrian Pemuda dan Olahraga nomor: 
DP.05.01/6.19.56/D-I.4/VI/2023 tanggal 19 Juni 2023 

2.Surat dari Dinas Pemuda dan Olahraga Provinsi Kalimantan Timur,
nomor: 400.5/1318/DISPORA.I-3 tanggal 3 Juli 2023.
                        </textarea>
                        <button type="button" style="width:fit-content" class="btn button-outline my-3 salinButton"
                            data-target="textarea1" id="salinButton"><i class="bi bi-clipboard-check"></i>Salin</button>


                    </div>
                    <div class="form-group">
                        <label for="dasar">Contoh Dasar II</label>

                        <textarea class="form-control" id="textarea2" cols="40" rows="10"readonly>
1.Flyer Apresiasi Wirausaha Muda Pemula dan Penggerak Wirausaha 
Muda Pemula Berprestasi Tingkat Nasional Tahun 2023 
Kementerian Pemuda dan Olahraga.

2.Peraturan Deputi Bidang Pengembangan Pemuda Nomor 2 Tahun 
2023 tentang Petunjuk Teknis Apresiasi Wirausaha Muda Pemula 
Berprestasi dan Penggerak Wirausaha Muda Pemula Berprestasi 
Tingkat Nasional.
                        </textarea>
                        <button type="button" style="width:fit-content" class="btn button-outline my-3 salinButton"
                            data-target="textarea2" id="salinButton"><i class="bi bi-clipboard-check"></i>Salin</button>


                    </div>
                    <div class="form-group">
                        <label for="dasar">Contoh Dasar III</label>

                        <textarea class="form-control" id="textarea3" cols="40" rows="10"readonly>

1.Surat dari Pengurus Cabang Pergerakan Mahasiswa Islam Indonesia
 Kota Samarinda Nomor : 325.PC-XXXIII.X-04.02-230.A-1.08.2023
                        </textarea>
                        <button type="button" style="width:fit-content" class="btn button-outline my-3 salinButton"
                            data-target="textarea3" id="salinButton"><i class="bi bi-clipboard-check"></i>Salin</button>


                    </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-success">Kirim</button>
                </form>


            </div>

        </div>
    </div>
    @push('script-modal')
        <script>
            $(document).on('click', '#salinButton', function() {

                var targetTextareaId = $(this).data("target");
                var teksToSalin = $("#" + targetTextareaId).val();
                teksToSalin = teksToSalin.replace(/<br>/g, '\n');
                copyToClipboard(teksToSalin);
            });


            function copyToClipboard(teks) {
                var tempInput = $("<input>");
                $("body").append(tempInput);
                tempInput.val(teks).select();
                document.execCommand("copy");
                tempInput.remove();
                alert("Teks telah disalin: " + teks);
            }
        </script>
        <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