@extends('layouts.admin')

@section('title', 'Edit Project')

@section('content')
    <h1 class="text-2xl font-bold mb-6">Edit Project</h1>

    <form action="{{ route('admin.projects.update', $project) }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-lg shadow-md">
        @csrf
        @method('PUT')

        <div class="mb-4">
            <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
            <input type="text" name="title" id="title" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('title') border-red-500 @enderror" value="{{ old('title', $project->title) }}" required>
            @error('title')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="description" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
            <textarea name="description" id="description" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('description') border-red-500 @enderror" required>{{ old('description', $project->description) }}</textarea>
            @error('description')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="client" class="block text-gray-700 text-sm font-bold mb-2">Client (optional):</label>
            <input type="text" name="client" id="client" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('client') border-red-500 @enderror" value="{{ old('client', $project->client) }}">
            @error('client')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="location" class="block text-gray-700 text-sm font-bold mb-2">Location (optional):</label>
            <input type="text" name="location" id="location" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('location') border-red-500 @enderror" value="{{ old('location', $project->location) }}">
            @error('location')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="timeline" class="block text-gray-700 text-sm font-bold mb-2">Timeline (optional):</label>
            <input type="text" name="timeline" id="timeline" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('timeline') border-red-500 @enderror" value="{{ old('timeline', $project->timeline) }}">
            @error('timeline')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="completed_date" class="block text-gray-700 text-sm font-bold mb-2">Completed Date (optional):</label>
            <input type="date" name="completed_date" id="completed_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('completed_date') border-red-500 @enderror" value="{{ old('completed_date', $project->completed_date ? $project->completed_date->format('Y-m-d') : '') }}">
            @error('completed_date')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="scope" class="block text-gray-700 text-sm font-bold mb-2">Scope (comma-separated items):</label>
            <input type="text" name="scope" id="scope" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('scope') border-red-500 @enderror" value="{{ old('scope', implode(',', $project->scope ?? [])) }}">
            @error('scope')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="gallery" class="block text-gray-700 text-sm font-bold mb-2">Gallery Images (multiple files):</label>
            @if ($project->gallery)
                <div class="flex flex-wrap mb-2">
                    @foreach ($project->gallery as $image)
                        <img src="{{ asset('storage/' . $image) }}" alt="Project Image" class="w-24 h-24 object-cover mr-2 mb-2" width="96" height="96" loading="lazy">
                    @endforeach
                </div>
            @endif
            <input type="file" name="gallery[]" id="gallery" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('gallery') border-red-500 @enderror" multiple>
            @error('gallery')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="posts" class="block text-gray-700 text-sm font-bold mb-2">Related Posts:</label>
            <select name="posts[]" id="posts" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('posts') border-red-500 @enderror" multiple>
                @foreach($posts as $post)
                    <option value="{{ $post->id }}" {{ in_array($post->id, old('posts', $project->posts->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $post->title }}</option>
                @endforeach
            </select>
            @error('posts')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="services" class="block text-gray-700 text-sm font-bold mb-2">Related Services:</label>
            <select name="services[]" id="services" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('services') border-red-500 @enderror" multiple>
                @foreach($services as $service)
                    <option value="{{ $service->id }}" {{ in_array($service->id, old('services', $project->services->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $service->title }}</option>
                @endforeach
            </select>
            @error('services')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex items-center justify-between">
            <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Update Project
            </button>
            <a href="{{ route('admin.projects.index') }}" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
                Cancel
            </a>
        </div>
    </form>
@endsection