@extends('layouts.dashboard')

@section('title', 'إضافة فرع جديد')

@section('content')
    <div class="max-w-2xl mx-auto">
        <div class="flex items-center gap-4 mb-6">
            <a href="{{ route('branches.index') }}" class="text-gray-500 hover:text-gray-700">→</a>
            <h1 class="text-2xl font-bold text-gray-800">🏢 إضافة فرع جديد</h1>
        </div>

        <form action="{{ route('branches.store') }}" method="POST" class="bg-white rounded-xl shadow-sm p-6 space-y-6">
            @csrf

            <div>
                <label class="block font-medium text-gray-700 mb-2">اسم الفرع *</label>
                <input type="text" name="name" value="{{ old('name') }}" required
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                    placeholder="مثال: الفرع الرئيسي">
                @error('name') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700 mb-2">المدينة *</label>
                <input type="text" name="city" value="{{ old('city') }}" required
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                    placeholder="مثال: الجزائر العاصمة">
                @error('city') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700 mb-2">العنوان الكامل *</label>
                <textarea name="address" rows="2" required
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                    placeholder="مثال: شارع ديدوش مراد، رقم 123">{{ old('address') }}</textarea>
                @error('address') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block font-medium text-gray-700 mb-2">رقم الهاتف *</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" required
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                        placeholder="021 XX XX XX">
                    @error('phone') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
                    <input type="email" name="email" value="{{ old('email') }}"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                        placeholder="branch@example.com">
                    @error('email') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block font-medium text-gray-700 mb-2">خط العرض (Latitude) - اختياري</label>
                    <input type="text" name="latitude" value="{{ old('latitude') }}"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                        placeholder="مثال: 36.737232">
                    @error('latitude') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block font-medium text-gray-700 mb-2">خط الطول (Longitude) - اختياري</label>
                    <input type="text" name="longitude" value="{{ old('longitude') }}"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                        placeholder="مثال: 3.086472">
                    @error('longitude') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="border rounded-xl p-4 bg-gray-50">
                <label class="block font-medium text-gray-700 mb-4">ساعات العمل (Working Hours)</label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @php
                        $days = [
                            'sun' => 'الأحد',
                            'mon' => 'الإثنين',
                            'tue' => 'الثلاثاء',
                            'wed' => 'الأربعاء',
                            'thu' => 'الخميس',
                            'fri' => 'الجمعة',
                            'sat' => 'السبت',
                        ];
                    @endphp
                    @foreach($days as $key => $label)
                        <div class="flex items-center gap-3 bg-white p-3 rounded shadow-sm border border-gray-100">
                            <span class="w-20 font-medium text-gray-700 text-sm">{{ $label }}</span>
                            <input type="text" name="working_hours[{{ $key }}]" value="{{ old('working_hours.' . $key) }}"
                                class="flex-1 rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm"
                                placeholder="مثال: 08:00 - 17:00 (أو فارغ لعدم العمل)">
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center gap-3">
                <input type="checkbox" name="active" id="active" value="1" checked
                    class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                <label for="active" class="font-medium text-gray-700">الفرع نشط</label>
            </div>

            <div class="flex gap-3 pt-4 border-t">
                <button type="submit"
                    class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-2 rounded-lg font-bold shadow hover:shadow-lg transition">
                    💾 حفظ الفرع
                </button>
                <a href="{{ route('branches.index') }}"
                    class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200 transition">
                    إلغاء
                </a>
            </div>
        </form>
    </div>
@endsection