@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <style>
        .img-container {
            width: 110px;
            height: 110px;
            overflow: hidden;
        }

        .img-container img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">

        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            <div class="row">
                <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="d-flex align-items-center flex-column mb-3">
                                <label for="logo" style="position: relative; display: inline-block;">
                                    <div id="account-upload-img-container" class="img-container mt-3 mb-2">
                                        <img class="rounded-circle mb-4"
                                            style="width: 100px; height: 100px; object-fit:contain"
                                            src="{{ $site->Logo ? Config::get('app.url_api') . '/api/Master/Image/png/' . $site->Logo : asset('images/avatars/avatar.png') }}"
                                            id="account-upload-img" alt="User avatar">

                                        <i class='bx bx-pencil {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}'
                                            style="position: absolute; bottom: 10px; right: 5px; font-size: 1.5rem; color: #7367f0; background: #E9EAF8; border-radius: 50%; padding: 5px;"></i>
                                    </div>
                                    <input {{ Session::get('TypeRole') == 'eksekutif' ? ' disabled' : '' }} type="file"
                                        name="logo" id="logo" onchange="previewImage(event)" hidden>
                                </label>

                                <div class="user-info text-center">
                                    <h4 class="mb-2">{{ $site->Name }}</h4>
                                    <span class=""><i class='bx bx-phone'></i> &nbsp;&nbsp;<a
                                            href="tel:{{ $site->Telp }}">{{ $site->Telp }}</a> (Telp)</span>
                                </div>
                            </div>

                            <div class="info-container">
                                <ul class="list-unstyled">
                                    <li class="mb-2 pt-1">
                                        <span class="fw-semibold me-1">Alamat:</span>
                                        @php $altAlamat = Session::get('SiteId') == '2' ? 'Tugas' : 'Alamat'; @endphp
                                        <span><a href="{{ $site->UrlMap }}">{!! $site->$altAlamat !!}</a></span>
                                    </li>
                                    <li class="mb-2 pt-1">
                                        <span class="fw-semibold me-1">Email:</span>
                                        <span>{{ $site->Email }}</span>
                                    </li>
                                    <li class="mb-2 pt-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                        <span class="fw-semibold me-1">Facebook :</span>
                                        <span><a href="{{ $site->Facebook }}">Kunjungi Facebook &nbsp;<i
                                                    class='bx bx-link-external'></i></a></span>
                                    </li>
                                    <li class="mb-2 pt-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                        <span class="fw-semibold me-1">Instagram :</span>
                                        <span><a href="{{ $site->Instagram }}">Kunjungi Instagram &nbsp;<i
                                                    class='bx bx-link-external'></i></a></span>
                                    </li>
                                    <li class="mb-2 pt-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                        <span class="fw-semibold me-1">Youtube :</span>
                                        <span><a href="{{ $site->Youtube }}">Kunjungi Youtube &nbsp;<i
                                                    class='bx bx-link-external'></i></a></span>
                                    </li>
                                    <li class="mb-2 pt-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                        <span class="fw-semibold me-1">TikTok :</span>
                                        <span><a href="{{ $site->Tiktok }}">Kunjungi TikTok &nbsp;<i
                                                    class='bx bx-link-external'></i></a></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1 mb-5">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                aria-selected="true"><i class="ti ti-user-check ti-xs me-1"></i>&nbsp;Deskripsi</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                                aria-selected="false"><i class="ti ti-user ti-xs"></i>&nbsp;Informasi Kontak</button>
                        </li>
                        <li class="nav-item {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}" role="presentation">
                            <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
                                aria-selected="false"><i class="ti ti-id-badge ti-xs"></i>&nbsp;Sosial Media</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-password-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-password" type="button" role="tab"
                                aria-controls="pills-password" aria-selected="false"><i
                                    class='bx bx-low-vision'></i>&nbsp;Ubah Password</button>
                        </li>
                    </ul>


                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">
                            <div class="row g-3 p-4">

                                <div class="col-md-12">
                                    <label class="form-label" for="favicon_name">Favicon</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="favicon_name" name="favicon_name"
                                            placeholder="Upload Favicon" aria-describedby="inputGroupFileAddon04"
                                            aria-label="Upload"
                                            value="{{ !empty($site->Favicon) ? $site->Favicon : '' }}" readonly />
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            id="favicon_popup" data-bs-target="#UploadFavicon"
                                            style="border-radius: 0 5px 5px 0;">Upload</button>

                                        <div class="modal fade" id="UploadFavicon" 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 Favicon</p>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body" id="modal_uploadfavicon">
                                                        <input type="file" class="dropify" name="favicon"
                                                            id="favicon" data-height="300"
                                                            data-default-file="{{ !empty($site->Favicon) ? Config::get('app.url_api') . '/api/Master/' . Helpers::reader($site->Favicon) : '' }}" />

                                                    </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 mb-1"
                                        style="font-size: 14px"><span class="text-mute fst-italic">*</span> Format: JPG,
                                        JPEG, PNG, WEBP. Maximum Size : 2MB.</span>
                                    <br>
                                    <span id="validation-formatfilefavicon" class="text-danger fst-italic">* format file
                                        favicon tidak diizinkan!</span>
                                    <span id="validation-ukuranfilefavicon" class="text-danger fst-italic">* ukuran file
                                        favicon terlalu besar! Maksimum 2 MB.</span>
                                </div>

                                <div class="{{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="domain">Domain</label>
                                    <input type="text" id="domain" class="form-control"
                                        placeholder="Masukkan Domain" value="{{ $site->Domain }}" />
                                </div>

                                <div class="{{ Session::get('SiteId') == 171 ? 'col-md-12' : 'col-md-6' }}">
                                    <label class="form-label" for="name">Nama Site</label>
                                    <input type="text" id="name" class="form-control"
                                        placeholder="Masukkan Nama Site" value="{{ $site->Name }}" />
                                </div>

                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                                    <label class="form-label" for="statusakreditasi">Status Akreditasi</label>
                                    <input type="text" id="statusakreditasi" class="form-control"
                                        placeholder="Masukkan Status Akreditasi" value="{{ $site->StatusAkreditasi }}" />
                                </div>

                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                                    <label class="form-label" for="jadwalpelayanan">Jadwal Pelayanan</label>
                                    <textarea class="form-control" id="jadwalpelayanan" rows="1" required>{{ $site->JadwalPelayanan }}</textarea>
                                </div>

                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                                    <label class="form-label" for="kodesuratresmi">Kode Surat Resmi</label>
                                    <input type="text" id="kodesuratresmi" class="form-control"
                                        placeholder="Masukkan Kode Surat Resmi" value="{{ $site->KodeSuratResmi }}" />
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label" for="description">Deskripsi</label>
                                    <textarea class="form-control" style="height: 150px;" id="description" name="description" rows="1" required>{{ $site->Description }}</textarea>
                                </div>

                                <div class="col-md-12 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="tentang">Tentang</label>
                                    <div id="summernote-4">
                                        {!! isset($site->Tugas) ? $site->Tugas : '' !!}
                                    </div>
                                </div>
                                <div class="col-md-12 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="tupoksi">Tupoksi</label>
                                    <div id="summernote-5">
                                        {!! isset($site->SejarahSingkat) ? $site->SejarahSingkat : '' !!}
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label" for="collapsible-address">{{ Session::get('SiteId') == '2' ? 'Tentang DSW' : 'Visi' }}</label>
                                    <div id="summernote-1">
                                        {!! isset($site->Visi) ? $site->Visi : '' !!}
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label" for="collapsible-address">{{ Session::get('SiteId') == '2' ? 'Tujuan DSW' : 'Misi' }}</label>
                                    <div id="summernote-2">
                                        {!! isset($site->Misi) ? $site->Misi : '' !!}
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <button type="button"
                                        class="btn btn-primary waves-effect waves-light m-2 btn-submit {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                            aria-labelledby="pills-profile-tab">
                            <div class="row g-3 p-4">
                                <div class="col-md-12 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="tugas">{{ Session::get('SiteId') == '2' ? 'Alamat' : 'Tugas' }}</label>
                                    <textarea class="form-control" style="height: 150px;" id="tugas" rows="1" required>{{ $site->Tugas }}</textarea>
                                </div>
                                <div class="col-md-12 {{ Session::get('SiteId') == 171 || Session::get('SiteId') == 2 ? 'd-none' : '' }}">
                                    <label class="form-label" for="sejarahsingkat">Sejarah Singkat</label>
                                    <textarea class="form-control" style="height: 150px;" id="sejarahsingkat" rows="1" required>{{ $site->SejarahSingkat }}</textarea>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label" for="alamat">{{ Session::get('SiteId') == '2' ? 'Manfaat DSW' : 'Alamat' }}</label>
                                    @if (Session::get('SiteId') == 171 ? 'd-none' : '')
                                        <div id="summernote-3">
                                            {!! isset($site->Alamat) ? $site->Alamat : '' !!}
                                        </div>
                                    @else
                                        <textarea class="form-control" style="height: 150px;" id="summernote-3" rows="1" required>{{ $site->Alamat }}</textarea>
                                    @endif
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="kecamatan">Kecamatan</label>
                                    <select class="select2 form-select kecamatan" id="kecamatan" name="kecamatan"
                                        data-placeholder="Pilih Kecamatan">
                                        <option value=""></option>

                                    </select>
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="kelurahan">Kelurahan</label>
                                    <select class="select2 form-select kelurahan" id="kelurahan" name="kelurahan"
                                        data-placeholder="Pilih Kelurahan">
                                        <option value=""></option>

                                    </select>
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="pic">PIC</label>
                                    <select id="pic" name="pic" class="select2 form-select"
                                        data-placeholder="Select PIC">
                                        <option value="" selected></option>
                                        @if (!empty($organization['Organizations']))
                                            @foreach ($organization['Organizations'] as $org)
                                                @if ($site->Pic == $org['Id'])
                                                    <option value="{{ $site->Pic }}" selected>{{ $org['Name'] }}
                                                    </option>
                                                @else
                                                    <option value="{{ $org['Id'] }}">{{ $org['Name'] }}</option>
                                                @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="email">Email</label>
                                    <input type="text" id="email" class="form-control"
                                        placeholder="Masukkan Email" value="{{ $site->Email }}" />
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label"
                                        for="telp">{{ Session::get('SiteId') == 171 ? 'No Handphone' : 'No Telepon' }}</label>
                                    <input type="text" id="telp" class="form-control"
                                        placeholder="Masukkan {{ Session::get('SiteId') == 171 ? 'No Handphone' : 'No Telepon' }}"
                                        value="{{ $site->Telp }}" />
                                </div>

                                @if(Session::get('SiteId') == 171)
                                <div class="col-md-6 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="whatsapp">URL WhatsApp</label>
                                    <input type="text" id="whatsapp" class="form-control"
                                        placeholder="Masukkan URL WhatsApp" value="{{ $site->Whatsapp }}" />
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="facebook">URL Facebook</label>
                                    <input type="text" id="facebook" class="form-control"
                                        placeholder="Masukkan URL Facebook" value="{{ $site->Facebook }}" />
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="twitter">URL Twitter</label>
                                    <input type="text" id="twitter" class="form-control"
                                        placeholder="Masukkan URL Twitter" value="{{ $site->Twitter }}" />
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="instagram">URL Instagram</label>
                                    <input type="text" id="instagram" class="form-control"
                                        placeholder="Masukkan URL Instagram" value="{{ $site->Instagram }}" />
                                </div>
                                <div class="col-md-6 {{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">
                                    <label class="form-label" for="youtube">URL Youtube</label>
                                    <input type="text" id="youtube" class="form-control"
                                        placeholder="Masukkan URL Youtube" value="{{ $site->Youtube }}" />
                                </div>
                                @endif

                                <div class="col-md-6">
                                    <label class="form-label" for="urlmap">URL Alamat Maps</label>
                                    <input type="text" id="urlmap" class="form-control"
                                        placeholder="Masukkan Url Map" value="{{ $site->UrlMap }}" />
                                </div>

                                <div class="col-md-3">
                                    <button type="button"
                                        class="btn btn-primary waves-effect waves-light m-2 btn-submit {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                            aria-labelledby="pills-contact-tab">
                            <div class="row g-3 p-4">
                                <div class="col-md-6">
                                    <label class="form-label" for="whatsapp">URL WhatsApp</label>
                                    <input type="text" id="whatsapp" class="form-control"
                                        placeholder="Masukkan URL WhatsApp" value="{{ $site->Whatsapp }}" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="facebook">URL Facebook</label>
                                    <input type="text" id="facebook" class="form-control"
                                        placeholder="Masukkan URL Facebook" value="{{ $site->Facebook }}" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="twitter">URL Twitter</label>
                                    <input type="text" id="twitter" class="form-control"
                                        placeholder="Masukkan URL Twitter" value="{{ $site->Twitter }}" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="instagram">URL Instagram</label>
                                    <input type="text" id="instagram" class="form-control"
                                        placeholder="Masukkan URL Instagram" value="{{ $site->Instagram }}" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="youtube">URL Youtube</label>
                                    <input type="text" id="youtube" class="form-control"
                                        placeholder="Masukkan URL Youtube" value="{{ $site->Youtube }}" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="tiktok">URL TikTok</label>
                                    <input type="text" id="tiktok" class="form-control"
                                        placeholder="Masukkan URL Tiktok" value="{{ $site->Tiktok }}" />
                                </div>
                                <div class="col-md-3">
                                    <button type="button"
                                        class="btn btn-primary waves-effect waves-light m-2 btn-submit {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-password" role="tabpanel"
                            aria-labelledby="pills-password-tab">
                            <div class="row g-3 p-4">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="passwordOld">Password Lama</label>
                                    <div class="input-group input-group-merge form-oldpassword-toggle">
                                        <input class="form-control form-control-merge" type="password" id="oldPassword"
                                            name="oldPassword" placeholder="Masukan Password Lama"
                                            aria-describedby="login-oldpassword" tabindex="2" />
                                        <span id="togglePasswordIcon1" class="input-group-text cursor-pointer"><i
                                                id="icon-pass1" class='bx bx-show'></i></span>
                                    </div>
                                    <span id="validation-oldpassword" class="text-danger fst-italic">*password lama wajib
                                        diisi.</span>
                                </div>


                                <div class="col-md-12 mb-0">
                                    <label class="form-label" for="password">Password Baru</label>
                                    <div class="input-group input-group-merge form-Password-toggle">
                                        <input class="form-control form-control-merge" type="password" id="Password"
                                            name="Password" placeholder="Masukan Password Baru"
                                            aria-describedby="login-konfirmasiPassword" tabindex="2" />
                                        <span class="input-group-text cursor-pointer"><i id="icon-pass2"
                                                class='bx bx-show'></i></span>
                                    </div>
                                    <span id="validation-password" class="text-danger fst-italic">*silakan lengkapi aturan
                                        format password secara lengkap.</span>
                                </div>

                                <div class="col-md-6">
                                    <span id="delapan-karakter" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                            class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 8+ karakter</span> </span>
                                </div>
                                <div class="col-md-6">
                                    <span id="huruf-besar" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                            class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 1 huruf besar</span> </span>
                                </div>
                                <div class="col-md-6">
                                    <span id="huruf-kecil" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                            class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 1 huruf kecil</span> </span>
                                </div>
                                <div class="col-md-6">
                                    <span id="simbol-angka" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                            class='bx bx-check-circle bx-sm'></i> <span>&nbsp; simbol dan angka</span>
                                    </span>
                                </div>

                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="RePassword">Konfirmasi Password</label>
                                    <div class="input-group input-group-merge form-RePassword-toggle">
                                        <input class="form-control form-control-merge" type="password" id="RePassword"
                                            name="RePassword" placeholder="Konfirmasi Password"
                                            aria-describedby="login-konfirmasiPassword" tabindex="2" />
                                        <span id="togglePasswordIcon3" class="input-group-text cursor-pointer"><i
                                                id="icon-pass3" class='bx bx-show'></i></span>
                                    </div>
                                    <span id="validation-repassword" class="text-danger fst-italic">*konfirmasi password
                                        tidak sesuai dengan password.</span>
                                </div>

                                <div class="col-md-3">
                                    <button type="button" id="editPassword"
                                        class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {
            // kecamatan & kelurahan
            let kd_kota = "{{ Config::get('app.kd_kota') }}";
            let kd_kecamatan = "{{ !empty($site->Kecamatan) ? $site->Kecamatan : '' }}"
            let kd_kelurahan = "{{ !empty($site->Kelurahan) ? $site->Kelurahan : '' }}"

            kecamatan(kd_kota, kd_kecamatan);
            if (kd_kecamatan !== '') {
                kelurahan(kd_kecamatan, kd_kelurahan);
                $('#kelurahan').prop("disabled", false);
            } else {
                $('#kelurahan').prop("disabled", true);
            }

            $('#kecamatan').change(function() {
                let selected_kecamatan = $(this).val();

                if (selected_kecamatan !== '') {
                    kelurahan(selected_kecamatan, kd_kelurahan);
                    $('#kelurahan').prop("disabled", false);
                } else {
                    $('#kelurahan').prop("disabled", true);
                }
            });

            $('#validation-password').hide();
            $('#validation-repassword').hide();
            $('#validation-oldpassword').hide();
            $('#validation-formatfilefavicon').hide();
            $('#validation-ukuranfilefavicon').hide();
        });

        function editPassword() {
            let formData = new FormData();

            formData.append('id', `{{ Session::get('UserId') }}`)
            formData.append("password", $('#Password').val());

            $.ajax({
                url: "{{ url('profilesite/_edit_password') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response, data) {
                    if (data === "success") {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Password Berhasil Di Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            location.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
                        });
                    }
                },
                error: function() {
                    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 editProfileSite() {
            let maxSizeInBytes = 2 * 1024 * 1024;
            let faviconInput = $('#favicon')[0];
            let logoImage = $('#logo')[0];

            if (faviconInput.files.length > 0) {
                let allowedFormats = ['jpg', 'jpeg', 'png', 'webp'];
                let faviconFileName = faviconInput.files[0].name;
                let faviconFileExtension = faviconFileName.split('.').pop().toLowerCase();

                if (!allowedFormats.includes(faviconFileExtension)) {
                    $('#validation-ukuranfilefavicon').hide();
                    $('#validation-formatfilefavicon').show();
                    $('#favicon_name').addClass('is-invalid').focus();
                    return;
                }

                let faviconFileSize = faviconInput.files[0].size;
                if (faviconFileSize > maxSizeInBytes) {
                    $('#validation-formatfilefavicon').hide();
                    $('#validation-ukuranfilefavicon').show();
                    $('#favicon_name').addClass('is-invalid').focus();
                    return;
                }
            }

            if (logoImage.files.length > 0) {
                let allowedFormats = ['jpg', 'jpeg', 'png', 'webp'];
                let faviconFileName = logoImage.files[0].name;
                let faviconFileExtension = faviconFileName.split('.').pop().toLowerCase();

                if (!allowedFormats.includes(faviconFileExtension)) {

                    Swal.fire({
                        title: "Peringatan!",
                        icon: "warning",
                        text: "Format File Logo Tidak Diizinkan! Format yang diizinkan : JPG, JPEG, PNG, WEBP",
                        showClass: {
                            popup: 'animate__animated animate__bounceIn'
                        },
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        allowOutsideClick: false,
                        buttonsStyling: false
                    });
                    return;
                }

                let faviconFileSize = logoImage.files[0].size;
                if (faviconFileSize > maxSizeInBytes) {
                    Swal.fire({
                        title: "Peringatan!",
                        icon: "warning",
                        text: "Ukuran File Logo Terlalu Besar! Maksimum 2 MB.",
                        showClass: {
                            popup: 'animate__animated animate__bounceIn'
                        },
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        allowOutsideClick: false,
                        buttonsStyling: false
                    });
                    return;
                }
            }

            if ("{{ $site->SiteId }}" == 171) {
                tugasValue = $('#summernote-4').summernote('code');
                sejarahsingkatValue = $('#summernote-5').summernote('code');
            } else {
                tugasValue = $('#tugas').val();
                sejarahsingkatValue = $('#sejarahsingkat').val();
            }

            let formData = new FormData();
            formData.append('logo', $('#logo')[0].files[0]);
            formData.append('favicon', $('#favicon')[0].files[0]);
            formData.append("id", "{{ $site->SiteId }}");
            formData.append("name", $('#name').val());
            formData.append("statusakreditasi", $('#statusakreditasi').val());
            formData.append("jadwalpelayanan", $('#jadwalpelayanan').val());
            formData.append("kodesuratresmi", $('#kodesuratresmi').val());
            formData.append("description", $('#description').val());
            formData.append("visi", $('#summernote-1').summernote('code'));
            formData.append("misi", $('#summernote-2').summernote('code'));
            formData.append("tugas", tugasValue);
            formData.append("sejarahsingkat", sejarahsingkatValue);
            formData.append("alamat", $('#summernote-3').summernote('code'));
            formData.append("kecamatan", $('#kecamatan').val());
            formData.append("kelurahan", $('#kelurahan').val());
            formData.append("email", $('#email').val());
            formData.append("telp", $('#telp').val());
            formData.append("urlmap", $('#urlmap').val());
            formData.append("whatsapp", $('#whatsapp').val());
            formData.append("facebook", $('#facebook').val());
            formData.append("tiktok", $('#tiktok').val());
            formData.append("twitter", $('#twitter').val());
            formData.append("instagram", $('#instagram').val());
            formData.append("youtube", $('#youtube').val());
            formData.append("pic", $('#pic').val());
            formData.append("domain", $('#domain').val());

            $.ajax({
                url: "{{ url('profilesite/_edit_profilesite') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    var responseData = JSON.parse(response);
                    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() {
                            location.reload();
                        });
                    } 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() {
                    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 previewImage(event) {
            var input = event.target;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#account-upload-img').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }


        let isPasswordValidated = false;

        $('#Password').on('keyup', function(event) {
            event.preventDefault();
            let password = $("#Password").val();

            let isLengthValid = password.length >= 8;
            let hasUpperCase = /[A-Z]/.test(password);
            let hasLowerCase = /[a-z]/.test(password);
            let hasSymbol = /[\W_]/.test(password);
            let hasNumber = /\d/.test(password);
            let hasSymbolAndNumber = hasSymbol && hasNumber;

            $('#delapan-karakter').toggleClass('text-success', isLengthValid);
            $('#huruf-besar').toggleClass('text-success', hasUpperCase);
            $('#huruf-kecil').toggleClass('text-success', hasLowerCase);
            $('#simbol-angka').toggleClass('text-success', hasSymbolAndNumber);

            isPasswordValidated = isLengthValid && hasUpperCase && hasLowerCase && hasSymbolAndNumber;
        });

        $('#editPassword').on('click', function(event) {
            let password = $("#Password").val();
            let rePassword = $("#RePassword").val();
            let oldpassword = $("#oldPassword").val();

            if (!oldpassword.trim()) {
                $('#validation-password').hide();
                $('#validation-repassword').hide();

                $('#Password').removeClass('is-invalid').focus();
                $('#RePassword').removeClass('is-invalid').focus();

                $('#validation-oldpassword').show();
                $('#oldPassword').addClass('is-invalid').focus();
                return;
            }

            if (!isPasswordValidated) {
                $('#validation-oldpassword').hide();
                $('#validation-repassword').hide();

                $('#oldPassword').removeClass('is-invalid').focus();
                $('#RePassword').removeClass('is-invalid').focus();

                $('#validation-password').show();
                $('#Password').addClass('is-invalid').focus();
                return;
            }

            if (password !== rePassword) {
                $('#validation-password').hide();
                $('#validation-oldpassword').hide();

                $('#Password').removeClass('is-invalid').focus();
                $('#oldPassword').removeClass('is-invalid').focus();

                $('#validation-repassword').show();
                $('#RePassword').addClass('is-invalid').focus();
                return;
            }

            editPassword();
        });


        $('.btn-submit').on('click', function(event) {
            editProfileSite();
        });

        function addTogglePasswordListener(iconId, inputId) {
            var passwordInput = document.getElementById(inputId);
            var passwordToggleIcon = document.getElementById(iconId);

            passwordToggleIcon.addEventListener('click', function() {
                togglePassword(passwordInput, passwordToggleIcon);
            });
        }

        function togglePassword(passwordInput, passwordToggleIcon) {
            console.log(passwordInput);
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggleIcon.classList.remove('bx-show');
                passwordToggleIcon.classList.add('bx-hide');
            } else {
                passwordInput.type = 'password';
                passwordToggleIcon.classList.remove('bx-hide');
                passwordToggleIcon.classList.add('bx-show');
            }
        }

        addTogglePasswordListener('icon-pass1', 'oldPassword');
        addTogglePasswordListener('icon-pass2',
            'Password');
        addTogglePasswordListener('icon-pass3', 'RePassword');


        $('#favicon').change(function() {
            if ($('#favicon')[0].files[0] != undefined) {
                $('#favicon_name').val($('#favicon')[0].files[0]['name'])
            } else {
                $('#favicon_name').val(``)
            }
        })

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

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