<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="{{ asset('images/Logo-mantao.png') }}">
    <title>Ubah Password</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

        html,
        body {
            width: 100%;
            overflow: hidden;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Raleway', sans-serif;
            background: linear-gradient(90deg, #e0eafc, #cfdef3);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
            padding: 40px 20px;
        }

        body::before,
        body::after {
            content: '';
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
        }

        body::before {
            width: 350px;
            height: 350px;
            top: -120px;
            left: -100px;
        }

        body::after {
            width: 450px;
            height: 450px;
            bottom: -150px;
            right: -150px;
        }

        .card {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(13, 44, 63, 0.2);
            width: 100%;
            max-width: 480px;
            overflow: hidden;
            position: relative;
        }

        .form-container {
            padding: 40px;
        }

        h1 {
            font-family: 'Poppins', sans-serif;
            text-align: left;
            color: #0d2c3f;
            margin-top: 0;
            margin-bottom: 30px;
            font-size: 1.8rem;
        }

        .btn-back {
            background: #f4f7fa;
            border: 2px solid #1a4f6d;
            color: #1a4f6d;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            /* ubah dari flex ke inline-flex agar lebarnya pas isi */
            align-items: center;
            gap: 6px;
            margin-bottom: 20px;
            font-size: 0.95rem;
            border-radius: 10px;
            padding: 8px 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            /* Hilangkan underline */
            width: auto;
            /* tambahkan agar tidak melebar */
            max-width: fit-content;
            /* pastikan tidak ikut memenuhi kontainer */
        }

        .btn-back:hover {
            background-color: #1a4f6d;
            color: #ffffff;
            text-decoration: none;
            /* Pastikan tidak ada underline */
            transform: translateY(-2px);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
            color: #4a5568;
            font-size: 0.9rem;
        }

        input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            box-sizing: border-box;
            transition: all 0.3s;
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            color: #333;
        }

        input:focus {
            outline: none;
            border-color: #1a4f6d;
            box-shadow: 0 0 0 3px rgba(26, 79, 109, 0.15);
        }

        .password-wrapper {
            position: relative;
        }

        .password-wrapper input {
            padding-right: 45px;
        }

        .toggle-password {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6c757d;
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background-color: #1a4f6d;
            color: white;
            border: none;
            border-radius: 25px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }

        .submit-btn:hover {
            background-color: #0d2c3f;
            transform: translateY(-2px);
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 10px;
            text-align: left;
            font-weight: 600;
        }

        .alert ul {
            padding-left: 20px;
            margin: 0;
        }

        .alert-success {
            background-color: #d1fae5;
            color: #065f46;
        }

        .alert-error {
            background-color: #fee2e2;
            color: #991b1b;
        }

        /* ==== Modal Custom ==== */
        .custom-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .custom-modal-content {
            background: #fff;
            padding: 25px 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 380px;
            width: 100%;
            font-family: 'Poppins', sans-serif;
        }

        .custom-modal-content p {
            font-size: 1rem;
            color: #0d2c3f;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .modal-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .modal-btn {
            padding: 8px 18px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .modal-btn.confirm {
            background: #1a4f6d;
            color: #fff;
        }

        .modal-btn.confirm:hover {
            background: #0d2c3f;
        }

        .modal-btn.cancel {
            background: #ccc;
            color: #333;
        }

        .modal-btn.cancel:hover {
            background: #aaa;
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="form-container">
            <a href="{{ route('dashboard') }}" class="btn-back">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>

            <h1>Ubah Password</h1>

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

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

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

            <form action="{{ route('password.change') }}" method="POST" id="change-password-form">
                @csrf
                <div class="form-group">
                    <label for="current_password">Password Lama:</label>
                    <div class="password-wrapper">
                        <input type="password" name="current_password" id="current_password" required>
                        <i class="fas fa-eye toggle-password"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label for="new_password">Password Baru:</label>
                    <div class="password-wrapper">
                        <input type="password" name="new_password" id="new_password" required>
                        <i class="fas fa-eye toggle-password"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label for="new_password_confirmation">Konfirmasi Password Baru:</label>
                    <div class="password-wrapper">
                        <input type="password" name="new_password_confirmation" id="new_password_confirmation" required>
                        <i class="fas fa-eye toggle-password"></i>
                    </div>
                </div>

                <button type="submit" class="submit-btn">
                    <span>Ubah Password</span>
                    <i class="fas fa-key"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Modal Custom -->
    <div id="confirmModal" class="custom-modal">
        <div class="custom-modal-content">
            <p>Apakah Anda yakin ingin mengubah password?<br>Anda akan otomatis logout setelah ini.</p>
            <div class="modal-actions">
                <button class="modal-btn confirm" id="confirmYes">Ya</button>
                <button class="modal-btn cancel" id="confirmNo">Batal</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Toggle show/hide password
            document.querySelectorAll('.toggle-password').forEach(icon => {
                icon.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    const type = input.type === 'password' ? 'text' : 'password';
                    input.type = type;
                    this.classList.toggle('fa-eye');
                    this.classList.toggle('fa-eye-slash');
                });
            });

            // Custom modal konfirmasi
            const form = document.getElementById('change-password-form');
            const modal = document.getElementById('confirmModal');
            const yesBtn = document.getElementById('confirmYes');
            const noBtn = document.getElementById('confirmNo');

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                modal.style.display = 'flex';
            });

            yesBtn.addEventListener('click', function() {
                modal.style.display = 'none';
                form.submit();
            });

            noBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
        });
    </script>
</body>

</html>