@extends('layouts.app')

@section('content')
    <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> &ensp; / &ensp;
                {{-- <span class="mx-2 p-2 mt-2"></span> --}}
                <li class="text-gray-900 font-semibold">Education</li>
            </ol>
        </nav>

        <!-- Form Header -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800">Your Education</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>

        <!-- Add Another Education !-->

        <div class="text-center mb-2">
            <a href="{{ route('education.create') }}">
                <button type="button" id="add-more"
                    class="bg-indigo-500 text-white px-5 py-2 rounded-lg hover:bg-indigo-600 transition duration-300">
                    + Add Another Education
                </button>
            </a>
        </div>
        {{-- Success Message --}}
        @if (session('success') || session('error'))
            <div
                class=" {{ session('error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}  p-3 rounded mb-6 text-center font-medium relative mt-2">
                {{ session('success') ?? session('error') }}
                <span onclick="this.parentElement.remove()" class="absolute right-3 top-2 cursor-pointer font-bold">
                    ✕
                </span>
            </div>
        @endif

        @foreach ($educations as $index => $edu)
            <!-- Form Start -->
            <form action="{{ route('education.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div id="education-container">
                    <div class="education-item mb-8 p-6 border rounded-xl bg-white shadow-sm">

                        {{-- Hidden ID for Degree --}}
                        <input type="hidden" name="id" value="{{ $edu->id }}">

                        {{-- Degree Title --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Degree Title</label>
                            <input type="text" name="degree_title" class="w-full border p-3 rounded-lg"
                                value="{{ old('degree_title', $edu->degree_title ?? '') }}" required>
                        </div>

                        <!-- University -->
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">University / Institution</label>
                            <input type="text" name="university" class="w-full border p-3 rounded-lg"
                                value="{{ old('university', $edu->university ?? '') }}">
                        </div>

                        <!-- Major Subjects -->
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Major Subjects</label>
                            <input type="text" name="major_subjects" class="w-full border p-3 rounded-lg"
                                value="{{ old('major_subjects', $edu->major_subjects ?? '') }}">
                        </div>

                        {{-- Description --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Description (Optional)</label>
                            <textarea name="description" class="w-full border p-3 rounded-lg">{{ $edu->description }}</textarea>
                        </div>

                        <!-- Start Date and End Date -->
                        <div class="grid grid-cols-2 gap-4 mb-3">
                            <div>
                                <label class="block text-gray-700 font-medium">Start Date</label>
                                <input type="date" name="start_date" class="w-full border p-3 rounded-lg"
                                    value="{{ $edu->start_date }}">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium">End Date (Optional)</label>
                                <input type="date" name="end_date" class="w-full border p-3 rounded-lg"
                                    value="{{ $edu->end_date }}">
                            </div>
                        </div>

                        {{-- CGPA / Grade / Percentage --}}
                        <div>
                            <label class="block text-gray-700 font-medium">CGPA / Grade / percentage</label>
                            <input type="text" name="cgpa" class="w-full border p-3 rounded-lg"
                                value="{{ $edu->cgpa }}">
                        </div>
                        <!-- Year and CGPA -->
                        {{-- <div class="grid grid-cols-2 gap-4 mb-3">
                            <div>
                                <label class="block text-gray-700 font-medium">Year</label>
                                <input type="text" name="year" class="w-full border p-3 rounded-lg"
                                    value="{{ old('year', $edu->year ?? '') }}">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium">CGPA / Grade / percentage</label>
                                <input type="text" name="cgpa" class="w-full border p-3 rounded-lg"
                                    value="{{ old('cgpa', $edu->cgpa ?? '') }}">
                            </div>
                        </div> --}}

                        <!-- Certificate Upload -->
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Certificate File (Optional)</label>
                            <br>
                            <input type="hidden" name="oldcertificate" value="{{ $edu->certificate }}">
                            <input type="file" name="certificate" id="edu_file" class="hidden"
                                accept="image/*,application/pdf">
                            <label for="edu_file"
                                class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg">Choose File</label>
                            <span id="edu-file-name" class="ml-3 text-gray-600">
                                {{ isset($edu->certificate) ? basename($edu->certificate) : '' }}
                            </span>

                            @if (isset($edu->certificate))
                                <img id="edu-preview" src="{{ asset('storage/' . $edu->certificate) }}"
                                    class="mt-3 h-24 rounded-lg border w-20">
                            @else
                                <img id="edu-preview" class="hidden mt-3 h-24 rounded-lg border w-20" />
                            @endif
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700">
                        Update Education
                    </button>
            </form>
        @endforeach
    </div>
    </div>
@endsection