@extends('layouts.app')

@section('title', 'My Account')

@section('content')
<div class="max-w-3xl mx-auto">

    {{-- Page Header --}}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-yellow-400">My Account</h1>
        <p class="text-gray-400 mt-1">Manage your profile, password, and account settings.</p>
    </div>

    {{-- ========================================= --}}
    {{-- PROFILE INFORMATION --}}
    {{-- ========================================= --}}
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold text-white mb-1">Profile Information</h2>
        <p class="text-sm text-gray-400 mb-6">Update your name and email address.</p>

        <form method="POST" action="{{ route('profile.update') }}">
            @csrf
            @method('PUT')

            {{-- Name --}}
            <div class="mb-5">
                <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Name</label>
                <input type="text" name="name" id="name"
                       value="{{ old('name', auth()->user()->name) }}"
                       placeholder="Your name"
                       class="w-full bg-gray-950 border border-gray-700 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                @error('name')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Email --}}
            <div class="mb-6">
                <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
                <input type="email" name="email" id="email"
                       value="{{ old('email', auth()->user()->email) }}"
                       placeholder="your@email.com"
                       class="w-full bg-gray-950 border border-gray-700 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                @error('email')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Submit --}}
            <div class="flex justify-end">
                <button type="submit"
                        class="bg-red-600 hover:bg-red-700 text-white font-medium px-6 py-2.5 rounded-lg transition-colors shadow-lg shadow-red-600/25 hover:shadow-red-600/40">
                    Update Profile
                </button>
            </div>
        </form>
    </div>

    {{-- ========================================= --}}
    {{-- CHANGE PASSWORD --}}
    {{-- ========================================= --}}
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold text-white mb-1">Change Password</h2>
        <p class="text-sm text-gray-400 mb-6">Ensure your account is using a long, random password to stay secure.</p>

        <form method="POST" action="{{ route('profile.password') }}">
            @csrf
            @method('PUT')

            {{-- Current Password --}}
            <div class="mb-5">
                <label for="current_password" class="block text-sm font-medium text-gray-300 mb-2">Current Password</label>
                <input type="password" name="current_password" id="current_password"
                       placeholder="Enter current password"
                       class="w-full bg-gray-950 border border-gray-700 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                @error('current_password')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- New Password --}}
            <div class="mb-5">
                <label for="new_password" class="block text-sm font-medium text-gray-300 mb-2">New Password</label>
                <input type="password" name="new_password" id="new_password"
                       placeholder="Enter new password"
                       class="w-full bg-gray-950 border border-gray-700 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                @error('new_password')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Confirm New Password --}}
            <div class="mb-6">
                <label for="new_password_confirmation" class="block text-sm font-medium text-gray-300 mb-2">Confirm New Password</label>
                <input type="password" name="new_password_confirmation" id="new_password_confirmation"
                       placeholder="Confirm new password"
                       class="w-full bg-gray-950 border border-gray-700 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
            </div>

            {{-- Submit --}}
            <div class="flex justify-end">
                <button type="submit"
                        class="bg-red-600 hover:bg-red-700 text-white font-medium px-6 py-2.5 rounded-lg transition-colors shadow-lg shadow-red-600/25 hover:shadow-red-600/40">
                    Change Password
                </button>
            </div>
        </form>
    </div>

    {{-- ========================================= --}}
    {{-- SUPPORT TTEOTK DEVOTIONALS --}}
    {{-- ========================================= --}}
    <div class="bg-gradient-to-r from-red-900/30 to-yellow-900/20 border border-yellow-700/30 rounded-xl p-6 mb-6">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 rounded-full bg-yellow-400/10 flex items-center justify-center shrink-0">
                <i class="fa-solid fa-heart text-red-500 text-xl"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-semibold text-yellow-400 mb-1">Support TTEOTK Devotionals</h2>
                <p class="text-sm text-gray-300 mb-4">Thank you for supporting TTEOTK Devotionals! Your donation helps keep the devotionals going.</p>
                <a href="https://www.paypal.com/donate/?hosted_button_id=U3WNPSGEQWBZJ" target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-2 bg-yellow-400 hover:bg-yellow-300 text-gray-900 font-semibold px-6 py-2.5 rounded-lg transition-colors shadow-lg shadow-yellow-400/20">
                    <i class="fa-brands fa-paypal text-lg"></i>
                    Donate via PayPal
                </a>
            </div>
        </div>
    </div>

    {{-- ========================================= --}}
    {{-- DELETE ACCOUNT --}}
    {{-- ========================================= --}}
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
        <h2 class="text-xl font-semibold text-red-400 mb-1">Danger Zone</h2>
        <p class="text-sm text-gray-400 mb-6">Once you delete your account, there is no going back. All of your data, playlists, and preferences will be permanently removed.</p>

        <form method="POST" action="{{ route('profile.destroy') }}"
              onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.')">
            @csrf
            @method('DELETE')

            <button type="submit"
                    class="bg-red-600/20 text-red-400 border border-red-500/30 hover:bg-red-600/30 font-medium px-6 py-2.5 rounded-lg transition-colors">
                Delete Account
            </button>
        </form>
    </div>

</div>
@endsection