@extends('backoffice.template.app')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
</div>
<div class="d-flex justify-content-between align-items-center mb-4">
    <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
        aria-label="breadcrumb" class="fs-5">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('backoffice.dokumen-perizinan') }}">Dokumen Perizinan</a></li>
            <li class="breadcrumb-item"><a class="text-primary">Form</a></li>
        </ol>
    </nav>
    <div>
        <a href="{{route('backoffice.form.lihat', $form->id)}}" target="_blank" class="btn btn-primary">Hasil</a>
        <button type="submit" class="btn btn-primary" form="form-template">Simpan</button>
    </div>
</div>
<button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#modal-page-setup">Page Setup</button>
<form method="POST" id="form-template" action="{{ route('backoffice.form.update-template', $form->id) }}">
    @csrf
    @method('patch')
    <textarea id="myeditorinstance" name="template">{{ $form->template }}</textarea>
</form>
<div class="alert alert-primary mt-2">
    <b class="d-flex align-items-center mb-3"><i class="bx bxs-info-circle me-2"></i>Petunjuk Penggunaan</b>
    <p>Berikut <i>placeholder</i> Kop Surat Dan Tanda Tangan yang dapat Anda gunakan di template Anda:</p>
    @foreach ($generals as $g)
    <span class="mb-3 d-inline-block">
        <code class="border rounded border-secondary bg-label-secondary p-2 text-dark">[[{{ $g->nama }}]]</code>
    </span>
    @endforeach
    <p>Berikut beberapa parameter <i>placeholder</i> yang dapat Anda gunakan di template Anda:</p>
    @foreach ($koloms as $k)
    <span class="mb-3 d-inline-block">
        <code class="border rounded border-secondary bg-label-secondary p-2 text-dark">[[{{ $k->nama }}]]</code>
    </span>
    @endforeach
</div>

<!-- Modal Edit -->
<div class="modal fade" id="modal-page-setup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="form-edit">
                @csrf
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">PAGE SETUP</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="margin">Margin</label>
                    <div class="d-flex">
                        <input class="form-control w-25 me-2" type="number" value="0" id="margin_top">
                        <input class="form-control w-25 me-2" type="number" value="0" id="margin_right">
                        <input class="form-control w-25 me-2" type="number" value="0" id="margin_bottom">
                        <input class="form-control w-25" type="number" value="0" id="margin_left">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tidak</button>
                    <div onclick="loadTextEditor()" data-bs-dismiss="modal" class="btn btn-success">Save</div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    tinymce.init({
        selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
        plugins: 'settings code table lists',
        toolbar: 'settings | undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table',
        content_style: "p { margin-top: 0; margin-right: 0;  margin-bottom: 0;  margin-left: 0;}",
    });

    const loadTextEditor = () => {
        tinymce.remove(); 

        tinymce.init({
            selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
            plugins: 'settings code table lists',
            toolbar: 'settings | undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table',
            content_style: `p { margin-top: ${$('#margin_top').val()}cm; margin-right: ${$('#margin_right').val()}cm;  margin-bottom: ${$('#margin_bottom').val()}cm;  margin-left: ${$('#margin_left').val()}cm;}`,
        });
    }

</script>
@endsection