@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-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;">
            <h1 class="text-white" style="font-weight: 700; font-size: 35px;">Buat template Surat Keputusan untuk Desa {{ $desa->nama_desa }}</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-keputusan') }}"><i class="fa fa-arrow-left"></i> Kembali</a>
    {{-- <a type="button" class="btn btn-outline-light rounded-20 mb-3" style="text-decoration: none" href="{{ asset('surat-keputusan') }}"><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-keputusan.store") }}" method="post" data-redirect="{{ route('surat-keputusan.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-k'
                                {{ (old('jenis_surat',$surat->jenis_surat) == 's-k'?'selected':'') }}>Surat Keputusan (SK)
                            </option>
                                {{-- <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>
                <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">
                    <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 + i)" data-toggle="tooltip" id="isi" class="btn pink mt-2"><i class="fas fa-plus"></i> Isian</button>
                    <a href="{{ url("img/sk_desa.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="tembusan_surat"
                            name="tembusan_surat" value="1">
                        <input type="hidden" name="tembusan" id="tembusan"
                            value="0">
                        <label class="custom-control-label text-light" for="tembusan_surat">Tembusan</label> <a
                            href="{{ url('img/bantuan_tembusan.png') }}" data-fancybox
                            data-caption="Akan menampilkan tembusan"><i
                                class="fas fa-question-circle text-pink text-xs" title="Bantuan"
                                data-toggle="tooltip"></i></a>
                    </div>

                    <div class="" style="display: none">

                        <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/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 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>
                <div class="form-group mt-5 text-center">
                    <input type="hidden" name="village_code" value="{{ $desa->id }}">
                    <button type="submit" class="btn" id="simpan" style="background-color: #F7A4A4; color: #404040; border-radius: 13px;width: 100%">Simpan Template Surat Keputusan (SK)</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