<?php
    echo $this->session->flashdata('message');
    $komisi_sales_aktif = isset($rows['komisi_sales_aktif']) ? (int) $rows['komisi_sales_aktif'] : 1;
    $dropshipper_aktif = isset($rows['dropshipper_aktif']) ? (int) $rows['dropshipper_aktif'] : 1;
?>

<div class="container-fluid app-settings" id="container-wrapper">
    <div class="settings-hero">
        <div class="settings-hero-copy">
            <div class="settings-hero-icon" aria-hidden="true">
                <i class="fa fa-sliders"></i>
            </div>
            <div>
                <ol class="breadcrumb settings-breadcrumb">
                    <li class="breadcrumb-item"><a href="<?=base_url();?>">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?=$title;?></li>
                </ol>
                <h1><?=$title;?></h1>
                <p>Kelola identitas bisnis, invoice, fitur, dan tampilan aplikasi dari satu tempat.</p>
            </div>
        </div>
    </div>

    <?php if (isset($license_state['valid']) && !$license_state['valid']) { ?>
        <div class="alert settings-alert settings-alert-danger" role="alert">
            <span class="settings-alert-icon"><i class="fa fa-exclamation-triangle"></i></span>
            <div>
                <strong>Lisensi aplikasi tidak aktif</strong>
                <p>Nama Perusahaan atau Email tidak sesuai dengan identitas lisensi. Kembalikan data tersebut sesuai lisensi untuk mengaktifkan aplikasi.</p>
            </div>
        </div>
    <?php } ?>

    <form id="simpan_data" method="POST" action="<?=base_url();?>main/info_save" enctype="multipart/form-data">
        <input type="hidden" id="id" name="id" value="1" required>

        <div class="settings-toolbar">
            <div class="settings-toolbar-copy">
                <span class="settings-toolbar-icon"><i class="fa fa-cog"></i></span>
                <div>
                    <strong>Konfigurasi aplikasi</strong>
                    <small>Pastikan informasi sudah benar sebelum menyimpan.</small>
                </div>
            </div>
            <button type="submit" name="submit" class="btn settings-save-btn">
                <i class="fa fa-save" aria-hidden="true"></i>
                <span>Simpan Perubahan</span>
            </button>
        </div>

        <nav class="settings-quick-nav" aria-label="Navigasi pengaturan">
            <a href="#identitas"><i class="fa fa-building-o"></i> Identitas</a>
            <a href="#konten"><i class="fa fa-file-text-o"></i> Konten &amp; Invoice</a>
            <a href="#fitur"><i class="fa fa-toggle-on"></i> Fitur &amp; Akses</a>
            <a href="#tampilan"><i class="fa fa-paint-brush"></i> Tampilan</a>
            <a href="#aset"><i class="fa fa-picture-o"></i> Logo &amp; Aset</a>
        </nav>

        <section class="settings-section" id="identitas">
            <div class="settings-section-head">
                <span class="settings-section-icon"><i class="fa fa-building-o"></i></span>
                <div>
                    <h2>Identitas Bisnis</h2>
                    <p>Informasi utama yang digunakan untuk mengenali bisnis di aplikasi dan dokumen.</p>
                </div>
            </div>
            <div class="settings-section-body">
                <div class="row settings-form-row">
                    <div class="form-group col-lg-4">
                        <label for="judul">Judul Aplikasi <span class="required-mark">*</span></label>
                        <input type="text" class="form-control" id="judul" name="title" value="<?=$rows['title'];?>" required>
                        <small class="form-text text-muted">Nama yang tampil pada judul aplikasi.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="perusahaan">Nama Perusahaan <span class="required-mark">*</span></label>
                        <input type="text" class="form-control" id="perusahaan" name="perusahaan" value="<?=$rows['perusahaan'];?>" required>
                        <small class="form-text text-muted">Gunakan nama resmi sesuai identitas lisensi.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="email">Email Bisnis <span class="required-mark">*</span></label>
                        <input type="email" class="form-control" id="email" name="email" value="<?=$rows['email'];?>" required>
                        <small class="form-text text-muted">Email utama perusahaan dan lisensi.</small>
                    </div>
                </div>
                <div class="row settings-form-row">
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="phone">Nomor Telepon <span class="required-mark">*</span></label>
                        <input type="text" class="form-control" id="phone" name="phone" value="<?=$rows['phone'];?>" required>
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="fb">Facebook <span class="required-mark">*</span></label>
                        <div class="settings-input-icon">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                            <input type="text" class="form-control" id="fb" name="fb" value="<?=$rows['fb'];?>" required>
                        </div>
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="ig">Instagram <span class="required-mark">*</span></label>
                        <div class="settings-input-icon">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                            <input type="text" class="form-control" id="ig" name="ig" value="<?=$rows['ig'];?>" required>
                        </div>
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="keywords">Kota pada Tanggal <span class="required-mark">*</span></label>
                        <input type="text" class="form-control" id="keywords" name="keywords" value="<?=$rows['keywords'];?>" required>
                        <small class="form-text text-muted">Contoh: Bandung.</small>
                    </div>
                </div>
            </div>
        </section>

        <section class="settings-section" id="konten">
            <div class="settings-section-head">
                <span class="settings-section-icon"><i class="fa fa-file-text-o"></i></span>
                <div>
                    <h2>Konten &amp; Invoice</h2>
                    <p>Atur informasi yang muncul di halaman login dan dokumen transaksi.</p>
                </div>
            </div>
            <div class="settings-section-body">
                <div class="form-group">
                    <label for="qris">Kode atau Tautan QRIS</label>
                    <div class="settings-input-icon">
                        <i class="fa fa-qrcode" aria-hidden="true"></i>
                        <input type="text" class="form-control" id="qris" name="qris" value="<?=$rows['kode_qris'];?>" aria-describedby="qrisHelp">
                    </div>
                    <small id="qrisHelp" class="form-text text-muted">Konten ini akan dibuat menjadi QR dan ditampilkan pada invoice cetak.</small>
                </div>

                <div class="row settings-editor-row">
                    <div class="form-group col-xl-4">
                        <div class="settings-editor-label">
                            <label for="deskripsi">Alamat Perusahaan <span class="required-mark">*</span></label>
                            <span>Invoice</span>
                        </div>
                        <textarea class="form-control textarea" id="deskripsi" name="deskripsi" required><?=base64_decode($rows['deskripsi']);?></textarea>
                    </div>
                    <div class="form-group col-xl-4">
                        <div class="settings-editor-label">
                            <label for="ket">Keterangan Login <span class="required-mark">*</span></label>
                            <span>Halaman login</span>
                        </div>
                        <textarea class="form-control textarea" id="ket" name="ket" required><?=base64_decode($rows['ket']);?></textarea>
                    </div>
                    <div class="form-group col-xl-4">
                        <div class="settings-editor-label">
                            <label for="footer">Footer Invoice <span class="required-mark">*</span></label>
                            <span>Invoice</span>
                        </div>
                        <textarea class="form-control textarea" id="footer" name="footer" required><?=base64_decode($rows['footer_invoice']);?></textarea>
                    </div>
                </div>
            </div>
        </section>

        <section class="settings-section" id="fitur">
            <div class="settings-section-head">
                <span class="settings-section-icon"><i class="fa fa-toggle-on"></i></span>
                <div>
                    <h2>Fitur &amp; Akses</h2>
                    <p>Kelola modul yang tersedia dan kredensial integrasi aplikasi.</p>
                </div>
            </div>
            <div class="settings-section-body">
                <div class="row settings-form-row">
                    <div class="form-group col-lg-8">
                        <div class="settings-label-action">
                            <label for="token_api">API Key Aplikasi <span class="required-mark">*</span></label>
                            <a href="javascript:void(0)" class="register_api"><i class="fa fa-external-link"></i> Daftar API</a>
                        </div>
                        <div class="input-group settings-api-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <input type="checkbox" name="checkbox" id="ck_api" aria-label="Izinkan perubahan API key">
                                    <label for="ck_api">Edit</label>
                                </div>
                            </div>
                            <input type="text" class="form-control" id="token_api" name="token_api" value="<?=$api_key;?>" required readonly>
                        </div>
                        <small class="form-text text-muted"><i class="fa fa-lock"></i> API key dikunci untuk mencegah perubahan yang tidak disengaja.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="devtools">Blokir Developer Tools</label>
                        <select class="form-control custom-select" id="devtools" name="devtools">
                            <?php if($rows['dev_tools']==0){?>
                                <option value="0" selected>Tidak Aktif</option>
                                <option value="1">Aktif</option>
                            <?php }else{?>
                                <option value="0">Tidak Aktif</option>
                                <option value="1" selected>Aktif</option>
                            <?php }?>
                        </select>
                        <small class="form-text text-muted">Batasi akses developer tools pada browser.</small>
                    </div>
                </div>
                <div class="row settings-form-row">
                    <div class="form-group col-md-6">
                        <label for="komisi_sales_aktif">Fitur Komisi Desain</label>
                        <select class="form-control custom-select" id="komisi_sales_aktif" name="komisi_sales_aktif">
                            <option value="1" <?=$komisi_sales_aktif === 1 ? 'selected' : '';?>>Aktif</option>
                            <option value="0" <?=$komisi_sales_aktif === 0 ? 'selected' : '';?>>Tidak Aktif</option>
                        </select>
                        <small class="form-text text-muted">Tampilkan perhitungan komisi untuk pekerjaan desain.</small>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dropshipper_aktif">Fitur Dropshipper</label>
                        <select class="form-control custom-select" id="dropshipper_aktif" name="dropshipper_aktif">
                            <option value="1" <?=$dropshipper_aktif === 1 ? 'selected' : '';?>>Aktif</option>
                            <option value="0" <?=$dropshipper_aktif === 0 ? 'selected' : '';?>>Tidak Aktif</option>
                        </select>
                        <small class="form-text text-muted">Tampilkan pengaturan dan transaksi dropshipper.</small>
                    </div>
                </div>
            </div>
        </section>

        <section class="settings-section" id="tampilan">
            <div class="settings-section-head">
                <span class="settings-section-icon"><i class="fa fa-paint-brush"></i></span>
                <div>
                    <h2>Warna &amp; Tampilan</h2>
                    <p>Sesuaikan warna status invoice dan warna utama antarmuka.</p>
                </div>
            </div>
            <div class="settings-section-body">
                <div class="row settings-color-row">
                    <div class="form-group col-lg-4">
                        <label for="warna_lunas">Invoice Lunas</label>
                        <div class="input-group settings-color-input">
                            <div class="input-group-prepend"><button type="button" class="picker" id="picker1" aria-label="Pilih warna invoice lunas"></button></div>
                            <input type="text" class="form-control" id="warna_lunas" name="warna_lunas" value="<?=$rows['warna_lunas'];?>" required>
                        </div>
                        <small class="form-text text-muted">Warna penanda invoice yang sudah lunas.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="warna_blunas">Invoice Belum Lunas</label>
                        <div class="input-group settings-color-input">
                            <div class="input-group-prepend"><button type="button" class="picker picker2" id="picker2" aria-label="Pilih warna invoice belum lunas"></button></div>
                            <input type="text" class="form-control" id="warna_blunas" name="warna_blunas" value="<?=$rows['warna_blunas'];?>" required>
                        </div>
                        <small class="form-text text-muted">Warna penanda invoice yang belum lunas.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="tema">Warna Tema Aplikasi</label>
                        <div class="input-group settings-color-input">
                            <div class="input-group-prepend"><button type="button" class="picker tema" id="picker3" aria-label="Pilih warna tema aplikasi"></button></div>
                            <input type="text" class="form-control" id="tema" name="tema" value="<?=$rows['tema'];?>" required>
                        </div>
                        <small class="form-text text-muted">Warna utama yang digunakan pada antarmuka.</small>
                    </div>
                </div>
            </div>
        </section>

        <section class="settings-section" id="aset">
            <div class="settings-section-head">
                <span class="settings-section-icon"><i class="fa fa-picture-o"></i></span>
                <div>
                    <h2>Logo &amp; Aset Visual</h2>
                    <p>Unggah identitas visual untuk aplikasi dan invoice. Klik pratinjau untuk memperbesar gambar.</p>
                </div>
            </div>
            <div class="settings-section-body">
                <div class="row settings-upload-row">
                    <div class="form-group col-lg-4">
                        <label for="logo">Logo Lunas</label>
                        <div class="settings-upload-control">
                            <button class="settings-asset-preview" type="button">
                                <img class="imglogo" data-id="1" id="imglogo1" src="<?=base_url();?>uploads/<?=$rows['logo'];?>" alt="Pratinjau logo lunas">
                            </button>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="logo" name="logo" accept="image/*">
                                <label class="custom-file-label" for="logo">Pilih logo</label>
                            </div>
                        </div>
                        <small id="logoHelp" class="form-text text-muted">Rekomendasi ukuran 700 × 164 piksel.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="logo_bw">Logo Belum Lunas</label>
                        <div class="settings-upload-control">
                            <button class="settings-asset-preview" type="button">
                                <img class="imglogo" data-id="2" id="imglogo2" src="<?=base_url();?>uploads/<?=$rows['logo_bw'];?>" alt="Pratinjau logo belum lunas">
                            </button>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="logo_bw" name="logo_bw" accept="image/*">
                                <label class="custom-file-label" for="logo_bw">Pilih logo</label>
                            </div>
                        </div>
                        <small id="logoBwHelp" class="form-text text-muted">Rekomendasi ukuran 700 × 164 piksel.</small>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="icon">Ikon Aplikasi</label>
                        <div class="settings-upload-control">
                            <button class="settings-asset-preview" type="button">
                                <img class="imglogo" data-id="3" src="<?=base_url();?>uploads/<?=$rows['favicon'];?>" alt="Pratinjau ikon aplikasi">
                            </button>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="icon" name="icon" accept="image/*">
                                <label class="custom-file-label" for="icon">Pilih ikon</label>
                            </div>
                        </div>
                        <small id="iconHelp" class="form-text text-muted">Rekomendasi ukuran 32 × 32 piksel.</small>
                    </div>
                </div>
                <div class="row settings-upload-row">
                    <div class="form-group col-lg-6">
                        <label for="lunas">Stempel Lunas</label>
                        <div class="settings-upload-control">
                            <button class="settings-asset-preview" type="button">
                                <img class="imglogo" data-id="4" src="<?=base_url();?>uploads/<?=$rows['stamp_l'];?>" alt="Pratinjau stempel lunas">
                            </button>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="lunas" name="lunas" accept="image/*">
                                <label class="custom-file-label" for="lunas">Pilih stempel lunas</label>
                            </div>
                        </div>
                        <small id="stampLunasHelp" class="form-text text-muted">Rekomendasi ukuran 300 × 100 piksel.</small>
                    </div>
                    <div class="form-group col-lg-6">
                        <label for="blunas">Stempel Belum Lunas</label>
                        <div class="settings-upload-control">
                            <button class="settings-asset-preview" type="button">
                                <img class="imglogo" data-id="5" src="<?=base_url();?>uploads/<?=$rows['stamp_b'];?>" alt="Pratinjau stempel belum lunas">
                            </button>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="blunas" name="blunas" accept="image/*">
                                <label class="custom-file-label" for="blunas">Pilih stempel belum lunas</label>
                            </div>
                        </div>
                        <small id="stampBelumLunasHelp" class="form-text text-muted">Rekomendasi ukuran 300 × 100 piksel.</small>
                    </div>
                </div>
            </div>
        </section>

        <div class="settings-footer-actions">
            <div>
                <strong>Selesai mengatur aplikasi?</strong>
                <span>Simpan agar seluruh perubahan diterapkan.</span>
            </div>
            <button type="submit" name="submit" class="btn settings-save-btn simpan_info">
                <i class="fa fa-save" aria-hidden="true"></i>
                <span>Simpan Perubahan</span>
            </button>
        </div>
    </form>
</div>

<div id="myModals" class="modals" role="dialog" aria-modal="true" aria-label="Pratinjau gambar">
    <button type="button" class="closes" aria-label="Tutup pratinjau">&times;</button>
    <img class="modal-contents" id="viewimglogo" alt="Pratinjau aset visual">
    <div id="caption"></div>
</div>

<style>
    .app-settings {
        --settings-primary: #4f46e5;
        --settings-primary-dark: #4338ca;
        --settings-primary-soft: #eef2ff;
        --settings-text: #172033;
        --settings-muted: #667085;
        --settings-border: #e4e7ec;
        --settings-surface: #ffffff;
        --settings-page: #f7f8fb;
        padding-bottom: 42px;
        color: var(--settings-text);
    }

    .app-settings::before {
        content: "";
        position: fixed;
        inset: 0 0 0 0;
        z-index: -1;
        background: var(--settings-page);
        pointer-events: none;
    }

    .settings-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 25px 0 21px;
    }

    .settings-hero-copy {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .settings-hero-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border: 1px solid #dfe3ff;
        border-radius: 14px;
        background: linear-gradient(145deg, #ffffff, var(--settings-primary-soft));
        color: var(--settings-primary);
        font-size: 20px;
        box-shadow: 0 7px 18px rgba(79, 70, 229, .09);
    }

    .settings-hero h1 {
        margin: 2px 0 4px;
        color: var(--settings-text);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -.35px;
    }

    .settings-hero p {
        margin: 0;
        color: var(--settings-muted);
        font-size: 14px;
    }

    .settings-breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: 11px;
        font-weight: 600;
    }

    .settings-breadcrumb a { color: var(--settings-primary); }
    .settings-breadcrumb .active { color: #98a2b3; }

    .settings-alert {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        margin-bottom: 18px;
        padding: 15px 18px;
        border: 1px solid;
        border-radius: 12px;
    }

    .settings-alert-danger {
        border-color: #fecdca;
        background: #fffbfa;
        color: #912018;
    }

    .settings-alert-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 50%;
        background: #fee4e2;
    }

    .settings-alert strong { display: block; margin: 0 0 2px; font-size: 14px; }
    .settings-alert p { margin: 0; font-size: 13px; line-height: 1.5; }

    .settings-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 14px;
        padding: 15px 17px;
        border: 1px solid var(--settings-border);
        border-radius: 13px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 5px 20px rgba(16, 24, 40, .045);
    }

    .settings-toolbar-copy {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .settings-toolbar-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 10px;
        background: var(--settings-primary-soft);
        color: var(--settings-primary);
    }

    .settings-toolbar strong { display: block; color: #344054; font-size: 13px; }
    .settings-toolbar small { display: block; margin-top: 1px; color: var(--settings-muted); font-size: 12px; }

    .settings-save-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 9px 17px;
        border: 1px solid var(--settings-primary);
        border-radius: 9px;
        background: var(--settings-primary);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(79, 70, 229, .2);
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .settings-save-btn:hover,
    .settings-save-btn:focus {
        transform: translateY(-1px);
        border-color: var(--settings-primary-dark);
        background: var(--settings-primary-dark);
        color: #fff;
        box-shadow: 0 7px 15px rgba(79, 70, 229, .25);
    }

    .settings-quick-nav {
        display: flex;
        gap: 8px;
        margin: 0 0 18px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .settings-quick-nav a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        padding: 7px 11px;
        border: 1px solid var(--settings-border);
        border-radius: 8px;
        background: #fff;
        color: #475467;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: color .15s ease, border-color .15s ease, background .15s ease;
    }

    .settings-quick-nav a:hover,
    .settings-quick-nav a:focus {
        border-color: #c7d2fe;
        background: var(--settings-primary-soft);
        color: var(--settings-primary);
    }

    .settings-section {
        scroll-margin-top: 18px;
        margin-bottom: 18px;
        overflow: hidden;
        border: 1px solid var(--settings-border);
        border-radius: 14px;
        background: var(--settings-surface);
        box-shadow: 0 7px 23px rgba(16, 24, 40, .045);
    }

    .settings-section-head {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px 21px;
        border-bottom: 1px solid #eef0f3;
        background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    }

    .settings-section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        background: var(--settings-primary-soft);
        color: var(--settings-primary);
        font-size: 15px;
    }

    .settings-section-head h2 {
        margin: 0 0 3px;
        color: #26324a;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.1px;
    }

    .settings-section-head p {
        margin: 0;
        color: var(--settings-muted);
        font-size: 12.5px;
        line-height: 1.45;
    }

    .settings-section-body { padding: 21px; }
    .settings-section-body .form-group { margin-bottom: 19px; }
    .settings-section-body .row:last-child .form-group { margin-bottom: 0; }

    .app-settings label {
        margin-bottom: 7px;
        color: #344054;
        font-size: 12.5px;
        font-weight: 600;
    }

    .required-mark { color: #d92d20; }

    .app-settings .form-control,
    .app-settings .custom-select {
        height: 43px;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background-color: #fff;
        color: #344054;
        font-size: 13px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .app-settings .form-control:focus,
    .app-settings .custom-select:focus {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, .11);
    }

    .app-settings .form-control[readonly] {
        border-color: #e4e7ec;
        background: #f8fafc;
        color: #667085;
    }

    .app-settings .form-text {
        margin-top: 6px;
        color: #7b8494 !important;
        font-size: 11.5px;
        line-height: 1.4;
    }

    .settings-input-icon { position: relative; }
    .settings-input-icon > i {
        position: absolute;
        top: 50%;
        left: 14px;
        z-index: 2;
        transform: translateY(-50%);
        color: #98a2b3;
        font-size: 13px;
        pointer-events: none;
    }
    .settings-input-icon .form-control { padding-left: 39px; }

    .settings-editor-row { margin-top: 22px; }
    .settings-editor-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .settings-editor-label > span {
        margin-bottom: 7px;
        padding: 3px 7px;
        border-radius: 5px;
        background: #f2f4f7;
        color: #667085;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .35px;
    }

    .app-settings .trumbowyg-box,
    .app-settings .trumbowyg-editor {
        min-height: 135px !important;
    }

    .app-settings .trumbowyg-box {
        margin: 0;
        overflow: hidden;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background: #fff;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .app-settings .trumbowyg-box:focus-within {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, .11);
    }

    .app-settings .trumbowyg-button-pane {
        border-bottom-color: #e4e7ec;
        background: #f8fafc;
    }

    .app-settings .trumbowyg-editor {
        padding: 16px;
        color: #344054;
        font-size: 13px;
        line-height: 1.65;
    }

    .settings-label-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .settings-label-action a {
        margin-bottom: 7px;
        color: var(--settings-primary);
        font-size: 11.5px;
        font-weight: 600;
    }

    .settings-api-group .input-group-text {
        gap: 7px;
        height: 43px;
        padding: 0 12px;
        border-color: #d0d5dd;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
    }

    .settings-api-group .input-group-text label {
        margin: 0;
        color: #475467;
        font-size: 11px;
        cursor: pointer;
    }

    .settings-api-group .input-group-text input { margin: 0; }
    .settings-api-group .form-control { border-radius: 0 8px 8px 0; }

    .settings-color-input .picker {
        width: 44px;
        height: 43px;
        padding: 0;
        cursor: pointer;
        border: 1px solid #d0d5dd;
        border-right: 0;
        border-radius: 8px 0 0 8px;
        box-shadow: inset 0 0 0 5px #fff;
    }
    .settings-color-input .form-control { border-radius: 0 8px 8px 0; }

    .settings-upload-row + .settings-upload-row {
        margin-top: 9px;
        padding-top: 21px;
        border-top: 1px solid #eef0f3;
    }

    .settings-upload-control {
        display: flex;
        align-items: stretch;
    }

    .settings-asset-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 61px;
        min-width: 61px;
        height: 43px;
        padding: 6px;
        overflow: hidden;
        border: 1px solid #d0d5dd;
        border-right: 0;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
        cursor: zoom-in;
    }

    .settings-asset-preview img {
        display: block;
        max-width: 100%;
        max-height: 29px;
        object-fit: contain;
    }

    .settings-upload-control .custom-file { height: 43px; }
    .settings-upload-control .custom-file-input { height: 43px; }
    .settings-upload-control .custom-file-label {
        height: 43px;
        margin: 0;
        padding: 11px 98px 10px 13px;
        overflow: hidden;
        border-color: #d0d5dd;
        border-radius: 0 8px 8px 0;
        color: #667085;
        font-size: 12px;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .settings-upload-control .custom-file-label::after {
        height: 41px;
        padding: 11px 13px;
        border-left-color: #e4e7ec;
        border-radius: 0 7px 7px 0;
        background: #f8fafc;
        color: #475467;
        content: "Pilih file";
        font-size: 11px;
        font-weight: 600;
    }

    .settings-footer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 20px;
        border: 1px solid #dfe3ff;
        border-radius: 13px;
        background: linear-gradient(120deg, #f7f8ff 0%, #ffffff 70%);
    }

    .settings-footer-actions strong { display: block; color: #344054; font-size: 13px; }
    .settings-footer-actions span { color: var(--settings-muted); font-size: 12px; }

    .modals {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1055;
        padding: 72px 24px 24px;
        overflow: auto;
        background: rgba(16, 24, 40, .78);
        backdrop-filter: blur(4px);
    }

    .modal-contents {
        display: block;
        width: auto;
        max-width: min(820px, 90vw);
        max-height: 76vh;
        margin: 0 auto;
        padding: 18px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 24px 48px rgba(0, 0, 0, .24);
        object-fit: contain;
        animation: settingsZoom .22s ease-out;
    }

    #caption {
        max-width: 820px;
        margin: 12px auto 0;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }

    .closes {
        position: fixed;
        top: 22px;
        right: 28px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-size: 29px;
        line-height: 35px;
        cursor: pointer;
        transition: background .15s ease;
    }

    .closes:hover,
    .closes:focus { background: rgba(255, 255, 255, .23); outline: none; }

    @keyframes settingsZoom {
        from { opacity: 0; transform: scale(.96); }
        to { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 1199.98px) {
        .settings-editor-row .form-group + .form-group { margin-top: 7px; }
    }

    @media (max-width: 767.98px) {
        .app-settings { padding-left: 13px; padding-right: 13px; }
        .settings-hero { padding: 19px 0 16px; }
        .settings-hero-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
        .settings-hero h1 { font-size: 21px; }
        .settings-hero p { font-size: 12px; line-height: 1.45; }
        .settings-toolbar { align-items: stretch; flex-direction: column; }
        .settings-toolbar .settings-save-btn { width: 100%; }
        .settings-section-head, .settings-section-body { padding: 16px; }
        .settings-section-head { align-items: flex-start; }
        .settings-section-body .row:last-child .form-group:not(:last-child) { margin-bottom: 19px; }
        .settings-footer-actions { align-items: stretch; flex-direction: column; }
        .settings-footer-actions .settings-save-btn { width: 100%; }
        .settings-upload-row + .settings-upload-row { margin-top: 0; padding-top: 0; border-top: 0; }
    }

    @media (max-width: 430px) {
        .settings-hero-copy { align-items: flex-start; gap: 12px; }
        .settings-quick-nav { margin-left: -13px; margin-right: -13px; padding: 0 13px 5px; }
        .settings-upload-control { display: block; }
        .settings-asset-preview { width: 100%; height: 64px; border-right: 1px solid #d0d5dd; border-bottom: 0; border-radius: 8px 8px 0 0; }
        .settings-asset-preview img { max-height: 48px; }
        .settings-upload-control .custom-file-label { border-radius: 0 0 8px 8px; }
        .settings-upload-control .custom-file-label::after { border-radius: 0 0 7px 0; }
    }
</style>

<script src="<?= base_url('assets/'); ?>vendor/colorpick/colorPick.js"></script>
<script>
    $('#token_api').on('input', function() {
        var input = $(this);
        if (input.val()) {
            input.removeClass('invalid').addClass('valid');
        } else {
            input.removeClass('valid').addClass('invalid');
        }
    });

    $('#ck_api').change(function() {
        $('#token_api').attr('readonly', !this.checked);
        if (this.checked) {
            $('#token_api').focus();
        }
    });

    $('#token_api').change(function() {
        var result = $('#token_api').val().replace(/[ ]+/g, '');
        $('#token_api').val(result);
    });

    setInterval(function() {
        $('body').loading('stop');
    }, 1000);

    var modal = document.getElementById('myModals');
    var modalImg = document.getElementById('viewimglogo');
    var captionText = document.getElementById('caption');

    $('.imglogo').click(function() {
        modal.style.display = 'block';
        modalImg.src = this.src;
        captionText.textContent = this.alt;
        document.body.style.overflow = 'hidden';
    });

    function closeAssetPreview() {
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }

    $('.closes').on('click', closeAssetPreview);
    $('#myModals').on('click', function(event) {
        if (event.target === this) {
            closeAssetPreview();
        }
    });
    $(document).on('keydown', function(event) {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            closeAssetPreview();
        }
    });

    $('.custom-file-input').on('change', function() {
        var fileName = this.files && this.files.length ? this.files[0].name : 'Pilih file';
        $(this).next('.custom-file-label').text(fileName);
    });

    $(document).ready(function() {
        var warna = "<?=$rows['warna_lunas'];?>";
        $('.picker').css('background-color', warna);
        $('#warna_lunas').val(warna);

        var warna2 = "<?=$rows['warna_blunas'];?>";
        $('#warna_blunas').val(warna2);
        $('.picker2').css('background-color', warna2);

        var warna3 = "<?=$rows['tema'];?>";
        $('#tema').val(warna3);
        $('.tema').css('background-color', warna3);

        $('.textarea').trumbowyg({
            btns: [
                ['viewHTML', 'link'],
                ['undo', 'redo'],
                ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                ['unorderedList', 'orderedList']
            ]
        });
    });

    var paletWarnaProfesional = [
        '#FFFFFF', '#F8FAFC', '#F1F5F9', '#E2E8F0', '#CBD5E1',
        '#94A3B8', '#7F8C8D', '#64748B', '#475569', '#444444',
        '#34495E', '#334155', '#2C3E50', '#1E293B', '#0F172A', '#000000',
        '#93C5FD', '#3498DB', '#2980B9', '#2563EB', '#124FA8', '#1D4ED8',
        '#06B6D4', '#0891B2', '#1ABC9C', '#16A085', '#14B8A6', '#0F766E',
        '#2ECC71', '#27AE60', '#059669', '#15803D',
        '#F1C40F', '#F59E0B', '#F39C12', '#E67E22', '#EA580C', '#D35400', '#92400E',
        '#E74C3C', '#ED3237', '#DC2626', '#C0392B', '#E11D48', '#DB2777',
        '#A855F7', '#9B59B6', '#8E44AD', '#7C3AED', '#4F46E5'
    ];

    $('#picker1').colorPick({
        initialColor: '#8e44ad',
        palette: paletWarnaProfesional,
        onColorSelected: function() {
            $('#warna_lunas').val(this.color);
            this.element.css({'backgroundColor': this.color, 'color': this.color});
        }
    });

    $('#picker2').colorPick({
        initialColor: '#8e44ad',
        palette: paletWarnaProfesional,
        onColorSelected: function() {
            $('#warna_blunas').val(this.color);
            this.element.css({'backgroundColor': this.color, 'color': this.color});
        }
    });

    $('#picker3').colorPick({
        initialColor: '#8e44ad',
        palette: paletWarnaProfesional,
        onColorSelected: function() {
            $('#tema').val(this.color);
            this.element.css({'backgroundColor': this.color, 'color': this.color});
        }
    });

    $(document).on('click', '.register_api', function() {
        window.open('https://pospercetakan.my.id/daftar', '_blank');
    });
</script>
