@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="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>

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

        <!-- Add Another Skill !-->

        <div class="text-center">
            <a href="{{ route('skills.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 Skill
                </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 ($skills as $index => $skill)
            <form id="skills-form" action="{{ route('skills.update') }}" method="POST" enctype="multipart/form-data"
                class="space-y-5">
                @csrf

                <div id="skills-container" class="space-y-5">
                    <div class="skill-item bg-white p-5 pt-3 rounded-xl shadow-md space-y-4 border border-gray-200">
                        <h3 class="text-center text-purple-500 font-bold">SKILL # {{ $index + 1 }}</h3>

                        <!-- Skill Add !-->

                        <input type="hidden" name="id" value="{{ $skill->id }}">

                        <!-- Skill Name -->
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Skill Name</label>
                            <input type="text" name="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="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="years" value="{{ $skill->years_of_experience }}" 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="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="file" id="skill_file_{{ $index }}" class="hidden"
                                accept="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_path ? basename($skill->certificate_path) : '' }}</span>
                        </div>

                        <!-- Old Certificate Path !-->

                        <input type="hidden" name="oldcertificate" value="{{ $skill->certificate_path }}">

                        <!-- Remove Button -->
                        <div class="text-right">

                            <button type="submit"
                                class="remove-skill bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">Update
                            </button>

                            <a href="{{ route('skills.delete', ['id' => $skill->id]) }}">
                                <button type="button"
                                    class="remove-skill bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition duration-300">Remove
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        @endforeach
    </div>
@endsection