@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css">
@endsection
@php
    use App\Models\Other\Degree;
@endphp
<div>
    <div wire:loading.block wire:target="requestResetPassword, submitRegister, submitLogin, changePassword">
        @include('layouts.admin.loading-screen')
    </div>
    <div class="w-100 vh-100 d-flex align-items-center justify-content-center bg-auth px-3">
        <div class="card">
            <div class="card-body p-0">
                <div class="p-4">
                    <img src="{{ asset('storage/' . $system_setting_cached->logo_white) }}" class="w-100" loading="lazy" alt="SIMETIK">
                </div>
                <div class="overflow-y-auto overflow-x-hidden pb-4 px-4" style="max-height: 400px;">
                    <div class="{{ $auth_type == 'login' ? 'd-block' : 'd-none ' }} animated slideInLeft" wire:key="form-login">
                        <form class="row g-3" wire:submit="submitLogin()">
                            <div class="col-12">
                                <h2 class="text-white fw-bold mb-1">Login</h2>
                                <p class="text-white mb-0">Silahkan Masukkan E-Mail dan Kata Sandi.</p>
                            </div>
                            <div class="col-12" wire:key="field-log-email">
                                <div class="input-box">
                                    <span class="icon">
                                        <i class="fa-regular fa-envelope fa-fw"></i>
                                    </span>
                                    <input type="text" wire:model="login.email" value="" autofocus required>
                                    <label class="@error('login.email') text-danger @enderror">E-Mail</label>
                                </div>
                                @error('login.email')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12" wire:key="field-log-password">
                                <div class="input-box" x-data="{ show: 'false' }">
                                    <span class="icon">
                                        <i :class="show ? 'fa-regular fa-eye-slash fa-fw me-1 cursor-pointer' : 'fa-regular fa-eye fa-fw me-1 cursor-pointer'" x-on:click="show = ! show"></i>
                                        <i class="fa-regular fa-key fa-fw"></i>
                                    </span>
                                    <input :type="show ? 'password' : 'text'" wire:model="login.password" value="" required>
                                    <label class="@error('login.password') text-danger @enderror">Kata Sandi</label>
                                </div>
                                @error('login.password')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <div class="row justify-content-between">
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1" wire:model="login.remember_me" id="remember_me">
                                            <label class="form-check-label text-white" for="remember_me">
                                                Ingat Saya
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col text-end">
                                        <a href="javascript:void(0)" class="link-warning text-decoration-none fw-medium" wire:click="changeAuthType('lupa-sandi')">Lupa Sandi ?</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-light w-100" type="submit" wire:loading.attr="disabled">Login</button>
                            </div>
                            <div class="col-12 text-center">
                                <p class="fw-medium mb-0">
                                    <span class="text-white">Belum Punya Akun ?</span>
                                    <a href="javascript:void(0)" class="link-warning text-decoration-none" wire:click="changeAuthType('daftar')">Daftar</a>
                                </p>
                            </div>
                        </form>
                    </div>
                    <div class="{{ $auth_type == 'daftar' ? 'd-block' : 'd-none ' }} animated slideInRight" wire:key="form-register">
                        <form wire:submit="submitRegister()">
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <h2 class="text-white fw-bold mb-1">Daftar</h2>
                                    <p class="text-white mb-0">Harap Masukkan Data Yang Valid !</p>
                                </div>
                                <div class="col-12">
                                    <div class="form-label text-white">Tipe Akun</div>
                                    <div class="row g-3" wire:key="field-role">
                                        <div class="col-4">
                                            <input type="radio" class="btn-check" name="register.role" id="student" wire:model.live.debounce.1s="register.role" value="mahasiswa">
                                            <label class="btn btn-{{ array_key_exists('role', $register) && $register['role'] == 'mahasiswa' ? 'warning' : 'light' }} w-100" for="student">Mahasiswa</label>
                                        </div>
                                        <div class="col-4">
                                            <input type="radio" class="btn-check" name="register.role" id="lecturer" wire:model.live.debounce.1s="register.role" value="dosen">
                                            <label class="btn btn-{{ array_key_exists('role', $register) && $register['role'] == 'dosen' ? 'primary' : 'light' }} w-100" for="lecturer">Dosen</label>
                                        </div>
                                        <div class="col-4">
                                            <input type="radio" class="btn-check" name="register.role" id="public" wire:model.live.debounce.1s="register.role" value="umum">
                                            <label class="btn btn-{{ array_key_exists('role', $register) && $register['role'] == 'umum' ? 'success' : 'light' }} w-100" for="public">Umum</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if (array_key_exists('role', $register) ? $register['role'] : '')
                                <div class="row g-3 mb-3 animated slideInUp">
                                    <div class="col-12" wire:key="field-origin-institution">
                                        <div class="form-label @error('register.origin_of_institution') text-danger @else text-white @enderror">Asal Institusi</div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" wire:model.live.debounce.1s="register.origin_of_institution" name="register.origin_of_institution" id="internal" value="internal">
                                            <label class="form-check-label text-white" for="internal">Internal</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" wire:model.live.debounce.1s="register.origin_of_institution" name="register.origin_of_institution" id="external" value="external">
                                            <label class="form-check-label text-white" for="external">External</label>
                                        </div>
                                        @error('register.origin_of_institution')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    @if (array_key_exists('origin_of_institution', $register) ? $register['origin_of_institution'] == 'external' : '')
                                        <div class="col-12" wire:key="field-institution-name">
                                            <div class="input-box">
                                                <span class="icon" x-data="{ tooltip: 'Contoh : Fakultas Kedokteran Universitas XXXXXXX' }" x-tooltip="tooltip">
                                                    <i class="fa-regular fa-school fa-fw fa-bounce"></i>
                                                </span>
                                                <input type="text" wire:model.live.debounce.1s="register.institution_name" value="" required>
                                                <label class="@error('register.institution_name') text-danger @enderror">Nama Institusi</label>
                                            </div>
                                            @error('register.institution_name')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    @endif
                                    <div class="col-12" wire:key="field-faculty">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : Kedokteran' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-building-columns fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="text" wire:model.live.debounce.1s="register.faculty" value="" required>
                                            <label class="@error('register.faculty') text-danger @enderror">Fakultas</label>
                                        </div>
                                        @error('register.faculty')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-courses">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : Ilmu Kedokteran Dasar' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-graduation-cap fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="text" wire:model.live.debounce.1s="register.courses" value="" required>
                                            <label class="@error('register.courses') text-danger @enderror">Program Studi</label>
                                        </div>
                                        @error('register.courses')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-master-number">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : 1234567890' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-id-card fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="tel" wire:model.live.debounce.1s="register.master_number" value="" maxlength="20" onkeypress="return onlyNumberKey(event)" required>
                                            <label class="@error('register.master_number') text-danger @enderror">{{ $register['role'] == 'mahasiswa' ? 'NIM' : 'NIP' }}</label>
                                        </div>
                                        @error('register.master_number')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-id-card" x-data="{ isUploading: false, progress: 0 }" x-on:livewire-upload-start="isUploading = true" x-on:livewire-upload-finish="isUploading = false" x-on:livewire-upload-error="isUploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
                                        <div class="form-label @error('register.id_card') text-danger @else text-white @enderror">Kartu {{ $register['role'] == 'mahasiswa' ? 'NIM' : 'NIP' }}</div>
                                        <div class="input-group">
                                            <input type="file" class="form-control" wire:model.live.debounce.1s="register.id_card" accept=".png,.jpg,.jpeg,.webp" required>
                                            <button type="button" class="btn {{ array_key_exists('id_card', $register) ? 'btn-info' : 'btn-secondary' }}" @if (array_key_exists('id_card', $register)) data-fancybox data-src="{{ $register['id_card']->temporaryUrl() }}" @else disabled @endif><i class="fa-regular fa-eye fa-fw"></i></button>
                                        </div>
                                        <div x-show="isUploading">
                                            <progress max="100" x-bind:value="progress"></progress>
                                        </div>
                                        @error('register.id_card')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-degree-id">
                                        <div class="form-label @error('register.degree_id') text-danger @else text-white @enderror">Strata</div>
                                        <select class="form-select" wire:model.live.debounce.1s="register.degree_id">
                                            <option value="">-- Pilih Strata --</option>
                                            @foreach ($degrees as $degree)
                                                <option value="{{ $degree->id }}">{{ $degree->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('register.degree_id')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    @if (array_key_exists('degree_id', $register) ? Degree::find($register['degree_id'])->name == 'Lain - Lain' : '')
                                        <div class="col-12" wire:key="field-other-degree">
                                            <div class="input-box">
                                                <span class="icon" x-data="{ tooltip: 'Contoh : Profesi' }" x-tooltip="tooltip">
                                                    <i class="fa-regular fa-ribbon fa-fw fa-bounce"></i>
                                                </span>
                                                <input type="text" wire:model.live.debounce.1s="register.other_degree" value="" required>
                                                <label class="@error('register.other_degree') text-danger @enderror">Strata Lainnya</label>
                                            </div>
                                            @error('register.other_degree')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    @endif
                                    <div class="col-12" wire:key="field-name">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : Rama Fitra Galang' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-user fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="text" wire:model.live.debounce.1s="register.name" value="" required>
                                            <label class="@error('register.name') text-danger @enderror">Nama Lengkap</label>
                                        </div>
                                        @error('register.name')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-gender">
                                        <div class="form-label text-white">Jenis Kelamin</div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" wire:model.live.debounce.1s="register.gender" name="register.gender" id="man" value="man">
                                            <label class="form-check-label text-white" for="man">Pria</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" wire:model.live.debounce.1s="register.gender" name="register.gender" id="woman" value="woman">
                                            <label class="form-check-label text-white" for="woman">Wanita</label>
                                        </div>
                                        @error('register.gender')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-phone-number">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : 0813XXXXXXXX' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-phone fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="tel" wire:model.live.debounce.1s="register.phone_number" value="" maxlength="15" onkeypress="return onlyNumberKey(event)" required>
                                            <label class="@error('register.phone_number') text-danger @enderror">No. Telp</label>
                                        </div>
                                        @error('register.phone_number')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-reg-email">
                                        <div class="input-box">
                                            <span class="icon" x-data="{ tooltip: 'Contoh : bayuadji@gmail.com' }" x-tooltip="tooltip">
                                                <i class="fa-regular fa-envelope fa-fw fa-bounce"></i>
                                            </span>
                                            <input type="text" wire:model.live.debounce.1s="register.email" value="" required>
                                            <label class="@error('register.email') text-danger @enderror">E-Mail</label>
                                        </div>
                                        @error('register.email')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-reg-password">
                                        <div class="input-box" x-data="{ show: 'false' }">
                                            <span class="icon">
                                                <i :class="show ? 'fa-regular fa-eye-slash fa-fw me-1 cursor-pointer' : 'fa-regular fa-eye fa-fw me-1 cursor-pointer'" x-on:click="show = ! show"></i>
                                                <i class="fa-regular fa-key fa-fw"></i>
                                            </span>
                                            <input :type="show ? 'password' : 'text'" wire:model.live.debounce.1s="register.password" value="" required>
                                            <label class="@error('register.password') text-danger @enderror">Kata Sandi</label>
                                        </div>
                                        @error('register.password')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12" wire:key="field-reg-password-confirmation">
                                        <div class="input-box" x-data="{ show: 'false' }">
                                            <span class="icon">
                                                <i :class="show ? 'fa-regular fa-eye-slash fa-fw me-1 cursor-pointer' : 'fa-regular fa-eye fa-fw me-1 cursor-pointer'" x-on:click="show = ! show"></i>
                                                <i class="fa-regular fa-key fa-fw"></i>
                                            </span>
                                            <input :type="show ? 'password' : 'text'" wire:model.live.debounce.1s="register.password_confirmation" value="" required>
                                            <label class="@error('register.password_confirmation') text-danger @enderror">Konfirmasi Kata Sandi</label>
                                        </div>
                                        @error('register.password_confirmation')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                    <button class="btn btn-light w-100" type="submit" @if (array_keys_exist(['role', 'origin_of_institution', 'origin_of_institution', 'faculty', 'courses', 'master_number', 'id_card', 'degree_id', 'name', 'gender', 'phone_number', 'email', 'password', 'password_confirmation'], $register)) @if ($register['origin_of_institution'] == 'external' && !array_key_exists('institution_name', $register)) disabled @endif @if ($register['degree_id'] == 4 && !array_key_exists('other_degree', $register)) disabled @endif @else disabled @endif wire:loading.attr="disabled">Daftar</button>
                                    </div>
                                </div>
                            @endif
                        </form>
                        <div class="row g-3">
                            <div class="col-12 text-center">
                                <p class="fw-medium mb-0">
                                    <span class="text-white">Sudah Punya Akun ?</span>
                                    <a href="javascript:void(0)" class="link-warning text-decoration-none" wire:click="changeAuthType('login')">Login</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="{{ $auth_type == 'lupa-sandi' ? 'd-block' : 'd-none ' }} animated slideInLeft" wire:key="form-reset-password">
                        <form class="row g-3" wire:submit="requestResetPassword()">
                            <div class="col-12">
                                <h2 class="text-white fw-bold mb-1">Lupa Sandi</h2>
                                <p class="text-white mb-0">Masukkan email yang kamu daftarkan !</p>
                            </div>
                            <div class="col-12" wire:key="field-res-email">
                                <div class="input-box">
                                    <span class="icon">
                                        <i class="fa-regular fa-envelope fa-fw"></i>
                                    </span>
                                    <input type="email" wire:model.live.debounce.1s="reset_password.email" value="" autofocus required>
                                    <label class="@error('reset_password.email') text-danger @enderror">E-Mail</label>
                                </div>
                                @error('reset_password.email')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <button class="btn btn-light w-100" type="submit" {{ array_key_exists('email', $reset_password) ? '' : 'disabled' }} wire:loading.attr="disabled">Kirim</button>
                            </div>
                            <div class="col-12 text-center">
                                <p class="fw-medium mb-0">
                                    <span class="text-white">Ingat Kata Sandi ?</span>
                                    <a href="javascript:void(0)" class="link-warning text-decoration-none" wire:click="changeAuthType('login')">Login</a>
                                </p>
                            </div>
                        </form>
                    </div>
                    @if ($auth_type == 'ganti-sandi')
                        <div class="d-block animated slideInLeft" wire:key="form-change-password">
                            <form class="row g-3" wire:submit="changePassword()">
                                <div class="col-12">
                                    <h2 class="text-white fw-bold mb-1">Ganti Sandi</h2>
                                    <p class="text-white mb-0">Silahkan Buat Kata Sandi Baru Anda !</p>
                                </div>
                                <div class="col-12" wire:key="field-change-password">
                                    <div class="input-box" x-data="{ show: 'false' }">
                                        <span class="icon">
                                            <i :class="show ? 'fa-regular fa-eye-slash fa-fw me-1 cursor-pointer' : 'fa-regular fa-eye fa-fw me-1 cursor-pointer'" x-on:click="show = ! show"></i>
                                            <i class="fa-regular fa-key fa-fw"></i>
                                        </span>
                                        <input :type="show ? 'password' : 'text'" wire:model.live.debounce.1s="reset_password.password" value="" required>
                                        <label class="@error('reset_password.password') text-danger @enderror">Kata Sandi Baru</label>
                                    </div>
                                    @error('reset_password.password')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12" wire:key="field-change-password-confirmation">
                                    <div class="input-box" x-data="{ show: 'false' }">
                                        <span class="icon">
                                            <i :class="show ? 'fa-regular fa-eye-slash fa-fw me-1 cursor-pointer' : 'fa-regular fa-eye fa-fw me-1 cursor-pointer'" x-on:click="show = ! show"></i>
                                            <i class="fa-regular fa-key fa-fw"></i>
                                        </span>
                                        <input :type="show ? 'password' : 'text'" wire:model.live.debounce.1s="reset_password.password_confirmation" value="" required>
                                        <label class="@error('reset_password.password_confirmation') text-danger @enderror">Konfirmasi Ulang Kata Sandi Baru</label>
                                    </div>
                                    @error('reset_password.password_confirmation')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <h6 class="mb-1 text-white">Cara Membuat Kata Sandi Yang Aman :</h6>
                                    <ul class="ps-3 mb-0">
                                        <li class="mb-1 text-white">Minimal 8 karakter - semakin banyak, semakin baik</li>
                                        <li class="mb-1 text-white">Setidaknya satu karakter huruf kecil</li>
                                        <li class="text-white">Setidaknya satu angka, simbol, atau karakter spasi putih</li>
                                    </ul>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-light w-100" type="submit" {{ array_keys_exist(['password', 'password_confirmation'], $reset_password) ? '' : 'disabled' }} wire:loading.attr="disabled">Ubah</button>
                                </div>
                            </form>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        function onlyNumberKey(evt) {
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }

        Fancybox.bind('[data-fancybox]', {
            //
        });
    </script>
@endpush