@extends('layouts.layout')
@section('title', 'Tambah Surat')
<link rel="stylesheet" href="{{ asset('css/jquery.fancybox.css') }}">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="{{ asset('css/button-alat.css') }}">
@section('content')
    @include('sweetalert::alert')
    <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.icon.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;">
                <h1 class="text-white" style="font-weight: 700; font-size: 35px;">Buat template surat keterangan Desa
                    <span class="text-capitalize">{{ $village->nama_desa }}</span></h1>
            </div>
        </div>
    </section>

    <section>
        <h3 class="text-center text-white pt-1">Harap isi terlebih dahulu formulir surat dibawah ini</h3>
        <a type="button" class="btn pink mb-3" href="{{ asset('surat') }}"><i class="fa fa-arrow-left"></i> Kembali</a>
        <div class="shadow border-0"
            style="
        border-radius: 15px;
        background: linear-gradient(135deg, #32263E 0%, #231E22 100%);
    ">
            <div class="card-body px-lg-5 py-lg-5">
                <h2 class="text-light" style="font-weight: 700;">Detail Surat</h2>
                <form autocomplete="off" action="{{ route('surat.store') }}" method="post"
                    data-redirect="{{ route('surat.index') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" class="form-control form-control-alternative" name="isian[]" value="isian">
                    <input type="hidden" id="urutan" value="1">
                    <input type="hidden" name="jenis_isi[]" value="0">
                    <input type="hidden" name="tampilkan[]" value="0">
                    <div class="pl-lg-4">
                        <div class="form-group mb-3">
                            <label class="form-control-label text-light" style="font-size: 15px; font-weight: 600;">Nama
                                Surat</label>
                            <input required class="form-control form-control-alternative" name="nama" autofocus
                                placeholder="Masukkan Nama Surat..."
                                style="color: #404040; font-weight: 500; border-radius: 13px;" value="{{ $surat->nama }}">
                            <div id="namaHelp" class="form-text text-xs text-light" style="font-weight: 500;">Isi dengan
                                nama surat yang ingin dibuatkan templatenya</div>
                        </div>
                        <div class="form-group mb-3" style="display:none">
                            <label class="form-control-label text-light" style="font-size: 15px; font-weight: 600;">Jenis
                                Surat</label>
                            <select name='jenis_surat' id='jenis_surat' class='form-control' required type="">

                                <option value='s-d'
                                    {{ old('jenis_surat', $surat->jenis_surat) == 's-d' ? 'selected' : '' }}>Surat Desa
                                </option>
                            </select>

                            @if ($errors->has('jenis_surat'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('jenis_surat') }}</strong>
                                </span>
                            @endif
                        </div>
                        @include('layouts.components.icon')
                        <div class="form-group mb-3">
                            <label class="form-control-label text-light"
                                style="font-size: 15px; font-weight: 600;">Deskripsi</label>
                            <textarea class="form-control form-control-alternative" name="deskripsi" placeholder="Masukkan Deskrpsi..."
                                style="color: #404040; font-weight: 500; border-radius: 13px;" rows="4" value="{{ $surat->deskripsi }}"></textarea>
                            <div id="deskripsiHelp" class="form-text text-xs text-light" style="font-weight: 500;">Isi
                                dengan deskripsi template surat yang akan dibuat</div>
                        </div>
                        {{-- <div class="form-group mb-3">
                            <label class="form-control-label text-light"
                                style="font-size: 15px; font-weight: 600;">Persyaratan</label>
                            <textarea class="form-control form-control-alternative" name="persyaratan" placeholder="Masukkan persyaratan..."
                                style="color: #404040; font-weight: 500; border-radius: 13px;" rows="4" value="{{ $surat->persyaratan }}"></textarea>
                            <div id="persyaratanHelp" class="form-text text-xs text-light" style="font-weight: 500;">Isi
                                dengan persyaratan yang sesuai dengan template surat yang akan dibuat</div>
                        </div> --}}
                    </div>
                    <h2 class="text-light text-capitalize" style="font-weight: 700;">Template Bagian-bagian Surat</h2>
                    <div class="pl-lg-4" id="isian"></div>
                    <h2 class="text-light" style="font-weight: 700;">Alat</h2>
                    <div class="pl-lg-4">
                        {{-- @include('surat.button-alat') --}}
                        <button type="button" title="shorcut-key (ctrl + alt + p)" data-toggle="tooltip" id="paragraf"
                            class="btn pink mt-2"><i class="fas fa-plus"></i> Paragraf</button>
                        <button type="button" title="shorcut-key (ctrl + alt + k)" data-toggle="tooltip" id="kalimat"
                            class="btn pink mt-2"><i class="fas fa-plus"></i> Kalimat</button>
                        <button type="button" title="shorcut-key (ctrl + alt + i)" data-toggle="tooltip" id="isi"
                            class="btn pink mt-2"><i class="fas fa-plus"></i> Isian</button>
                        <button type="button" title="shorcut-key (ctrl + alt + j)" data-toggle="tooltip" id="sub-judul"
                            class="btn pink mt-2"><i class="fas fa-plus"></i> Sub Judul</button>
                        <button type="button" title="shorcut-key (ctrl + alt + a)" data-toggle="tooltip" id="persyaratan"
                            class="btn pink mt-2"><i class="fas fa-plus"></i> Persyaratan</button>
                        <a href="{{ url('img/bantuan-paragraf-kalimat-isian.png') }}" data-fancybox><i
                                class="fas fa-question-circle text-pink" title="Bantuan" data-toggle="tooltip"></i></a>


                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="t_surat"
                                name="t_surat" value="1">
                            <input type="hidden" name="tampilkan_surat" id="tampilkan_surat" value="0">
                            <label class="custom-control-label text-light" for="t_surat">Tampilkan Surat Pada Warga</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tampilkan_perihal"
                                name="tampilkan_perihal" value="1">
                            <input type="hidden" name="perihal" id="perihal" value="0">
                            <label class="custom-control-label text-light" for="tampilkan_perihal">Perihal</label> <a
                                href="{{ url('img/bantuan-perihal.png') }}" data-fancybox
                                data-caption="Akan menampilkan surat seperti ini"><i
                                    class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                    data-toggle="tooltip"></i></a>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tampilkan_data_kades"
                                name="tampilkan_data_kades" value="1">
                            <input type="hidden" name="data_kades" id="data_kades" value="0">
                            <label class="custom-control-label text-light" for="tampilkan_data_kades">Data Kades</label>
                            <a href="{{ url('img/bantuan-data-kades.png') }}" data-fancybox
                                data-caption="Akan menampilkan data kepala desa"><i
                                    class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                    data-toggle="tooltip"></i></a>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tanda_tangan_kades"
                                name="tanda_tangan_kades" value="1">
                            <input type="hidden" name="ttd_kades" id="ttd_kades" value="0">
                            <label class="custom-control-label text-light" for="tanda_tangan_kades">Tanda
                                Tangan Kepala Desa</label> <a
                                href="{{ url('img/ttd_kades.png') }}" data-fancybox
                                data-caption="Akan menampilkan tanda tangan yang bersangkutan"><i
                                    class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                    data-toggle="tooltip"></i></a>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tanda_tangan_sekdes"
                                name="tanda_tangan_sekdes" value="1">
                            <input type="hidden" name="ttd_sekdes" id="ttd_sekdes" value="0">
                            <label class="custom-control-label text-light" for="tanda_tangan_sekdes">Tanda
                                Tangan Sekretaris Desa</label> <a
                                href="{{ url('img/ttd_sekdes.png') }}" data-fancybox
                                data-caption="Akan menampilkan tanda tangan yang bersangkutan"><i
                                    class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                    data-toggle="tooltip"></i></a>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tampilkan_tanda_tangan_bersangkutan"
                                name="tampilkan_tanda_tangan_bersangkutan" value="1">
                            <input type="hidden" name="tanda_tangan_bersangkutan" id="tanda_tangan_bersangkutan"
                                value="0">
                            <label class="custom-control-label text-light" for="tampilkan_tanda_tangan_bersangkutan">Tanda
                                tangan bersangkutan</label> <a
                                href="{{ url('img/bantuan-tanda-tangan-bersangkutan.png') }}" data-fancybox
                                data-caption="Akan menampilkan tanda tangan yang bersangkutan"><i
                                    class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                    data-toggle="tooltip"></i></a>
                        </div>
                    </div>
                    <div class="form-group mt-5 text-center">
                        <input type="hidden" name="village_code" value="{{ $village->id }}">
                        <button type="submit" class="btn" id="simpan"
                            style="background-color: #F7A4A4; color: #404040; border-radius: 13px;width: 100%">Simpan
                            Template Surat Keterangan</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('js/jquery.fancybox.js') }}"></script>
    <script src="{{ asset('js/surat.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".ikon").val("fa-file-text-o");
            $("input:checkbox").change(function() {
                if ($(this).prop('checked') == true) {
                    $(this).next().val('1');
                } else {
                    $(this).next().val('0');
                }
            });
        });
    </script>
@endpush