<div class="container-fluid app-settings-page" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800"><?=$title;?></h1>
            <p class="app-settings-subtitle mb-0">Kelola konfigurasi aplikasi sesuai kebutuhan bisnis Anda.</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;
	?>
    <?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 -->
            <div class="card mb-4">
                <form id="simpan_data" method="POST" action="<?=base_url();?>main/info_save" enctype="multipart/form-data" >
                    <div class="card-body">
                        <div class="app-settings-toolbar">
                            <div>
                                <span class="app-settings-eyebrow">Konfigurasi sistem</span>
                                <h5 class="mb-0">Informasi dan preferensi aplikasi</h5>
                            </div>
                            <button type="submit" name="submit" class="btn app-settings-save"><i class="fa fa-save"></i> Simpan Perubahan</button>
						</div>
                        <nav class="app-settings-tabs" role="tablist" aria-label="Navigasi pengaturan aplikasi">
                            <button type="button" role="tab" aria-controls="settings-general" class="app-settings-tab is-active" data-settings-target="settings-general"><i class="fa fa-info-circle"></i><span>Informasi Umum</span></button>
                            <button type="button" role="tab" aria-controls="settings-contact" class="app-settings-tab" data-settings-target="settings-contact"><i class="fa fa-address-book-o"></i><span>Kontak & Perusahaan</span></button>
                            <button type="button" role="tab" aria-controls="settings-invoice" class="app-settings-tab" data-settings-target="settings-invoice"><i class="fa fa-file-text-o"></i><span>Invoice & Catatan</span></button>
                            <button type="button" role="tab" aria-controls="settings-transaction" class="app-settings-tab" data-settings-target="settings-transaction"><i class="fa fa-shopping-cart"></i><span>Transaksi</span></button>
                            <button type="button" role="tab" aria-controls="settings-integration" class="app-settings-tab" data-settings-target="settings-integration"><i class="fa fa-link"></i><span>Integrasi / API</span></button>
                            <button type="button" role="tab" aria-controls="settings-brand" class="app-settings-tab" data-settings-target="settings-brand"><i class="fa fa-paint-brush"></i><span>Tampilan & Aset</span></button>
                        </nav>
                        
                        <section class="settings-section settings-section-general" id="settings-general">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-info-circle"></i></span>
                                <div><h6>Informasi Umum</h6><p>Identitas utama yang ditampilkan pada aplikasi.</p></div>
                            </div>
                            <div class="settings-section__body">
                        <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>
                        </section>
                        <section class="settings-section settings-section-contact" id="settings-contact">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-building-o"></i></span>
                                <div><h6>Kontak & Perusahaan</h6><p>Alamat dan nomor kontak perusahaan.</p></div>
                            </div>
                            <div class="settings-section__body">
						    <div class="row">
                            <div class="form-group col-md-12">
                                <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-12">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control" id="phone" name="phone" value="<?=$rows['phone'];?>" required>
							</div>
						    </div>
                            </div>
                        </section>
                        <section class="settings-section settings-section-invoice" id="settings-invoice">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-file-text-o"></i></span>
                                <div><h6>Invoice & Catatan</h6><p>Konten login serta catatan pada invoice dan struk.</p></div>
                            </div>
                            <div class="settings-section__body">
						    <div class="row">
                            <div class="form-group col-md-6">
                                <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-6">
                                <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>
                        </section>
                        <section class="settings-section settings-section-integration" id="settings-integration">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-link"></i></span>
                                <div><h6>Integrasi / API</h6><p>Kunci akses aplikasi dan keamanan perangkat.</p></div>
                            </div>
                            <div class="settings-section__body">
						    <div class="row">
							<div class="form-group col-md-7">
                                <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-5">
                                <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>
                            </div>
                        </section>
                        <section class="settings-section settings-section-transaction" id="settings-transaction">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-exchange"></i></span>
                                <div><h6>Transaksi & Fitur Bisnis</h6><p>Atur format transaksi, komisi, dan kanal bisnis.</p></div>
                            </div>
                            <div class="settings-section__body">
                        <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="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>
                            </div>
                        </section>
                        <section class="settings-section settings-section-brand" id="settings-brand">
                            <div class="settings-section__header">
                                <span class="settings-section__icon"><i class="fa fa-paint-brush"></i></span>
                                <div><h6>Tampilan & Aset</h6><p>Warna, logo, ikon, dan gambar yang digunakan pada dokumen.</p></div>
                            </div>
                            <div class="settings-section__body">
                        <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>
						<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>
                            </div>
                        </section>
                        <div class="app-settings-footer">
                            <span><i class="fa fa-info-circle"></i> Perubahan diterapkan setelah data berhasil disimpan.</span>
						    <button type="submit" name="submit" class="btn app-settings-save simpan_info"><i class="fa fa-save"></i> Simpan Perubahan</button>
                        </div>
					</div>
				</form>
			</div>
		</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>
    .app-settings-page {
        --settings-primary: #1769e8;
        --settings-border: #e3e9f2;
        --settings-muted: #718096;
        --settings-surface: #ffffff;
        padding-bottom: 28px;
    }
    .app-settings-page .app-settings-subtitle {
        color: var(--settings-muted);
        font-size: 13px;
    }
    .app-settings-page > .row > .col-md-12 > .card {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .app-settings-page #simpan_data > .card-body {
        display: grid;
        padding: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
    }
    .app-settings-toolbar,
    .app-settings-tabs,
    .app-settings-footer {
        grid-column: 1 / -1;
    }
    .app-settings-toolbar,
    .app-settings-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
    .app-settings-toolbar {
        padding: 16px 18px;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: var(--settings-surface);
        box-shadow: 0 4px 16px rgba(31, 45, 61, .05);
    }
    .app-settings-toolbar h5 {
        color: #17233a;
        font-size: 16px;
        font-weight: 700;
    }
    .app-settings-eyebrow {
        display: block;
        margin-bottom: 3px;
        color: var(--settings-primary);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .app-settings-save {
        min-height: 40px;
        padding: 9px 16px;
        border-color: var(--settings-primary);
        border-radius: 8px;
        background: var(--settings-primary);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 5px 12px rgba(23, 105, 232, .2);
    }
    .app-settings-save:hover,
    .app-settings-save:focus {
        border-color: #0f58ca;
        background: #0f58ca;
        color: #fff;
        transform: translateY(-1px);
    }
    .app-settings-tabs {
        display: flex;
        min-width: 0;
        margin-top: -3px;
        padding: 0 8px;
        overflow-x: auto;
        gap: 5px;
        border-bottom: 1px solid #dfe6f0;
        scrollbar-width: thin;
    }
    .app-settings-tab {
        position: relative;
        display: inline-flex;
        min-height: 45px;
        padding: 8px 14px 10px;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 7px;
        border: 0;
        background: transparent;
        color: #68758a;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: color .2s ease, background .2s ease;
    }
    .app-settings-tab::after {
        position: absolute;
        right: 9px;
        bottom: -1px;
        left: 9px;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: transparent;
        content: "";
    }
    .app-settings-tab:hover,
    .app-settings-tab:focus {
        outline: 0;
        border-radius: 7px 7px 0 0;
        background: #f5f8fd;
        color: var(--settings-primary);
    }
    .app-settings-tab.is-active {
        color: var(--settings-primary);
    }
    .app-settings-tab.is-active::after {
        background: var(--settings-primary);
    }
    .settings-section {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: var(--settings-surface);
        box-shadow: 0 4px 16px rgba(31, 45, 61, .045);
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        scroll-margin-top: 86px;
    }
    .settings-section[hidden] {
        display: none !important;
    }
    .settings-section.is-tab-panel-active {
        grid-column: 1 / -1;
        animation: settingsPanelIn .22s ease;
    }
    @keyframes settingsPanelIn {
        from {
            opacity: 0;
            transform: translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .settings-section:hover {
        border-color: #cddaf0;
        box-shadow: 0 8px 22px rgba(31, 45, 61, .075);
    }
    .settings-section-transaction,
    .settings-section-brand {
        grid-column: 1 / -1;
    }
    .settings-section__header {
        display: flex;
        padding: 15px 17px;
        align-items: center;
        gap: 11px;
        border-bottom: 1px solid #edf1f6;
        background: linear-gradient(180deg, #fff, #fbfcfe);
    }
    .settings-section__icon {
        display: inline-flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        border-radius: 9px;
        background: #edf4ff;
        color: var(--settings-primary);
        font-size: 15px;
    }
    .settings-section__header h6 {
        margin: 0 0 2px;
        color: #17233a;
        font-size: 13px;
        font-weight: 700;
    }
    .settings-section__header p {
        margin: 0;
        color: #8a96a8;
        font-size: 10px;
    }
    .settings-section__body {
        padding: 16px 17px 5px;
    }
    .settings-section__body > .row,
    .settings-section__body > .form-group.row {
        margin-right: -7px;
        margin-left: -7px;
    }
    .settings-section__body [class*="col-md-"] {
        padding-right: 7px;
        padding-left: 7px;
    }
    .app-settings-page .form-group {
        margin-bottom: 14px;
    }
    .app-settings-page label {
        margin-bottom: 6px;
        color: #39465b;
        font-size: 11px;
        font-weight: 700;
    }
    .app-settings-page .form-control,
    .app-settings-page .custom-select,
    .app-settings-page .custom-file-label,
    .app-settings-page .input-group-text {
        min-height: 40px;
        border-color: #d8e0ec;
        border-radius: 7px;
        color: #3f4c60;
        font-size: 12px;
    }
    .app-settings-page .form-control:focus,
    .app-settings-page .custom-select:focus {
        border-color: #72a7f5;
        box-shadow: 0 0 0 3px rgba(23, 105, 232, .1);
    }
    .app-settings-page .form-text {
        margin-top: 5px;
        color: #8a96a8 !important;
        font-size: 10px;
    }
    .app-settings-page .trumbowyg-box {
        margin: 0;
        border-color: #d8e0ec;
        border-radius: 7px;
    }
    .app-settings-page .trumbowyg-button-pane {
        border-radius: 7px 7px 0 0;
        background: #f7f9fc;
    }
    .app-settings-page .picker {
        border: 1px solid #d8e0ec;
        border-radius: 7px 0 0 7px;
    }
    .app-settings-footer {
        padding: 13px 17px;
        border: 1px solid var(--settings-border);
        border-radius: 12px;
        background: #f8faff;
        color: #718096;
        font-size: 10px;
    }
    .app-settings-footer > span i {
        margin-right: 5px;
        color: var(--settings-primary);
    }
    @media (max-width: 991.98px) {
        .app-settings-page #simpan_data > .card-body {
            grid-template-columns: 1fr;
        }
        .settings-section,
        .settings-section-transaction,
        .settings-section-brand {
            grid-column: 1;
        }
    }
    @media (max-width: 575.98px) {
        .app-settings-toolbar,
        .app-settings-footer {
            align-items: stretch;
            flex-direction: column;
        }
        .app-settings-save {
            width: 100%;
        }
        .settings-section__body {
            padding-right: 13px;
            padding-left: 13px;
        }
    }
	.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){
	.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 activateSettingsTab(targetId) {
            var $target = $('#' + targetId);
            if (!$target.length) {
                return;
            }

            $('.settings-section')
                .attr('hidden', true)
                .removeClass('is-tab-panel-active')
                .attr('aria-hidden', 'true');

            $target
                .removeAttr('hidden')
                .addClass('is-tab-panel-active')
                .attr('aria-hidden', 'false');

            $('.app-settings-tab')
                .removeClass('is-active')
                .attr('aria-selected', 'false');

            $('.app-settings-tab[data-settings-target="' + targetId + '"]')
                .addClass('is-active')
                .attr('aria-selected', 'true');

            window.setTimeout(function() {
                $(window).trigger('resize');
            }, 0);
        }

		$('.app-settings-tab').on('click', function() {
            var targetId = $(this).data('settings-target');
            activateSettingsTab(targetId);
        });

        $('#simpan_data').on('submit', function(event) {
            var invalidField = this.querySelector(':invalid');
            if (!invalidField) {
                return;
            }

            var $invalidSection = $(invalidField).closest('.settings-section');
            if ($invalidSection.length && $invalidSection.attr('hidden')) {
                event.preventDefault();
                activateSettingsTab($invalidSection.attr('id'));
                window.setTimeout(function() {
                    invalidField.reportValidity();
                    invalidField.focus();
                }, 30);
            }
        });

		$('#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'],
			]
		});

        activateSettingsTab('settings-general');
	});
	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>					
