@extends('layouts.app')
@section('title', 'Profil Saya')

@section('content')
    <div class="container-fluid px-4">
        <h1 class="mt-4 fw-bold text-primary">Profil Saya</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Pengaturan Akun</li>
        </ol>

        @include('components.alerts')

        <div class="row">
            <div class="col-md-6 mb-4">
                @include('components.profile-card', [
                    'title' => 'Ubah Data Profil',
                    'icon' => 'fa-user-edit',
                    'color' => 'primary',
                    'route' => route('profile.update'),
                    'method' => 'PUT',
                    'fields' => [
                        ['label' => 'Nama Lengkap', 'name' => 'name', 'value' => $user->name, 'required' => true],
                        [
                            'label' => 'Username',
                            'name' => 'username',
                            'value' => $user->username,
                            'required' => true,
                        ],
                        ['label' => 'Email', 'name' => 'email', 'value' => $user->email, 'required' => true],
                        ['label' => 'Nomor HP', 'name' => 'phone', 'value' => $user->phone, 'required' => false],
                    ],
                    'button' => ['color' => 'primary', 'text' => 'Simpan Perubahan', 'icon' => 'fa-save'],
                ])
            </div>

            <div class="col-md-6 mb-4">
                @include('components.profile-card', [
                    'title' => 'Ubah Password',
                    'icon' => 'fa-key',
                    'color' => 'warning',
                    'route' => route('profile.updatePassword'),
                    'method' => 'PUT',
                    'fields' => [
                        ['label' => 'Password Lama', 'name' => 'current_password', 'required' => true],
                        ['label' => 'Password Baru', 'name' => 'password', 'required' => true],
                        [
                            'label' => 'Konfirmasi Password Baru',
                            'name' => 'password_confirmation',
                            'required' => true,
                        ],
                    ],
                    'button' => ['color' => 'warning', 'text' => 'Ganti Password', 'icon' => 'fa-lock'],
                ])
            </div>
        </div>
    </div>

    @pushOnce('pageStyles')
        <style>
            .card-header.bg-gradient-primary {
                background: linear-gradient(90deg, #007bff, #0062cc);
            }

            .card-header.bg-gradient-warning {
                background: linear-gradient(90deg, #ffc107, #ffb300);
            }

            .form-label {
                font-weight: 600;
                color: #343a40;
            }

            .toggle-eye {
                position: absolute;
                top: 42px;
                right: 12px;
                color: #6c757d;
                cursor: pointer;
                transition: color 0.2s ease, transform 0.2s ease;
            }

            .toggle-eye:hover {
                color: #0d6efd;
                transform: scale(1.1);
            }

            .form-control {
                border-radius: 8px;
                padding-right: 36px;
            }

            .btn {
                border-radius: 10px;
                transition: all 0.2s ease-in-out;
            }

            .btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

            .alert {
                border-radius: 10px;
                transition: opacity 0.5s ease;
            }
        </style>
    @endpushOnce

    @pushOnce('pageScripts')
        <script>
            function toggleInput(icon) {
                const input = icon.previousElementSibling;
                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.replace('fa-eye', 'fa-eye-slash');
                } else {
                    input.type = "password";
                    icon.classList.replace('fa-eye-slash', 'fa-eye');
                }
            }

            document.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll('.auto-hide').forEach(alert => {
                    setTimeout(() => {
                        alert.style.opacity = '0';
                        setTimeout(() => alert.remove(), 500);
                    }, 3000);
                });
            });
        </script>
    @endpushOnce
@endsection