@extends('layouts/page')
@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" value="{{ $typeId }}">
            <input type="hidden" name="kanalUrl" id="kanalUrl" value="{{ $kanal }}">

            <div class="card">
                <div class="px-3 pt-3 border-bottom">
                    <h4 class="fw-bold">Tambah {{ $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) }}" />
                    </div>

                    <div
                        class="col-md-4 {{ 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 id="categoryid" name="categoryid" class="form-select animation-dropdown select2"
                            data-placeholder="{{ $siteId == 171 && $typeId == 'K012' ? ' Pilih Folder Dokumen' : 'Pilih Kategori' }}"
                            disabled>
                        </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-danger" data-bs-toggle="modal"
                            data-bs-target="#deleteCategoryModal">
                            <i class='bx bxs-trash'></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))
                                @foreach ($status as $status)
                                    <option value="{{ $status->Code }}">{{ $status->Description }}</option>
                                @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" />
                    </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" readonly />
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                    data-bs-target="#UploadDokumen" style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="UploadDokumen" 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">
                                                <input type="file" class="dropify" name="uploaddokumen"
                                                    id="uploaddokumen" data-height="300" />
                                            </div>
                                            <div class="modal-footer">
                                                <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">
                            </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" readonly />
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                    data-bs-target="#UploadDokumen" style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="UploadDokumen" 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">
                                                <input type="file" class="dropify" name="uploaddokumen"
                                                    id="uploaddokumen" data-height="300" />
                                            </div>
                                            <div class="modal-footer">
                                                <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" readonly />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="lampiran_popup"
                                data-bs-target="#UploadLampiran" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="UploadLampiran" 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">
                                            <input type="file" class="dropify" name="lampiran" id="lampiran"
                                                data-height="300" />
                                        </div>
                                        <div class="modal-footer">
                                            <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') }}" />
                    </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') }}" />
                    </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" data-tagify value=""
                            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' }}">
                        </select>
                    </div>

                    {{-- //* ------------------------ Icon Footer ------------------------------ *//  --}}
                    <div
                        class="d-flex justify-content-end {{ ($siteId == 283 && ($typeId == 'K016' || $typeId == 'K012' || $typeId == 'K014')) || ($siteId == 171 && ($typeId == 'K017' || $typeId == 'K008' || $typeId == 'K012' || $typeId == 'K001' || $typeId == 'K011' || $typeId == 'K016' || $typeId == 'K014') || ($siteId == 312) ) ? ' d-none' : '' }}">
                        {{-- //! ------------------------ Klasifikasi --------------------------- !//  --}}
                        <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" 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>
                        {{-- //! ------------------------ End Klasifikasi --------------------------- !//  --}}

                        {{-- //! ------------------------ Aktor --------------------------- !//  --}}
                        <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>
                        {{-- //! ------------------------ End Aktor --------------------------- !//  --}}

                        {{-- //! ------------------------ Tempat --------------------------- !//  --}}
                        <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>
                        {{-- //! ------------------------ End Tempat --------------------------- !//  --}}

                        {{-- //! ------------------------ Sentimen --------------------------- !//  --}}
                        <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 $tone)
                                                    <option value="{{ $tone->Code }}">{{ $tone->Description }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- //! ------------------------ End Sentimen --------------------------- !//  --}}

                    </div>
                    {{-- //* ------------------------ End Icon Footer --------------------------- *//  --}}

                    <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="createContent"
                            class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                            data-bs-toggle="modal" data-bs-target="#createApp">Simpan</button>
                    </div>
                </div>

                {{-- //* ------------------------ Modal -------------------------------- *//  --}}
                <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 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">New Category</h4>
                                    <hr>
                                    <form id="addCategory">
                                        <div class="row">
                                            <div class="col-md-6">

                                                <div class="mb-3">
                                                    <label for="nameEx7" class="form-label">Nama
                                                        Kategori</label>
                                                    <select style="z-index: 9999999999999999999;"
                                                        class="cat form-select select2" id="description"
                                                        name="description" data-placeholder="Pilih Kategori">
                                                    </select>
                                                </div>
                                                <div id="lainnya-container" 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="cat form-select select2" id="parent_id"
                                                        name="parent_id" data-placeholder="Pilih Parent">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </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" id="deleteCategoryModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Modal title</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="tablelistkategori" class=" table">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Judul</th>
                                                    <th>Parent</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" 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>
                {{-- //* ------------------------ End Modal ------------------------------ *//  --}}

            </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');
            var Tags = new Tagify(input, {
                originalInputValueFormat: tags => tags.map(tag => tag.value).join(',')
            });

            var tagsName = "{{ isset($tags[0]['TagsName']) ? $tags[0]['TagsName'] : '' }}";
            var tagsArray = tagsName.split(',');
            Tags.addTags(tagsArray);
        });

        let siteid = '{{ $siteId }}'
        let typeid = '{{ $typeId }}'

        $('#createContent').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 {
                    _add_content();
                }
            } else if (siteid == 171 && typeid == "K014") {
                if ($("#categoryid").val() == "" || $("#title").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Kategori dan Judul Sudah Terisi!'
                    )
                } else {
                    _add_content();
                }
            } else if (siteid == 171 && typeid == "K012") {
                if ($('#uploaddokumen')[0].files.length == 0 || $("#tglpublish").val() == "" || $("#categoryid")
                    .val() == "" || $("#status").val() == "" || $(
                        "#title").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Judul, Kategori, Tanggal Publish, Status, dan Upload Dokumen Sudah Terisi!'
                    )
                } else {
                    _add_content();
                }
            } else {
                if ($("#tglpublish").val() == "" || $("#categoryid").val() == "" || $("#status").val() == "" || $(
                        "#title").val() == ""
                    .trim()) {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Judul, Tanggal Publish, Kategori, dan Status Sudah Terisi!'
                    )
                } else {
                    _add_content();
                }
            }
        });

        function _add_content() {
            let uploaddokumenInput = $('#uploaddokumen')[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('uploaddokumen', $('#uploaddokumen')[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())
            var selectKlasifikasi = document.querySelector('#klasifikasitags');
            var tagifyKlasifikasi = new Tagify(selectKlasifikasi);
            var klasifikasi = tagifyKlasifikasi.value.map(item => item.actualValue).join(',');
            var selectAktor = document.querySelector('#aktortags');
            var tagifyAktor = new Tagify(selectAktor);
            var aktor = tagifyAktor.value.map(item => item.actualValue).join(',');
            var selectTempat = document.querySelector('#tempattags');
            var tagifyTempat = new Tagify(selectTempat);
            var tempat = tagifyTempat.value.map(item => item.actualValue).join(',');
            form_data.append('klasifikasiid', klasifikasi);
            form_data.append('contactid', aktor);
            form_data.append('tempatid', tempat);
            var tagsname = $('#tagsname').val();
            form_data.append('tagsname', tagsname);
            form_data.append('kanaltype', $('input[name="typeid"]').val());

            $.ajax({
                url: "{{ url('content/_add_content') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                    $("#createContent").prop("disabled", true)
                },
                success: function(data) {
                    let typeId = $('#typeid').val();
                    let kanal = $('#kanalUrl').val();
                    var responseData = JSON.parse(data);

                    if (responseData.Status === 200) {
                        $("#createContent").prop("disabled", true)
                        $(".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
                        }).then(function() {
                            var redirectUrl = "{{ url('content/list') }}" + "/" + typeId + "/" +
                                kanal;
                            window.location.href = redirectUrl;
                        });
                    } 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
                        });
                        $(".spinnerloader").hide()
                    }
                },
                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 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].Title +
                            '</option>';
                    }

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

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

        let tablelistkategori = $("#tablelistkategori").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: "Description",
                },
                {
                    data: "Parent",
                },
                {
                    data: "Id",
                    render: function(data, type, row, meta) {
                        return `
            <a class="text-body delete-record" onclick="return confirm('Apakah anda yakin?')" data-category-id="${data}"><i class="ti ti-trash ti-sm me-1"></i></a>
            `
                    }
                }
            ],

            ajax: {
                url: `{{ url('content/_category_list') }}`,
                method: 'POST',
                "data": function(d) {
                    d.kanal = $('#typeid').val();
                }
            },

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

                        $.ajax({
                            url: deleteUrl,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                    .attr(
                                        'content')
                            },
                            processData: false,
                            contentType: false,
                            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() {
                                        category_option();
                                        tablelistkategori.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
        });

        $("#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 categoryHtml = '<option value="">Pilih Kategori..</option>';
                    let descriptionHtml = '<option value="">Pilih Kategori..</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].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(categoryHtml);

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

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

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

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

                error: function(xhr, status, error) {
                    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,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                        .attr(
                            'content')
                },
                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();
                        tablelistkategori.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
                        });
                    }
                }
            });
        }

        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;

                        $.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

        });

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

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

                    for (let i = 0; i < d.data.length; i++) {
                        klasifikasiOption.push({
                            value: d.data[i].Klasifikasi,
                            actualValue: d.data[i].Id,
                        });
                    }

                    // Periksa apakah tagify sudah terpasang pada elemen #klasifikasitags
                    if ($('#klasifikasitags').data('tagify')) {
                        // Jika sudah terpasang, gunakan metode tagify.update() untuk menggambarkan ulang
                        $('#klasifikasitags').data('tagify').settings.whitelist = klasifikasiOption;
                        $('#klasifikasitags').data('tagify').update();
                    } else {
                        // Jika belum terpasang, inisialisasikan tagify pada elemen #klasifikasitags
                        $('#klasifikasitags').tagify({
                            whitelist: klasifikasiOption,
                            name: 'klasifikasi',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }

        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
                        });
                    }
                }
            });
        }

        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 Tambah",
                                        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();
        });

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

                    for (let i = 0; i < d.data.length; i++) {
                        tempatOption.push({
                            value: d.data[i].Nama,
                            actualValue: d.data[i].Id,
                        });
                    }

                    // Periksa apakah tagify sudah terpasang pada elemen #tempattags
                    if ($('#tempattags').data('tagify')) {
                        // Jika sudah terpasang, gunakan metode tagify.update() untuk menggambarkan ulang
                        $('#tempattags').data('tagify').settings.whitelist = tempatOption;
                        $('#tempattags').data('tagify').update();
                    } else {
                        // Jika belum terpasang, inisialisasikan tagify pada elemen #tempattags
                        $('#tempattags').tagify({
                            whitelist: tempatOption,
                            name: 'tempat',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    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
                        });
                    }
                }
            });
        }

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

                    for (let i = 0; i < d.data.length; i++) {
                        aktorOption.push({
                            value: d.data[i].Name,
                            actualValue: d.data[i].ContactId,
                        });
                    }

                    // Periksa apakah tagify sudah terpasang pada elemen #aktortags
                    if ($('#aktortags').data('tagify')) {
                        // Jika sudah terpasang, gunakan metode tagify.update() untuk menggambarkan ulang
                        $('#aktortags').data('tagify').settings.whitelist = aktorOption;
                        $('#aktortags').data('tagify').update();
                    } else {
                        // Jika belum terpasang, inisialisasikan tagify pada elemen #aktortags
                        $('#aktortags').tagify({
                            whitelist: aktorOption,
                            name: 'aktor',
                            enforceWhitelist: true,
                            dropdown: {
                                enabled: 0,
                                highlightFirst: true
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }

        var flatpickrDateTime = document.querySelector(".flatpickr-datetime");
        flatpickrDateTime.flatpickr({
            enableTime: true,
            dateFormat: "d-m-Y H:i"
        });

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

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

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

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

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

        $('#lampiran_name').click(function() {
            $('#lampiran_popup').trigger("click")
        })
    </script>
@endsection