@extends('layouts.layout')
@section('title', 'Edit Detail Cetak Surat')
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
@section('content')
    @include('layouts.components.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;">
                <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;
            ">Edit
                        Surat</span></h2>
                <h1 class="text-white text-capitalize" style="font-weight: 700; font-size: 35px;">
                    {{ $cetakSurat->surat->nama }}</h1>
                <h3 class="text-white" style="font-weight: 400;">{{ $cetakSurat->surat->deskripsi }}</h3>
            </div>
        </div>
    </section>

    <section>
        <div class="shadow border-0"
            style="
        border-radius: 30px;
        background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
            <div class="card-body px-lg-5 py-lg-5">
                <a href="{{ route('surat.show', $cetakSurat->surat->id) }}" class="btn btn-md mb-3"
                    style="border-radius: 10px;background: #F7A4A4;color:white;box-shadow: 0px 8px 24px -4px rgba(24, 39, 75, 0.08), 0px 6px 12px -6px rgba(24, 39, 75, 0.12);"><i
                        class="fa fa-arrow-left" aria-hidden="true"></i> Kembalii</a>
                <form role="form" action="{{ route('cetakSurat.update', $cetakSurat) }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('patch')
                    <div class="form-group mb-3">
                        <label for="nomor" class="form-control-label text-light" style="font-size: 15px">Nomor
                            Surat</label>
                        <input id="nomor" class="form-control form-control-alternative" name="nomor" autofocus
                            placeholder=".../.../.../.../" value="{{ $cetakSurat->nomor }}"
                            style="color: #404040; font-weight: 500; border-radius: 13px;">
                    </div>

                    @foreach ($cetakSurat->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">{{ $isiSurat->isi }}</label>
                                        <input required id="{{ $isiSurat->isi . '' . $key }}"
                                        class="form-control form-control-alternative" name="isian[]" autofocus
                                        placeholder="Masukkan {{ $isiSurat->isi }}"
                                        style="color: #404040; font-weight: 500; border-radius: 13px;">
                            </div>
                        @endif

                        @if ($isiSurat->jenis_isi == 6   )
                        <div class="form-group mb-3 d-none">
                            <label for="{{ $isiSurat->isi . '' . $key }}" class="form-control-label text-light"
                                style="font-size: 15px">{{ $isiSurat->isi }}</label>
                                <input type="hidden" name="jenis_isi[{{ $isiSurat->isi }}]" value="Dokumen">
                                <input  id="{{ $isiSurat->isi . '' . $key }}"
                                class="form-control form-control-alternative" name="isian[]"
                                style="color: #404040; font-weight: 500; border-radius: 13px;">
                        </div>
                        @endif

                        @if ($isiSurat->tampilkan == 1)
                            <p class="mt-1 mb-0 text-light">{{ $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"
                                    style="font-size: 15px">{{ $hasil }}</label>
                                <input required id="{{ $hasil . '' . $k }}" class="form-control form-control-alternative"
                                    name="isian[]" autofocus placeholder="Masukkan {{ $hasil }}"
                                    style="color: #404040; font-weight: 500; border-radius: 13px;">
                            </div>
                        @endforeach
                    @endforeach
                    @if ($isiSurat->jenis_isi == 6 && $isiSurat->count() > 0)
                        <p class="text-light">Dokumen Pendukung</p>
                        @foreach ($cetakSurat->detailCetak as $detailCetak)
                            @if (filter_var($detailCetak->isian, FILTER_VALIDATE_URL))
                                <div class="my-2" style="display: flex; flex-direction: column;">
                                    <img src="{{ $detailCetak->isian }}" alt="" style="object-fit: cover; width: 20rem; height: 10rem;">
                                </div>
                            @endif
                        @endforeach
                    @else
                        <p>-</p>
                    @endif
                    @if ($cetakSurat->surat->tanda_tangan_bersangkutan == 1)
                        <div class="form-group mb-3">
                            <label for="tanda_tangan_bersangkutan" class="form-control-label text-light"
                                style="font-size: 15px">Nama yang bersangkutan</label>
                            <input required id="tanda_tangan_bersangkutan" class="form-control form-control-alternative"
                                name="isian[]" autofocus placeholder="Masukkan nama yang bersangkutan"
                                style="color: #404040; font-weight: 500; border-radius: 13px;">
                        </div>
                    @endif
                    <div class="modal fade" id="modal-update" tabindex="-1" role="dialog" aria-labelledby="modal-update"
                        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">Apakah Anda ingin Update Surat?</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('cetakSurat.update', $cetakSurat) }}" method="POST">
                                                @csrf @method('patch')
                                                <button type="submit" class="btn"
                                                    style="background: #F7A4A4; border-radius: 10px;"><i
                                                        class="fas fa-check"></i> Yakin</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-update" class="btn my-4 px-4"
                        style="
                    color: #404040; background-color: #F7A4A4;
                ">Simpan</a>
                </div>

            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let detailCetak = {!! json_encode($cetakSurat->detailCetak) !!};
            $.each($('[name="isian[]"]'), function(i, e) {
                $(this).val(detailCetak[i].isian)
            });
        });
    </script>
@endpush