@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">Projects</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 Projects</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

    {{-- 📝 Project Form --}}
    <form action="{{ route('projects.storeMultiple') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div id="projects-wrapper" class="space-y-6">
            @php
                $latestProjects = $projects ?? collect();
            @endphp

            @if($latestProjects->count() > 0)
                @foreach($latestProjects as $index => $project)
                <div class="project-card p-6 border border-gray-300 rounded-xl shadow-sm bg-gray-50">

                    <h3 class="font-bold text-lg mb-4 text-indigo-700">Project #{{ $index + 1 }}</h3>

                    <!-- Title -->
                    <div>
                        <label class="font-medium text-gray-700">Project Title</label>
                        <input type="text" name="projects[{{ $index }}][title]" 
                               value="{{ old('projects.'.$index.'.title', $project->title) }}"
                               class="w-full border border-gray-300 rounded-lg p-3" required>
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="font-medium text-gray-700">Project Description</label>
                        <textarea name="projects[{{ $index }}][description]" rows="3"
                                  class="w-full border border-gray-300 rounded-lg p-3" required>{{ old('projects.'.$index.'.description', $project->description) }}</textarea>
                    </div>

                    <!-- Link -->
                    <div>
                        <label class="font-medium text-gray-700">Project Link (Optional)</label>
                        <input type="url" name="projects[{{ $index }}][link]" 
                               value="{{ old('projects.'.$index.'.link', $project->link) }}"
                               class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <!-- Start Date -->
                    <div>
                        <label class="font-medium text-gray-700">Start Date</label>
                        <input type="date" name="projects[{{ $index }}][start_date]" 
                               value="{{ old('projects.'.$index.'.start_date', $project->start_date?->format('Y-m-d')) }}"
                               class="w-full border border-gray-300 rounded-lg p-3" required>
                    </div>

                    <!-- End Date -->
                    <div>
                        <label class="font-medium text-gray-700">End Date</label>
                        <input type="date" name="projects[{{ $index }}][end_date]" 
                               value="{{ old('projects.'.$index.'.end_date', $project->end_date?->format('Y-m-d')) }}"
                               class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <!-- File -->
                    <div>
                        <label class="font-medium text-gray-700">Upload Image / PDF / DOC</label>
                        <input type="file" name="projects[{{ $index }}][file]" class="hidden" id="project_file_{{ $index }}">
                        <label for="project_file_{{ $index }}" 
                               class="cursor-pointer inline-block bg-indigo-500 text-white 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">
                            {{ $project->file ? basename($project->file) : '' }}
                        </span>

                        <div class="mt-3">
                            @if($project->file)
                                <a href="{{ asset('storage/'.$project->file) }}" target="_blank" class="text-indigo-600 underline">View File</a>
                            @endif
                        </div>
                    </div>

                    <!-- Remove Button -->
                    <div class="text-right mt-3">
                        <button type="button" class="remove-project 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 first project -->
                <div class="project-card p-6 border border-gray-300 rounded-xl shadow-sm bg-gray-50">

                    <h3 class="font-bold text-lg mb-4 text-indigo-700">Project #1</h3>

                    <div>
                        <label class="font-medium text-gray-700">Project Title</label>
                        <input type="text" name="projects[0][title]" class="w-full border border-gray-300 rounded-lg p-3" required>
                    </div>

                    <div>
                        <label class="font-medium text-gray-700">Project Description</label>
                        <textarea name="projects[0][description]" rows="3" class="w-full border border-gray-300 rounded-lg p-3" required></textarea>
                    </div>

                    <div>
                        <label class="font-medium text-gray-700">Project Link (Optional)</label>
                        <input type="url" name="projects[0][link]" class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <div>
                        <label class="font-medium text-gray-700">Start Date</label>
                        <input type="date" name="projects[0][start_date]" class="w-full border border-gray-300 rounded-lg p-3" required>
                    </div>

                    <div>
                        <label class="font-medium text-gray-700">End Date</label>
                        <input type="date" name="projects[0][end_date]" class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <div>
                        <label class="font-medium text-gray-700">Upload Image / PDF / DOC</label>
                        <input type="file" name="projects[0][file]" class="hidden" id="project_file_0">
                        <label for="project_file_0" class="cursor-pointer inline-block bg-indigo-500 text-white 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 class="mt-3">
                            <img id="preview-image-0" class="hidden w-32 h-32 border rounded-lg mt-2">
                        </div>
                    </div>

                    <div class="text-right mt-3">
                        <button type="button" class="remove-project 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 -->
        <div class="text-center">
            <button type="button" id="add-project-btn" class="w-full bg-indigo-500 text-white font-bold py-3 rounded-lg hover:bg-indigo-600 transition">
                + Add Another Project
            </button>
        </div>

        <!-- Submit -->
        <div>
            <button type="submit" class="w-full bg-green-500 text-white font-bold py-3 rounded-lg hover:bg-green-600 transition">
                Save All Projects
            </button>
        </div>

    </form>
</div>

<script>
let projectIndex = {{ $latestProjects->count() ?? 1 }};

// Add More Project
document.getElementById('add-project-btn').addEventListener('click', () => {
    const wrapper = document.getElementById('projects-wrapper');
    const newProject = document.querySelector('.project-card').cloneNode(true);

    newProject.querySelectorAll('input[type=text], input[type=url], input[type=date], textarea').forEach(input => input.value = '');
    const fileInput = newProject.querySelector('input[type=file]');
    const fileLabel = newProject.querySelector('label[for]');
    const fileName = newProject.querySelector('span[id^="file-name"]');
    fileName.textContent = '';
    fileInput.id = `project_file_${projectIndex}`;
    fileLabel.setAttribute('for', `project_file_${projectIndex}`);

    wrapper.appendChild(newProject);
    projectIndex++;
});

// Remove Project
document.addEventListener('click', function(e) {
    if(e.target.classList.contains('remove-project')) {
        const allProjects = document.querySelectorAll('.project-card');
        if(allProjects.length > 1) e.target.closest('.project-card').remove();
        else alert("At least one project is required!");
    }
});
</script>
@endsection