@extends('layouts.admin')
@section('title', isset($product) ? __('app.edit') . ' ' . __('app.product') : __('app.create') . ' ' . __('app.product'))

@section('content')
<div class="max-w-3xl">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-brand-900">{{ isset($product) ? __('app.edit') : __('app.create') }} {{ __('app.product') }}</h1>
        <a href="{{ route('admin.products.index') }}" class="text-brand-400 hover:text-brand-600 font-medium transition-colors text-sm flex items-center gap-1">
            <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>
            {{ __('app.back') }}
        </a>
    </div>

    <form method="POST" action="{{ isset($product) ? route('admin.products.update', $product) : route('admin.products.store') }}" enctype="multipart/form-data" class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 md:p-8 space-y-6">
        @csrf
        @if(isset($product)) @method('PUT') @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.name_ar') }} *</label>
                <input type="text" name="name_ar" value="{{ old('name_ar', isset($product) ? $product->t('name', 'ar') : '') }}" required dir="rtl" class="input-luxury">
                @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.name_en') }} *</label>
                <input type="text" name="name_en" value="{{ old('name_en', isset($product) ? $product->t('name', 'en') : '') }}" required dir="ltr" class="input-luxury">
                @error('name_en') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.description_ar') }}</label>
                <textarea name="description_ar" rows="4" dir="rtl" class="input-luxury">{{ old('description_ar', isset($product) ? $product->t('description', 'ar') : '') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.description_en') }}</label>
                <textarea name="description_en" rows="4" dir="ltr" class="input-luxury">{{ old('description_en', isset($product) ? $product->t('description', 'en') : '') }}</textarea>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.category') }} *</label>
                <select name="category_id" required class="input-luxury">
                    <option value="">—</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" @selected(old('category_id', $product->category_id ?? '') == $cat->id)>{{ $cat->t('name') }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.sku') }} *</label>
                <input type="text" name="sku" value="{{ old('sku', $product->sku ?? '') }}" required class="input-luxury">
                @error('sku') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.stock') }} *</label>
                <input type="number" name="stock" value="{{ old('stock', $product->stock ?? 0) }}" min="0" required class="input-luxury">
            </div>
        </div>

        <div class="grid grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.price') }} ({{ __('app.jod') }}) *</label>
                <input type="number" name="price" value="{{ old('price', $product->price ?? '') }}" step="0.01" min="0" required class="input-luxury">
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.compare_price') }}</label>
                <input type="number" name="compare_price" value="{{ old('compare_price', $product->compare_price ?? '') }}" step="0.01" min="0" class="input-luxury">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.image') }}</label>
                <input type="file" name="image" accept="image/*" class="input-luxury file:mr-4 file:py-1.5 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                @if(isset($product) && $product->image)
                    <img src="{{ asset('storage/' . $product->image) }}" class="w-20 h-20 rounded-xl object-cover mt-3 border border-brand-100" alt="">
                @endif
            </div>
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.gallery') }}</label>
                <input type="file" name="gallery[]" accept="image/*" multiple class="input-luxury file:mr-4 file:py-1.5 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                @if(isset($product) && $product->gallery)
                    <div class="flex gap-2 mt-3">
                        @foreach($product->gallery as $img)
                            <img src="{{ asset('storage/' . $img) }}" class="w-14 h-14 rounded-xl object-cover border border-brand-100" alt="">
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div class="flex items-center gap-8 pt-2">
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $product->is_active ?? true) ? 'checked' : '' }} class="rounded border-brand-300 text-brand-500 focus:ring-brand-500 w-5 h-5">
                <span class="text-sm font-semibold text-brand-700">{{ __('app.is_active') }}</span>
            </label>
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="hidden" name="is_featured" value="0">
                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $product->is_featured ?? false) ? 'checked' : '' }} class="rounded border-brand-300 text-gold-600 focus:ring-gold-500 w-5 h-5">
                <span class="text-sm font-semibold text-brand-700">{{ __('app.is_featured') }}</span>
            </label>
        </div>

        <button type="submit" class="btn-primary">{{ __('app.save') }}</button>
    </form>
</div>
@endsection