@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">All 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>
        <div class="text-center mb-4">
            <a href="{{ route('projects.create', ['no' => $totalProjects + 1]) }}">

                <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 More Projects
                </button>
            </a>

            <!-- 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

        </div>
        @forelse ($projects as  $key => $project)
            <form action="{{ route('projects.update') }}" method="POST" enctype="multipart/form-data" class="mb-3">
                @csrf
                <div id="projects-wrapper" class="space-y-6">

                    <div class="project-card p-6 border border-gray-300 rounded-xl shadow-sm bg-white-50">
                        <h3 class="font-bold text-lg mb-4 text-indigo-700">Project #{{ $totalProjects-- }}</h3>

                        <!-- Hidden Project Id  -->
                        <input type="hidden" name="id" value="{{ $project->id }}">

                        <!-- Title !-->
                        <div>
                            <label class="font-medium text-gray-700">Project Title</label>
                            <input type="text" name="title" value="{{ $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="description" rows="3" class="w-full border border-gray-300 rounded-lg p-3" required>{{ $project->description }}</textarea>
                        </div>

                        {{-- Project Start Date --}}
                        <div>
                            <label class="font-medium text-gray-700">Project Start Date</label>
                            <input type="date" name="startdate" value="{{ $project->start_date }}"
                                class="w-full border border-gray-300 rounded-lg p-3" required>
                        </div>

                        {{-- Project End Date --}}
                        <div>
                            <label class="font-medium text-gray-700">Project End Date</label>
                            <input type="date" name="enddate" value="{{ $project->end_date }}"
                                class="w-full border border-gray-300 rounded-lg p-3" required>
                        </div>

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

                        {{-- Old File Hidden Path --}}
                        <input type="hidden" name="oldfile" value="{{ $project->file }}">

                        <!-- File -->
                        <div>
                            <label class="font-medium text-gray-700">Upload Image / PDF / DOC</label>
                            <br>
                            <br>
                            <input type="file" name="file" class="hidden" id="project_file">
                            <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">
                                {{ $project->file ? basename($project->file) : 'No file chosen' }}
                            </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>
                            <img src="{{ asset('storage/' . $project->file) }}"
                                class="mt-2 w-24 h-24 object-cover rounded-xl border">
                        </div>

                        <!-- Action Buttons -->
                        <div class="text-right mt-3 flex justify-end">

                            {{-- Remove Button --}}
                            <a href="{{ route('projects.delete', ['project' => $project->id]) }}" class="mr-5">
                                <button type="button"
                                    class="remove-project bg-red-500 text-white px-4 py-2.5 rounded-lg hover:bg-red-600 transition duration-300">Remove
                                </button>
                            </a>

                            {{-- Update Button --}}
                            <button type="submit"
                                class="bg-green-500 text-white font-bold py-2.5 px-4 rounded-lg hover:bg-green-600 transition">Update</button>
                        </div>
                    </div>

                </div>
            </form>
        @empty
            Nothing Found
        @endforelse

        <script>
            document.getElementById('project_file').addEventListener('change', function() {
                const fileNameSpan = document.getElementById('file-name');

                if (this.files.length > 0) {
                    fileNameSpan.textContent = this.files[].name;
                } else {
                    fileNameSpan.textContent = 'No file chosen';
                }
            });
        </script>
    @endsection