@extends('master')
@section('content')
    <div class="page-view active">
        <div class="reg-filter-card">
            <div class="reg-filter-head">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M2 4h12M4 8h8M6 12h4"/></svg>
                Filter Data
            </div>

            <div class="reg-filter-row" style="margin-bottom:12px">
                <div class="c-field">
                    <div class="c-label">Status</div>
                    <select class="c-input" id="f-status">
                        <option value="all">Semua</option>
                        <option value="1">Aktif</option>
                        <option value="0">Nonaktif</option>
                    </select>
                </div>
                <div class="c-field">
                    <div class="c-label">Role</div>
                    <select class="c-input" id="f-role">
                        <option value="all">Semua</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="c-field">
                    <div class="c-label">Sort</div>
                    <select class="c-input" id="f-sort">
                        <option value="asc">ASC</option>
                        <option selected value="desc">DESC</option>
                    </select>
                </div>
                <div class="c-field">
                    <div class="c-label">Sort Field</div>
                    <select class="c-input" id="f-sort-field">
                        <option value="name">Nama</option>
                        <option selected value="created_at">Tgl Daftar</option>
                    </select>
                </div>
                <div style="display:flex;gap:8px;align-self:flex-end;">
                    <button class="btn-primary" onclick="applyFilter()">Terapkan</button>
                    <button class="btn-secondary" onclick="resetFilter()">Reset</button>
                </div>
            </div>

            <div class="reg-filter-row">
                <div class="c-field">
                    <div class="c-label">Nama Lengkap</div>
                    <div class="reg-inp-wrap">
                        <svg class="reg-inp-ico" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="6.5" cy="6.5" r="4"/><path d="M11 11l3 3" stroke-linecap="round"/></svg>
                        <input class="c-input reg-inp-has-ico" id="f-search-name" placeholder="Cari nama..." oninput="searchFilter()" />
                    </div>
                </div>
            </div>
        </div>

        <div class="reg-table-card">
            <div class="reg-table-header">
                <div class="reg-table-header-left">
                    <span class="reg-table-title">Data Pendaftaran</span>
                    <span class="reg-badge-count" id="badge-count">0 data</span>
                </div>
                <button class="btn-primary" onclick="openModal()">
                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                        <path d="M8 3v10M3 8h10"/>
                    </svg>
                    Tambah Data
                </button>
            </div>

            <div class="reg-table-scroll">
                <div id="table-loading" class="table-loading-overlay" style="display: none;">
                    <div class="loading-content">
                        <div class="loading-spinner"></div>
                        <span>Memuat data...</span>
                    </div>
                </div>
                <table id="administratorTable" class="reg-table">
                    <thead>
                    <tr>
                        <th style="width:44px">No.</th>
                        <th>Nama Lengkap</th>
                        <th>Jabatan</th>
                        <th>Status</th>
                        <th>Tgl. Daftar</th>
                        <th style="text-align:center;width:160px">Aksi</th>
                    </tr>
                    </thead>
                    <tbody id="tbl-body"></tbody>
                </table>
            </div>

            <div id="reg-empty" class="reg-empty">Tidak ada data yang ditemukan.</div>

            <div class="reg-table-footer">
                <div class="pag-info" id="pag-info"></div>
                <div class="pag-btns" id="pag-btns"></div>
            </div>
        </div>

    </div>

    <div class="modal-backdrop" id="modal">
        <div class="modal">
            <div class="modal-head">
                <span class="modal-title" id="modal-title">Tambah Data Pendaftaran</span>
                <button class="modal-close" onclick="closeModal()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                        <path d="M3 3l10 10M13 3L3 13"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="c-field">
                    <div class="c-label">Nama Lengkap <span class="required">*</span></div>
                    <input class="c-input" id="inp-name" placeholder="Masukkan nama lengkap" />
                    <div class="error-text" id="err-name" style="color:red; font-size:12px; display:none;"></div>
                </div>

                <div class="c-field">
                    <div class="c-label">Email <span class="required">*</span></div>
                    <input type="email" class="c-input" id="inp-email" placeholder="Masukkan nama lengkap" />
                    <div class="error-text" id="err-email" style="color:red; font-size:12px; display:none;"></div>
                </div>

                <div class="c-field">
                    <div class="c-label">Jabatan <span class="required">*</span></div>
                    <select class="c-input" id="inp-role">
                        <option value="">— Pilih jabatan —</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                    <div class="error-text" id="err-role_id" style="color:red; font-size:12px; display:none;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeModal()">Batal</button>
                <button class="btn-primary" onclick="handleSaveOrUpdate(this)">Simpan Data</button>
            </div>
        </div>
    </div>

    <div class="confirm-backdrop" id="confirm-modal">
        <div class="confirm-box">
            <div class="confirm-title">Hapus Data?</div>
            <div class="confirm-text" id="confirm-text">Data ini akan dihapus secara permanen dan tidak dapat dikembalikan.</div>
            <div class="confirm-btns">
                <button class="btn-secondary" onclick="closeConfirm()">Batal</button>
                <button class="btn-primary" id="confirm-ok" onclick="deleteData(this)">Hapus</button>
            </div>
        </div>
    </div>

    <div class="confirm-backdrop" id="reset-password-modal">
        <div class="confirm-box">
            <div class="confirm-title">Reset Kata Sandi?</div>
            <div class="confirm-text" id="reset-password-text">Kata sandi untuk user ini akan direset dan dikirim ke email mereka. Apakah Anda yakin ingin melanjutkan?</div>
            <div class="confirm-btns">
                <button class="btn-secondary" onclick="closeResetPasswordModal()">Batal</button>
                <button class="btn-primary" id="reset-password-ok" onclick="resetPasswordData(this)">Reset Sandi</button>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        window.Laravel = {
            routes : {
                query:'{{route("administrator.query")}}',
                store : '{{route("administrator.store")}}',
                update: "{{route('administrator.update', ['id' => ':id'])}}",
                delete: '{{route("administrator.delete", ["id" => ":id"])}}',
                resetPassword: '{{route("administrator.reset", ["id" => ":id"])}}'
            }
        };
    </script>
    @vite(['resources/js/user-management/administrator.js'])

@endpush