<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perhitungan SAW - Pengaturan</title>

    <!-- favicon -->
    <link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">

    <style>
        :root {
            --white: #ffffff;
            --mustard: #f4d35e;
            --majorelle-blue: #4A6CF7;
        }

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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            background-color: #f9f9f9;
            background-image: linear-gradient(to right, var(--white) 85%, var(--mustard) 85%);
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 15px;
        }

        header {
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--majorelle-blue);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .logo:hover {
            color: #3958d0;
        }

        .profile-header {
            color: #333;
        }

        main {
            padding: 30px 0;
        }

        .profile-container {
            max-width: 700px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .profile-section {
            background: white;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .profile-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .profile-section-title {
            color: var(--majorelle-blue);
            font-size: 1.2rem;
        }

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

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #333;
            font-size: 0.9rem;
        }

        .form-control {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #fff;
            color: #333;
            box-sizing: border-box;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .form-control:focus {
            border-color: var(--majorelle-blue);
            box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
            outline: none;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--majorelle-blue);
            color: var(--white);
        }

        .btn-primary:hover {
            background-color: #3958d0;
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
        }

        .section-description {
            color: #6c757d;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            max-width: 600px;
            width: 100%;
        }

        .alert {
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 0.85rem;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if (session('status') === 'password-updated')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(function() {
                    const alert = document.createElement('div');
                    alert.className = 'alert alert-success';
                    alert.textContent = 'Password updated successfully!';
                    document.querySelector('.profile-container').prepend(alert);
                    
                    setTimeout(function() {
                        alert.remove();
                    }, 5000);
                }, 100);
            });
        </script>
    @endif
</head>
<body>
<header>
        <div class="container header-container">
            <h2 class="profile-header">Profil Pengguna</h2>
            <a href="{{ route('dashboard') }}" class="logo">Pintera</a>
        </div>
    </header>

    <main>
        <div class="container profile-container">
            @if (session('status') === 'profile-updated')
                <div class="alert alert-success">
                    Informasi profil berhasil diperbarui!
                </div>
            @endif
            
            <!-- Profile Information Section -->
            <div class="profile-section">
                <div class="profile-section-header">
                    <h3 class="profile-section-title">Informasi Profil</h3>
                </div>
                <p class="section-description">Perbarui informasi profil dan alamat email akun Anda.</p>
                
                <form method="post" action="{{ route('profile.update') }}">
                    @csrf
                    @method('patch')
                    
                    <div class="form-group">
                        <label for="name">Nama</label>
                        <input type="text" id="name" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                        @error('email')
                            <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
            
            <!-- Update Password Section -->
            <div class="profile-section">
                <div class="profile-section-header">
                    <h3 class="profile-section-title">Perbarui Kata Sandi</h3>
                </div>
                <p class="section-description">Pastikan akun Anda menggunakan kata sandi yang panjang dan acak untuk menjaga keamanan.</p>
                
                <form method="post" action="{{ route('password.update') }}">
                    @csrf
                    @method('put')
                    
                    <div class="form-group">
                        <label for="current_password">Kata Sandi Saat Ini</label>
                        <input type="password" id="current_password" name="current_password" class="form-control" required>
                        @error('current_password', 'updatePassword')
                            <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="password">Kata Sandi Baru</label>
                        <input type="password" id="password" name="password" class="form-control" required>
                        @error('password', 'updatePassword')
                            <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="password_confirmation">Konfirmasi Kata Sandi</label>
                        <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" required>
                        @error('password_confirmation', 'updatePassword')
                            <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
            
            <!-- Delete Account Section -->
            <div class="profile-section">
                <div class="profile-section-header">
                    <h3 class="profile-section-title">Hapus Akun</h3>
                </div>
                <p class="section-description">Setelah akun Anda dihapus, semua sumber daya dan data akan dihapus secara permanen.</p>
                
                <button type="button" class="btn btn-danger" onclick="showDeleteModal()">Hapus Akun</button>
            </div>
        </div>
    </main>

    <!-- Delete Account Modal (hidden by default) -->
    <div id="deleteModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="profile-section-header">
            <h3 class="profile-section-title">Apakah Anda yakin ingin menghapus akun?</h3>
            </div>
            <p class="section-description">Akun dan seluruh data Anda akan dihapus secara permanen. Silakan masukkan kata sandi untuk konfirmasi.</p>
            
            <form method="post" action="{{ route('profile.destroy') }}">
                @csrf
                @method('delete')
                
                <div class="form-group">
                    <label for="password">Kata Sandi</label>
                    <input type="password" id="password" name="password" class="form-control" required>
                    @error('password', 'userDeletion')
                        <p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                </div>
                
                <div class="form-group" style="display: flex; justify-content: space-between;">
                    <button type="button" class="btn" style="background-color: #6c757d; color: white;" onclick="hideDeleteModal()">Batal</button>
                    <button type="submit" class="btn btn-danger">Hapus Akun</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function showDeleteModal() {
            document.getElementById('deleteModal').style.display = 'flex';
        }
        
        function hideDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }
    </script>
</body>
</html>