@extends('layouts.app')

@section('content')
    <!-- CREATE EXPERIENCE FORM -->
    <div class="max-w-3xl mx-auto mt-8 p-8 bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg">

        <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">Experience</li>
            </ol>
        </nav>


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

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

            <div id="experience-container">
                {{-- @php
                    $savedExperiences = collect($experiences ?? []);
                    if ($savedExperiences->isEmpty()) {
                        $savedExperiences = [null];
                    }
                @endphp --}}

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

                    <!-- Job Title -->
                    <div class="mb-3">
                        <label class="block text-gray-700 font-medium">Job Title</label>
                        <input type="text" name="job_title" class="w-full border p-3 rounded-lg"
                            value="{{ old('job_title') }}">
                        @error('job_title')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Company -->
                    <div class="mb-3">
                        <label class="block text-gray-700 font-medium">Company Name</label>
                        <input type="text" name="company_name" class="w-full border p-3 rounded-lg"
                            value="{{ old('company_name') }}">
                        @error('company_name')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Dates -->
                    <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="{{ old('start_date') }}">
                            @error('start_date')
                                <span class="text-red-500">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium">End Date</label>
                            <input type="date" name="end_date" class="w-full border p-3 rounded-lg"
                                value="{{ old('end_date') }}">
                            @error('end_date')
                                <span class="text-red-500">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Responsibilities -->
                    <div class="mb-3">
                        <label class="block text-gray-700 font-medium">Responsibilities</label>
                        <textarea name="responsibilities" rows="3" class="w-full border p-3 rounded-lg">{{ old('responsibilities') }}</textarea>
                        @error('responsibilities')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Certificate Upload -->
                    <div class="mb-3">
                        <label class="block text-gray-700 font-medium">Experience Certificate (Optional)</label>
                        <br>
                        {{-- <input type="file" name="certificate[]" id="exp_file_" class="hidden" accept="image/*,application/pdf"> --}}
                        <input type="file" name="certificate" id="exp_file" class="hidden"
                            accept="image/*,application/pdf">
                        <label for="exp_file" class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg">Choose
                            File</label>
                        <span id="exp-file-name" class="ml-3 text-gray-600"></span>
                        <div class="mt-3">
                            <img id="exp-preview" class="w-32 h-32 mb-1 rounded-lg border-2 border-indigo-200 hidden">
                        </div> @error('certificate')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="w-full mt-2 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700">
                        Save Experience
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        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
        attachPreview(
            document.getElementById('exp_file'),
            document.getElementById('exp-file-name'),
            document.getElementById('exp-preview')
        );
    </script>
@endsection