@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto mt-10 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="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">Skills</li>
            </ol>
        </nav>

        <!-- Header Row: Title + Go Back -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800">Add Your Skills</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

        {{-- 📝 Skills Form --}}
        <form id="skills-form" action="{{ route('skills.store') }}" method="POST" enctype="multipart/form-data"
            class="space-y-5">
            @csrf

            <div id="skills-container" class="space-y-5">
                @php
                    $latestSkills = $skills ?? collect();
                @endphp

                @if ($latestSkills->count() > 0)
                    @foreach ($latestSkills as $index => $skill)
                        <div class="skill-item bg-white p-5 rounded-xl shadow-md space-y-4 border border-gray-200">

                            <!-- Skill Name -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Skill Name</label>
                                <input type="text" name="skills[{{ $index }}][name]"
                                    placeholder="e.g., HTML, Python"
                                    value="{{ old('skills.' . $index . '.name', $skill->name) }}"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                                    required>
                            </div>

                            <!-- Skill Level -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Skill Level</label>
                                <select name="skills[{{ $index }}][level]"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                                    required>
                                    <option value="">Select Level</option>
                                    <option value="Beginner" {{ $skill->level == 'Beginner' ? 'selected' : '' }}>Beginner</option>
                                    <option value="Intermediate" {{ $skill->level == 'Intermediate' ? 'selected' : '' }}>
                                        Intermediate</option>
                                    <option value="Expert" {{ $skill->level == 'Expert' ? 'selected' : '' }}>Expert</option>
                                </select>
                            </div>

                            <!-- Years of Experience -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Years of Experience</label>
                                <input type="number" name="skills[{{ $index }}][years]"
                                    value="{{ $skill->years }}" min="0" max="50"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                            </div>

                            <!-- Description (Optional) -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Description (Optional)</label>
                                <textarea name="skills[{{ $index }}][description]" rows="3"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300">{{ $skill->description }}</textarea>
                            </div>

                            <!-- Upload Certificate -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Upload Certificate (Optional)</label>
                                <input type="file" name="skills[{{ $index }}][file]"
                                    id="skill_file_{{ $index }}" class="hidden"
                                    accept="image/*,application/pdf,.doc,.docx">
                                <label for="skill_file_{{ $index }}"
                                    class="cursor-pointer inline-block bg-indigo-500 text-white font-semibold px-5 py-2 rounded-lg hover:bg-indigo-600 transition duration-300">
                                    Choose File
                                </label>
                                <span id="file-name-{{ $index }}"
                                    class="ml-3 text-gray-600">{{ $skill->certificate ? basename($skill->certificate) : '' }}</span>
                            </div>

                            <!-- Remove Button -->
                            <div class="text-right">
                                <button type="button"
                                    class="remove-skill bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition duration-300">Remove</button>
                            </div>
                        </div>
                    @endforeach
                @else
                    <!-- Default Empty Skill -->
                    <div class="skill-item bg-white p-5 rounded-xl shadow-md space-y-4 border border-gray-200">
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Skill Name</label>
                            <input type="text" name="skills[0][name]" placeholder="e.g., HTML, Python"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                                required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Skill Level</label>
                            <select name="skills[0][level]"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                                required>
                                <option value="">Select Level</option>
                                <option value="Beginner">Beginner</option>
                                <option value="Intermediate">Intermediate</option>
                                <option value="Expert">Expert</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Years of Experience</label>
                            <input type="number" name="skills[0][years]" min="0" max="50"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Description (Optional)</label>
                            <textarea name="skills[0][description]" rows="3"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-300"></textarea>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Upload Certificate (Optional)</label>
                            <input type="file" name="skills[0][file]" id="skill_file_0" class="hidden"
                                accept="image/*,application/pdf,.doc,.docx">
                            <label for="skill_file_0"
                                class="cursor-pointer inline-block bg-indigo-500 text-white font-semibold px-5 py-2 rounded-lg hover:bg-indigo-600 transition duration-300">
                                Choose File
                            </label>
                            <span id="file-name-0" class="ml-3 text-gray-600"></span>
                        </div>
                        <div class="text-right">
                            <button type="button"
                                class="remove-skill bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition duration-300">Remove</button>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Add More Skills -->
            <div class="text-center">
                <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 Skill
                </button>
            </div>

            <!-- Save -->
            <div>
                <button type="submit"
                    class="w-full bg-indigo-500 text-white font-semibold py-3 rounded-lg hover:bg-indigo-600 transition duration-300">
                    Save All Skills
                </button>
            </div>
        </form>
    </div>

    {{-- JS for dynamic add/remove and file preview --}}
    <script>
        let skillCount = {{ $latestSkills->count() ?? 1 }};

        // Add More Skill
        document.getElementById('add-more').addEventListener('click', function() {
            const container = document.getElementById('skills-container');
            const newSkill = document.querySelector('.skill-item').cloneNode(true);

            newSkill.querySelectorAll('input[type=text], textarea').forEach(input => input.value = '');
            const fileInput = newSkill.querySelector('input[type=file]');
            const fileLabel = newSkill.querySelector('label[for]');
            const fileName = newSkill.querySelector('span[id^="file-name"]');

            fileInput.id = `skill_file_${skillCount}`;
            fileLabel.setAttribute('for', `skill_file_${skillCount}`);
            fileName.id = `file-name-${skillCount}`;
            fileName.textContent = '';

            container.appendChild(newSkill);
            skillCount++;
        });

        // Remove Skill
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-skill')) {
                const allSkills = document.querySelectorAll('.skill-item');
                if (allSkills.length > 1) e.target.closest('.skill-item').remove();
                else alert("At least one skill is required!");
            }
        });
    </script>

@endsection