@extends('layouts.layout')
@section('title', 'Desa ' . $desa->nama_desa . ' - Buat ' . $surat->nama)
<link rel="stylesheet" href="{{ asset("css/style.css") }}">
@section('styles')
<meta name="description" content="Buat {{ $surat->nama }} di Website Desa {{ $desa->nama_desa }}, Kecamatan {{ $desa->nama_kecamatan }}, Kabupaten {{ $desa->nama_kabupaten }}">
@endsection
@section('content')
@include('sweetalert::alert')
<div class="row fixed-top m-3">
    <div class="col-lg-6"></div>
    <div class="col-lg-6">
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="fas fa-exclamation-triangle"></i></span>
                <span class="alert-text">
                    <strong>Gagal</strong>
                    Data tidak boleh kosong!
                </span>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
    </div>
</div>

<section>
    <div class="row my-5 mx-4">
        <div class="col-12 col-lg-5 order-2 order-lg-1 mt--2 text-center">
            <img src="{{ asset('img/email-sk.svg') }}" class="hero-img" style="
                width: 250px;
            ">
        </div>
        <div class="col-12 col-lg-7 order-1 order-lg-2" style="display: grid; align-content: center; align-items: center;">
            <h2><span class="badge text-light" style="
                background: linear-gradient(135deg, #32263E 0%, #231E22 100%);
                text-transform: capitalize; padding: 10px; border-radius: 12px;
                letter-spacing: 0.3px;
            ">Buat Surat</span></h2>
            <h1 class="text-white text-capitalize" style="font-weight: 700; font-size: 35px;">{{ $surat->nama }}</h1>
            <h3 class="text-white" style="font-weight: 400;">{{ $surat->deskripsi }}</h3>
        </div>
    </div>
</section>

<section>
    <div class="shadow border-0" style="
        border-radius: 40px;
        background: linear-gradient(135deg, #32263E 0%, #231E22 100%);
    ">
        <div class="card-body px-lg-5 py-lg-5">
            <form role="form" action="{{ route('cetak-surat-keputusan.store', ['id' => $surat->id, 'slug' => Str::slug($surat->nama)]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @foreach ($surat->isiSurat as $key => $isiSurat)
                    @if ($isiSurat->jenis_isi == 3)
                        <div class="form-group mb-3">
                            <label for="{{ $isiSurat->isi .''.$key }}" class="form-control-label text-light" style="font-size: 15px; font-weight: 600;">{{ $isiSurat->isi }}</label>
                                <textarea required id="{{ $isiSurat->isi .''.$key }}" class="form-control form-control-alternative editor-isian" name="isian[]" autofocus placeholder="Masukkan {{ $isiSurat->isi }}" style="color: #404040; font-weight: 500; border-radius: 13px;">
                                </textarea>
                        </div>
                    @endif
                    @if ($isiSurat->tampilkan == 1)
                        <p class="mt-5 mb-0 text-light" style="font-size: 15px; font-weight: 600;">{{ $isiSurat->isi }}</p>
                    @endif
                    @php
                        $string = $isiSurat->isi;
                        preg_match_all("/\{[A-Za-z\s\(\)]+\}/", $string, $matches);
                    @endphp
                    @foreach ($matches[0] as $k => $value)
                        @php
                            $pertama = substr($value,1);
                            $hasil = substr($pertama,0,-1);
                        @endphp
                        <div class="form-group mb-3">
                            <label for="{{ $hasil .''.$k }}" class="form-control-label text-light" >{{ $hasil }}</label>
                            <textarea required id="{{ $hasil .''.$k }}" class="form-control form-control-alternative" name="isian[]" autofocus placeholder="Masukkan {{ $hasil }}">
                        </div>
                    @endforeach
                @endforeach

                @if ($surat->tembusan == 1)
                    <div class="form-group mb-3">
                        <label for="tembusan" class="form-control-label text-light" style="font-size: 15px; font-weight: 600;">Tembusan</label>
                        <textarea required id="tembusan" class="form-control form-control-alternative editor-isian" name="isian[]" autofocus placeholder="Tambahkan tembusan" style="color: #404040; font-weight: 500; border-radius: 13px;">
                        </textarea>
                    </div>
                @endif

                <div class="modal fade" id="modal-cetak" tabindex="-1" role="dialog" aria-labelledby="modal-cetak" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content" style="background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
                            <div class="modal-body">
                                <div class="py-3 text-center">
                                    <h3 class="text-white text-capitalize">Apakah anda ingin mencetak {{ $surat->nama }}?</h3>
                                    <p class="text-sm text-white">Pastikan data yang Anda masukkan sudah benar</p>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-center mt--5">
                                <div class="row">
                                    <div class="col-md">
                                        <form action="{{ route('cetak-surat-keputusan.store', ['id' => $surat->id, 'slug' => Str::slug($surat->nama)]) }}" method="POST" >
                                            @csrf
                                            <button type="submit" class="btn" style="background: #F7A4A4; border-radius: 10px;"><i class="fas fa-check-circle"></i> Ya</button>
                                            <button type="button" class="btn btn-link" style="color: #F7A4A4;" data-dismiss="modal"><i class="fas fa-times-circle"></i> Tidak</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="text-center">
                <a data-toggle="modal" href="#modal-cetak" class="btn my-4 px-4" style="
                background-color: #F7A4A4; color: black; border-radius: 10px;
            ">Cetak Surat Keputusan</a>
            </div>
        </div>
    </div>
</section>


@endsection

@push('scripts')
<script>

    $(document).ready(function () {
        let editorIsians = document.querySelectorAll('.editor-isian')
        editorIsians.forEach(ele => {
            ClassicEditor
            .create( ele )
            .catch( error => {
                console.error( error );
            } );
        })

        $("form").submit(function () {
            $(this).children('.text-center').children('button').attr('disabled','disabled');
            $(this).children('.text-center').children('button').html(`<img height="20px" src="{{ url('/storage/loading.gif') }}" alt=""> Sedang diproses`);
        });
    });
</script>
@endpush