@extends('layout.layout')

@php
    $title = 'Ubah Password';
    $subTitle = 'Profil Pengguna';
@endphp

@section('content')

    <div class="card basic-data-table">
        <div class="card-body">
            <div
                class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-3">
                <div>
                    <h5 class="mb-0">Ubah Password</h5>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('profile.index') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
                        <iconify-icon icon="iconoir:arrow-left"></iconify-icon>
                        <span>Kembali</span>
                    </a>
                </div>
            </div>

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('profile.update-password') }}" id="passwordChangeForm">
                @csrf
                @method('PUT')

                <div class="row g-3">
                    <div class="col-12">
                        <div class="alert alert-warning d-flex align-items-center">
                            <iconify-icon icon="material-symbols:warning" class="me-2"></iconify-icon>
                            <div>
                                <strong>Peringatan Keamanan:</strong> Setelah mengubah password, Anda akan otomatis logout
                                dan diarahkan ke halaman login. Pastikan Anda mengingat password baru sebelum melanjutkan.
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                        <label class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="password" name="current_password" id="current_password" class="form-control pe-5"
                                required placeholder="Masukkan password saat ini">
                            <button type="button"
                                class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
                                data-target="#current_password">
                                <iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
                                <iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
                            </button>
                        </div>
                    </div>

                    <div class="col-12"></div>

                    <div class="col-12 col-md-6">
                        <label class="form-label">Password Baru <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="password" name="password" id="new_password" class="form-control pe-5" required
                                placeholder="Masukkan password baru">
                            <button type="button"
                                class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
                                data-target="#new_password">
                                <iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
                                <iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
                            </button>
                        </div>
                        <div class="form-text">Password harus minimal 8 karakter, mengandung huruf besar, huruf
                            kecil,
                            angka, dan simbol khusus.</div>
                    </div>

                    <div class="col-12 col-md-6">
                        <label class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="password" name="password_confirmation" id="confirm_password"
                                class="form-control pe-5" required placeholder="Konfirmasi password baru">
                            <button type="button"
                                class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
                                data-target="#confirm_password">
                                <iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
                                <iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary d-flex align-items-center gap-2" id="changePasswordBtn">
                        <iconify-icon icon="material-symbols:save"></iconify-icon>
                        <span>Ubah Password</span>
                    </button>
                    <a href="{{ route('profile.index') }}" class="btn btn-light">Batal</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Custom Confirmation Modal -->
    <div class="modal fade" id="confirmPasswordChangeModal" tabindex="-1" aria-labelledby="confirmPasswordChangeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <div
                                class="w-48-px h-48-px bg-warning-subtle rounded-circle d-flex align-items-center justify-content-center">
                                <iconify-icon icon="material-symbols:warning" class="text-warning fs-3"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="confirmPasswordChangeModalLabel">Konfirmasi Ubah Password</h5>
                            <p class="text-muted mb-0 small">Pastikan Anda yakin dengan keputusan ini</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="alert alert-warning border-0 bg-warning-subtle">
                        <div class="d-flex">
                            <iconify-icon icon="material-symbols:info" class="text-warning me-2 mt-1"></iconify-icon>
                            <div>
                                <strong>Perhatian:</strong>
                                <ul class="mb-0 mt-2">
                                    <li>Anda akan <strong>otomatis logout</strong> dari semua perangkat</li>
                                    <li>Perlu <strong>login ulang</strong> dengan password baru</li>
                                    <li>Pastikan Anda <strong>mengingat password baru</strong> sebelum melanjutkan</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p class="mb-0">Apakah Anda yakin ingin mengubah password sekarang?</p>
                </div>
                <div class="modal-footer border-0 pt-0 d-flex align-items-center justify-content-center">
                    <button type="button" class="btn btn-light d-flex align-items-center" data-bs-dismiss="modal">
                        <iconify-icon icon="material-symbols:close" class="me-1"></iconify-icon>
                        Batal
                    </button>
                    <button type="button" class="btn btn-warning d-flex align-items-center" id="confirmPasswordChange">
                        <iconify-icon icon="material-symbols:lock-reset" class="me-1"></iconify-icon>
                        Ya, Ubah Password
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Password toggle functionality
            $('.toggle-password').on('click', function() {
                const target = $(this).data('target');
                const input = $(target);
                const eyeOpen = $(this).find('.eye-open');
                const eyeClosed = $(this).find('.eye-closed');

                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    eyeOpen.addClass('d-none');
                    eyeClosed.removeClass('d-none');
                } else {
                    input.attr('type', 'password');
                    eyeOpen.removeClass('d-none');
                    eyeClosed.addClass('d-none');
                }
            });

            // Custom modal confirmation before password change
            $('#passwordChangeForm').on('submit', function(e) {
                e.preventDefault();

                // Show custom modal instead of alert
                $('#confirmPasswordChangeModal').modal('show');
            });

            // Handle modal confirmation
            $('#confirmPasswordChange').on('click', function() {
                // Hide modal
                $('#confirmPasswordChangeModal').modal('hide');

                // Add loading state to button
                const btn = $(this);
                const originalText = btn.html();
                btn.html(
                    '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Mengubah Password...'
                );
                btn.prop('disabled', true);

                // Submit form after modal closes
                setTimeout(function() {
                    $('#passwordChangeForm')[0].submit();
                }, 300);
            });
        });
    </script>
@endpush