@extends('admin.layout')
@section('title', $project ? 'Edit Project' : 'Create Project')

@section('content')

<div class="mb-6">
    <a href="{{ route('admin.projects.index') }}" class="inline-flex items-center gap-2 text-gray-500 hover:text-primary transition-colors text-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Projects
    </a>
</div>

<div class="max-w-3xl">
    <div class="bg-white rounded-xl shadow-md p-6 md:p-8">
        <h2 class="text-2xl font-bold text-primary mb-6">
            {{ $project ? 'Edit Project' : 'Create New Project' }}
        </h2>

        <form action="{{ $project ? route('admin.projects.update', $project->id) : route('admin.projects.store') }}"
              method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf
            @if($project)
                @method('PUT')
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Project Name *</label>
                    <input type="text" name="name" value="{{ old('name', $project?->name) }}" required
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors @error('name') border-red-500 @enderror"
                           placeholder="e.g., Gas Cooler 3rd Stage Fabrication">
                    @error('name')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Slug *</label>
                    <input type="text" name="slug" value="{{ old('slug', $project?->slug) }}" required
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors @error('slug') border-red-500 @enderror"
                           placeholder="e.g., project-1">
                    <p class="mt-1 text-xs text-gray-400">URL: /project-slug</p>
                    @error('slug')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
                    <input type="text" name="client" value="{{ old('client', $project?->client) }}"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors"
                           placeholder="e.g., PT. Pertamina EP">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Location</label>
                    <input type="text" name="location" value="{{ old('location', $project?->location) }}"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors"
                           placeholder="e.g., Gas Kompressor Station">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Skills / Services</label>
                    <input type="text" name="skills" value="{{ old('skills', $project?->skills) }}"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors"
                           placeholder="e.g., Installation, Testing">
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="3"
                          class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors resize-none"
                          placeholder="Project description...">{{ old('description', $project?->description) }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Thumbnail</label>
                <input type="file" name="thumbnail" accept="image/*"
                       class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                <p class="mt-1 text-xs text-gray-400">Max size: 5MB. Accepted formats: JPG, PNG, GIF, WebP.</p>
                @if($project?->thumbnail)
                    <div class="mt-2">
                        <img src="{{ asset('storage/' . $project->thumbnail) }}" alt="Thumbnail" class="w-32 h-20 object-cover rounded-lg border border-gray-200">
                    </div>
                @endif
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Gallery Images</label>
                <p class="text-xs text-gray-400 mb-2">Upload up to 5 images for the project gallery.</p>
                @php
                    $existingImages = old('images', $project?->images->pluck('image')->toArray() ?? []);
                @endphp
                @for($i = 0; $i < 5; $i++)
                    <input type="file" name="images[]" accept="image/*"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors mb-2">
                    @if(isset($existingImages[$i]) && $existingImages[$i])
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $existingImages[$i]) }}" alt="Gallery {{ $i+1 }}" class="h-20 object-cover rounded-lg border border-gray-200">
                        </div>
                    @endif
                @endfor
            </div>

            <div class="grid grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Sort Order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $project?->sort_order ?? 0) }}" min="0"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors"
                           placeholder="0">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
                    <select name="is_active"
                            class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                        <option value="1" {{ (old('is_active', $project?->is_active ?? true) == '1' || old('is_active', $project?->is_active ?? true) === true) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ (old('is_active', $project?->is_active) === false || old('is_active', $project?->is_active) === '0') ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="flex items-center gap-3 pt-4">
                <button type="submit"
                        class="bg-accent hover:bg-accent-dark text-white font-semibold px-6 py-2.5 rounded-lg transition-colors">
                    {{ $project ? 'Update Project' : 'Create Project' }}
                </button>
                <a href="{{ route('admin.projects.index') }}"
                   class="px-6 py-2.5 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium transition-colors">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@endsection