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

@section('content')
<div class="max-w-2xl">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-brand-900">{{ isset($category) ? __('app.edit') : __('app.create') }} {{ __('app.category') }}</h1>
        <a href="{{ route('admin.categories.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($category) ? route('admin.categories.update', $category) : route('admin.categories.store') }}" enctype="multipart/form-data" class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 md:p-8 space-y-5">
        @csrf
        @if(isset($category)) @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($category) ? $category->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($category) ? $category->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="3" dir="rtl" class="input-luxury">{{ old('description_ar', isset($category) ? $category->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="3" dir="ltr" class="input-luxury">{{ old('description_en', isset($category) ? $category->t('description', 'en') : '') }}</textarea>
            </div>
        </div>

        <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($category) && $category->image)
                <img src="{{ asset('storage/' . $category->image) }}" class="w-20 h-20 rounded-xl object-cover mt-3 border border-brand-100" alt="">
            @endif
        </div>

        <div class="grid grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.sort_order') }}</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order ?? 0) }}" min="0" class="input-luxury">
            </div>
            <div class="flex items-end">
                <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', $category->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>
            </div>
        </div>

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