@extends('layouts/page')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css">
    <style>
        .tagify {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 5px;
            font-size: 14px;
            font-weight: thin;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">

            <input type="hidden" name="typeid" id="typeid" value="{{ isset($typeId) ? $typeId : null }}">
            <input type="hidden" name="kanalUrl" id="kanalUrl" value="{{ isset($kanal) ? $kanal : null }}">
            <input type="hidden" name="ContentId" id="contentid-edit"
                value="{{ isset($content[0]->ContentId) ? $content[0]->ContentId : null }}">
            <input type="hidden" name="categoryid-edit" id="categoryid-edit">

            <div class="card">
                <div class="px-3 pt-3 border-bottom">
                    <h4 class="fw-bold"> Ubah {{ $title }}</h4>
                </div>
                <div class="row g-3 p-4">
                    <div class="col-md-6">
                        <label class="form-label" for="collapsible-fullname"><span class="text-danger fst-italic">*</span>
                            {{ $siteId == 283 && $typeId == 'K009' ? 'Nama Rumah Sakit' : ($siteId == 283 && $typeId == 'K005' ? 'Nama Puskesmas' : 'Judul') }}</label>
                        <input type="text" name="title" id="title" class="form-control"
                            placeholder="Masukkan {{ $siteId == 283 && $typeId == 'K009' ? 'Nama Rumah Sakit' : ($siteId == 283 && $typeId == 'K005' ? 'Nama Puskesmas' : 'Judul ' . $title) }}"
                            value="{{ !empty($content[0]['Title']) ? $content[0]['Title'] : '' }}" />
                    </div>

                    <div
                        class="{{ Session::get('TypeRole') == 'eksekutif' || ($siteId == 171 && $typeId == 'K014') ? ' col-md-6' : 'col-md-4' }} {{ $siteId == 171 && $typeId == 'K017' ? ' d-none' : '' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span>
                            {{ $siteId == 171 && $typeId == 'K012' ? 'Folder Dokumen' : 'Kategori' }}</label>
                        <select disabled id="categoryid" name="categoryid" class="select2 form-select animation-dropdown"
                            data-placeholder="{{ $siteId == 171 && $typeId == 'K012' ? 'Pilih Folder Dokumen' : 'Pilih Kategori' }}">
                        </select>
                    </div>

                    <div
                        class="col-md-1 mt-4 pt-3 {{ Session::get('TypeRole') == 'eksekutif' || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K014')) ? ' d-none' : '' }} ">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addCategoryModal">
                            <i class='bx bxs-user-plus'></i>
                        </button>
                    </div>

                    <div
                        class="col-md-1 mt-4 pt-3 {{ Session::get('TypeRole') == 'eksekutif' || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K014')) ? ' d-none' : '' }}">
                        <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                            data-bs-target="#editCategoryModal">
                            <i class='bx bxs-edit'></i>
                        </button>
                    </div>

                    <div class="col-md-6{{ $siteId == 274 || $siteId == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="selectAnimation">Kanal / Tipe</label>
                        <select id="typeid" name="typeid" class="form-select animation-dropdown">
                            <option selected value="{{ $typeId }}">{{ $kanal }}</option>
                        </select>
                    </div>

                    <div
                        class="{{ $siteId == 274 || $siteId == 171 ? 'col-md-6' : 'col-md-3' }} {{ $siteId == 171 && $typeId == 'K014' ? 'd-none' : '' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span>
                            Status</label>
                        <select id="status" name="status" class="select2 form-select animation-dropdown"
                            data-placeholder="Pilih Status">
                            <option value=""></option>
                            @if (!empty($status) && !empty($content[0]['Status']))
                                @foreach ($status as $stat)
                                    @if ($content[0]['Status'] == $stat->Code)
                                        <option value="{{ $content[0]['Status'] }}" selected>
                                            {{ $stat->Description }}
                                        </option>
                                    @else
                                        <option value="{{ $stat->Code }}">{{ $stat->Description }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div
                        class="{{ $siteId == 274 || $siteId == 171 ? 'col-md-6' : 'col-md-3' }} {{ $siteId == 171 && ($typeId == 'K017' || $typeId == 'K014') ? ' d-none' : '' }}">
                        <label for="tglpublish" class="form-label"><span class="text-danger fst-italic">*</span> Tanggal
                            Publish</label>
                        <input type="text" class="flatpickr-datetime form-control" placeholder="DD-MM-YYYY HH:MM"
                            name="tglpublish" id="tglpublish"
                            value="{{ !empty($content[0]['TglPublish']) ? $content[0]['TglPublish'] : '' }}" />
                    </div>

                    @if (Session::get('SiteId') == 171 && ($typeId == 'K012' || $typeId == 'K014'))
                        <div class="col-sm-12 col-md-6">
                            <label class="form-label" for="dokumen_name">{!! $typeId == 'K012' ? '<span class="text-danger fst-italic">*</span>' : '' !!} Upload Dokumen</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="dokumen_name" name="dokumen_name"
                                    placeholder="Upload Dokumen" aria-describedby="inputGroupFileAddon04"
                                    aria-label="Upload"
                                    value="{{ !empty($content[0]['UploadDokumen']) ? $content[0]['UploadDokumen'] : '' }}"
                                    readonly />

                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                    data-bs-target="#Uploaddokumen_edit"
                                    style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="Uploaddokumen_edit" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <p style="font-size: 25px" class="modal-title">Upload Dokumen</p>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body" id="modal_uploaddokumen_edit">
                                                <input type="file" class="dropify" name="uploaddokumen"
                                                    id="uploaddokumen_edit" data-height="300"
                                                    data-default-file="{{ Config::get('app.url_api') . '/api/Master/Image/png/' . $content[0]['UploadDokumen'] }}" />
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-label-secondary"
                                                    data-bs-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="button"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                    data-bs-dismiss="modal">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span id="validation-dropzone" class="text-muted fst-italic mt-0"
                                style="font-size: 14px"><span class="text-mute fst-italic">*</span> Format: PDF,
                                DOC, DOCX, XLS, XLSX. Maximum Size : 5MB.</span>
                        </div>
                    @else
                        <div class="col-12">
                            <label class="form-label" for="collapsible-address">
                                {{ $siteId == 283 && $typeId == 'K009' ? 'Alamat' : 'Konten / Isi' }}</label>
                            <div id="summernote-1">
                                {!! isset($content[0]['Content']) ? $content[0]['Content'] : '' !!}
                            </div>
                        </div>

                        <div
                            class="col-sm-12 col-md-6 {{ ($siteId == 171 && $typeId == 'K017') || (($siteId == 283 && $typeId == 'K009') || $typeId == 'K005') ? 'd-none' : '' }}">
                            <label class="form-label" for="dokumen_name">{!! $siteId == 171 && $typeId == 'K012' ? '<span class="text-danger fst-italic">*</span>' : '' !!} Upload Dokumen</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="dokumen_name" name="dokumen_name"
                                    placeholder="Upload Dokumen" aria-describedby="inputGroupFileAddon04"
                                    aria-label="Upload"
                                    value="{{ !empty($content[0]['UploadDokumen']) ? $content[0]['UploadDokumen'] : '' }}"
                                    readonly />

                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                    data-bs-target="#Uploaddokumen_edit"
                                    style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="Uploaddokumen_edit" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <p style="font-size: 25px" class="modal-title">Upload Dokumen</p>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body" id="modal_uploaddokumen_edit">
                                                <input type="file" class="dropify" name="uploaddokumen"
                                                    id="uploaddokumen_edit" data-height="300"
                                                    data-default-file="{{ Config::get('app.url_api') . '/api/Master/Image/png/' . $content[0]['UploadDokumen'] }}" />
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-label-secondary"
                                                    data-bs-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="button"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                    data-bs-dismiss="modal">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span id="validation-dropzone" class="text-muted fst-italic mt-0"
                                style="font-size: 14px"><span class="text-mute fst-italic">*</span> Format: PDF,
                                DOC, DOCX, XLS, XLSX. Maximum Size : 5MB.</span>
                        </div>
                    @endif


                    <div
                        class="col-sm-12 col-md-6 {{ ($siteId == 283 && ($typeId == 'K016' || $typeId == 'K012' || $typeId == 'K009' || $typeId == 'K005')) || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K012')) ? ' d-none' : '' }}">
                        <label class="form-label"
                            for="lampiran_name">{{ $siteId == 171 && $typeId == 'K014' ? 'Upload Video' : 'Upload Lampiran' }}</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="lampiran_name" name="lampiran_name"
                                placeholder="{{ $siteId == 171 && $typeId == 'K014' ? 'Upload Video' : 'Upload Lampiran' }}"
                                aria-describedby="inputGroupFileAddon05" aria-label="Upload"
                                value="{{ !empty($content[0]['Lampiran']) ? $content[0]['Lampiran'] : '' }}" readonly />

                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="lampiran_popup"
                                data-bs-target="#UploadLampiranEdit" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="UploadLampiranEdit" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <p style="font-size: 25px" class="modal-title">
                                                {{ $siteId == 171 && $typeId == 'K014' ? 'Upload Video' : 'Upload Lampiran' }}
                                            </p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modal_lampiran_edit">
                                            <input type="file" class="dropify" name="lampiran" id="lampiran"
                                                data-height="300"
                                                data-default-file="{{ Config::get('app.url_api') . '/api/Master/Image/png/' . $content[0]['Lampiran'] }}" />
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-label-secondary"
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="button"
                                                class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                data-bs-dismiss="modal">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span id="validation-dropzone" class="text-muted fst-italic mt-0" style="font-size: 14px"><span
                                class="text-mute fst-italic">*</span> Format: JPG,
                            JPEG, PNG, WEBP, MP4. Maximum Size : 2MB(foto), 10MB(video).</span>
                    </div>

                    <div class="col-md-6 {{ $siteId == 171 ? ' d-none' : '' }}">
                        <label class="form-label"
                            for="collapsible-fullname">{{ $siteId == 274 ? 'Referensi URL' : ($siteId == 283 && $typeId == 'K005' ? 'URL Konten / Poned' : 'URL Konten') }}</label>
                        <input type="url" name="urlcontent" id="urlcontent" class="form-control"
                            placeholder="{{ $siteId == 274 ? 'Referensi URL' : ($siteId == 283 && $typeId == 'K005' ? 'URL Konten / Poned' : 'URL Konten') }}"
                            value="{{ !empty($content[0]['UrlContent']) ? $content[0]['UrlContent'] : '' }}" />
                    </div>

                    <div
                        class="col-md-6 {{ ($siteId == 283 && ($typeId == 'K016' || $typeId == 'K012' || $typeId == 'K014')) || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K012' || $typeId == 'K014')) ? ' d-none' : '' }}">
                        <label class="form-label"
                            for="collapsible-fullname">{{ $siteId == 283 && $typeId == 'K009' ? 'Kerja sama dengan BPJS' : ($siteId == 283 && $typeId == 'K005' ? 'Hotline / Gawat Darurat 24 jam' : 'Sumber Informasi') }}</label>
                        <input type="text" name="sumberinformasi" id="sumberinformasi" class="form-control"
                            placeholder="{{ $siteId == 283 && $typeId == 'K009' ? 'Kerja sama dengan BPJS' : ($siteId == 283 && $typeId == 'K005' ? 'Hotline / Gawat Darurat 24 jam' : 'Sumber Informasi') }}"
                            value="{{ !empty($content[0]['SumberInformasi']) ? $content[0]['SumberInformasi'] : '' }}" />
                    </div>

                    <div
                        class="col-md-6{{ ($siteId == 283 && ($typeId == 'K016' || $typeId == 'K012' || $typeId == 'K014')) || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K008' || $typeId == 'K012' || $typeId == 'K014' || $typeId == 'K001' || $typeId == 'K011' || $typeId == 'K016')) ? ' d-none' : '' }}">
                        <label class="form-label"
                            for="tags-input">{{ $siteId == 283 && $typeId == 'K009' ? 'Kepemilikan' : 'Tags' }}</label>
                        <input type="text" name="tagsname" id="tagsname-edit" class="form-control"
                            placeholder="{{ $siteId == 283 && $typeId == 'K009' ? 'Kepemilikan' : 'Tags' }}">
                    </div>

                    <div class="col-md-6{{ $siteId == 171 ? ' d-none' : '' }}">
                        <label class="form-label"
                            for="selectAnimation">{{ $siteId == 274 ? 'Related Content' : 'Parent' }}</label>
                        <select name="parentid" id="parentid" class="select2 form-select animation-dropdown"
                            data-placeholder="{{ $siteId == 274 ? 'Related Content' : ' Pilih Parent' }}">
                            <option value=""></option>
                        </select>
                    </div>

                    <div
                        class="d-flex justify-content-end {{ ($siteId == 283 && ($typeId == 'K016' || $typeId == 'K012' || $typeId == 'K014')) || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K008' || $typeId == 'K012' || $typeId == 'K014' || $typeId == 'K001' || $typeId == 'K011' || $typeId == 'K016') || ($siteId == 312)) ? ' d-none' : '' }}">
                        <div class="m-1 icon-2">
                            <a class="nav-link  dropdown-toggle hide-arrow waves-effect waves-light"
                                href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                aria-expanded="false" title="Klasifikasi">
                                <i class='bx bx-label bx-sm p-1' style="border-radius: 50%; border: 2px dotted grey;"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end py-0">
                                <div class="dropdown-menu-header border-bottom">
                                    <div
                                        class="dropdown-header d-flex align-items-center {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">
                                        <button type="button" class="btn btn-primary btn-sm m-1" data-bs-toggle="modal"
                                            data-bs-target="#TambahKlasifikasi">
                                            <i class='bx bxs-user-plus'></i>
                                        </button>

                                        <button type="button" class="btn btn-danger btn-sm m-1" data-bs-toggle="modal"
                                            data-bs-target="#deleteKlasifikasiModal">
                                            <i class='bx bxs-trash'></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="dropdown-shortcuts-list scrollable-container p-3">
                                    <label for="klasifikasi" class="form-label">Klasifikasi</label>
                                    <div class="select2-dark">
                                        <select hidden id="klasifikasitags_edit" name="klasifikasiid"
                                            class="form-select animation-dropdown"></select>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-onboarding modal fade animate__animated" id="TambahKlasifikasi"
                                tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog  modal-dialog-centered modal-sm" role="document">
                                    <div class="modal-content text-center">
                                        <div class="modal-header border-0">

                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body  p-0">

                                            <div class="onboarding-content mb-0">
                                                <h4 class="onboarding-title text-body text-left">Tambah
                                                    Klasifikasi
                                                </h4>
                                                <hr>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="mb-3">
                                                            <label for="klasifikasi"
                                                                class="form-label">Klasifikasi</label>
                                                            <input class="form-control" placeholder="Klasifikasi"
                                                                type="text" value="" tabindex="0"
                                                                id="klasifikasi" name="klasifikasi" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0">
                                            <button type="button" class="btn btn-label-secondary"
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="button" id="createKlasifikasi"
                                                class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-onboarding modal fade animate__animated" id="editKlasifikasiModal"
                                tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog  modal-dialog-centered" role="document">
                                    <div class="modal-content text-center">
                                        <div class="modal-header border-0">

                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body  p-0">

                                            <div class="onboarding-content mb-0">
                                                <h4 class="onboarding-title text-body text-left">Edit Klasifikasi
                                                </h4>
                                                <hr>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label for="nameEx7" class="form-label">Nama
                                                                Klasifikasi</label>
                                                            <div id="lainnya-container" class="mb-3">
                                                                <input type="text" id="klasifikasi-edit"
                                                                    name="klasifikasi-edit" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0">
                                                <button type="button" class="btn btn-label-secondary"
                                                    data-bs-dismiss="modal">
                                                    Close
                                                </button>

                                                <button type="button" id="editKlasifikasi"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="m-1 icon-2">
                            <a class="nav-link  dropdown-toggle hide-arrow waves-effect waves-light"
                                href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                aria-expanded="false" title="Aktor">
                                <i class='bx bx-user bx-sm p-1' style="border-radius: 50%; border: 2px dotted grey;"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end py-0">
                                <div class="dropdown-shortcuts-list scrollable-container p-3">
                                    <label for="TagifyUserList" class="form-label">Aktor</label>
                                    <select hidden id="aktortags" name="contactid" class="form-select animation-dropdown"
                                        tabindex="-1"></select>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <div class="m-1 icon-2">
                                <a class="nav-link  dropdown-toggle hide-arrow waves-effect waves-light"
                                    href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                    aria-expanded="false" title="Tempat">
                                    <i class='bx bx-label bx-sm p-1'
                                        style="border-radius: 50%; border: 2px dotted grey;"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-end py-0">
                                    <div class="dropdown-menu-header border-bottom">
                                        <div
                                            class="dropdown-header d-flex align-items-center {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">
                                            <button type="button" class="btn btn-primary btn-sm m-1"
                                                data-bs-toggle="modal" data-bs-target="#TambahTempat">
                                                <i class='bx bxs-user-plus'></i>
                                            </button>

                                            <button type="button" class="btn btn-danger btn-sm m-1"
                                                data-bs-toggle="modal" data-bs-target="#deleteTempatModal">
                                                <i class='bx bxs-trash'></i>

                                        </div>
                                    </div>
                                    <div class="dropdown-shortcuts-list scrollable-container p-3">
                                        <label for="tempat" class="form-label">Tempat</label>
                                        <div class="select2-dark">
                                            <select hidden id="tempattags" name="tempatid"
                                                class="form-select animation-dropdown"></select>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-onboarding modal fade animate__animated" id="TambahTempat"
                                    tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog  modal-dialog-centered modal-sm" role="document">
                                        <div class="modal-content text-center">
                                            <div class="modal-header border-0">

                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body  p-0">

                                                <div class="onboarding-content mb-0">
                                                    <h4 class="onboarding-title text-body text-left">Tambah Tempat
                                                    </h4>
                                                    <hr>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Nama</label>
                                                                <input class="form-control" id="nama"
                                                                    name="nama"type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Kelurahan</label>
                                                                <input class="form-control" id="kelurahan"
                                                                    name="kelurahan" type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Rt</label>
                                                                <input class="form-control" id="rt" name="rt"
                                                                    type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Rw</label>
                                                                <input class="form-control" id="rw" name="rw"
                                                                    type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Kecamatan</label>
                                                                <input class="form-control" id="kecamatan"
                                                                    name="kecamatan" type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Kota</label>
                                                                <input class="form-control" id="kota" name="kota"
                                                                    type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Alamat</label>
                                                                <input class="form-control" id="alamat" name="alamat"
                                                                    type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">Nomer
                                                                    Telepon</label>
                                                                <input class="form-control" id="notelp" name="notelp"
                                                                    type="text">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="nameEx7" class="form-label">PIC</label>
                                                                <input class="form-control" id="pic" name="pic"
                                                                    type="text">
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0">
                                                <button type="button" class="btn btn-label-secondary"
                                                    data-bs-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="button" id="createTempat"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="m-1 icon-2">
                            <a class="nav-link  dropdown-toggle hide-arrow waves-effect waves-light"
                                href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                aria-expanded="false" title="Sentimen">
                                <i class='bx bx-purchase-tag-alt bx-sm p-1'
                                    style="border-radius: 50%; border: 2px dotted grey;"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end py-0">
                                <div class="dropdown-menu-header border-bottom">
                                    <div class="dropdown-header d-flex align-items-center py-3">
                                        <h5 class="text-body mb-0 me-auto">Sentimen</h5>
                                        <a href="javascript:void(0)" class="dropdown-shortcuts-add text-body"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Sentimen"
                                            data-bs-original-title="Sentimen"><i class='bx bx-purchase-tag-alt'></i></a>
                                    </div>
                                </div>
                                <div class="dropdown-shortcuts-list scrollable-container p-3">
                                    <label for="select2Dark" class="form-label">Sentimen</label>
                                    <div class="select2-dark">
                                        <select id="sentimen" name="sentimen"
                                            class="select2 form-select animation-dropdown"
                                            data-placeholder="Pilih Sentimen">
                                            <option value=""></option>
                                            @if (!empty($tone))
                                                @foreach ($tone as $cat)
                                                    @if ($content[0]['Sentimen'] == $cat->Code)
                                                        <option value="{{ $content[0]['Sentimen'] }}" selected>
                                                            {{ $cat->Description }}
                                                        </option>
                                                    @else
                                                        <option value="{{ $cat->Code }}">
                                                            {{ $cat->Description }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="d-flex mt-2">
                        <a href="{{ url('content/list') . '/' . $typeId . '/' . $kanal }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button type="button" id="editContent"
                            class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                    </div>

                    <div class="modal" id="deleteTempatModal" tabindex="-1" data-bs-backdrop="static">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Delete Tempat</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="overflow-x-auto">
                                        <div class="card-datatable table-responsive">
                                            <table id="tablelisttempat" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Judul</th>
                                                        <th>Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal" id="deleteKlasifikasiModal" tabindex="-1" data-bs-backdrop="static">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Delete Klasifikasi</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="overflow-x-auto">
                                        <div class="card-datatable table-responsive">
                                            <table id="tablelistklasifikasi" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Judul</th>
                                                        <th>Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-onboarding modal fade animate__animated" id="addCategoryModal" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header border-0">

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">

                                    <div class="onboarding-content mb-0">
                                        <h4 class="onboarding-title text-body text-center">New Category</h4>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-6">

                                                <div class="mb-3">
                                                    <label for="nameEx7" class="form-label">Nama
                                                        Kategori</label>
                                                    <select class="select2 form-select" id="description"
                                                        name="description" data-placeholder="Pilih Kategori">
                                                    </select>
                                                </div>
                                                <div id="lainnya-container-add" class="mb-3" style="display: none;">
                                                    <input type="text" id="lainnya-description"
                                                        name="lainnya_description" class="form-control">
                                                </div>


                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="roleEx7" class="form-label">Parent
                                                        (Optional)</label>
                                                    <select class="select2 form-select" tabindex="0" id="parent_id"
                                                        name="parent_id" data-placeholder="Pilih Parent">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer border-0">
                                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                        Close
                                    </button>

                                    <button type="button" id="createCategory"
                                        class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-onboarding modal fade animate__animated" id="editCategoryModal" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content text-center">
                                <div class="modal-header border-0">

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">

                                    <div class="onboarding-content mb-0">
                                        <h4 class="onboarding-title text-body text-left">Edit Category</h4>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="nameEx7" class="form-label">Nama
                                                        Kategori</label>
                                                    <div id="lainnya-container" class="mb-3">
                                                        <input type="text" id="lainnya-description-edit"
                                                            name="description-edit" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer border-0">
                                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                            Close
                                        </button>

                                        <button type="button" id="editCategory"
                                            class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection
@section('page-scripts')
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/jQuery.tagify.min.js"></script>

    <script>
        $(document).ready(function() {
            category_option();
            klasifikasi_option();
            tempat_option();
            aktor_option();
            parent_option();

            var input = document.querySelector('#tagsname-edit');
            var Tags = new Tagify(input, {
                originalInputValueFormat: tags => tags.map(tag => tag.value).join(',')
            });
            @php
                $tags = '';
                if (!empty($content[0]['Tags'])) {
                    foreach ($content[0]['Tags'] as $key => $tag) {
                        $tags .= $tag['TagsName'] . (count($content[0]['Tags']) == $key + 1 ? '' : ',');
                    }
                }
            @endphp

            let tagsName = "{{ $tags }}";
            let tagsArray = tagsName.split(',');
            Tags.addTags(tagsArray);

            // Dokumen
            $('#uploaddokumen_edit').change(function() {
                if ($('#uploaddokumen_edit')[0].files[0] != undefined) {
                    $('#dokumen_name').val($('#uploaddokumen_edit')[0].files[0]['name'])
                } else {
                    $('#dokumen_name').val(``)
                }
            })

            $("#modal_uploaddokumen_edit .dropify-clear").click(function() {
                $('#dokumen_name').val(``)
            })

            $('#dokumen_name').click(function() {
                $('#dokumen_popup').trigger("click")
            })

            // Lampiran File
            $('#lampiran_edit').change(function() {
                if ($('#lampiran_edit')[0].files[0] != undefined) {
                    $('#lampiran_name').val($('#lampiran_edit')[0].files[0]['name'])
                } else {
                    $('#lampiran_name').val(``)
                }
            })

            $("#modal_lampiran_edit .dropify-clear").click(function() {
                $('#lampiran_name').val(``)
            })

            $('#lampiran_name').click(function() {
                $('#lampiran_popup').trigger("click")
            })
        });

        {{-- //! ------------------------ Main Content Post --------------------- !//  --}}

        let siteid = '{{ $siteId }}'
        let typeid = '{{ $typeId }}'
        $('#editContent').on('click', function(event) {
            if (siteid == 171 && typeid == "K017") {
                if ($("#status").val() == "" || $("#title").val() == "" || !$('#summernote-1').summernote('code')
                    .trim()) {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Semua Form Sudah Terisi!'
                    )
                } else {
                    _edit_content();
                }
            } else if (siteid == 171 && typeid == "K014") {
                if ($("#categoryid").val() == "" || $("#title").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Kategori dan Judul Sudah Terisi!'
                    )
                } else {
                    _edit_content();
                }
            } else if (siteid == 171 && typeid == "K012") {
                if ($('#dokumen_name').val() == "" || $("#tglpublish").val() == "" || $("#categoryid").val() ==
                    "" || $("#status").val() == "" || $(
                        "#title").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Judul, Kategori, Tanggal Publish, Status, dan Upload Dokumen Sudah Terisi!'
                    )
                } else {
                    _edit_content();
                }
            } else {
                if ($("#tglpublish").val() == "" || $("#categoryid").val() == "" || $("#status").val() == "" || $(
                        "#title").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Judul, Tanggal Publish, Kategori, dan Status Terisi!'
                    )
                } else {
                    _edit_content();
                }
            }
        });

        function _edit_content() {
            let uploaddokumenInput = $('#uploaddokumen_edit')[0];
            let lampiranInput = $('#lampiran')[0];

            if (uploaddokumenInput.files.length > 0) {
                let allowedFormats = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
                let uploaddokumenFileName = uploaddokumenInput.files[0].name;
                let uploaddokumenFileExtension = uploaddokumenFileName.split('.').pop().toLowerCase();

                if (!allowedFormats.includes(uploaddokumenFileExtension)) {
                    custom_alert('warning', 'Peringatan', 'Format file uploaddokumen tidak diizinkan!');
                    return;
                }

                let uploaddokumenFileSize = uploaddokumenInput.files[0].size;
                let maxFileSize = 5 * 1024 * 1024;

                if (uploaddokumenFileSize > maxFileSize) {
                    custom_alert('warning', 'Peringatan',
                        `Ukuran file uploaddokumen terlalu besar! Maksimum ${maxFileSize / (1024 * 1024)} MB.`);
                    return;
                }
            }

            if (lampiranInput.files.length > 0) {
                let lampiranAllowedFormats = ['jpg', 'jpeg', 'png', 'webp', 'mp4'];
                let lampiranFileName = lampiranInput.files[0].name;
                let lampiranFileExtension = lampiranFileName.split('.').pop().toLowerCase();

                if (!lampiranAllowedFormats.includes(lampiranFileExtension)) {
                    custom_alert('warning', 'Peringatan', 'Format file lampiran tidak diizinkan!');
                    return;
                }

                let lampiranFileSize = lampiranInput.files[0].size;
                let maxLampiranFileSize;

                if (siteid == 171 && typeid == 'K014') {
                    if (lampiranFileExtension === 'mp4') {
                        maxLampiranFileSize = 60 * 1024 * 1024;
                    } else {
                        maxLampiranFileSize = 60 * 1024 * 1024;
                    }
                } else {
                    if (lampiranFileExtension === 'mp4') {
                        maxLampiranFileSize = 10 * 1024 * 1024;
                    } else if (['jpg', 'jpeg', 'png', 'webp'].includes(lampiranFileExtension)) {
                        maxLampiranFileSize = 2 * 1024 * 1024;
                    } else {
                        maxLampiranFileSize = 5 * 1024 * 1024;
                    }
                }

                if (lampiranFileSize > maxLampiranFileSize) {
                    custom_alert('warning', 'Peringatan',
                        `Ukuran file lampiran terlalu besar! Maksimum ${maxLampiranFileSize / (1024 * 1024)} MB.`);
                    return;
                }
            }

            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('tagsname', $('#tagsname-edit').val());
            form_data.append('ContentId', "{{ $content[0]['ContentId'] }}");
            form_data.append('tagsid', "{{ !empty($tags[0]['TagsId']) ? $tags[0]['TagsId'] : '' }}")
            form_data.append('uploaddokumen', $('#uploaddokumen_edit')[0].files[0])
            form_data.append('lampiran', $('#lampiran')[0].files[0])
            form_data.append('title', $('#title').val());
            form_data.append('categoryid', $('#categoryid').val())
            form_data.append('typeid', $('#typeid').val())
            form_data.append('status', $('#status').val())
            form_data.append('content', $('#summernote-1').summernote('code'))
            form_data.append('tglpublish', $('#tglpublish').val())
            form_data.append('urlcontent', $('#urlcontent').val())
            form_data.append('sumberinformasi', $('#sumberinformasi').val())
            form_data.append('parentid', $('#parentid').val())
            form_data.append('sentimen', $('#sentimen').val())
            form_data.append('kanaltype', $('input[name="typeid"]').val());

            form_data.append('klasifikasicontentid',
                "{{ !empty($klasifikasiContent[0]['Id']) ? $klasifikasiContent[0]['Id'] : '' }}");
            if (klasifikasitagify && klasifikasitagify.value) {
                var klasifikasiEdit = klasifikasitagify.value.map(item => item.actualValue).join(',');
                form_data.append('klasifikasiid', klasifikasiEdit);
            } else {
                form_data.append('klasifikasiid', '');
            }


            form_data.append('aktorcontentid', "{{ !empty($aktorContent[0]['Id']) ? $aktorContent[0]['Id'] : '' }}");
            if (aktortagify && aktortagify.value) {
                var aktorEdit = aktortagify.value.map(item => item.actualValue).join(',');
                form_data.append('contactid', aktorEdit);
            } else {
                form_data.append('contactid', '');
            }


            form_data.append('tempatcontentid', "{{ !empty($tempatContent[0]['Id']) ? $tempatContent[0]['Id'] : '' }}");
            if (tempattagify && tempattagify.value) {
                var tempatEdit = tempattagify.value.map(item => item.actualValue).join(',');
                form_data.append('tempatid', tempatEdit);
            } else {
                form_data.append('tempatid', '');
            }


            $.ajax({
                url: "{{ url('content/_edit_content') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    let typeId = $('#typeid').val();
                    let kanal = $('#kanalUrl').val();
                    var responseData = JSON.parse(data);
                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            var redirectUrl = "{{ url('content/list') }}" + "/" + typeId + "/" +
                                kanal;
                            window.location.href = redirectUrl;
                        });
                    } else {
                        $(".spinnerloader").hide();
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }

                },
                error: function() {
                    $(".spinnerloader").hide();
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });
        }

        function parent_option() {
            $.ajax({
                url: "{{ url('content/_list_content') }}",
                method: "POST",
                data: {
                    typeId: $('#typeid').val()
                },
                success: function(data) {
                    let d = JSON.parse(data);
                    let typeId = `{{ !empty($content[0]['ParentId']) ? $content[0]['ParentId'] : '' }}`

                    let parentHtml = '<option value="0">Pilih Parent..</option>';

                    for (let i = 0; i < d.data.length; i++) {
                        parentHtml += '<option value="' + d.data[i].ContentId + '"' +
                            `${d.data[i].ContentId == typeId?'selected':''}>` + d.data[i].Title + '</option>'
                    }


                    $("#parentid").prop("disabled", false);
                    $("#parentid").html(parentHtml);
                },

                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }
        {{-- //! ------------------------ End Main Content Post ----------------- !//  --}}

        {{-- //! ------------------------ Klasifikasi ---------------------------- !//  --}}
        let tablelistklasifikasi = $("#tablelistklasifikasi").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "bFilter": false,
            "searching": true,
            "processing": true,
            "serverSide": true,
            "aaSorting": [],
            columns: [{
                    "data": null,
                    "sortable": false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: "Klasifikasi",
                },
                {
                    data: "Id",
                    render: function(data, type, row, meta) {
                        return `
                <a class="text-body delete-record-klasifikasi" onclick="return confirm('Apakah anda yakin?')" data-klasifikasi-id="${data}"><i class="ti ti-trash ti-sm me-1"></i></a>
                `
                    }
                }
            ],

            ajax: {
                url: `{{ url('content/_klasifikasi_list') }}`,
                method: 'POST'
            },

            drawCallback: function(settings) {
                $('.delete-record-klasifikasi').each(function(i) {
                    $('.delete-record-klasifikasi:eq(' + i + ')').click(function(e) {
                        var id = $(this).data('klasifikasi-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('content/_delete_klasifikasi') }}/" + id;

                        if (confirm(
                                'Are you sure you want to delete this record?') ==
                            false
                        ) {
                            return false;
                        }

                        $.ajax({
                            url: deleteUrl,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                    .attr(
                                        'content')
                            },
                            beforeSend: function() {
                                $(".spinnerloader").show()
                            },
                            success: function(response) {
                                var responseData = JSON.parse(response);
                                if (responseData === "Delete Success") {
                                    $(".spinnerloader").hide()
                                    Swal.fire({
                                        title: "Berhasil",
                                        icon: "success",
                                        text: "Data Berhasil Di Hapus",
                                        showClass: {
                                            popup: 'animate__animated animate__bounceIn'
                                        },
                                        customClass: {
                                            confirmButton: 'btn btn-primary'
                                        },
                                        allowOutsideClick: false,
                                        buttonsStyling: false
                                    }).then(function() {
                                        klasifikasi_option();
                                        tablelistklasifikasi.ajax.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: 'Failed to delete record.',
                                        customClass: {
                                            confirmButton: 'btn btn-danger'
                                        }
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    })
                })
            },
            pagingType: "simple_numbers",
            pageLength: 10,
            fixedColumns: true

        });

        let klasifikasitagify;

        function klasifikasi_option() {
            $.ajax({
                url: "{{ url('content/_klasifikasi_list') }}",
                method: "POST",
                data: {},
                cache: false,
                success: function(data) {
                    let d = JSON.parse(data);
                    let klasifikasiOption = {};

                    @if (!empty($klasifikasiContent) && !empty($klasifikasi))
                        @foreach ($klasifikasiContent as $Sklasifikasi)
                            @foreach ($klasifikasi as $kls)
                                if ("{{ $Sklasifikasi['KlasifikasiId'] }}" === "{{ $kls['Id'] }}") {
                                    klasifikasiOption["{{ $kls['Id'] }}"] = {
                                        value: "{{ $kls['Klasifikasi'] }}",
                                        actualValue: "{{ $kls['Id'] }}",
                                        selected: true,
                                    };
                                }
                            @endforeach
                        @endforeach
                    @endif


                    for (let i = 0; i < d.data.length; i++) {
                        const id = d.data[i].Id;
                        if (!klasifikasiOption.hasOwnProperty(id)) {
                            klasifikasiOption[id] = {
                                value: d.data[i].Klasifikasi,
                                actualValue: id,
                                selected: false,
                            };
                        }
                    }

                    let klasifikasiOptionArray = Object.values(klasifikasiOption);
                    if ($('#klasifikasitags_edit').data('tagify')) {
                        $('#klasifikasitags_edit').data('tagify').settings.whitelist = klasifikasiOptionArray;
                        $('#klasifikasitags_edit').data('tagify').update();
                    } else {
                        $('#klasifikasitags_edit').tagify({
                            whitelist: klasifikasiOptionArray,
                            name: 'klasifikasi-edit',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }

                    var selectedKlasifikasi = klasifikasiOptionArray.filter(tag => tag.selected);
                    $('#klasifikasitags_edit').data('tagify').addTags(selectedKlasifikasi);
                    klasifikasitagify = $('#klasifikasitags_edit').data('tagify');


                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        $("#createKlasifikasi").click(function() {
            create_klasifikasi();
        });

        function create_klasifikasi() {
            let form_data = new FormData();
            form_data.append('klasifikasi', $('#klasifikasi').val())
            form_data.append('_token', "{{ csrf_token() }}")

            $.ajax({
                url: "{{ url('content/_add_klasifikasi') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);
                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });

                        klasifikasi_option();
                        tablelistklasifikasi.ajax.reload();

                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                }
            });
        }
        {{-- //! ------------------------ End Klasifikasi ------------------------- !//  --}}



        {{-- //! ------------------------ Aktor ----------------------------------- !//  --}}
        let aktortagify;

        function aktor_option() {
            $.ajax({
                url: "{{ url('content/_contact_list') }}",
                method: "POST",
                data: {},
                cache: false,
                success: function(data) {
                    let d = JSON.parse(data);
                    let aktorOption = {};

                    // Loop through each selected option and set isSelected to true
                    @if (!empty($aktorContent) && !empty($contact))
                        @foreach ($aktorContent as $Scontact)
                            @foreach ($contact as $cont)
                                if ("{{ $Scontact['ContactId'] }}" === "{{ $cont['ContactId'] }}") {
                                    aktorOption["{{ $cont['ContactId'] }}"] = {
                                        value: "{{ $cont['Name'] }}",
                                        actualValue: "{{ $cont['ContactId'] }}",
                                        selected: true,
                                    };
                                }
                            @endforeach
                        @endforeach
                    @endif

                    // Loop through all data from AJAX response and add them to aktorOption
                    for (let i = 0; i < d.data.length; i++) {
                        const id = d.data[i].ContactId;
                        if (!aktorOption.hasOwnProperty(id)) {
                            aktorOption[id] = {
                                value: d.data[i].Name,
                                actualValue: id,
                                selected: false,
                            };
                        }
                    }

                    // Convert aktorOption object to array of options
                    let aktorOptionArray = Object.values(aktorOption);

                    if ($('#aktortags').data('tagify')) {
                        // Jika sudah terpasang, gunakan metode tagify.update() untuk menggambarkan ulang
                        $('#aktortags').data('tagify').settings.whitelist = aktorOptionArray;
                        $('#aktortags').data('tagify').update();
                    } else {
                        // Jika belum terpasang, inisialisasikan tagify pada elemen #aktortags
                        $('#aktortags').tagify({
                            whitelist: aktorOptionArray,
                            name: 'aktor-edit',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }


                    var selectedTags = aktorOptionArray.filter(tag => tag.selected);
                    $('#aktortags').data('tagify').addTags(selectedTags);
                    aktortagify = $('#aktortags').data('tagify');

                },
                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }
        {{-- //! ------------------------ End Aktor ------------------------------- !//  --}}


        {{-- //! ------------------------ Tempat ---------------------------------- !//  --}}
        let tablelisttempat = $("#tablelisttempat").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "bFilter": false,
            "searching": true,
            "processing": true,
            "serverSide": true,
            "aaSorting": [],
            columns: [{
                    "data": null,
                    "sortable": false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: "Nama",
                },
                {
                    data: "Id",
                    render: function(data, type, row, meta) {
                        return `
                <a class="text-body delete-record-tempat" onclick="return confirm('Apakah anda yakin?')" data-tempat-id="${data}"><i class="ti ti-trash ti-sm me-1"></i></a>
                `
                    }
                }
            ],

            ajax: {
                url: `{{ url('content/_tempat_list') }}`,
                method: 'POST'
            },

            drawCallback: function(settings) {
                $('.delete-record-tempat').each(function(i) {
                    $('.delete-record-tempat:eq(' + i + ')').click(function(e) {
                        var id = $(this).data('tempat-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('content/_delete_tempat') }}/" + id;

                        $.ajax({
                            url: deleteUrl,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                    .attr(
                                        'content')
                            },
                            beforeSend: function() {
                                $(".spinnerloader").show()
                            },
                            success: function(response) {
                                var responseData = JSON.parse(response);
                                if (responseData === "Delete Success") {
                                    $(".spinnerloader").hide()
                                    Swal.fire({
                                        title: "Berhasil",
                                        icon: "success",
                                        text: "Data Berhasil Di Hapus",
                                        showClass: {
                                            popup: 'animate__animated animate__bounceIn'
                                        },
                                        customClass: {
                                            confirmButton: 'btn btn-primary'
                                        },
                                        allowOutsideClick: false,
                                        buttonsStyling: false
                                    }).then(function() {
                                        tempat_option();
                                        tablelisttempat.ajax.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: 'Failed to delete record.',
                                        customClass: {
                                            confirmButton: 'btn btn-danger'
                                        }
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    })
                })
            },
            pagingType: "simple_numbers",
            pageLength: 10,
            fixedColumns: true

        });

        $("#createTempat").click(function() {
            create_tempat();
        });

        let tempattagify;

        function tempat_option() {
            $.ajax({
                url: "{{ url('content/_tempat_list') }}",
                method: "POST",
                data: {},
                cache: false,
                success: function(data) {
                    let d = JSON.parse(data);
                    let tempatOption = {};

                    @if (!empty($tempatContent) && !empty($tempat))
                        @foreach ($tempatContent as $Stempat)
                            @foreach ($tempat as $temp)
                                if ("{{ $Stempat['TempatId'] }}" === "{{ $temp['Id'] }}") {
                                    tempatOption["{{ $temp['Id'] }}"] = {
                                        value: "{{ $temp['Nama'] }}",
                                        actualValue: "{{ $temp['Id'] }}",
                                        selected: true,
                                    };
                                }
                            @endforeach
                        @endforeach
                    @endif

                    for (let i = 0; i < d.data.length; i++) {
                        const id = d.data[i].Id;
                        if (!tempatOption.hasOwnProperty(id)) {
                            tempatOption[id] = {
                                value: d.data[i].Nama,
                                actualValue: id,
                                selected: false,
                            };
                        }
                    }

                    let tempatOptionArray = Object.values(tempatOption);

                    if ($('#tempattags').data('tagify')) {
                        $('#tempattags').data('tagify').settings.whitelist = tempatOptionArray;
                        $('#tempattags').data('tagify').update();
                    } else {
                        $('#tempattags').tagify({
                            whitelist: tempatOptionArray,
                            name: 'tempat-edit',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }


                    var selectedTags = tempatOptionArray.filter(tag => tag.selected);
                    $('#tempattags').data('tagify').addTags(selectedTags);
                    tempattagify = $('#tempattags').data('tagify');

                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function create_tempat() {
            let form_data = new FormData();
            form_data.append('nama', $('#nama').val())
            form_data.append('kelurahan', $('#kelurahan').val())
            form_data.append('rt', $('#rt').val())
            form_data.append('rw', $('#rw').val())
            form_data.append('kecamatan', $('#kecamatan').val())
            form_data.append('kota', $('#kota').val())
            form_data.append('alamat', $('#alamat').val())
            form_data.append('notelp', $('#notelp').val())
            form_data.append('pic', $('#pic').val())
            form_data.append('_token', "{{ csrf_token() }}")

            $.ajax({
                url: "{{ url('content/_add_tempat') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);
                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });

                        tempat_option();
                        tablelisttempat.ajax.reload();

                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                }
            });
        }
        {{-- //! ------------------------ End Tempat ------------------------------- !//  --}}



        {{-- //! ------------------------ Category ------------------------------ !//  --}}

        $("#createCategory").click(function() {
            create_category();
        });

        function category_option() {
            $.ajax({
                url: "{{ url('content/_category_list') }}",
                method: "POST",
                data: {
                    kanal: $('#typeid').val()
                },
                success: function(data) {
                    let d = JSON.parse(data);
                    let typeId = `{{ !empty($content[0]['CategoryId']) ? $content[0]['CategoryId'] : '' }}`

                    let categoryHtml = '<option value="">Pilih Kategori..</option>';
                    let descriptionHtml = '<option value="">Pilih Kategori..</option>';
                    let parentHtml = '<option value="">Pilih Parent..</option>';


                    if (d.data === null || d.data.length === 0) {
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    } else {
                        for (let i = 0; i < d.data.length; i++) {
                            categoryHtml += '<option value="' + d.data[i].Id + '"' +
                                `${d.data[i].Id == typeId?'selected':''}>` + d.data[i].Description +
                                '</option>';
                            parentHtml += '<option value="' + d.data[i].Id + '">' + d.data[i].Description +
                                '</option>';
                            descriptionHtml += '<option value="' + d.data[i].Description + '">' + d.data[i]
                                .Description +
                                '</option>';
                        }
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    }

                    $("#categoryid").prop("disabled", false);
                    $("#categoryid").html(categoryHtml);

                    $("#parent_id").prop("disabled", false);
                    $("#parent_id").html(parentHtml);

                    $("#description").prop("disabled", false);
                    $("#description").html(descriptionHtml);

                    $('#description').on('change', function() {
                        var selectedOption = $(this).val();

                        if (selectedOption === 'lainnya') {
                            $('#lainnya-container-add').show();
                        } else {
                            $('#lainnya-container-add').hide();
                        }
                    });

                    if ($('#description').val() === 'lainnya') {
                        $('#lainnya-container-add').show();
                    } else {
                        $('#lainnya-container-add').hide();
                    }
                },

                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }

        function create_category() {
            var selectedOption = $('#description').val();
            var descriptionValue = '';

            if (selectedOption === 'lainnya') {
                descriptionValue = $('#lainnya-description').val();
            } else {
                descriptionValue = selectedOption;
            }

            var form_data = new FormData();
            form_data.append('description', descriptionValue);
            form_data.append('parent_id', $('#parent_id').val());
            form_data.append('kanal', $('#typeid').val());
            form_data.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: "{{ url('content/_add_category') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);

                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });

                        category_option();

                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                }
            });
        }

        function _edit_category(editedCategoryDescription, categoryId) {
            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('description', editedCategoryDescription);

            $.ajax({
                url: "{{ url('content/_edit_category') }}/" + categoryId,
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    if (response.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Edit",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        })
                        category_option();
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
            });
        }

        $('#editCategoryModal').on('show.bs.modal', function() {
            var selectedCategoryId = $('#categoryid').val();
            var selectedCategoryDescription = $('#categoryid option:selected').text();
            $('#lainnya-description-edit').val(selectedCategoryDescription);
            $('input[name="description-edit"]').val(selectedCategoryDescription);
        });

        $('#editCategory').on('click', function() {
            var editedCategoryDescription = $('#lainnya-description-edit').val();
            var selectedCategoryId = $('#categoryid').val();
            _edit_category(editedCategoryDescription, selectedCategoryId);
        });
        {{-- //! ------------------------ End Category --------------------------- !//  --}}


        {{-- //! ------------------------ Date Time -------------------------------- !//  --}}
        var flatpickrDateTime = document.querySelector(".flatpickr-datetime");
        flatpickrDateTime.flatpickr({
            enableTime: true,
            dateFormat: "d-m-Y H:i"
        });
        {{-- //! ------------------------ End Date Time ----------------------------- !//  --}}
    </script>
@endsection