@extends('layouts.admin')

@section('header')
    <h1 class="text-2xl font-semibold text-gray-900">Create Product</h1>
@endsection

@section('content')
<!-- Alert Messages -->
<x-alert-messages />

<!-- Error Messages -->
<x-error-messages />

<div class="bg-white shadow-lg overflow-hidden rounded-lg border border-gray-200">
    <div class="px-4 py-5 sm:p-8">
        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            
            <!-- Product Basic Info Section -->
            <div class="border-b pb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-6">Basic Information</h3>
                
                <div class="grid grid-cols-12 gap-6">
                    <!-- Product Name -->
                    <div class="col-span-12 sm:col-span-8">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                            Product Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}" 
                            required class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border @error('name') border-red-500 @else border-gray-300 @enderror bg-gray-50 rounded-md p-2.5 transition"
                            placeholder="Enter product name">
                        @error('name') 
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18.101 12.93a1 1 0 00-1.414-1.414L10 16.586l-6.687-6.687a1 1 0 00-1.414 1.414l8 8a1 1 0 001.414 0l10-10z" clip-rule="evenodd" /></svg>
                                {{ $message }}
                            </p> 
                        @enderror
                    </div>

                    <!-- Price -->
                    <div class="col-span-12 sm:col-span-4">
                        <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
                            Price (PKR) <span class="text-red-500">*</span>
                        </label>
                        <div class="mt-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 sm:text-sm font-medium">PKR</span>
                            </div>
                            <input type="number" name="price" id="price" value="{{ old('price') }}" 
                                step="0.01" min="0" required 
                                class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-12 sm:text-sm border @error('price') border-red-500 @else border-gray-300 @enderror rounded-md p-2.5 transition"
                                placeholder="0.00">
                        </div>
                        @error('price') 
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18.101 12.93a1 1 0 00-1.414-1.414L10 16.586l-6.687-6.687a1 1 0 00-1.414 1.414l8 8a1 1 0 001.414 0l10-10z" clip-rule="evenodd" /></svg>
                                {{ $message }}
                            </p> 
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Status and Image Section -->
            <div class="border-b pb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-6">Product Details</h3>
                
                <div class="grid grid-cols-12 gap-6">
                    <!-- Status -->
                    <div class="col-span-12 sm:col-span-6">
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                            Status <span class="text-red-500">*</span>
                        </label>
                        <select id="status" name="status" 
                            class="mt-1 block w-full py-2.5 px-3 border @error('status') border-red-500 @else border-gray-300 @enderror bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition">
                            <option value="">Select Status</option>
                            <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            <option value="out_of_stock" {{ old('status') == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                        </select>
                        @error('status')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Product Image -->
                    <div class="col-span-12 sm:col-span-6">
                        <label for="image" class="block text-sm font-medium text-gray-700 mb-2">
                            Product Image <span class="text-gray-500 text-xs">(Max 2MB)</span>
                        </label>
                        <input type="file" name="image" id="image" accept="image/*" 
                            class="mt-1 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-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition"
                            @error('image') aria-invalid="true" @enderror>
                        @error('image')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Description Section -->
            <div class="border-b pb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-6">Description</h3>
                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Product Description</label>
                <input id="description" type="hidden" name="description" value="{{ old('description') }}">
                <trix-editor input="description" class="trix-content mt-2 block w-full shadow-sm sm:text-sm border border-gray-300 bg-white rounded-md min-h-[200px]"></trix-editor>
            </div>

            <!-- Categories Section -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-6">Categories</h3>
                <label for="categories" class="block text-sm font-medium text-gray-700 mb-2">
                    Select Categories <span class="text-red-500">*</span>
                </label>
                <div class="mt-2">
                    <select id="categories" name="categories[]" multiple
                        class="w-full @error('categories') border-red-500 @else border-gray-300 @enderror"
                        @error('categories') aria-invalid="true" @enderror>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ (collect(old('categories'))->contains($category->id)) ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('categories')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-between pt-8 border-t">
                <a href="{{ route('admin.products.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition">
                    <svg class="w-4 h-4 mr-2" 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>
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Create Product
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#categories').select2({
            placeholder: 'Select categories',
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endsection