@extends('layouts.admin')

@section('title', 'Create New Project')

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

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

        <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') }}" 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') }}</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') }}">
            @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') }}">
            @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') }}">
            @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') }}">
            @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') }}">
            @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>
            <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', [])) ? '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', [])) ? '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">
                Create 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