@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

                @foreach ($savedEducations as $index => $edu)
                    <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="{{ old('degree_title.' . $index, $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.' . $index, $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.' . $index, $edu->major_subjects ?? '') }}">
                        </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.' . $index, $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.' . $index, $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="file" name="certificate[]" id="edu_file_{{ $index }}" class="hidden"
                                accept="image/*,application/pdf">
                            <label for="edu_file_{{ $index }}"
                                class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg">Choose File</label>
                            <span id="edu-file-name-{{ $index }}" class="ml-3 text-gray-600">
                                {{ isset($edu->certificate) ? basename($edu->certificate) : '' }}
                            </span>

                            @if (isset($edu->certificate))
                                <img id="edu-preview-{{ $index }}" src="{{ asset('storage/' . $edu->certificate) }}"
                                    class="mt-3 h-24 rounded-lg border">
                            @else
                                <img id="edu-preview-{{ $index }}" class="hidden mt-3 h-24 rounded-lg border" />
                            @endif
                        </div>

                        <!-- Remove Button -->
                        <div class="text-right">
                            <button type="button"
                                class="remove-edu bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">
                                Remove
                            </button>
                        </div>

                    </div>
                @endforeach
            </div>

            <!-- Add More Button -->
            <div class="text-center mb-4">
                <button type="button" id="add-education"
                    class="bg-indigo-500 text-white px-6 py-2 rounded-lg hover:bg-indigo-600">
                    Add More Education
                </button>
            </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>

    <!-- JS for Dynamic Education & File Preview -->
    <script>
        let eduCount = {{ is_countable($savedEducations) ? count($savedEducations) : 0 }};

        // Add More Education
        document.getElementById('add-education').addEventListener('click', function() {
            const container = document.getElementById('education-container');
            const newItem = document.querySelector('.education-item').cloneNode(true);

            newItem.querySelectorAll("input").forEach(i => i.value = "");

            const fileInput = newItem.querySelector('input[type="file"]');
            const fileLabel = newItem.querySelector('label[for]');
            const fileName = newItem.querySelector('span[id^="edu-file-name"]');
            const preview = newItem.querySelector('img[id^="edu-preview"]');

            fileInput.id = `edu_file_${eduCount}`;
            fileLabel.setAttribute("for", `edu_file_${eduCount}`);
            fileName.id = `edu-file-name-${eduCount}`;
            preview.id = `edu-preview-${eduCount}`;
            fileName.textContent = "";
            preview.classList.add('hidden');
            preview.src = "";

            container.appendChild(newItem);
            attachPreview(fileInput, fileName, preview);

            eduCount++;
        });

        // Remove Education
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-edu')) {
                const items = document.querySelectorAll('.education-item');
                if (items.length > 1) {
                    e.target.closest('.education-item').remove();
                } else {
                    alert("At least one education section is required!");
                }
            }
        });

        // File Preview Function
        function attachPreview(input, nameSpan, previewImg) {
            input.addEventListener('change', function() {
                if (this.files.length > 0) {
                    nameSpan.textContent = this.files[0].name;
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        previewImg.classList.remove('hidden');
                    };
                    reader.readAsDataURL(this.files[0]);
                } else {
                    nameSpan.textContent = '';
                    previewImg.src = '';
                    previewImg.classList.add('hidden');
                }
            });
        }

        // Attach preview to existing items
        @foreach ($savedEducations as $index => $edu)
            attachPreview(
                document.getElementById('edu_file_{{ $index }}'),
                document.getElementById('edu-file-name-{{ $index }}'),
                document.getElementById('edu-preview-{{ $index }}')
            );
        @endforeach
    </script>
@endsection