260 lines
15 KiB
PHP
260 lines
15 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">Submit a Product</h1>
|
|
<p class="mt-2 text-sm text-gray-600">Share your EU-based tech product with the community</p>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-sm rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Title -->
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-700">
|
|
Product Title <span class="text-red-600">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="text"
|
|
id="title"
|
|
name="title"
|
|
value="{{ old('title') }}"
|
|
required
|
|
maxlength="255"
|
|
placeholder="e.g., My Awesome Product"
|
|
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
|
|
@error('title')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">A catchy, descriptive title for your product.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<label for="description" class="block text-sm font-medium text-gray-700">
|
|
Description <span class="text-red-600">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<textarea id="description"
|
|
name="description"
|
|
rows="5"
|
|
required
|
|
placeholder="Tell us about your product..."
|
|
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('description') }}</textarea>
|
|
@error('description')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">Provide a detailed description of your product (what it does, key features, etc.).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Website URL -->
|
|
<div>
|
|
<label for="website_url" class="block text-sm font-medium text-gray-700">
|
|
Website URL <span class="text-red-600">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="url"
|
|
id="website_url"
|
|
name="website_url"
|
|
value="{{ old('website_url') }}"
|
|
required
|
|
placeholder="https://example.com"
|
|
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
|
|
@error('website_url')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">The full URL to your product's website or landing page.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div>
|
|
<label for="category_id" class="block text-sm font-medium text-gray-700">
|
|
Category <span class="text-red-600">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<select id="category_id"
|
|
name="category_id"
|
|
required
|
|
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500 @enderror">
|
|
<option value="">Select a category...</option>
|
|
@foreach($categories as $category)
|
|
<option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
|
|
{{ $category->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('category_id')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">Choose the category that best fits your product.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
@if($tags->count() > 0)
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Tags
|
|
</label>
|
|
<div class="mt-1 space-y-2">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
@foreach($tags as $tag)
|
|
<label class="relative flex items-start p-3 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center h-5">
|
|
<input type="checkbox"
|
|
name="tags[]"
|
|
value="{{ $tag->id }}"
|
|
{{ is_array(old('tags')) && in_array($tag->id, old('tags')) ? 'checked' : '' }}
|
|
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
|
|
</div>
|
|
<div class="ml-3 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
|
|
<span class="text-sm font-medium text-gray-900">{{ $tag->name }}</span>
|
|
</div>
|
|
@if($tag->description)
|
|
<p class="text-xs text-gray-500 mt-1">{{ $tag->description }}</p>
|
|
@endif
|
|
</div>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('tags')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">Select all tags that apply to your product.</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Badges -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Badges
|
|
</label>
|
|
<div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
@foreach(\App\Models\Product::BADGES as $key => $label)
|
|
<label class="flex items-center p-3 border border-gray-300 rounded-md">
|
|
<input type="hidden" name="{{ $key }}" value="0">
|
|
<input type="checkbox"
|
|
name="{{ $key }}"
|
|
value="1"
|
|
{{ old($key, false) ? 'checked' : '' }}
|
|
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm text-gray-900">{{ $label }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thumbnail -->
|
|
<div>
|
|
<label for="thumbnail" class="block text-sm font-medium text-gray-700">
|
|
Product Thumbnail
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="file"
|
|
id="thumbnail"
|
|
name="thumbnail"
|
|
accept="image/*"
|
|
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 @enderror">
|
|
@error('thumbnail')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-2 text-sm text-gray-500">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Preview -->
|
|
<div id="imagePreview" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Preview:</label>
|
|
<div class="mt-1">
|
|
<img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 shadow-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Screenshots -->
|
|
<div x-data="{ previews: [] }">
|
|
<label for="screenshots" class="block text-sm font-medium text-gray-700">
|
|
Screenshots
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="file"
|
|
id="screenshots"
|
|
name="screenshots[]"
|
|
accept="image/*"
|
|
multiple
|
|
@change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
|
|
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
|
|
@error('screenshots')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
@foreach($errors->get('screenshots.*') as $messages)
|
|
<p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
|
|
@endforeach
|
|
<p class="mt-2 text-sm text-gray-500">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
|
|
<div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
|
|
<template x-for="src in previews" :key="src">
|
|
<img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300">
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Alert -->
|
|
<div class="rounded-md bg-blue-50 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3 flex-1">
|
|
<p class="text-sm text-blue-700">
|
|
<strong>Note:</strong> Your product will be reviewed by our moderators before it appears on the site.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex items-center justify-between pt-5 border-t border-gray-200">
|
|
<a href="{{ route('products.index') }}"
|
|
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
|
Cancel
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
|
Submit Product
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.getElementById('thumbnail').addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
document.getElementById('preview').src = e.target.result;
|
|
document.getElementById('imagePreview').classList.remove('hidden');
|
|
}
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
document.getElementById('imagePreview').classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|