@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $currency = \App\Models\Setting::currencyLabel($locale);
@endphp

@section('title', $isRtl ? 'إضافة معدة' : 'Add Equipment')

@section('content')
<div class="max-w-4xl mx-auto space-y-8">
    <div class="flex items-center gap-3">
        <a href="{{ route('equipment.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
            <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
        </a>
        <div>
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'إضافة معدة' : 'Add Equipment' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'تسجيل معدة جديدة' : 'Register a new equipment item' }}</p>
        </div>
    </div>

    @if($errors->any())
        <div class="bg-rose-50 border-2 border-rose-200 rounded-3xl p-6 text-rose-700">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-white"></i>
                </div>
                <p class="font-bold">{{ $isRtl ? 'يرجى تصحيح الأخطاء التالية:' : 'Please fix the following errors:' }}</p>
            </div>
            <ul class="list-disc {{ $isRtl ? 'pr-6' : 'pl-6' }} space-y-1 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('equipment.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'اسم المعدة' : 'Name' }} *</label>
                    <input type="text" name="name" required value="{{ old('name') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الماركة' : 'Brand' }}</label>
                    <input type="text" name="brand" value="{{ old('brand') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الموديل' : 'Model' }}</label>
                    <input type="text" name="model" value="{{ old('model') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الرقم التسلسلي' : 'Serial Number' }}</label>
                    <input type="text" name="serial_number" value="{{ old('serial_number') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all font-mono">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'التصنيف' : 'Category' }} *</label>
                    <select name="category" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        @foreach(['cardio','strength','free_weights','functional','accessories','other'] as $cat)
                            <option value="{{ $cat }}" {{ old('category') === $cat ? 'selected' : '' }}>{{ strtoupper($cat) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الوصف' : 'Description' }}</label>
                    <textarea name="description" rows="3"
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('description') }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ الشراء' : 'Purchase Date' }}</label>
                    <input type="date" name="purchase_date" value="{{ old('purchase_date') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'سعر الشراء' : 'Purchase Price' }}</label>
                    <div class="relative">
                        <input type="number" name="purchase_price" step="0.01" min="0" value="{{ old('purchase_price') }}"
                               class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'انتهاء الضمان' : 'Warranty Expiry' }}</label>
                    <input type="date" name="warranty_expiry" value="{{ old('warranty_expiry') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الموقع' : 'Location' }}</label>
                    <input type="text" name="location" value="{{ old('location') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'موعد الصيانة القادمة' : 'Next Maintenance' }}</label>
                    <input type="date" name="next_maintenance" value="{{ old('next_maintenance') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'صورة' : 'Photo' }}</label>
                    <input type="file" name="photo" accept="image/*"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'ملاحظات' : 'Notes' }}</label>
                    <textarea name="notes" rows="2"
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('equipment.index') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                {{ $isRtl ? 'إلغاء' : 'Cancel' }}
            </a>
            <button type="submit" class="px-7 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/20 transition-all inline-flex items-center gap-2">
                <i data-lucide="check" class="w-5 h-5"></i>
                {{ $isRtl ? 'حفظ' : 'Save' }}
            </button>
        </div>
    </form>
</div>
@endsection