@extends('layouts.user.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto">
        <!-- Profile Information -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
            <div class="bg-[#8B0000] px-6 py-4">
                <h2 class="text-xl font-bold text-white">Informasi Profil</h2>
            </div>

            <div class="p-6">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Profile Picture -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Foto Profil</label>
                        <div class="flex items-center space-x-6">
                            <div class="shrink-0">
                                @if($user->profile_picture)
                                    <img class="h-24 w-24 object-cover rounded-full" src="{{ Storage::url($user->profile_picture) }}" alt="{{ $user->name }}">
                                @else
                                    <div class="h-24 w-24 rounded-full bg-gray-200 flex items-center justify-center">
                                        <i class="fas fa-user text-3xl text-gray-400"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="flex-1">
                                <input type="file" name="profile_picture" id="profile_picture" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#8B0000] file:text-white hover:file:bg-[#660000]">
                                @if($user->profile_picture)
                                    <button type="button" onclick="document.getElementById('delete-picture-form').submit();" class="mt-2 text-sm text-red-600 hover:text-red-800">
                                        <i class="fas fa-trash-alt mr-1"></i> Hapus Foto
                                    </button>
                                @endif
                            </div>
                        </div>
                        @error('profile_picture')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Name -->
                    <div class="mb-6">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama</label>
                        <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('name')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Email -->
                    <div class="mb-6">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                        <input type="email" name="email" id="email" value="{{ old('email', $user->email) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('email')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Phone -->
                    <div class="mb-6">
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Nomor Telepon</label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('phone')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Address -->
                    <div class="mb-6">
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Alamat</label>
                        <textarea name="address" id="address" rows="3" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">{{ old('address', $user->address) }}</textarea>
                        @error('address')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Birth Date -->
                    <div class="mb-6">
                        <label for="birth_date" class="block text-sm font-medium text-gray-700 mb-2">Tanggal Lahir</label>
                        <input type="date" name="birth_date" id="birth_date" value="{{ old('birth_date', $user->birth_date?->format('Y-m-d')) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('birth_date')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Gender -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Kelamin</label>
                        <div class="mt-2 space-y-2">
                            <div class="flex items-center">
                                <input type="radio" name="gender" id="gender_male" value="male" {{ old('gender', $user->gender) === 'male' ? 'checked' : '' }} class="h-4 w-4 text-[#8B0000] focus:ring-[#8B0000] border-gray-300">
                                <label for="gender_male" class="ml-3 block text-sm font-medium text-gray-700">Laki-laki</label>
                            </div>
                            <div class="flex items-center">
                                <input type="radio" name="gender" id="gender_female" value="female" {{ old('gender', $user->gender) === 'female' ? 'checked' : '' }} class="h-4 w-4 text-[#8B0000] focus:ring-[#8B0000] border-gray-300">
                                <label for="gender_female" class="ml-3 block text-sm font-medium text-gray-700">Perempuan</label>
                            </div>
                        </div>
                        @error('gender')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex justify-end">
                        <a href="{{ route('profile.show') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition mr-4">
                            <i class="fas fa-times mr-2"></i> Batal
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000] transition">
                            <i class="fas fa-save mr-2"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Change Password -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-[#8B0000] px-6 py-4">
                <h2 class="text-xl font-bold text-white">Ubah Password</h2>
            </div>

            <div class="p-6">
                <form action="{{ route('profile.password.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-6">
                        <label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">Password Saat Ini</label>
                        <input type="password" name="current_password" id="current_password" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('current_password')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password Baru</label>
                        <input type="password" name="password" id="password" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                        @error('password')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password Baru</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000] transition">
                            <i class="fas fa-key mr-2"></i> Ubah Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Hidden form for deleting profile picture -->
<form id="delete-picture-form" action="{{ route('profile.picture.delete') }}" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>
@endsection