{{-- =========================================================
     MODAL EDIT PANDUAN
========================================================== --}}

<div
    class="panduan-modal"
    id="editPanduanModal"
    aria-hidden="true"
>

    <div class="panduan-modal-overlay"></div>


    <div
        class="panduan-modal-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="editPanduanModalTitle"
    >

        {{-- =================================================
             HEADER
        ================================================== --}}

        <div class="panduan-modal-header">

            <div class="panduan-modal-header-left">

                <button
                    type="button"
                    class="modal-back-button"
                    id="closeEditPanduanModalBack"
                    title="Kembali"
                >

                    <i class="fa-solid fa-arrow-left"></i>

                </button>


                <div class="modal-title-icon">

                    <i class="fa-solid fa-pen"></i>

                </div>


                <div>

                    <h2 id="editPanduanModalTitle">
                        Edit Panduan
                    </h2>

                    <p>
                        Perbarui informasi panduan sistem.
                    </p>

                </div>

            </div>


            <button
                type="button"
                class="modal-close-button"
                id="closeEditPanduanModal"
                title="Tutup"
            >

                <i class="fa-solid fa-xmark"></i>

            </button>

        </div>


        {{-- =================================================
             FORM
        ================================================== --}}

        <form
            method="POST"
            enctype="multipart/form-data"
            id="formEditPanduan"
        >

            @csrf

            @method('PUT')


            <div class="panduan-modal-body">


                {{-- =================================================
                     JUDUL
                ================================================== --}}

                <div class="modal-form-group">

                    <label for="edit_judul">

                        Judul Panduan

                        <span>*</span>

                    </label>


                    <input
                        type="text"
                        id="edit_judul"
                        name="judul"
                        placeholder="Masukkan judul panduan"
                        required
                    >

                </div>


                {{-- =================================================
                     DESKRIPSI
                ================================================== --}}

                <div class="modal-form-group">

                    <label for="edit_deskripsi">

                        Deskripsi

                        <span>*</span>

                    </label>


                    <textarea
                        id="edit_deskripsi"
                        name="deskripsi"
                        rows="5"
                        placeholder="Penjelasan panduan..."
                        required
                    ></textarea>

                </div>


                {{-- =================================================
                     STATUS
                ================================================== --}}

                <div class="modal-form-group">

                    <label for="edit_status">

                        Status

                        <span>*</span>

                    </label>


                    <select
                        id="edit_status"
                        name="status"
                        required
                    >

                        <option value="aktif">
                            Aktif
                        </option>

                        <option value="nonaktif">
                            Nonaktif
                        </option>

                    </select>

                </div>


                {{-- =================================================
                     VIDEO LAMA
                ================================================== --}}

                <div
                    class="modal-form-group"
                    id="editVideoCurrentContainer"
                >

                    <label>

                        Video Saat Ini

                    </label>


                    <div class="selected-file show">

                        <i class="fa-solid fa-film"></i>

                        <span id="editCurrentVideoName">
                            Belum ada video
                        </span>

                    </div>

                </div>


                {{-- =================================================
                     VIDEO BARU
                ================================================== --}}

                <div class="modal-form-group">

                    <label for="edit_video">

                        Ganti Video

                        <span class="optional">
                            Opsional
                        </span>

                    </label>


                    <label
                        for="edit_video"
                        class="file-upload-box"
                    >

                        <div class="file-upload-icon video">

                            <i class="fa-solid fa-film"></i>

                        </div>


                        <div class="file-upload-content">

                            <strong>
                                Pilih Video Baru
                            </strong>

                            <span>
                                MP4 • Maks. 100 MB
                            </span>

                        </div>


                        <input
                            type="file"
                            id="edit_video"
                            name="video"
                            accept="video/mp4"
                        >

                    </label>


                    <div
                        class="selected-file"
                        id="editSelectedVideo"
                    >

                        <i class="fa-solid fa-film"></i>

                        <span></span>

                        <button
                            type="button"
                            class="remove-file"
                            id="removeEditVideo"
                        >

                            <i class="fa-solid fa-xmark"></i>

                        </button>

                    </div>

                </div>


                {{-- =================================================
                     DOKUMEN LAMA
                ================================================== --}}

                <div
                    class="modal-form-group"
                    id="editDocumentCurrentContainer"
                >

                    <label>

                        Dokumen Saat Ini

                    </label>


                    <div class="selected-file show">

                        <i class="fa-solid fa-file"></i>

                        <span id="editCurrentDocumentName">
                            Belum ada dokumen
                        </span>

                    </div>

                </div>


                {{-- =================================================
                     DOKUMEN BARU
                ================================================== --}}

                <div class="modal-form-group">

                    <label for="edit_dokumen">

                        Ganti PDF / Dokumen

                        <span class="optional">
                            Opsional
                        </span>

                    </label>


                    <label
                        for="edit_dokumen"
                        class="file-upload-box"
                    >

                        <div class="file-upload-icon document">

                            <i class="fa-solid fa-file-pdf"></i>

                        </div>


                        <div class="file-upload-content">

                            <strong>
                                Pilih Dokumen Baru
                            </strong>

                            <span>
                                PDF, DOC, DOCX
                            </span>

                        </div>


                        <input
                            type="file"
                            id="edit_dokumen"
                            name="dokumen"
                            accept=".pdf,.doc,.docx"
                        >

                    </label>


                    <div
                        class="selected-file"
                        id="editSelectedDocument"
                    >

                        <i class="fa-solid fa-file"></i>

                        <span></span>

                        <button
                            type="button"
                            class="remove-file"
                            id="removeEditDocument"
                        >

                            <i class="fa-solid fa-xmark"></i>

                        </button>

                    </div>

                </div>


            </div>


            {{-- =================================================
                 FOOTER
            ================================================== --}}

            <div class="panduan-modal-footer">

                <button
                    type="button"
                    class="modal-btn-cancel"
                    id="cancelEditPanduanModal"
                >

                    <i class="fa-solid fa-xmark"></i>

                    Batal

                </button>


                <button
                    type="submit"
                    class="modal-btn-submit"
                >

                    <i class="fa-solid fa-floppy-disk"></i>

                    Simpan Perubahan

                </button>

            </div>

        </form>

    </div>

</div>