<div class="container-fluid" id="container-wrapper">
    <div class="settings-page-heading d-sm-flex align-items-center justify-content-between">
        <div>
            <span class="settings-eyebrow">Konfigurasi sistem</span>
            <h1 class="h3 mb-1 text-gray-800"><?=$title;?></h1>
            <p class="settings-subtitle mb-0">Kelola identitas, transaksi, tampilan, dan aset aplikasi dari satu tempat.</p>
        </div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"><?=$title;?></li>
		</ol>
	</div>
    <?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;
		$komisi_penjualan_aktif = isset($rows['komisi_penjualan_aktif']) ? (int) $rows['komisi_penjualan_aktif'] : 0;
		$trx_prefix = !empty($rows['trx_prefix']) ? $rows['trx_prefix'] : 'TRX';
		$trx_digits = isset($rows['trx_digits']) ? (int) $rows['trx_digits'] : 5;
		$gambar_item_aktif = isset($rows['gambar_item_aktif']) ? (int) $rows['gambar_item_aktif'] : 1;
		$timezone = isset($rows['timezone']) ? $rows['timezone'] : 'Asia/Jakarta';
	?>
    <?php if (isset($license_state['valid']) && !$license_state['valid']) { ?>
        <div class="alert alert-danger">
            <strong>License aplikasi nonaktif.</strong>
            Nama Perusahaan atau Email tidak sesuai dengan identitas license. Kembalikan data tersebut sesuai license untuk mengaktifkan aplikasi.
        </div>
    <?php } ?>
    <div class="row">
        <div class="col-md-12">
            <!-- Form Basic -->
            
                <form id="simpan_data" method="POST" action="<?=base_url();?>main/info_save" enctype="multipart/form-data" >
                    <div class="card-body">
                        <div class="settings-toolbar d-flex flex-row align-items-center justify-content-between">
                            <div>
                                <h6 class="m-0 font-weight-bold text-gray-800">Konfigurasi utama</h6>
                                <small id="settings-status" class="text-muted">Semua perubahan tersimpan</small>
                            </div>
                            <button type="submit" name="submit" class="btn btn-primary settings-save">
                                <i class="fa fa-save mr-2"></i>Simpan perubahan
                            </button>
						</div>

                        <section class="settings-section" id="identitas">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-building-o"></i></span>
                                <div><h2>Identitas & informasi</h2><p>Informasi utama yang tampil pada aplikasi, login, dan invoice.</p></div>
                            </div>
                        <div class="form-group row">
							<div class="col-md-4">
								<label for="judul">Title</label>
								<input type="hidden" class="form-control" id="id" name="id" value="1" required>
								<input type="text" class="form-control" id="judul" name="title" value="<?=$rows['title'];?>" required>
							</div>
							<div class="col-md-4">
								<label for="judul">Nama Perusahaan</label>
								<input type="text" class="form-control" id="perusahaan" name="perusahaan" value="<?=$rows['perusahaan'];?>" required>
							</div>
							<div class="col-md-4">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email" value="<?=$rows['email'];?>" required>
							</div>
						</div>
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="qris">Kode QRIS</label>
								<input type="text" class="form-control" id="qris" name="qris" value="<?=$rows['kode_qris'];?>" placeholder="Kosongkan untuk menampilkan link tracking pesanan pada struk">
								<small id="qrisHelp" class="form-text text-muted">Isi untuk menampilkan QRIS, atau kosongkan agar QR link tracking pesanan tampil pada invoice dan struk.</small>
							</div>
							
						</div>
						<div class="row">
                            <div class="form-group col-md-4">
                                <label for="deskripsi">Alamat</label>
                                <textarea class="form-control textarea" id="deskripsi" name="deskripsi"  required><?=base64_decode($rows['deskripsi']);?></textarea>
							</div>
                            <div class="form-group col-md-4">
                                <label for="ket">Keterangan Login</label>
                                <textarea class="form-control textarea" id="ket" name="ket" required><?=base64_decode($rows['ket']);?></textarea>
							</div>
                            <div class="form-group col-md-4">
                                <label for="footer">Footer Invoice</label>
                                <textarea class="form-control textarea" id="footer" name="footer" required><?=base64_decode($rows['footer_invoice']);?></textarea>
							</div>
						</div>
                        <div class="row">
                            
                            <div class="form-group col-md-4">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control" id="phone" name="phone" value="<?=$rows['phone'];?>" required>
							</div>
							<div class="form-group col-md-4">
                                <label for="token">API KEY APLIKASI <a href="javascript:void(0)" class="register_API">DAFTAR</a></label>
								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<div class="input-group-text">
											<input type="checkbox" name="checkbox" id="ck_api" aria-label="Checkbox for following text input">
										</div>
									</div>
									<input type="text" class="form-control" id="token_api" name="token_api" value="<?=$api_key;?>" required readonly>
								</div>
							</div>
							<div class="form-group col-md-4">
                                <label for="tema">Dev Tools Blok</label>
								<select class="form-control custom-select" 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>
							</div>
						</div>
                        </section>

                        <section class="settings-section" id="transaksi">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-file-text-o"></i></span>
                                <div><h2>Transaksi & fitur</h2><p>Atur format nomor transaksi dan fitur operasional yang digunakan.</p></div>
                            </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="trx_prefix">Prefix Nomor Transaksi</label>
                                <input type="text" class="form-control text-uppercase" id="trx_prefix" name="trx_prefix" maxlength="20" pattern="[A-Za-z0-9]+" value="<?=html_escape($trx_prefix);?>" required>
                                <small class="form-text text-muted">Gunakan huruf atau angka tanpa tanda penghubung. Contoh: TRX.</small>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="trx_digits">Jumlah Digit Nomor Transaksi</label>
                                <input type="number" class="form-control" id="trx_digits" name="trx_digits" min="1" max="12" value="<?=$trx_digits;?>" required>
                                <small class="form-text text-muted">Contoh prefix TRX dan 5 digit menghasilkan TRX-00001.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="komisi_sales_aktif">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>
							</div>
                            <div class="form-group col-md-4">
                                <label for="dropshipper_aktif">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>
							</div>
							<div class="form-group col-md-4">
								<label for="komisi_penjualan_aktif">Komisi Penjualan</label>
								<select class="form-control custom-select" id="komisi_penjualan_aktif" name="komisi_penjualan_aktif">
									<option value="1" <?=$komisi_penjualan_aktif === 1 ? 'selected' : '';?>>Aktif</option>
									<option value="0" <?=$komisi_penjualan_aktif === 0 ? 'selected' : '';?>>Tidak Aktif</option>
								</select>
							</div>
						</div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="gambar_item_aktif">Gambar Item Produk / Bahan</label>
								<select class="form-control custom-select" id="gambar_item_aktif" name="gambar_item_aktif">
									<option value="1" <?=$gambar_item_aktif === 1 ? 'selected' : '';?>>Aktif</option>
									<option value="0" <?=$gambar_item_aktif === 0 ? 'selected' : '';?>>Tidak Aktif</option>
								</select>
                                <small class="form-text text-muted">Mengatur tampilan dan pengelolaan foto produk/bahan di seluruh aplikasi.</small>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-4">
								<label for="chat_aktif">Chat Antar Pengguna</label>
								<select class="form-control custom-select" id="chat_aktif" name="chat_aktif">
									<option value="1" <?=(int)$rows['chat_aktif'] === 1 ? 'selected' : '';?>>Aktif</option>
									<option value="0" <?=(int)$rows['chat_aktif'] === 0 ? 'selected' : '';?>>Tidak Aktif</option>
								</select>
								<small class="form-text text-muted">Jika dinonaktifkan, ikon, badge, panel, notifikasi, polling, dan endpoint chat tidak dapat digunakan.</small>
							</div>
							<div class="form-group col-md-4 chat-sound-setting">
								<label for="chat_suara">Suara Notifikasi Chat</label>
								<div class="input-group">
									<select class="form-control custom-select" id="chat_suara" name="chat_suara">
										<option value="classic" <?=$rows['chat_suara'] === 'classic' ? 'selected' : '';?>>Klasik</option>
										<option value="soft" <?=$rows['chat_suara'] === 'soft' ? 'selected' : '';?>>Lembut</option>
										<option value="double" <?=$rows['chat_suara'] === 'double' ? 'selected' : '';?>>Dua Nada</option>
										<option value="silent" <?=$rows['chat_suara'] === 'silent' ? 'selected' : '';?>>Tanpa Suara</option>
									</select>
									<div class="input-group-append"><button type="button" class="btn btn-outline-primary" id="preview-chat-sound" title="Dengarkan suara"><i class="fa fa-volume-up"></i></button></div>
								</div>
								<small class="form-text text-muted">Pilih suara yang diputar saat pesan baru diterima.</small>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-12">
								<label for="timezone"><i class="fa fa-clock-o mr-1"></i> Pilihan Zona Waktu (Timezone)</label>
								<select class="form-control custom-select" id="timezone" name="timezone" required>
									<option value="Asia/Jakarta" <?=$timezone === 'Asia/Jakarta' ? 'selected' : '';?>>WIB - Waktu Indonesia Barat (UTC+07:00 / Asia/Jakarta)</option>
									<option value="Asia/Makassar" <?=$timezone === 'Asia/Makassar' ? 'selected' : '';?>>WITA - Waktu Indonesia Tengah (UTC+08:00 / Asia/Makassar)</option>
									<option value="Asia/Jayapura" <?=$timezone === 'Asia/Jayapura' ? 'selected' : '';?>>WIT - Waktu Indonesia Timur (UTC+09:00 / Asia/Jayapura)</option>
									<option value="UTC" <?=$timezone === 'UTC' ? 'selected' : '';?>>UTC - Coordinated Universal Time (UTC+00:00)</option>
								</select>
							</div>
						</div>
                        </section>

                        <section class="settings-section" id="status-pekerjaan">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-tasks"></i></span>
                                <div><h2>Status pekerjaan</h2><p>Kelola pilihan status yang tampil pada halaman operator dan monitor produksi beserta warnanya.</p></div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm status-settings-table">
                                    <thead><tr><th style="width:80px">Urutan</th><th>Nama status</th><th style="width:150px">Warna</th><th style="width:140px">Pilihan</th><th style="width:70px"></th></tr></thead>
                                    <tbody id="job-status-rows">
                                    <?php foreach ($job_statuses as $index => $job_status): ?>
                                        <tr class="job-status-row">
                                            <td><span class="status-drag"><i class="fa fa-bars"></i></span><input type="hidden" name="job_statuses[<?=$index;?>][code]" value="<?=(int)$job_status['code'];?>"><input type="hidden" name="job_statuses[<?=$index;?>][icon]" value="<?=html_escape($job_status['icon']);?>"></td>
                                            <td><input type="text" class="form-control status-label" name="job_statuses[<?=$index;?>][label]" maxlength="40" value="<?=html_escape($job_status['label']);?>" required></td>
                                            <td><div class="status-color-wrap"><input type="color" class="status-color-picker" value="<?=html_escape($job_status['color']);?>"><input type="text" class="form-control status-color" name="job_statuses[<?=$index;?>][color]" value="<?=html_escape($job_status['color']);?>" pattern="#[0-9A-Fa-f]{6}" required></div></td>
                                            <td><select class="form-control custom-select" name="job_statuses[<?=$index;?>][active]"><option value="1" <?=!empty($job_status['active'])?'selected':'';?>>Aktif</option><option value="0" <?=empty($job_status['active'])?'selected':'';?>>Tidak aktif</option></select></td>
                                            <td><?php if ((int)$job_status['code'] !== 0): ?><button type="button" class="btn btn-sm btn-outline-danger remove-job-status" title="Hapus status"><i class="fa fa-trash"></i></button><?php endif; ?></td>
                                        </tr>
                                    <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="add-job-status"><i class="fa fa-plus mr-1"></i>Tambah status</button>
                            <small class="form-text text-muted">Status tidak aktif atau dihapus tidak lagi muncul dalam pilihan baru. Data pekerjaan lama tetap menampilkan nama status terakhir yang tersimpan.</small>
                        </section>

                        <section class="settings-section" id="kanal">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-share-alt"></i></span>
                                <div><h2>Kanal & informasi tambahan</h2><p>Hubungkan kanal sosial dan informasi pelengkap perusahaan.</p></div>
                            </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="fb">Facebook</label>
                                <input type="text" class="form-control" id="fb" name="fb" value="<?=$rows['fb'];?>" required>
							</div>
							<div class="form-group col-md-4">
                                <label for="ig">Instagram</label>
                                <input type="text" class="form-control" id="ig" name="ig" value="<?=$rows['ig'];?>" required>
							</div> 
                            <div class="form-group col-md-4">
                                <label for="keywords">Alamat tanggal</label>
                                <input type="text" class="form-control" id="keywords" name="keywords" value="<?=$rows['keywords'];?>" required>
							</div>
						</div>
                        </section>

                        <section class="settings-section" id="tampilan">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-paint-brush"></i></span>
                                <div><h2>Warna & tampilan</h2><p>Sesuaikan warna status invoice dan tema antarmuka.</p></div>
                            </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="warna_lunas">Warna Invoice Lunas</label>
                                <div class="input-group">
                                    <span class="input-group-btn input-group-prepend"><span class="picker" id="picker1"></span></span>
                                    <input type="text" class="form-control" id="warna_lunas" name="warna_lunas" value="<?=$rows['warna_lunas'];?>" required>
								</div>
							</div>
                            <div class="form-group col-md-4">
                                <label for="warna_blunas">Warna Invoice Belum Lunas</label>
                                <div class="input-group">
                                    <span class="input-group-btn input-group-prepend"><span class="picker picker2" id="picker2"></span></span>
                                    <input type="text" class="form-control" id="warna_blunas" name="warna_blunas" value="<?=$rows['warna_blunas'];?>" required>
								</div>
							</div>
                            <div class="form-group col-md-4">
                                <label for="tema">Warna Tema</label>
                                <div class="input-group">
                                    <span class="input-group-btn input-group-prepend"><span class="picker tema" id="picker3"></span></span>
                                    <input type="text" class="form-control" id="tema" name="tema" value="<?=$rows['tema'];?>" required>
								</div>
							</div>
							
						</div>
                        </section>

                        <section class="settings-section" id="aset">
                            <div class="section-heading">
                                <span class="section-icon"><i class="fa fa-picture-o"></i></span>
                                <div><h2>Logo & aset cetak</h2><p>Kelola logo, ikon, serta stempel untuk invoice dan struk.</p></div>
                            </div>
						<div class="row">
							<div class="form-group col-md-4">
								<label for="logo">Logo Lunas</label>
								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
											<img class="imglogo" data-id="1" id="imglogo1" src="<?=base_url();?>uploads/<?=$rows['logo'];?>" height="20" alt="" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="logo" name="logo">
										<label class="custom-file-label" for="logo">Pilih logo</label>
									</div>
								</div>
								<small id="logoHelp" class="form-text text-muted">size 700x164 pixel</small>
							</div>
							<div class="form-group col-md-4">
								<label for="logo_bw">Logo Belum Lunas</label>
								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
											<img class="imglogo" data-id="2" id="imglogo2" src="<?=base_url();?>uploads/<?=$rows['logo_bw'];?>" height="20" alt="" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="logo_bw" name="logo_bw">
										<label class="custom-file-label" for="logo_bw">Pilih logo</label>
									</div>
								</div>
								<small id="logoHelp" class="form-text text-muted">size 700x164 pixel</small>
							</div>
							<div class="form-group col-md-4">
								<label for="icon">Icon</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
											<img src="<?=base_url();?>uploads/<?=$rows['favicon'];?>" height="20" alt="" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="icon" name="icon">
										<label class="custom-file-label" for="icon">Pilih icon</label>
									</div>
								</div>
								<small id="iconHelp" class="form-text text-muted">size 32x32 pixel</small>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-4">
								<label for="logo_struk_thermal">Logo Struk Thermal</label>
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button">
											<img class="imglogo" data-id="5" id="img-logo-struk-thermal"
												src="<?=base_url();?>uploads/logo%20struk.png?v=<?=is_file(FCPATH.'uploads/logo struk.png') ? filemtime(FCPATH.'uploads/logo struk.png') : time();?>"
												height="20" alt="Logo Struk Thermal" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="logo_struk_thermal"
											name="logo_struk_thermal" accept="image/png,image/jpeg,image/webp,image/gif">
										<label class="custom-file-label" for="logo_struk_thermal">Pilih logo struk</label>
									</div>
								</div>
								<small class="form-text text-muted">Otomatis dikonversi menjadi PNG hitam-putih, maksimal 250 x 120 piksel.</small>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-6">
								<label for="lunas">Stamp Lunas</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
											<img class="imglogo" src="<?=base_url();?>uploads/<?=$rows['stamp_l'];?>" height="20" alt="" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="lunas" name="lunas">
										<label class="custom-file-label" for="lunas">Pilih Stamp LUNAS</label>
									</div>
								</div>
								<small id="logoHelp" class="form-text text-muted">size 300x100 pixel</small>
							</div>
							<div class="form-group col-md-6">
								<label for="blunas">Stamp Lunas</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
											<img class="imglogo" src="<?=base_url();?>uploads/<?=$rows['stamp_b'];?>" height="20" alt="" />
										</button>
									</div>
									<div class="custom-file">
										<input type="file" class="custom-file-input" id="blunas" name="blunas">
										<label class="custom-file-label" for="blunas">Pilih Stamp Belum Lunas</label>
									</div>
								</div>
								<small id="iconHelp" class="form-text text-muted">size 300x100 pixel</small>
							</div>
						</div>
                        </section>
						<div class="settings-footer">
                            <div>
                                <strong>Selesai mengubah pengaturan?</strong>
                                <span>Periksa kembali data sebelum menyimpan.</span>
                            </div>
                            <button type="submit" name="submit" class="btn btn-primary simpan_info settings-save">
                                <i class="fa fa-save mr-2"></i>Simpan perubahan
                            </button>
                        </div>
					</div>
				</form>
			
		</div>
		<!--Row-->
	</div>
</div>
<!-- The Modal -->
<div id="myModals" class="modals">
	
	<!-- The Close Button -->
	<span class="closes">&times;</span>
	
	<!-- Modal Content (The Image) -->
	<img class="modal-contents" id="viewimglogo">
	
	<!-- Modal Caption (Image Text) -->
	<div id="caption"></div>
</div>
<style>
    #container-wrapper {
        --settings-primary: #1756b3;
        --settings-primary-soft: #eef5ff;
        --settings-border: #e4e9f2;
        --settings-text: #24324a;
        --settings-muted: #718096;
        max-width: 1600px;
        margin: 0 auto;
    }
    .settings-page-heading {
        margin-bottom: 22px;
    }
    .settings-eyebrow {
        display: block;
        margin-bottom: 5px;
        color: var(--settings-primary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    .settings-subtitle {
        color: var(--settings-muted);
        font-size: 14px;
    }
    .settings-page-heading .breadcrumb {
        margin: 0;
        padding: 8px 12px;
        border: 1px solid var(--settings-border);
        border-radius: 9px;
        background: #fff;
        font-size: 12px;
    }
    .settings-card {
        overflow: visible;
        border: 0;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
    }
    .settings-card > form > .card-body {
        padding: 0;
    }
    .settings-toolbar {
        position: sticky;
        top: 0;
        z-index: 20;
        margin-bottom: 14px;
        padding: 15px 18px;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 8px 24px rgba(35,50,74,.07);
        backdrop-filter: blur(10px);
    }
    .settings-save {
        min-height: 42px;
        padding: 9px 17px;
        border: 0;
        border-radius: 9px;
        background: var(--settings-primary);
        box-shadow: 0 5px 12px rgba(23,86,179,.2);
        font-weight: 600;
    }
    .settings-section {
        margin-bottom: 14px;
        padding: 22px 22px 7px;
        scroll-margin-top: 90px;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 14px rgba(35,50,74,.035);
    }
    .section-heading {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #edf0f5;
    }
    .section-icon {
        display: inline-flex;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        height: 38px;
        border-radius: 10px;
        color: var(--settings-primary);
        background: var(--settings-primary-soft);
    }
    .section-heading h2 {
        margin: 0 0 3px;
        color: var(--settings-text);
        font-size: 16px;
        font-weight: 700;
    }
    .section-heading p {
        margin: 0;
        color: var(--settings-muted);
        font-size: 12.5px;
    }
    .settings-section .form-group {
        margin-bottom: 18px;
    }
    .settings-section label {
        margin-bottom: 7px;
        color: #3e4b61;
        font-size: 12px;
        font-weight: 700;
    }
    .settings-section .form-control,
    .settings-section .custom-select,
    .settings-section .custom-file-label,
    .settings-section .input-group-text,
    .settings-section .input-group-prepend .btn {
        min-height: 43px;
        border-color: #dce2ec;
        color: #354258;
        font-size: 13px;
    }
    .settings-section .form-control,
    .settings-section .custom-select {
        border-radius: 8px;
        background-color: #fbfcfe;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .settings-section .form-control:focus,
    .settings-section .custom-select:focus {
        border-color: #71a2e7;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(23,86,179,.1);
    }
    .settings-section .form-text {
        margin-top: 6px;
        color: #8793a6 !important;
        font-size: 11.5px;
    }
    .status-settings-table th { border-top: 0; color: var(--settings-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
    .status-settings-table td { vertical-align: middle; border-color: var(--settings-border); }
    .status-drag { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: #94a3b8; }
    .status-color-wrap { display: flex; align-items: center; gap: 8px; }
    .status-color-picker { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--settings-border); border-radius: 8px; background: #fff; }
    .status-color-wrap .status-color { min-width: 92px; text-transform: uppercase; }
    .settings-section .picker {
        border-radius: 8px 0 0 8px;
    }
    .settings-section .trumbowyg-box {
        overflow: hidden;
        border-color: #dce2ec;
        border-radius: 8px;
    }
    .settings-section .trumbowyg-button-pane {
        background: #f7f9fc;
    }
    #aset .custom-file-label {
        height: 43px;
        padding: 11px 96px 10px 13px;
        overflow: hidden;
        border-color: #dce2ec;
        border-radius: 8px;
        background: #fff;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #aset .custom-file-label::after {
        display: flex;
        align-items: center;
        justify-content: center;
        top: 4px;
        right: 4px;
        width: 78px;
        height: 33px;
        padding: 0 12px;
        border: 0;
        border-radius: 6px;
        color: #fff;
        background: var(--settings-primary);
        font-size: 12px;
        font-weight: 700;
        line-height: 33px;
        content: "Browse";
        transition: background-color .18s ease, box-shadow .18s ease;
    }
    #aset .custom-file:hover .custom-file-label::after {
        background: #104994;
        box-shadow: 0 3px 8px rgba(23,86,179,.22);
    }
    #aset .custom-file-input:focus ~ .custom-file-label {
        border-color: #71a2e7;
        box-shadow: 0 0 0 3px rgba(23,86,179,.10);
    }
    #aset .custom-file-input:focus ~ .custom-file-label::after {
        background: #104994;
    }
    .settings-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 19px 22px;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: #fff;
    }
    .settings-footer strong,
    .settings-footer span { display: block; }
    .settings-footer strong { color: var(--settings-text); font-size: 13px; }
    .settings-footer span { margin-top: 2px; color: var(--settings-muted); font-size: 12px; }
    #settings-status.has-changes {
        color: #d97706 !important;
        font-weight: 600;
    }
	.trumbowyg-box,
	.trumbowyg-editor {
	min-height: 100px!important;
	}
	.picker {
	border-radius: 0;
	width: 43px;
	height: 43px;
	cursor: pointer;
	}
	
	
	/* The Modal (background) */
	.modals {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background: #fff; /* Fallback color */
	}
	
	/* Modal Content (Image) */
	.modal-contents {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	position: fixed; /* or absolute */
	top: 25%;
	left: 25%;
	}
	
	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
	}
	
	/* Add Animation - Zoom in the Modal */
	.modal-contents, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
	}
	
	@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
	}
	
	/* The Close Button */
	.closes {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	}
	
	.closes:hover,
	.closes:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
	}
	
	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
        .settings-page-heading .breadcrumb { display: none; }
        .settings-page-heading { margin-bottom: 16px; }
        .settings-subtitle { max-width: 320px; }
        .settings-toolbar { padding: 12px; }
        .settings-toolbar h6 { font-size: 13px; }
        .settings-toolbar .settings-save { min-height: 38px; padding: 8px 12px; font-size: 12px; }
        .settings-toolbar .settings-save i { display: none; }
        .settings-section { padding: 18px 15px 4px; }
        .section-heading { margin-bottom: 17px; }
        .settings-footer { align-items: stretch; flex-direction: column; }
        .settings-footer .settings-save { width: 100%; }
        .modal-content { width: 100%; }
	} 
</style>
<script src="<?= base_url('assets/'); ?>vendor/colorpick/colorPick.js"></script>  
<script>
	$('#token_api').on('input', function() {
		var input=$(this);
		var is_name=input.val();
		if(is_name){input.removeClass("invalid").addClass("valid");}
		else{input.removeClass("valid").addClass("invalid");}
	});
	
	$("#ck_token").change(function() {
		
		if (this.checked) {	 
			$("#token").attr("readonly", false);
			}else{
			$("#token").attr("readonly", true);
		}
	});
	$("#ck_api").change(function() {
		
		if (this.checked) {	 
			$("#token_api").attr("readonly", false);
			}else{
			$("#token_api").attr("readonly", true);
		}
	});
	 
	$("#token_api").change(function() {
		let str = $("#token_api").val();
		let result = str.replace(/[ ]+/g, "");
		$("#token_api").val(result);
	});
	
	setInterval(function() {
		$('body').loading('stop');
	}, 1000);
	// Get the modal
	var modal = document.getElementById("myModals");
	let img = "";
	$(".imglogo").click(function(){
		
		var id = $(this).data('id');
		var modalImg = document.getElementById("viewimglogo");
		var captionText = document.getElementById("caption");
		modal.style.display = "block";
		modalImg.src = this.src;
		captionText.innerHTML = this.alt;
	});
	
	 
	// Get the <span> element that closes the modal
	var span = document.getElementsByClassName("closes")[0];
	
	// When the user clicks on <span> (x), close the modal
	span.onclick = function() {
		modal.style.display = "none";
	} 
	
	$(document).ready(function() {
		function playChatSoundPreview(type) {
			if (type === 'silent') return;
			var AudioContextClass=window.AudioContext||window.webkitAudioContext;
			if (!AudioContextClass) return;
			var context=new AudioContextClass();
			function tone(frequency,start,duration,volume) {
				var oscillator=context.createOscillator(),gain=context.createGain();
				oscillator.type='sine'; oscillator.frequency.value=frequency;
				gain.gain.setValueAtTime(.0001,context.currentTime+start);
				gain.gain.exponentialRampToValueAtTime(volume,context.currentTime+start+.012);
				gain.gain.exponentialRampToValueAtTime(.0001,context.currentTime+start+duration);
				oscillator.connect(gain); gain.connect(context.destination);
				oscillator.start(context.currentTime+start); oscillator.stop(context.currentTime+start+duration+.02);
			}
			if(type==='soft')tone(520,0,.28,.075);else if(type==='double'){tone(660,0,.16,.1);tone(880,.18,.2,.1);}else tone(720,0,.23,.12);
			setTimeout(function(){context.close();},700);
		}
		function syncChatSoundSetting(){var active=$('#chat_aktif').val()==='1';$('.chat-sound-setting').toggleClass('text-muted',!active).css('opacity',active?1:.6);$('#preview-chat-sound').prop('disabled',!active);}
		$('#chat_aktif').on('change',syncChatSoundSetting);
		$('#preview-chat-sound').on('click',function(){playChatSoundPreview($('#chat_suara').val());});
		syncChatSoundSetting();
        function reindexJobStatuses() {
            $('#job-status-rows .job-status-row').each(function(index) {
                $(this).find('[name]').each(function() {
                    this.name = this.name.replace(/job_statuses\[\d+\]/, 'job_statuses[' + index + ']');
                });
            });
            $('#simpan_data').trigger('change');
        }
        $(document).on('input', '.status-color-picker', function() {
            $(this).siblings('.status-color').val(this.value.toUpperCase()).trigger('change');
        });
        $(document).on('input', '.status-color', function() {
            if (/^#[0-9a-f]{6}$/i.test(this.value)) $(this).siblings('.status-color-picker').val(this.value);
        });
        $(document).on('click', '.remove-job-status', function() {
            $(this).closest('.job-status-row').remove();
            reindexJobStatuses();
        });
        $('#add-job-status').on('click', function() {
            var maxCode = 6;
            $('#job-status-rows input[name$="[code]"]').each(function(){ maxCode = Math.max(maxCode, parseInt(this.value || 0, 10)); });
            var index = $('#job-status-rows .job-status-row').length;
            var html = '<tr class="job-status-row"><td><span class="status-drag"><i class="fa fa-bars"></i></span>'+
                '<input type="hidden" name="job_statuses['+index+'][code]" value="'+(maxCode+1)+'"><input type="hidden" name="job_statuses['+index+'][icon]" value="circle"></td>'+
                '<td><input type="text" class="form-control status-label" name="job_statuses['+index+'][label]" maxlength="40" placeholder="Nama status" required></td>'+
                '<td><div class="status-color-wrap"><input type="color" class="status-color-picker" value="#64748B"><input type="text" class="form-control status-color" name="job_statuses['+index+'][color]" value="#64748B" pattern="#[0-9A-Fa-f]{6}" required></div></td>'+
                '<td><select class="form-control custom-select" name="job_statuses['+index+'][active]"><option value="1">Aktif</option><option value="0">Tidak aktif</option></select></td>'+
                '<td><button type="button" class="btn btn-sm btn-outline-danger remove-job-status" title="Hapus status"><i class="fa fa-trash"></i></button></td></tr>';
            $('#job-status-rows').append(html).find('.status-label').last().focus();
            reindexJobStatuses();
        });
        var initialSettings = $('#simpan_data').serialize();
        $('#simpan_data').on('input change', 'input, select, textarea', function() {
            var hasChanges = $('#simpan_data').serialize() !== initialSettings;
            $('#settings-status')
                .toggleClass('has-changes', hasChanges)
                .text(hasChanges ? 'Ada perubahan yang belum disimpan' : 'Semua perubahan tersimpan');
        });

		$('#logo_struk_thermal').on('change', function() {
			var file = this.files && this.files[0] ? this.files[0] : null;
			var $label = $(this).next('.custom-file-label');
			$label.text(file ? file.name : 'Pilih logo struk');
			if (file && file.type.indexOf('image/') === 0) {
				var reader = new FileReader();
				reader.onload = function(event) {
					$('#img-logo-struk-thermal').attr('src', event.target.result);
				};
				reader.readAsDataURL(file);
			}
		});
		
		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();
		$('.textarea').trumbowyg({
			btns: [
			['viewHTML','link'],
			['undo', 'redo'], // Only supported in Blink browsers
			['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);
			// console.log("The user has selected the color: " + this.color)
			this.element.css({'backgroundColor': this.color, 'color': this.color});
		}
	});
	$("#picker2").colorPick({
		'initialColor' : '#8e44ad',
		'palette': paletWarnaProfesional,
		'onColorSelected': function() {
			$("#warna_blunas").val(this.color);
			// console.log("The user has selected the color: " + this.color)
			this.element.css({'backgroundColor': this.color, 'color': this.color});
		}
	});
	$("#picker3").colorPick({
		'initialColor' : '#8e44ad',
		'palette': paletWarnaProfesional,
		'onColorSelected': function() {
			$("#tema").val(this.color);
			// console.log("The user has selected the color: " + this.color)
			this.element.css({'backgroundColor': this.color, 'color': this.color});
		}
	});
	$(document).on('click','.register',function(e){
		window.open('https://pospercetakan.my.id/harga', '_blank');
	});
	$(document).on('click','.register_api',function(e){
		window.open('https://pospercetakan.my.id/daftar', '_blank');
	});
</script>					
