@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">🏢 تعديل الفرع: {{ $branch->name }}</h1>
        </div>

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

            <div>
                <label class="block font-medium text-gray-700 mb-2">اسم الفرع *</label>
                <input type="text" name="name" value="{{ old('name', $branch->name) }}" required
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                @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', $branch->city) }}" required
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                @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">{{ old('address', $branch->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', $branch->phone) }}" required
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                    @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', $branch->email) }}"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                    @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', $branch->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', $branch->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' => 'السبت',
                        ];
                        $savedHours = is_array($branch->working_hours) ? $branch->working_hours : (json_decode($branch->working_hours, true) ?? []);
                    @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, $savedHours[$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" {{ $branch->active ? '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