@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>
                <span class="mx-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">Add 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>

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

        <!-- Form Start -->
        <form action="{{ route('education.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div id="education-container">
                @php
                    $savedEducations = $educations ?? collect();
                    if ($savedEducations->isEmpty()) {
                        $savedEducations = [null];
                    }
                @endphp
            </div>

            <div class="education-item mb-8 p-6 border rounded-xl bg-white shadow-sm">

                <!-- Degree -->
                <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="">

                    @error('degree_title')
                        <span class="text-red-500">{{ $message }}</span>
                    @enderror
                </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="">
                    @error('degree_title')
                        <span class="text-red-500">{{ $message }}</span>
                    @enderror
                </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="">
                </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"></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="">
                    </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="">
                    </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="">
                </div>

                <!-- Certificate Upload -->
                <div class="mb-3">
                    <label class="block text-gray-700 font-medium">Certificate File (Optional)</label>
                    <br>
                    <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">
                        No file chosen
                    </span>
                    <span id="edu-file-name" class="ml-3 text-gray-600">
                        {{-- {{ isset($edu->certificate) ? basename($edu->certificate) : '' }} --}}
                    </span>

                    <img id="edu-preview" class="hidden mt-3 h-24 w-24 rounded-lg border object-cover" />
                    {{-- <img id="edu-preview-" class="hidden mt-3 h-24 rounded-lg border" /> --}}
                </div>

            </div>
            <!-- Submit -->
            <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700">
                Save Education
            </button>
        </form>
    </div>
    <script>
        //  This is to Show file name

        document.getElementById('edu_file').addEventListener('change', function() {
            const fileNameSpan = document.getElementById('edu-file-name');

            if (this.files.length > 0) {
                fileNameSpan.textContent = this.files[0].name;
            } else {
                fileNameSpan.textContent = 'No file chosen';
            }
        });
    </script>
@endsection