@section('title', 'Pengaturan')
@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" integrity="sha512-Ars0BmSwpsUJnWMw+KoUKGKunT7+T8NGK0ORRKj+HT8naZzLSIQoOSIIM3oyaJljgLxFi0xImI5oZkAWEFARSA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}">
@endsection
<div>
    <div wire:loading.block wire:target="save">
        @include('layouts.admin.loading-screen')
    </div>
    <div class="d-flex align-items-center gap-3">
        <div>
            <h3 class="fw-semibold mb-0">Pengaturan</h3>
        </div>
    </div>
    <hr class="my-3">
    <div x-data="{ tab: 'profile' }">
        <div class="row my-3">
            <div class="col-12">
                <ul class="nav nav-pills nav-fill gap-3">
                    <li class="nav-item">
                        <a :class="tab == 'profile' ? 'nav-link active' : 'nav-link'" href="javascript:void(0);" x-on:click="tab = 'profile'"><i class="fa-regular fa-user-cog fa-fw me-2"></i> Profil</a>
                    </li>
                    <li class="nav-item">
                        <a :class="tab == 'security' ? 'nav-link active' : 'nav-link'" href="javascript:void(0);" x-on:click="tab = 'security'"><i class="fa-regular fa-lock fa-fw me-2"></i> Keamanan</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12" x-show="tab == 'profile'" x-transition>
                <div class="card">
                    <div class="card-body">
                        <h5 class="mb-0">Informasi Profil</h5>
                        <hr class="my-3">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="d-flex align-items-start align-items-sm-center gap-4">
                                    <img src="{{ $photo ? $photo->temporaryUrl() : ($old_photo ? asset('storage/' . $old_photo) : asset('assets/image/profile-' . (Auth::user()->gender ?? 'man') . '.webp')) }}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" loading="lazy" style="object-fit: cover;">
                                    <div class="button-wrapper">
                                        <label for="upload" class="btn btn-warning me-2 mb-3 waves-effect waves-light {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}" tabindex="0">
                                            <span class="d-none d-sm-block">Unggah Foto Baru</span>
                                            <i class="fa-solid fa-upload fa-fw ms-2"></i>
                                            <input type="file" id="upload" class="account-file-input" hidden="" wire:model.live="photo" accept=".png,.jpg,.jpeg,.webp" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                        </label>
                                        <small class="text-muted d-block">Hanya format JPG, JPEG atau PNG. Maksimal ukuran 4096 KB</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex align-items-start align-items-sm-center gap-4">
                                    <img src="{{ $signature ? $signature->temporaryUrl() : (Storage::disk('public')->exists($signature_old) ? asset('storage/' . $signature_old) : asset('assets/image/no-photo.jpg')) }}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" loading="lazy">
                                    <div class="button-wrapper">
                                        <label for="upload-signature" class="btn btn-warning me-2 mb-3 waves-effect waves-light {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}" tabindex="0">
                                            <span class="d-none d-sm-block">Unggah TTD Baru</span>
                                            <i class="fa-solid fa-upload fa-fw ms-2"></i>
                                            <input type="file" id="upload-signature" class="account-file-input" hidden="" wire:model.live="signature" accept=".png" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                        </label>
                                        <small class="text-muted d-block">Hanya format PNG. Maksimal ukuran 4096 KB</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="my-3">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="form-label">Nama Lengkap</div>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" wire:model="name" placeholder="Nama Lengkap..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                @error('name')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            @if ($user->hasAnyRole('mahasiswa', 'dosen', 'umum'))
                                @if ($user->researcherDetail?->origin_of_institution == 'external')
                                    <div class="col-6">
                                        <div class="form-label">Asal Institusi</div>
                                        <input type="text" class="form-control @error('institution_name') is-invalid @enderror" wire:model="institution_name" placeholder="Asal Institusi..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                        @error('institution_name')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif
                            @endif
                            <div class="col-6">
                                <div class="form-label">Jenis Kelamin</div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('gender') is-invalid @enderror" type="radio" wire:model="gender" name="gender" id="man" value="man" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    <label class="form-check-label" for="man">Pria</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('gender') is-invalid @enderror" type="radio" wire:model="gender" name="gender" id="woman" value="woman" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    <label class="form-check-label" for="woman">Wanita</label>
                                </div>
                                @error('gender')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="form-label">E-Mail</div>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" wire:model="email" placeholder="E-Mail..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                @error('email')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            @if ($user->hasAnyRole('mahasiswa', 'dosen', 'umum'))
                                <div class="col-6">
                                    <div class="form-label">No. Telp</div>
                                    <div class="input-group">
                                        <span class="input-group-text">+62</span>
                                        <input type="tel" class="form-control @error('phone_number') is-invalid @enderror" wire:model="phone_number" placeholder="No. Telp..." maxlength="15" onkeypress="return onlyNumberKey(event)" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    </div>
                                    @error('phone_number')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <div class="form-label">NIK (No. KTP)</div>
                                    <input type="tel" class="form-control @error('nik') is-invalid @enderror" wire:model="nik" placeholder="NIK..." maxlength="16" onkeypress="return onlyNumberKey(event)" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    @error('nik')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <div class="form-label">Tanggal Lahir</div>
                                    <input type="text" x-data x-ref="input" x-init="$($refs.input).datepicker({
                                        endDate: '1d',
                                        todayHighlight: true,
                                        format: 'dd/mm/yyyy',
                                        orientation: isRtl ? 'auto right' : 'auto left'
                                    }).on('change', function(e) {
                                        @this.set('date_of_birth', $('#date_of_birth').val());
                                    });;" wire:model="date_of_birth" id="date_of_birth" placeholder="DD/MM/YYYY" class="form-control @error('date_of_birth') is-invalid @enderror" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? 'readonly' : 'disabled' }}>
                                    @error('date_of_birth')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <div class="form-label">Tempat Lahir</div>
                                    <input type="text" class="form-control @error('place_of_birth') is-invalid @enderror" wire:model="place_of_birth" placeholder="Tempat Lahir..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    @error('place_of_birth')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <div class="form-label">Nama Jalan / No. Jalan</div>
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <input type="text" class="form-control @error('street_name') is-invalid @enderror" wire:model="street_name" placeholder="Nama Jalan..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                            @error('street_name')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control @error('building_number') is-invalid @enderror" wire:model="building_number" placeholder="No. Jalan..." {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                            @error('building_number')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-label">RT / RW</div>
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <input type="tel" class="form-control @error('neighbourhood_number') is-invalid @enderror" wire:model="neighbourhood_number" placeholder="RT..." maxlength="3" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                            @error('neighbourhood_number')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-6">
                                            <input type="tel" class="form-control @error('hamlet_number') is-invalid @enderror" wire:model="hamlet_number" placeholder="RW..." maxlength="3" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                            @error('hamlet_number')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6" x-data="{ disable: {{ $edit['tab'] == 'profile' && $edit['is_active'] ? 'false' : 'true' }} }">
                                    <div class="form-label">Provinsi</div>
                                    <div wire:key="{{ rand() }}">
                                        <select x-data x-ref="input" x-init="$($refs.input).selectize({
                                            dropdownParent: 'body',
                                            onChange: function(e) {
                                                @this.set('province_id', $('#province_id').val());
                                            }
                                        });" wire:model.live="province_id" id="province_id" x-bind:disabled="disable">
                                            <option value="">-- Pilih Provinsi --</option>
                                            @foreach ($provinces as $item)
                                                <option value="{{ $item->province_id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('province_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6" x-data="{ disable: {{ $edit['tab'] == 'profile' && $edit['is_active'] ? (in_array($province_id, ['', null]) ? 'true' : 'false') : 'true' }} }">
                                    <div class="form-label">Kota / Kabupaten</div>
                                    <div wire:key="{{ rand() }}">
                                        <select x-data x-ref="input" x-init="$($refs.input).selectize({
                                            dropdownParent: 'body',
                                            onChange: function(e) {
                                                @this.set('city_id', $('#city_id').val());
                                            }
                                        });" wire:model.live="city_id" id="city_id" x-bind:disabled="disable">
                                            <option value="">-- Pilih Kota --</option>
                                            @foreach ($cities as $item)
                                                <option value="{{ $item->city_id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('city_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6" x-data="{ disable: {{ $edit['tab'] == 'profile' && $edit['is_active'] ? (in_array($city_id, ['', null]) ? 'true' : 'false') : 'true' }} }">
                                    <div class="form-label">Kecamatan</div>
                                    <div wire:key="{{ rand() }}">
                                        <select x-data x-ref="input" x-init="$($refs.input).selectize({
                                            dropdownParent: 'body',
                                            onChange: function(e) {
                                                @this.set('district_id', $('#district_id').val());
                                            }
                                        });" wire:model.live="district_id" id="district_id" x-bind:disabled="disable">
                                            <option value="">-- Pilih Kecamatan --</option>
                                            @foreach ($districts as $item)
                                                <option value="{{ $item->district_id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('district_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6" x-data="{ disable: {{ $edit['tab'] == 'profile' && $edit['is_active'] ? (in_array($district_id, ['', null]) ? 'true' : 'false') : 'true' }} }">
                                    <div class="form-label">Kelurahan</div>
                                    <div wire:key="{{ rand() }}">
                                        <select x-data x-ref="input" x-init="$($refs.input).selectize({
                                            dropdownParent: 'body',
                                            onChange: function(e) {
                                                @this.set('sub_district_id', $('#sub_district_id').val());
                                            }
                                        });" wire:model.live="sub_district_id" id="sub_district_id" x-bind:disabled="disable">
                                            <option value="">-- Pilih Kelurahan --</option>
                                            @foreach ($sub_districts as $item)
                                                <option value="{{ $item->sub_district_id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('sub_district_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <div class="form-label">Kodepos</div>
                                    <input type="tel" class="form-control @error('postcode') is-invalid @enderror" wire:model.live="postcode" placeholder="Kodepos..." maxlength="5" onkeypress="return onlyNumberKey(event)" {{ $edit['tab'] == 'profile' && $edit['is_active'] ? '' : 'disabled' }}>
                                    @error('postcode')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endif
                        </div>
                        <div class="text-end mt-3">
                            @if ($edit['tab'] == 'profile' && $edit['is_active'])
                                <button class="btn btn-success" wire:click="save('profile')">Simpan Perubahan <i class="fa-regular fa-circle-check fa-fw ms-2"></i></button>
                            @else
                                <button class="btn btn-warning" wire:click="activateEditMode('profile')">Ubah Profil <i class="fa-regular fa-pencil-alt fa-fw ms-2"></i></button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12" x-show="tab == 'security'" x-transition>
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12" x-data="{ show: 'false' }">
                                <div class="form-label">Kata Sandi Saat Ini</div>
                                <div class="input-group">
                                    <input :type="show ? 'password' : 'text'" class="form-control @error('current_password') is-invalid @enderror" wire:model="current_password" placeholder=".............." {{ $edit['tab'] == 'password' && $edit['is_active'] ? '' : 'disabled' }}>
                                    <span class="input-group-text cursor-pointer" x-on:click="show = ! show"><i :class="show ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'"></i></span>
                                </div>
                                @error('current_password')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12" x-data="{ show: 'false' }">
                                <div class="form-label">Kata Sandi Baru</div>
                                <div class="input-group">
                                    <input :type="show ? 'password' : 'text'" class="form-control @error('password') is-invalid @enderror" wire:model="password" placeholder=".............." {{ $edit['tab'] == 'password' && $edit['is_active'] ? '' : 'disabled' }}>
                                    <span class="input-group-text cursor-pointer" x-on:click="show = ! show"><i :class="show ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'"></i></span>
                                </div>
                                @error('password')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12" x-data="{ show: 'false' }">
                                <div class="form-label">Konfirmasi Ulang Kata Sandi Baru</div>
                                <div class="input-group">
                                    <input :type="show ? 'password' : 'text'" class="form-control @error('password_confirmation') is-invalid @enderror" wire:model="password_confirmation" placeholder=".............." {{ $edit['tab'] == 'password' && $edit['is_active'] ? '' : 'disabled' }}>
                                    <span class="input-group-text cursor-pointer" x-on:click="show = ! show"><i :class="show ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'"></i></span>
                                </div>
                                @error('password_confirmation')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <h6 class="mb-1">Cara Membuat Kata Sandi Yang Aman :</h6>
                                <ul class="ps-3 mb-0">
                                    <li class="mb-1">Minimal 8 karakter - semakin banyak, semakin baik</li>
                                    <li class="mb-1">Setidaknya satu karakter huruf kecil</li>
                                    <li>Setidaknya satu angka, simbol, atau karakter spasi putih</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-end mt-3">
                    @if ($edit['tab'] == 'password' && $edit['is_active'])
                        <button class="btn btn-success" wire:click="save('password')" @if (!$current_password || !$password || !$password_confirmation) disabled @endif>Simpan Perubahan <i class="fa-regular fa-circle-check fa-fw ms-2"></i></button>
                    @else
                        <button class="btn btn-warning" wire:click="activateEditMode('password')">Ubah Password <i class="fa-regular fa-pencil-alt fa-fw ms-2"></i></button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/admin/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
@endpush