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

@section('content')
    <!-- Form Card -->
    <div class="max-w-3xl mx-auto mt-8 p-8 bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg">

        <!-- Breadcrumbs -->
        <nav class="text-gray-600 text-sm mb-4" aria-label="Breadcrumb">
            <ol class="list-reset flex">
                <li><a href="{{ route('dashboard') }}" class="text-indigo-600 hover:underline">Home</a></li>
                <span class="mx-2">/</span>
                <li><a href="{{ route('personal-info.index') }}" class="text-indigo-600 hover:underline">Personal Info</a>
                </li>
            </ol>
        </nav>

        <!-- Header -->
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-semibold text-gray-800">Personal Information</h2>
            <a href="{{ route('dashboard') }}"
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg border">← Go Back</a>
        </div>

        {{-- Success Message --}}
        @if (session('success'))
            <div class="bg-green-50 text-green-800 p-3 py-2 rounded mb-6 text-center font-medium">
                {{ session('success') }}
            </div>
        @endif

        @php
            $latestInfo = $personalInfos->first() ?? null;
        @endphp

        <form action="{{ route('personal-info.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf
            <!-- Full Name -->

            <div>

                <label class="block text-gray-700 mb-1 font-medium">Full Name</label>
                <input type="text" name="full_name" value="{{ old('full_name', $latestInfo->full_name ?? '') }}"
                    class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">
                @error('full_name')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <!-- Email (READONLY) -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Email (Cannot Change)</label>

                <input type="email" name="email" value="{{ old('email', $latestInfo->email ?? $loggedInUser->email) }}"
                    readonly
                    class="w-full border border-gray-300 bg-gray-100 cursor-not-allowed rounded-lg p-3 py-2 focus:ring-indigo-300">
                <p class="text-gray-500 text-sm mt-1">Email cannot be changed.</p>
                @error('email')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <!-- Profession -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Profession</label>
                <input type="text" name="profession" value="{{ old('profession', $latestInfo->profession ?? '') }}"
                    class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">
                @error('profession')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <!-- Phone -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Phone</label>
                <input type="text" name="phone" value="{{ old('phone', $latestInfo->phone ?? '') }}"
                    class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">
                @error('phone')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <!-- Address -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Address</label>
                <input type="text" name="address" value="{{ old('address', $latestInfo->address ?? '') }}"
                    class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">
                @error('address')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            {{-- DOB --}}
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Date of Birth</label>
                <input type="date" name="dob" value="{{ old('dob', $latestInfo->dob ?? '') }}"
                    class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">
                @error('dob')
                    <span>{{ $message }}</span>
                @enderror
            </div>

            <!-- Bio -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Bio</label>
                <textarea name="bio" rows="4" class="w-full border border-gray-300 rounded-lg p-3 py-2 focus:ring-indigo-300">{{ old('bio', $latestInfo->bio ?? '') }}</textarea>
                @error('bio')
                    <span>{{ $message }}</span>
                @enderror
            </div>

            <!-- Profile Photo -->
            <div>
                <label class="block text-gray-700 mb-1 font-medium">Profile Photo</label>
                <input type="file" name="profile_photo" id="profile_photo" class="hidden"
                    accept="image/jpeg,image/png,image/webp">
                @error('profile_photo')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror

                <label for="profile_photo"
                    class="cursor-pointer inline-block bg-indigo-500 text-white px-5 py-2 rounded-lg">
                    Choose File
                </label>

                <span id="file-name" class="ml-3 text-gray-600">
                    {{ $latestInfo && $latestInfo->profile_photo ? basename($latestInfo->profile_photo) : '' }}
                </span>

                @if ($latestInfo && $latestInfo->profile_photo)
                    <div class="mt-4">
                        <img id="preview-image" src="{{ asset('storage/' . $latestInfo->profile_photo) }}"
                            class="w-32 h-32 rounded-full border-2 border-indigo-200">
                    </div>
                @else
                    <div class="mt-4">
                        <img id="preview-image" class="w-32 h-32 rounded-full border-2 border-indigo-200 hidden">
                    </div>
                @endif
            </div>

            <!-- Submit -->
            <div>
                <button type="submit" class="w-full bg-indigo-500 text-white font-semibold py-3 rounded-lg">
                    Save Changes
                </button>
            </div>

        </form>
    </div>

    <!-- JS for File Preview -->
    <script>
        const fileInput = document.getElementById('profile_photo');
        const fileName = document.getElementById('file-name');
        const previewImage = document.getElementById('preview-image');

        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                fileName.textContent = this.files[0].name;

                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    previewImage.classList.remove('hidden');
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    </script>
@endsection