@extends('layouts.admin')

@section('title', 'Profile')

@section('page-title', 'Profile')

@section('breadcrumbs')
    <span class="text-primary font-medium">Profile</span>
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
    @if (session('status') === 'profile-updated' || session('success'))
        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
            <span class="material-symbols-outlined text-green-600">check_circle</span>
            <p class="text-green-800">{{ session('success') ?? 'Profile updated successfully.' }}</p>
        </div>
    @endif

    <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="flex flex-col gap-6">
        @csrf
        @method('PATCH')

        <!-- Card 1: General Information -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50/50">
                <h2 class="text-lg font-bold text-gray-900">General Information</h2>
            </div>
            <div class="p-6 bg-gray-50/30">
                <!-- Profile Photo Section -->
                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6 mb-8 pb-8 border-b border-gray-200">
                    <div class="relative group">
                        <div class="size-24 rounded-full bg-gray-100 bg-cover bg-center border-2 border-white shadow-sm" style="background-image: url('{{ $user->avatar ? \Illuminate\Support\Facades\Storage::url($user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($user->name) }}');"></div>
                        <label for="avatar-upload" class="absolute bottom-0 right-0 p-1.5 bg-white border border-gray-300 rounded-full text-gray-600 hover:text-primary shadow-sm transition-colors cursor-pointer">
                            <span class="material-symbols-outlined text-[16px] block">edit</span>
                        </label>
                        <input type="file" name="avatar" id="avatar-upload" accept="image/*" class="hidden" onchange="previewAvatar(this)">
                    </div>
                    <div class="flex flex-col gap-2">
                        <div class="flex items-center gap-3">
                            <h3 class="font-semibold text-gray-900">Profile Photo</h3>
                            <span class="px-2 py-0.5 rounded bg-gray-100 text-xs font-medium text-gray-500">Public</span>
                        </div>
                        <p class="text-sm text-gray-500 max-w-sm">Update your profile picture. Recommended size is 256x256px. JPG, PNG or GIF allowed.</p>
                        <div class="flex gap-3 mt-1">
                            <label for="avatar-upload" class="text-sm font-medium text-primary hover:text-primary/80 transition-colors cursor-pointer">Upload New</label>
                            <button type="button" onclick="removeAvatar()" class="text-sm font-medium text-red-500 hover:text-red-600 transition-colors">Remove</button>
                        </div>
                    </div>
                </div>
                <!-- Form Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">First Name <span class="text-red-500">*</span></span>
                        <input name="first_name" value="{{ old('first_name', explode(' ', $user->name)[0] ?? '') }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('first_name') border-red-500 @enderror" placeholder="e.g. Jane" type="text"/>
                        @error('first_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">Last Name <span class="text-red-500">*</span></span>
                        <input name="last_name" value="{{ old('last_name', explode(' ', $user->name)[1] ?? '') }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('last_name') border-red-500 @enderror" placeholder="e.g. Doe" type="text"/>
                        @error('last_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">Email Address <span class="text-red-500">*</span></span>
                        <div class="relative">
                            <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-[20px]">mail</span>
                            <input name="email" value="{{ old('email', $user->email) }}" required class="w-full h-11 pl-10 pr-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('email') border-red-500 @enderror" placeholder="jane@company.com" type="email"/>
                        </div>
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">Phone Number</span>
                        <div class="relative">
                            <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-[20px]">call</span>
                            <input name="phone" value="{{ old('phone', $user->phone ?? '') }}" class="w-full h-11 pl-10 pr-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('phone') border-red-500 @enderror" placeholder="+1 (555) 000-0000" type="tel"/>
                        </div>
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">Gender</span>
                        <div class="relative">
                            <select name="gender" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow appearance-none @error('gender') border-red-500 @enderror">
                                <option disabled selected value="">Select gender</option>
                                <option value="male" {{ old('gender', $user->gender ?? '') === 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender', $user->gender ?? '') === 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('gender', $user->gender ?? '') === 'other' ? 'selected' : '' }}>Other</option>
                                <option value="notsay" {{ old('gender', $user->gender ?? '') === 'notsay' ? 'selected' : '' }}>Prefer not to say</option>
                            </select>
                            <span class="material-symbols-outlined absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-[20px]">expand_more</span>
                        </div>
                        @error('gender')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-col gap-1.5">
                        <span class="text-sm font-medium text-gray-700">Date of Birth</span>
                        <div class="relative">
                            <input name="date_of_birth" value="{{ old('date_of_birth', $user->date_of_birth ?? '') }}" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('date_of_birth') border-red-500 @enderror" type="date"/>
                        </div>
                        @error('date_of_birth')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                </div>
            </div>
        </div>

        <!-- Card 2: Address Information -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50/50">
                <h2 class="text-lg font-bold text-gray-900">Address Information</h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-50/30">
                <label class="flex flex-col gap-1.5 md:col-span-2">
                    <span class="text-sm font-medium text-gray-700">Street Address</span>
                    <textarea name="address" rows="3" class="w-full p-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow resize-none @error('address') border-red-500 @enderror" placeholder="Enter your full address">{{ old('address', $user->address ?? '') }}</textarea>
                    @error('address')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">Country</span>
                    <div class="relative">
                        <select name="country" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow appearance-none @error('country') border-red-500 @enderror">
                            <option disabled selected value="">Select Country</option>
                            <option value="us" {{ old('country', $user->country ?? '') === 'us' ? 'selected' : '' }}>United States</option>
                            <option value="ca" {{ old('country', $user->country ?? '') === 'ca' ? 'selected' : '' }}>Canada</option>
                            <option value="uk" {{ old('country', $user->country ?? '') === 'uk' ? 'selected' : '' }}>United Kingdom</option>
                        </select>
                        <span class="material-symbols-outlined absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-[20px]">expand_more</span>
                    </div>
                    @error('country')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">State / Province</span>
                    <div class="relative">
                        <select name="state" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow appearance-none @error('state') border-red-500 @enderror">
                            <option disabled selected value="">Select State</option>
                            <option value="ny" {{ old('state', $user->state ?? '') === 'ny' ? 'selected' : '' }}>New York</option>
                            <option value="ca" {{ old('state', $user->state ?? '') === 'ca' ? 'selected' : '' }}>California</option>
                            <option value="tx" {{ old('state', $user->state ?? '') === 'tx' ? 'selected' : '' }}>Texas</option>
                        </select>
                        <span class="material-symbols-outlined absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-[20px]">expand_more</span>
                    </div>
                    @error('state')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">City</span>
                    <div class="relative">
                        <select name="city" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow appearance-none @error('city') border-red-500 @enderror">
                            <option disabled selected value="">Select City</option>
                            <option value="nyc" {{ old('city', $user->city ?? '') === 'nyc' ? 'selected' : '' }}>New York City</option>
                            <option value="buf" {{ old('city', $user->city ?? '') === 'buf' ? 'selected' : '' }}>Buffalo</option>
                        </select>
                        <span class="material-symbols-outlined absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-[20px]">expand_more</span>
                    </div>
                    @error('city')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">Pincode / Zip</span>
                    <input name="zip" value="{{ old('zip', $user->zip ?? '') }}" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('zip') border-red-500 @enderror" placeholder="10001" type="text"/>
                    @error('zip')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
            </div>
        </div>

        <!-- Card 3: Password Change -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50/50">
                <h2 class="text-lg font-bold text-gray-900">Change Password</h2>
                <p class="text-sm text-gray-500 mt-1">Leave blank if you don't want to change your password.</p>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-50/30">
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">New Password</span>
                    <input name="password" type="password" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow @error('password') border-red-500 @enderror" placeholder="Enter new password"/>
                    @error('password')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col gap-1.5">
                    <span class="text-sm font-medium text-gray-700">Confirm Password</span>
                    <input name="password_confirmation" type="password" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Confirm new password"/>
                </label>
            </div>
        </div>

        <!-- Sticky Action Footer -->
        <div class="sticky bottom-0 z-10 w-full bg-white/80 backdrop-blur-md border-t border-gray-200 px-6 py-4 flex items-center justify-end gap-3 -mx-6 -mb-6">
            <button type="button" onclick="window.location.href='{{ route('admin.dashboard') }}'" class="px-5 h-10 rounded-lg text-sm font-semibold text-gray-700 hover:bg-gray-100 transition-colors">
                Cancel
            </button>
            <button type="submit" class="px-5 h-10 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-bold shadow-md shadow-primary/20 flex items-center gap-2 transition-all">
                <span class="material-symbols-outlined text-[18px]">save</span>
                Save Changes
            </button>
        </div>
    </form>

    <!-- Delete Account Section -->
    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-900">Delete Account</h2>
            <p class="text-sm text-gray-500 mt-1">Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.</p>
        </div>

        <form method="POST" action="{{ route('profile.destroy') }}" class="p-6">
            @csrf
            @method('DELETE')

            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                <input 
                    type="password" 
                    name="password" 
                    id="password" 
                    required
                    placeholder="Enter your password to confirm"
                    class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary @error('password', 'userDeletion') border-red-500 @enderror"
                >
                @error('password', 'userDeletion')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit" class="px-5 py-2.5 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 shadow-sm transition-colors">
                Delete Account
            </button>
        </form>
    </div>
</div>

@push('scripts')
<script>
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const avatarDiv = document.querySelector('.size-24');
            if (avatarDiv) {
                avatarDiv.style.backgroundImage = `url(${e.target.result})`;
            }
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function removeAvatar() {
    const avatarInput = document.getElementById('avatar-upload');
    if (avatarInput) {
        avatarInput.value = '';
        const avatarDiv = document.querySelector('.size-24');
        if (avatarDiv) {
            const userName = '{{ $user->name }}';
            avatarDiv.style.backgroundImage = `url('https://ui-avatars.com/api/?name=${encodeURIComponent(userName)}')`;
        }
    }
}
</script>
@endpush
@endsection