@extends('layout.layout')

@php
    $title = 'Ubah Email';
    $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 Email</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-email') }}" id="emailChangeForm">
                @csrf
                @method('PUT')

                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <label class="form-label">Email Saat Ini</label>
                        <input type="email" class="form-control" value="{{ Auth::user()->email }}" readonly>
                    </div>

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

                    <div class="col-12 col-md-6">
                        <label class="form-label">Email Baru <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control" required value="{{ old('email') }}"
                            placeholder="Masukkan email baru">
                    </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_email"
                                class="form-control pe-5" required placeholder="Masukkan password untuk konfirmasi">
                            <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_email">
                                <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 diperlukan untuk konfirmasi keamanan.</div>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <button class="btn btn-primary d-flex align-items-center gap-2">
                        <iconify-icon icon="material-symbols:save"></iconify-icon>
                        <span>Ubah Email</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="confirmEmailChangeModal" tabindex="-1" aria-labelledby="confirmEmailChangeModalLabel"
        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-info-subtle rounded-circle d-flex align-items-center justify-content-center">
                                <iconify-icon icon="material-symbols:mail" class="text-info fs-3"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="confirmEmailChangeModalLabel">Konfirmasi Ubah Email</h5>
                            <p class="text-muted mb-0 small">Pastikan email baru sudah benar</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-info border-0 bg-info-subtle">
                        <div class="d-flex">
                            <iconify-icon icon="material-symbols:info" class="text-info me-2 mt-1"></iconify-icon>
                            <div>
                                <strong>Informasi:</strong>
                                <ul class="mb-0 mt-2">
                                    <li>Email akan <strong>langsung diubah</strong> setelah konfirmasi</li>
                                    <li>Pastikan <strong>email baru sudah benar</strong> dan dapat diakses</li>
                                    <li>Gunakan email ini untuk <strong>login selanjutnya</strong></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="bg-light p-3 rounded">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <small class="text-muted">Email saat ini:</small>
                                <div class="fw-medium">{{ Auth::user()->email }}</div>
                            </div>
                            <div class="col-12">
                                <small class="text-muted">Email baru:</small>
                                <div class="fw-medium text-primary" id="newEmailPreview">-</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        <iconify-icon icon="material-symbols:close" class="me-1"></iconify-icon>
                        Batal
                    </button>
                    <button type="button" class="btn btn-info" id="confirmEmailChange">
                        <iconify-icon icon="material-symbols:mail" class="me-1"></iconify-icon>
                        Ya, Ubah Email
                    </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 email change
            $('#emailChangeForm').on('submit', function(e) {
                e.preventDefault();

                // Get new email value and show in modal
                const newEmail = $('input[name="email"]').val();
                if (newEmail) {
                    $('#newEmailPreview').text(newEmail);
                    $('#confirmEmailChangeModal').modal('show');
                } else {
                    // If no email entered, show validation
                    $('input[name="email"]').focus();
                }
            });

            // Handle modal confirmation
            $('#confirmEmailChange').on('click', function() {
                // Hide modal
                $('#confirmEmailChangeModal').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 Email...'
                );
                btn.prop('disabled', true);

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