@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')

<div class="max-w-5xl mx-auto space-y-8">

    <!-- HEADER -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800">
            Profil Saya
        </h1>

        <p class="text-gray-500 mt-2">
            Kelola informasi akun dan keamanan password
        </p>
    </div>

    <!-- SUCCESS -->
    @if(session('success'))

        <div class="px-5 py-4 rounded-2xl bg-green-50 border border-green-100 text-green-700 font-medium">
            {{ session('success') }}
        </div>

    @endif

    <!-- ERROR -->
    @if(session('error'))

        <div class="px-5 py-4 rounded-2xl bg-red-50 border border-red-100 text-red-600 font-medium">
            {{ session('error') }}
        </div>

    @endif

    <!-- PROFILE INFO -->
    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm p-8">

        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800">
                Profile Information
            </h2>

            <p class="text-gray-500 mt-2">
                Update informasi akun dan email Anda.
            </p>
        </div>

        <form method="POST" action="{{ route('profile.update') }}" class="space-y-6">

            @csrf
            @method('PUT')

            <!-- USERNAME -->
            <div>

                <label class="block text-sm font-semibold text-gray-600 mb-2">
                    Username
                </label>

                <input type="text"
                    name="username"
                    value="{{ old('username', Auth::user()->username) }}"
                    class="w-full rounded-2xl border border-gray-200 px-5 py-4 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">

                @error('username')

                    <p class="text-red-500 text-sm mt-2">
                        {{ $message }}
                    </p>

                @enderror

            </div>

            <!-- EMAIL -->
            <div>

                <label class="block text-sm font-semibold text-gray-600 mb-2">
                    Email
                </label>

                <input type="email"
                    name="email"
                    value="{{ old('email', Auth::user()->email) }}"
                    class="w-full rounded-2xl border border-gray-200 px-5 py-4 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">

                @error('email')

                    <p class="text-red-500 text-sm mt-2">
                        {{ $message }}
                    </p>

                @enderror

            </div>

            <!-- BUTTON -->
            <div class="pt-2">

                <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-2xl font-semibold transition">

                    Simpan Perubahan

                </button>

            </div>

        </form>

    </div>

    <!-- UPDATE PASSWORD -->
    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm p-8">

        <div class="mb-8">

            <h2 class="text-2xl font-bold text-gray-800">
                Update Password
            </h2>

            <p class="text-gray-500 mt-2">
                Gunakan password yang aman untuk melindungi akun Anda.
            </p>

        </div>

        <form method="POST" action="{{ route('profile.password.update') }}" class="space-y-6">

            @csrf
            @method('PUT')

            <!-- CURRENT PASSWORD -->
            <div>

                <label class="block text-sm font-semibold text-gray-600 mb-2">
                    Password Saat Ini
                </label>

                <input type="password"
                    name="current_password"
                    class="w-full rounded-2xl border border-gray-200 px-5 py-4 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">

                @error('current_password')

                    <p class="text-red-500 text-sm mt-2">
                        {{ $message }}
                    </p>

                @enderror

            </div>

            <!-- NEW PASSWORD -->
            <div>

                <label class="block text-sm font-semibold text-gray-600 mb-2">
                    Password Baru
                </label>

                <input type="password"
                    name="password"
                    class="w-full rounded-2xl border border-gray-200 px-5 py-4 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">

                @error('password')

                    <p class="text-red-500 text-sm mt-2">
                        {{ $message }}
                    </p>

                @enderror

            </div>

            <!-- CONFIRM -->
            <div>

                <label class="block text-sm font-semibold text-gray-600 mb-2">
                    Konfirmasi Password Baru
                </label>

                <input type="password"
                    name="password_confirmation"
                    class="w-full rounded-2xl border border-gray-200 px-5 py-4 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">

            </div>

            <!-- BUTTON -->
            <div class="pt-2">

                <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-2xl font-semibold transition">

                    Update Password

                </button>

            </div>

        </form>

    </div>

    <!-- DELETE ACCOUNT -->
    <div class="bg-white rounded-3xl border border-red-100 shadow-sm p-8">

        <div class="mb-6">

            <h2 class="text-2xl font-bold text-red-600">
                Delete Account
            </h2>

            <p class="text-gray-500 mt-2 leading-7">
                Setelah akun dihapus, seluruh data akun akan terhapus permanen.
            </p>

        </div>

        <form method="POST" action="#">

            @csrf

            <button type="button"
                onclick="confirmDelete()"
                class="bg-red-500 hover:bg-red-600 text-white px-8 py-3 rounded-2xl font-semibold transition">

                Hapus Akun

            </button>

        </form>

    </div>

</div>

<script>

function confirmDelete() {

    Swal.fire({
        title: 'Hapus akun?',
        text: 'Semua data akun akan dihapus permanen.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc2626',
        cancelButtonColor: '#9ca3af',
        confirmButtonText: 'Ya, hapus',
        cancelButtonText: 'Batal'
    });

}

</script>

@endsection