@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('projects.index') }}"
                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') || 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

        {{-- 📝 Project Form --}}
        <form action="{{ route('projects.storeMultiple') }}" method="POST" enctype="multipart/form-data"
            class="space-y-6 mb-3">
            @csrf
            <div id="projects-wrapper" class="space-y-6">
                @php
                    $latestProjects = $projects ?? collect();
                @endphp
                <div class="project-card p-6 border border-gray-300 rounded-xl shadow-sm bg-white-50">
                    {{-- {{ dd($totalProjects) }} --}}
                    <h3 class="font-bold text-lg mb-4 text-indigo-700">Project #{{ $no ?? 1 }}
                    </h3>

                    <!-- Title -->
                    <div>
                        <label class="font-medium text-gray-700">Project Title</label>
                        <input type="text" name="title" value=""
                            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="description" rows="3" class="w-full border border-gray-300 rounded-lg p-3" required></textarea>
                    </div>
                    <!-- Start Date !-->
                    <div>
                        <label class="font-medium text-gray-700">Project Start Date</label>
                        <input type="date" name="startdate" value=""
                            class="w-full border border-gray-300 rounded-lg p-3" required>
                    </div>
                    <!-- End Date !-->
                    <div>
                        <label class="font-medium text-gray-700">Project End Date (Optional)</label>
                        <input type="date" name="enddate" value=""
                            class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

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

                    {{-- <!-- Image -->
                    <div>
                        <label class="font-medium text-gray-700">Upload Project Image</label>
                        <br>
                        <br>
                        <input type="image" name="image" class="hidden" accept="image/*" id="project_image">
                        <label for="image"
                            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" class="ml-3 text-gray-600"></span>
                    </div> --}}

                    <!-- File -->
                    <div>
                        <label class="font-medium text-gray-700">Upload Project Image</label>
                        <br>
                        <br>
                        <input type="file" name="file" class="hidden" id="project_file" accept="image/*">
                        <label for="project_file"
                            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" class="ml-3 text-gray-600"></span>
                    </div>
                    <img class="w-24 h-24 hidden mt-2 rounded-xl" id="preview-image" alt="">
                </div>
            </div>
            <div>
                <button type="submit"
                    class="w-full bg-indigo-500 text-white font-bold py-3 rounded-lg hover:bg-green-600 transition">
                    Save Project
                </button>
            </div>

        </form>

    </div>
    <!-- JS for File Preview -->
    <script>
        const fileInput = document.getElementById('project_file');
        const fileName = document.getElementById('file-name');
        const previewImage = document.getElementById('preview-image');

        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                fileName.textContent = this.files[0].name;

                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    previewImage.classList.remove('hidden');
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    </script>
@endsection