@extends('layouts.admin')

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

@section('content')
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
        <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-12 gap-6">
                <div class="col-span-12 sm:col-span-8">
                    <label for="name" class="block text-sm font-medium text-gray-700">Product Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $product->name) }}" required class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-400 bg-gray-50 rounded-md">
                    @error('name') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="col-span-12 sm:col-span-4">
                    <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">PKR</span>
                        </div>
                        <input type="number" name="price" id="price" value="{{ old('price', $product->price) }}" step="0.01" min="0" required class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 sm:text-sm border-gray-300 rounded-md">
                    </div>
                    @error('price') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="col-span-12">
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <input id="description" type="hidden" name="description" value="{{ old('description', $product->description) }}">
                    <trix-editor input="description" class="trix-content mt-1 block w-full shadow-sm sm:text-sm border-gray-400 bg-gray-50 rounded-md min-h-[150px]"></trix-editor>
                </div>

                <div class="col-span-12 sm:col-span-6">
                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                    <select id="status" name="status" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="active" {{ old('status', $product->status) == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status', $product->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="out_of_stock" {{ old('status', $product->status) == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                    </select>
                </div>

                <div class="col-span-12 sm:col-span-6">
                     <label for="image" class="block text-sm font-medium text-gray-700">Product Image</label>
                      @if($product->image)
                        <div class="mt-2 mb-2">
                             <img src="{{ asset('storage/' . $product->image) }}" alt="Current Image" class="h-20 w-20 object-cover rounded">
                             <p class="text-xs text-gray-500">Current Image</p>
                        </div>
                      @endif
                      <input type="file" name="image" id="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">
                </div>

                <div class="col-span-12">
                     <label for="categories" class="block text-sm font-medium text-gray-700">Categories</label>
                     <div class="mt-1">
                        <select id="categories" name="categories[]" multiple class="w-full">
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" 
                                    {{ (collect(old('categories', $product->categories->pluck('id')))->contains($category->id)) ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                     </div>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="inline-flex items-center px-4 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">
                    Update Product
                </button>
                <a href="{{ route('admin.products.index') }}" class="ml-3 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">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection

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