<div class="container-fluid pengguna-page" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800">Data pengguna</h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">Data pengguna</li>
		</ol>
	</div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex flex-row align-items-center justify-content-between pengguna-filter-header">
                    <div class="input-group input-group-sm pengguna-filter-toolbar">
                        <div class="input-group-prepend">
                            <span class="input-group-text" for"limits">LIMIT</span>
						</div>
                        <select id="limits" name="limits" class="form-control custom-select w-1" onchange="searchPengguna()">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
						</select>
                        <div class="input-group-prepend">
                            <span class="input-group-text" for="sortBy">SORT</span>
						</div>
                        <select id="sortBy" class="form-control custom-select w-1" onchange="searchPengguna()">
                            <option value="ASC">ASC</option>
                            <option value="DESC" selected>DESC</option>
						</select>
                        <input type="text" id="keywords" class="form-control w-40" placeholder="Cari data" onkeyup="searchPengguna();"/>
                        <div class="input-group-append pengguna-filter-actions">
                            <button class="btn btn-danger clear pengguna-filter-btn" type="button"><i class="fa fa-times"></i> Clear</button>
                            <button type="button" class="btn btn-info tambah-pengguna pengguna-filter-btn" data-toggle="modal" data-target="#OpenModalUser" data-id="0" data-mod="add"><i class="fa fa-plus"></i> Tambah</button>
						</div>
					</div>
				</div>
                <div class="card-body">
                    <div class="loading-overlay" style="display:none"><div class="overlay-content">Loading.....</div></div>
                    <div id="posts_content">
                        <?php if(!empty($record)){ ?>
                            <div class="posts_list">
                                <table class="table table-bordered table-striped table-mailcard">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th class="w-1 text-center">No</th>
                                            <th class="w-15 text-left">Nama</th>
                                            <th class="w-15 text-left">Email</th>
                                            <th class="w-9 text-left">Tgl. Reg</th>
                                            <th class="w-8 text-center">Jabatan</th>
                                            <th class="w-14 text-center">Komisi Desain</th>
											<th class="w-14 text-center">Komisi Penjualan</th>
                                            <th class="w-5 text-center">Aktif</th>
                                            <th class="w-12 text-center">Aksi</th>
										</tr>
									</thead>
                                    <tbody>
                                        <?php 
                                            $no = 1;
                                            foreach ($record as $row){
                                                if ($row['level'] == 'admin'){ 
                                                    $hapus = '<a data-id="'.$row['id_user'].'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash text-info"></i> Hapus</a>';
                                                    }else{ 
                                                    $hapus = '<a class="text-danger" data-id="'.$row['id_user'].'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash"></i> Hapus</a>';
												}
                                                if ($row['aktif'] == 'Y'){ $aktif ='<i class="fa fa-check-circle"></i>'; }else{ $aktif = '<i class="fa fa-check-circle-o"></i>'; }
                                                $komisi_desain = (!empty($row['komisi_desain_aktif']) && (int) $row['komisi_desain_aktif'] === 1) ? '<i class="fa fa-check-circle text-success"></i>' : '<i class="fa fa-times text-danger"></i>';
												$komisi_penjualan = (!empty($row['komisi_penjualan_aktif']) && (int)$row['komisi_penjualan_aktif'] === 1) ? '<i class="fa fa-check-circle text-success"></i>' : '<i class="fa fa-times text-danger"></i>';
                                                $level_akses = !empty($row['nama_level']) ? $row['nama_level'] : ucwords((string) $row['level']);
                                                $kode = encrypt_url($row['id_user']);
                                                echo "<tr><td>$no</td>
                                                <td><a href='javascript:void(0);' data-toggle='modal' data-target='#OpenModalUser' data-id='".encrypt_url($row['id_user'])."' data-mod='edit' class='text-info'>".$row['nama_lengkap']."</a></td>
                                                <td>$row[email]</td>
                                                <td>$row[tgl_daftar]</td>
                                                <td class='text-center'>$level_akses</td>
                                                <td class='text-center'>$komisi_desain</td>
												<td class='text-center'>$komisi_penjualan</td>
                                                <td class='text-center'>$aktif</td>
                                                <td><center>
                                                <a href='javascript:void(0);' data-toggle='modal' data-target='#OpenModalUser' data-id='".encrypt_url($row['id_user'])."' data-mod='edit' class='openPopup text-info'><i class='fa fa-edit'></i> Edit</a> | $hapus
                                                </center></td>
                                                </tr>";
                                                $no++;
											}
										?>
									</tbody>
								</table> 
							</div>
                            <?php echo $this->ajax_pagination->create_links(); ?>
                            <?php }else{ ?>
                            <table class='table table-bordered'>
                                <tr>
                                    <td>Belum ada data</td>
								</tr>
							</table>
						<?php } ?>
					</div>
				</div><!-- /.card-body -->
			</div><!-- /.card -->
		</div>
	</div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
				<button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
			</div>
			<div class="modal-body">
				<p>Anda akan menghapus satu url, prosedur ini tidak dapat diubah.</p>
				<p>Apakah Anda ingin melanjutkan?</p>
				<p class="debug-url"></p>
				<input type="hidden" id="data-hapus">
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button> 
				<button class="btn btn-danger hapus_user" type="button">YA</button> 
			</div>
		</div>
	</div>
</div>
<div class="modal fade user-editor-modal" id="OpenModalUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabelPengguna" aria-describedby="userModalDescription" aria-hidden="true">
	<div class="modal-dialog modal-xl modal-dialog-centered user-editor-dialog" role="document">
		<div class="modal-content user-editor-content">
			<div class="modal-header user-editor-header">
                <div class="user-editor-heading">
                    <span class="user-editor-heading-icon" aria-hidden="true"><i class="fa fa-user-circle"></i></span>
                    <div>
                        <h4 class="modal-title" id="myModalLabelPengguna">Tambah Pengguna</h4>
                        <p id="userModalDescription">Lengkapi informasi, akses menu, dan status pengguna.</p>
                    </div>
                </div>
				<button type="button" class="close user-editor-close" data-dismiss="modal" aria-label="Tutup modal"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body user-editor-body">
                <div class="load-pengguna">
                    <div class="user-modal-loading" aria-label="Memuat formulir">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        <span>Menyiapkan formulir pengguna...</span>
                    </div>
                </div>
			</div>
			<div class="modal-footer user-editor-footer">
				<button type="button" class="btn user-editor-cancel" data-dismiss="modal">Batal</button>
				<button type="button" onClick="simpanMember()" id="btn-bahan" class="btn user-editor-save"><i class="fa fa-save" aria-hidden="true"></i> <span class="user-save-label">Simpan Pengguna</span></button>
			</div>
		</div>
	</div>
</div>
<style>
	.card .table td, .card .table th {padding-right: 1rem;padding-left: 1rem;}
    .select2-container {width: 100% !important;padding: 0;}

    /* Toolbar filter khusus halaman Data Pengguna. */
    @media (min-width: 1200px) {
        .pengguna-page .pengguna-filter-header {
            padding: 1rem !important;
            background-color: #fff;
            border-bottom: 1px solid #e3e6f0;
        }

        .pengguna-page .pengguna-filter-toolbar {
            display: flex !important;
            flex-wrap: nowrap;
            align-items: center;
            width: 100%;
        }

        .pengguna-page .pengguna-filter-toolbar > .input-group-prepend {
            flex: 0 0 auto;
            margin: 0;
        }

        .pengguna-page .pengguna-filter-toolbar > .input-group-prepend:not(:first-child) {
            margin-left: .5rem;
        }

        .pengguna-page .pengguna-filter-toolbar .input-group-text {
            height: 38px;
            padding: 0 .75rem;
            border: 1px solid var(--app-theme-color, #3f51b5);
            border-radius: .25rem 0 0 .25rem;
            background-color: var(--app-theme-color, #3f51b5);
            color: var(--app-theme-text-color, #fff);
            font-size: .8rem;
            font-weight: 600;
            line-height: 38px;
            box-shadow: 0 2px 5px rgba(63, 81, 181, .18);
        }

        .pengguna-page .pengguna-filter-toolbar > .custom-select {
            flex: 0 1 260px !important;
            width: 260px !important;
            min-width: 110px;
            height: 38px;
            border-color: #d1d3e2;
            border-left: 0;
            border-radius: 0 .25rem .25rem 0;
            background-color: #fff;
            font-size: .85rem;
        }

        .pengguna-page .pengguna-filter-toolbar > #keywords {
            flex: 1 1 280px;
            width: auto !important;
            min-width: 180px;
            height: 38px;
            margin-left: .5rem;
            border: 1px solid #d1d3e2;
            border-radius: .25rem;
            font-size: .85rem;
        }

        .pengguna-page .pengguna-filter-toolbar > .custom-select:focus,
        .pengguna-page .pengguna-filter-toolbar > #keywords:focus {
            position: relative;
            z-index: 2;
            border-color: #7f8bd4;
            box-shadow: 0 0 0 .15rem rgba(63, 81, 181, .12);
        }

        .pengguna-page .pengguna-filter-actions {
            display: flex;
            flex: 0 0 auto;
            gap: .5rem;
            margin-left: .5rem;
        }

        .pengguna-page .pengguna-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            height: 38px;
            padding: 0 .85rem;
            border-radius: .25rem !important;
            font-size: .8rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
        }

        .pengguna-page .clear {
            border-color: #ff4f4f;
            background-color: #ff4f4f;
            color: #fff;
        }

        .pengguna-page .tambah-pengguna {
            border-color: #2eb6e6;
            background-color: #2eb6e6;
            color: #fff;
        }

        .pengguna-page .clear:hover,
        .pengguna-page .clear:focus {
            border-color: #e73d3d;
            background-color: #e73d3d;
        }

        .pengguna-page .tambah-pengguna:hover,
        .pengguna-page .tambah-pengguna:focus {
            border-color: #169fd0;
            background-color: #169fd0;
        }
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
        .pengguna-page .pengguna-filter-header {
            padding: 1rem !important;
            background-color: #fff;
            border-bottom: 1px solid #e3e6f0;
        }

        .pengguna-page .pengguna-filter-toolbar {
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
            gap: .65rem 0;
            width: 100%;
        }

        .pengguna-page .pengguna-filter-toolbar > .input-group-prepend {
            margin: 0;
        }

        .pengguna-page .pengguna-filter-toolbar > .input-group-prepend:first-child {
            grid-column: 1;
            grid-row: 1;
        }

        .pengguna-page .pengguna-filter-toolbar > #limits {
            grid-column: 2;
            grid-row: 1;
        }

        .pengguna-page .pengguna-filter-toolbar > .input-group-prepend:nth-of-type(2) {
            grid-column: 3;
            grid-row: 1;
            margin-left: .65rem;
        }

        .pengguna-page .pengguna-filter-toolbar > #sortBy {
            grid-column: 4;
            grid-row: 1;
        }

        .pengguna-page .pengguna-filter-toolbar > #keywords {
            grid-column: 1 / 5;
            grid-row: 2;
            width: 100%;
        }

        .pengguna-page .pengguna-filter-toolbar > .pengguna-filter-actions {
            grid-column: 1 / 5;
            grid-row: 3;
        }

        .pengguna-page .pengguna-filter-toolbar .input-group-text {
            height: 38px;
            padding: 0 .75rem;
            border: 1px solid var(--app-theme-color, #3f51b5);
            border-radius: .25rem 0 0 .25rem;
            background-color: var(--app-theme-color, #3f51b5);
            color: var(--app-theme-text-color, #fff);
            font-size: .8rem;
            font-weight: 600;
            line-height: 38px;
        }

        .pengguna-page .pengguna-filter-toolbar > .custom-select,
        .pengguna-page .pengguna-filter-toolbar > #keywords {
            height: 38px;
            border-color: #d1d3e2;
            background-color: #fff;
            font-size: .85rem;
        }

        .pengguna-page .pengguna-filter-toolbar > .custom-select {
            border-left: 0;
            border-radius: 0 .25rem .25rem 0;
        }

        .pengguna-page .pengguna-filter-toolbar > #keywords {
            border-radius: .25rem;
        }

        .pengguna-page .pengguna-filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: .5rem;
            margin: 0;
        }

        .pengguna-page .pengguna-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            height: 38px;
            padding: 0 .85rem;
            border-radius: .25rem !important;
            font-size: .8rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
        }

        .pengguna-page .clear {
            border-color: #ff4f4f;
            background-color: #ff4f4f;
            color: #fff;
        }

        .pengguna-page .tambah-pengguna {
            border-color: #2eb6e6;
            background-color: #2eb6e6;
            color: #fff;
        }
    }

    /* Modal tambah/edit pengguna. Seluruh selector dibatasi pada #OpenModalUser. */
    #OpenModalUser { color: #17233d; }
    #OpenModalUser .user-editor-dialog { width: calc(100% - 2rem); max-width: 1080px; margin: 1rem auto; }
    #OpenModalUser .user-editor-content { overflow: hidden; border: 0; border-radius: 18px; background: #f7f9fc; box-shadow: 0 24px 70px rgba(15, 35, 70, .24); }
    #OpenModalUser .user-editor-header { display: flex; align-items: center; min-height: 88px; padding: 18px 24px; border: 0; background: linear-gradient(135deg, #1458ad 0%, #2373d3 100%); color: #fff; }
    #OpenModalUser .user-editor-heading { display: flex; align-items: center; min-width: 0; }
    #OpenModalUser .user-editor-heading-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; margin-right: 14px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(255,255,255,.14); font-size: 23px; }
    #OpenModalUser .user-editor-heading h4 { margin: 0; color: #fff; font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; }
    #OpenModalUser .user-editor-heading p { margin: 4px 0 0; color: rgba(255,255,255,.8); font-size: .82rem; }
    #OpenModalUser .user-editor-close { display: grid; width: 38px; height: 38px; margin: 0 0 0 auto; padding: 0; place-items: center; border-radius: 11px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.45rem; opacity: 1; text-shadow: none; transition: .2s ease; }
    #OpenModalUser .user-editor-close:hover { background: rgba(255,255,255,.24); transform: rotate(4deg); }
    #OpenModalUser .user-editor-body { max-height: calc(100vh - 210px); padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
    #OpenModalUser .user-modal-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 320px; color: #64748b; font-size: .9rem; }
    #OpenModalUser .user-form-layout { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 18px; align-items: start; }
    #OpenModalUser .user-form-section { min-width: 0; padding: 20px; border: 1px solid #e1e8f2; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(25, 50, 85, .045); }
    #OpenModalUser .user-section-heading { display: flex; align-items: center; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #edf1f6; }
    #OpenModalUser .user-section-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; margin-right: 11px; place-items: center; border-radius: 11px; background: #eaf3ff; color: #1764be; font-size: 17px; }
    #OpenModalUser .user-section-heading h5 { margin: 0; color: #17233d; font-size: .98rem; font-weight: 700; }
    #OpenModalUser .user-section-heading p { margin: 3px 0 0; color: #7b879b; font-size: .75rem; line-height: 1.35; }
    #OpenModalUser .user-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    #OpenModalUser .form-group { min-width: 0; margin: 0; }
    #OpenModalUser .user-field-full { grid-column: 1 / -1; }
    #OpenModalUser label { margin-bottom: 6px; color: #354258; font-size: .77rem; font-weight: 600; }
    #OpenModalUser .required-mark { color: #ef4444; }
    #OpenModalUser .optional-label { margin-left: 5px; padding: 2px 6px; border-radius: 10px; background: #eef2f7; color: #7b879b; font-size: .62rem; font-weight: 600; }
    #OpenModalUser .form-control { height: 41px; border: 1px solid #d7e0ec; border-radius: 9px; background-color: #fff; color: #24324a; font-size: .8rem; transition: border-color .2s, box-shadow .2s, background-color .2s; }
    #OpenModalUser .form-control::placeholder { color: #a2adbd; }
    #OpenModalUser .form-control:focus { border-color: #4b92e5; box-shadow: 0 0 0 3px rgba(35,115,211,.12); }
    #OpenModalUser .form-control[readonly] { padding-right: 34px; background: #f2f5f9; color: #6b778b; cursor: not-allowed; }
    #OpenModalUser .readonly-field, #OpenModalUser .user-password-wrap, #OpenModalUser .percentage-field { position: relative; }
    #OpenModalUser .readonly-field > i { position: absolute; top: 13px; right: 13px; color: #98a4b5; }
    #OpenModalUser .user-password-wrap input { padding-right: 42px; }
    #OpenModalUser .password-toggle { position: absolute; top: 4px; right: 5px; width: 33px; height: 33px; border: 0; border-radius: 7px; background: transparent; color: #758399; cursor: pointer; transition: .2s; }
    #OpenModalUser .password-toggle:hover { background: #edf4fc; color: #1764be; }
    #OpenModalUser .profile-photo-field { display: flex; align-items: center; gap: 14px; margin: -2px 0 17px; padding: 13px; border: 1px dashed #cbd9e9; border-radius: 12px; background: linear-gradient(135deg, #f8fbff, #fbfcfe); transition: border-color .2s, background .2s; }
    #OpenModalUser .profile-photo-field:hover { border-color: #87afe0; background: #f4f9ff; }
    #OpenModalUser .profile-photo-preview { position: relative; display: grid; flex: 0 0 68px; width: 68px; height: 68px; overflow: hidden; place-items: center; border: 3px solid #fff; border-radius: 19px; background: linear-gradient(135deg, #dcecff, #edf5ff); color: #1764be; font-size: 24px; font-weight: 800; box-shadow: 0 4px 13px rgba(31,91,160,.16); }
    #OpenModalUser .profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
    #OpenModalUser .profile-photo-copy { min-width: 0; }
    #OpenModalUser .profile-photo-copy > strong { display: block; color: #293852; font-size: .8rem; }
    #OpenModalUser .profile-photo-copy p { margin: 3px 0 8px; color: #7c899d; font-size: .68rem; line-height: 1.45; }
    #OpenModalUser .profile-photo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
    #OpenModalUser .profile-photo-button, #OpenModalUser .profile-photo-remove { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; margin: 0; padding: 6px 10px; border-radius: 8px; font-size: .68rem; font-weight: 700; cursor: pointer; transition: .2s; }
    #OpenModalUser .profile-photo-button { border: 1px solid #bad1ec; background: #eaf3ff; color: #1764be; }
    #OpenModalUser .profile-photo-button:hover { border-color: #7ba9df; background: #deedff; }
    #OpenModalUser .profile-photo-remove { border: 0; background: #fff0f2; color: #c83c50; }
    #OpenModalUser .profile-photo-remove:hover { background: #ffe4e8; }
    #OpenModalUser .user-subsection-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid #edf1f6; }
    #OpenModalUser .user-subsection-title > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #ecfdf5; color: #16966d; }
    #OpenModalUser .user-subsection-title strong, #OpenModalUser .user-subsection-title span { display: block; }
    #OpenModalUser .user-subsection-title strong { color: #283750; font-size: .82rem; }
    #OpenModalUser .user-subsection-title span { margin-top: 2px; color: #8490a2; font-size: .7rem; }
    #OpenModalUser .commission-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    #OpenModalUser .percentage-field input { padding-right: 35px; }
    #OpenModalUser .percentage-field span { position: absolute; top: 1px; right: 1px; display: grid; width: 34px; height: 39px; place-items: center; border-left: 1px solid #e1e7ef; color: #69778c; font-size: .75rem; }
    #OpenModalUser .access-menu-card { overflow: hidden; margin-bottom: 14px; border: 1px solid #dfe7f1; border-radius: 12px; background: #fbfcfe; }
    #OpenModalUser .access-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e7edf4; background: #f5f8fc; }
    #OpenModalUser .access-menu-header strong, #OpenModalUser .access-menu-header span { display: block; }
    #OpenModalUser .access-menu-header strong { color: #293852; font-size: .8rem; }
    #OpenModalUser .access-menu-header > div > span { margin-top: 2px; color: #8490a2; font-size: .68rem; }
    #OpenModalUser .select-all-control { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 9px; border: 1px solid #d8e3f0; border-radius: 8px; background: #fff; color: #1764be; white-space: nowrap; cursor: pointer; }
    #OpenModalUser .select-all-control input { accent-color: #1764be; }
    #OpenModalUser .access-menu-list { height: 210px; padding: 12px 14px; overflow-y: auto; color: #4b5870; font-size: .77rem; scrollbar-width: thin; scrollbar-color: #b8c6d9 transparent; }
    #OpenModalUser .access-menu-list ul { margin-bottom: 4px; padding-left: 20px; list-style: none; }
    #OpenModalUser .access-menu-list > ul { padding-left: 0; }
    #OpenModalUser .access-menu-list label { margin-bottom: 5px; font-weight: 500; cursor: pointer; }
    #OpenModalUser .access-menu-list input { margin-right: 6px; accent-color: #1764be; }
    #OpenModalUser .access-fields { margin-bottom: 14px; }
    #OpenModalUser .select2-container { width: 100% !important; }
    #OpenModalUser .select2-container .select2-selection--multiple, #OpenModalUser .select2-container .select2-selection--single { min-height: 41px; border-color: #d7e0ec; border-radius: 9px; }
    #OpenModalUser .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #4b92e5; box-shadow: 0 0 0 3px rgba(35,115,211,.12); }
    #OpenModalUser .account-status-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #dfe7f1; border-radius: 12px; background: #fbfcfe; }
    #OpenModalUser .account-status-card strong, #OpenModalUser .account-status-card > div > span { display: block; }
    #OpenModalUser .account-status-card strong { color: #293852; font-size: .8rem; }
    #OpenModalUser .account-status-card > div > span { margin-top: 2px; color: #8490a2; font-size: .68rem; }
    #OpenModalUser .user-status-options { display: flex; gap: 6px; flex: 0 0 auto; }
    #OpenModalUser .user-status-options label { margin: 0; cursor: pointer; }
    #OpenModalUser .user-status-options input { position: absolute; opacity: 0; pointer-events: none; }
    #OpenModalUser .user-status-options label span { display: block; margin: 0; padding: 7px 10px; border: 1px solid #d9e2ed; border-radius: 8px; background: #fff; color: #69778c; font-size: .7rem; font-weight: 600; transition: .2s; }
    #OpenModalUser .user-status-options input:checked + span { border-color: #2373d3; background: #eaf3ff; color: #1764be; box-shadow: 0 0 0 2px rgba(35,115,211,.08); }
    #OpenModalUser .admin-status-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; background: #eafaf3; color: #13835f; font-size: .72rem; font-weight: 700; }
    #OpenModalUser .user-editor-footer { min-height: 72px; padding: 13px 22px; border-top: 1px solid #e1e8f2; background: #fff; }
    #OpenModalUser .user-editor-footer .btn { min-width: 106px; height: 42px; border-radius: 10px; font-size: .8rem; font-weight: 700; transition: .2s ease; }
    #OpenModalUser .user-editor-cancel { border: 1px solid #d8e1ec; background: #fff; color: #5e6b7f; }
    #OpenModalUser .user-editor-cancel:hover { background: #f3f6fa; color: #25344d; }
    #OpenModalUser .user-editor-save { border: 1px solid #1764be; background: #1764be; color: #fff; box-shadow: 0 5px 12px rgba(23,100,190,.22); }
    #OpenModalUser .user-editor-save:hover { border-color: #1055a5; background: #1055a5; color: #fff; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(23,100,190,.28); }
    #OpenModalUser .user-editor-save i { margin-right: 5px; }
    body.modal-open #OpenModalUser.show ~ .modal-backdrop, .modal-backdrop.show { opacity: .62; }

    @media (max-width: 991.98px) {
        #OpenModalUser .user-form-layout { grid-template-columns: 1fr; }
        #OpenModalUser .user-editor-body { max-height: calc(100vh - 190px); }
    }
    @media (max-width: 575.98px) {
        #OpenModalUser .user-editor-dialog { width: 100%; min-height: 100%; margin: 0; }
        #OpenModalUser .user-editor-content { min-height: 100vh; border-radius: 0; }
        #OpenModalUser .user-editor-header { min-height: 78px; padding: 14px 16px; }
        #OpenModalUser .user-editor-heading-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 11px; font-size: 19px; }
        #OpenModalUser .user-editor-heading h4 { font-size: 1.05rem; }
        #OpenModalUser .user-editor-heading p { overflow: hidden; max-width: 245px; text-overflow: ellipsis; white-space: nowrap; }
        #OpenModalUser .user-editor-body { max-height: calc(100vh - 146px); padding: 12px; }
        #OpenModalUser .user-form-section { padding: 15px; border-radius: 12px; }
        #OpenModalUser .user-fields-grid, #OpenModalUser .commission-grid { grid-template-columns: 1fr; }
        #OpenModalUser .user-field-full { grid-column: auto; }
        #OpenModalUser .profile-photo-field { align-items: flex-start; }
        #OpenModalUser .profile-photo-preview { flex-basis: 58px; width: 58px; height: 58px; border-radius: 16px; }
        #OpenModalUser .account-status-card { align-items: flex-start; flex-direction: column; }
        #OpenModalUser .user-editor-footer { position: sticky; bottom: 0; min-height: 68px; padding: 10px 12px; }
        #OpenModalUser .user-editor-footer .btn { flex: 1; }
    }
</style>

<script>
    function searchPengguna(page_num){
        page_num = page_num?page_num:0;
        var keywords = $('#keywords').val();
        var sortBy = $('#sortBy').val();
        $.ajax({
            type: 'POST',
            url: base_url+'user/ajaxPengguna/'+page_num,
            data:'page='+page_num+'&keywords='+keywords+'&sortBy='+sortBy,
            beforeSend: function(){
                $('body').loading();
			},
            success: function(html){
                $('#posts_content').html(html);
                $('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	}
	
	$('#OpenModalUser').on('show.bs.modal', function(e) {
		var id = $(e.relatedTarget).data('id');
		var mod = $(e.relatedTarget).data('mod');
		var $modal = $(this);
		var loadingMarkup = '<div class="user-modal-loading" aria-label="Memuat formulir"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span>Menyiapkan formulir pengguna...</span></div>';
		
		if(id != 0){
			var urldata = "edit_user";
			var tipe = 'edit';
			$modal.find("#myModalLabelPengguna").text("Edit Pengguna");
			$modal.find("#userModalDescription").text("Perbarui informasi, hak akses, dan status pengguna.");
			$modal.find(".user-save-label").text("Simpan Perubahan");
			}else{
			var urldata = "add_user";
			var tipe = 'new';
			$modal.find("#myModalLabelPengguna").text("Tambah Pengguna");
			$modal.find("#userModalDescription").text("Lengkapi informasi, akses menu, dan status pengguna.");
			$modal.find(".user-save-label").text("Simpan Pengguna");
		}
		$modal.find('.load-pengguna').html(loadingMarkup);
		$.ajax({
			type: 'POST',
			url: base_url + "user/"+urldata,
			data: {tipe:tipe,id:id,mod:mod},
			dataType: "html",
			success: function(data) {
				$modal.find('.load-pengguna').html(data);
			},
			error : function(res, status, httpMessage) {
				$modal.find('.load-pengguna').html('<div class="user-modal-loading text-danger"><i class="fa fa-exclamation-circle"></i><span>Formulir gagal dimuat. Silakan tutup dan coba lagi.</span></div>');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	$('#OpenModalUser').on('hidden.bs.modal', function() {
		$(this).find('.load-pengguna').empty();
	});
	
    
    function simpanMember()
    {
        // console.log('submit');
        if($("#mail").val()==''){
            $("#mail").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#mail").focus();
            return;
		}
        if($("#title").val()==''){
            $("#title").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#title").focus();
            return;
		}
		if($("#jabatan").val()==''){
            $("#jabatan").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#jabatan").focus();
            return;
		}
        if($("#daftar").val()==''){
            $("#daftar").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#daftar").focus();
            return;
		}
        if($("#phone").val()==''){
            $("#phone").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#phone").focus();
            return;
		}
        if($("#alamat").val()==''){
            $("#alamat").addClass('form-control-warning');
            showNotif('top-center','Input Data','Harus diisi','warning');
            $("#alamat").focus();
            return;
		}
        if($("#komisi_desain_aktif").val() == '1'){
            var komisiPersen = parseFloat(($("#komisi_desain_persen").val() || '0').replace(',', '.'));
            if(!komisiPersen || komisiPersen <= 0){
                $("#komisi_desain_persen").addClass('form-control-warning');
                showNotif('top-center','Input Data','Persentase komisi desain harus lebih dari 0','warning');
                $("#komisi_desain_persen").focus();
                return;
            }
        }
        
        var formElement = document.getElementById('formAdd');
        var formData = new FormData(formElement);
        $.ajax({
            type: "POST",
            url: base_url+"user/simpan_pengguna",
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
				$('#btn-bahan').prop('disabled', true).find('.fa').attr('class','fa fa-circle-o-notch fa-spin');
                $('body').loading();
			},
            success: function(data) {
                $('body').loading('stop');
				$('#btn-bahan').prop('disabled', false).find('.fa').attr('class','fa fa-save');
                if(data.status==200){
                    showNotif('bottom-right',data.title,data.msg,'success');
                    }else{
                    showNotif('bottom-right',data.title,data.msg,'error');
				}
                $("#OpenModalUser").modal('hide');
                searchPengguna();
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				$('#btn-bahan').prop('disabled', false).find('.fa').attr('class','fa fa-save');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	}
    $(document).on('click','.hapus_user',function(e){
		var id = $("#data-hapus").val();
		$.ajax({
			url: base_url + 'user/hapus_user',
			data: {id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function () {
                $('body').loading();
			},
			success: function(data) {
				if(data.status==200){
					showNotif('bottom-right',data.title,data.msg,'success');
					}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				searchPengguna();
				$('#confirm-delete').modal('hide');
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
</script>        
