{{-- resources/views/profile/edit.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md mt-10">

    <h1 class="text-2xl font-semibold mb-4 text-gray-800">Edit Profile</h1>
    <p class="text-gray-600 mb-8">Update your account details, change password, or manage your portfolio preferences.</p>

    {{-- ✅ SUCCESS MESSAGE --}}
    @if(session('status'))
        <div class="bg-green-100 text-green-800 p-3 rounded mb-6 text-center font-medium shadow-sm">
            {{ session('status') }}
        </div>
    @endif

    @if(session('success'))
        <div class="bg-green-100 text-green-800 p-3 rounded mb-6 text-center font-medium shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    {{-- ✅ Update Profile Information --}}
    <div class="mb-10">
        <h2 class="text-xl font-medium mb-3 text-gray-800">Profile Information</h2>
        <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
            @csrf
            @method('patch')

            
           

    {{-- ✅ Update Password Section --}}
    <div class="border-t pt-6 mb-10">
        <h2 class="text-xl font-medium mb-3 text-gray-800">Update Password</h2>
        <form method="POST" action="{{ route('password.update') }}" class="space-y-4">
            @csrf
            @method('put')

            {{-- Current Password --}}
            <div>
                <label for="current_password" class="block text-sm font-medium text-gray-700">Current Password</label>
                <input id="current_password" name="current_password" type="password"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                @error('current_password') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            {{-- New Password --}}
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">New Password</label>
                <input id="password" name="password" type="password"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                @error('password') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            {{-- Confirm Password --}}
            <div>
                <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm Password</label>
                <input id="password_confirmation" name="password_confirmation" type="password"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div class="flex justify-end">
                <button type="submit"
                    class="bg-green-600 text-white px-5 py-2 rounded-md hover:bg-green-700 transition font-medium shadow-md">
                    🔒 Update Password
                </button>
            </div>
        </form>
    </div>

    {{-- 🎨 Select Portfolio Theme Section --}}
    <div class="border-t pt-6 mb-10">
        <h2 class="text-xl font-medium mb-3 text-gray-800">🎨 Select Portfolio Theme</h2>
        <p class="text-gray-600 mb-4">Choose a portfolio design that best represents your style.</p>

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

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                @for ($i = 1; $i <= 6; $i++)
                    <label class="relative cursor-pointer block">
                        <input 
                            type="radio" 
                            name="portfolio_theme" 
                            value="{{ $i }}" 
                            class="sr-only"
                            {{ auth()->user()->portfolio_theme == $i ? 'checked' : '' }}
                        >
                        <div class="bg-gradient-to-r 
                            {{ match($i) {
                                1 => 'from-blue-500 to-indigo-500',
                                2 => 'from-teal-500 to-cyan-500',
                                3 => 'from-purple-500 to-pink-500',
                                4 => 'from-amber-500 to-orange-500',
                                5 => 'from-emerald-500 to-green-500',
                                6 => 'from-gray-700 to-gray-900',
                            } }}
                            text-white font-semibold py-3 rounded-lg shadow-md hover:scale-105 hover:shadow-lg transition text-center"
                        >
                            Theme {{ $i }}
                        </div>
                    </label>
                @endfor
            </div>

            <div class="text-center mt-6">
                <button type="submit"
                    class="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 shadow-md transition">
                    ✅ Save Selected Theme
                </button>
            </div>
        </form>
    </div>

    {{-- ❌ Delete Account Section --}}
    <div class="border-t pt-6">
        <h2 class="text-xl font-medium mb-3 text-red-600">Delete Account</h2>
        <p class="text-gray-600 mb-4">Once your account is deleted, all of its resources and data will be permanently removed.</p>

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

            <button type="submit"
                onclick="return confirm('Are you sure you want to delete your account?')"
                class="bg-red-600 text-white px-5 py-2 rounded-md hover:bg-red-700 transition font-medium shadow-md">
                ❌ Delete Account
            </button>
        </form>
    </div>

</div>
@endsection