@extends('layouts.app')

@section('content')
<div class="container">
    <x-header title="إضافة فئة جديدة" />
    
    <x-alert />

    <form action="{{ route('expenses.store') }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf

        <!-- الكنيسة -->
        <div class="col-md-6">
            <label for="church_id" class="form-label">الكنيسة</label>
            <select class="form-select @error('church_id') is-invalid @enderror 
              @if(old('church_id') && !$errors->has('church_id')) is-valid @endif tom-select" 
                    id="church_id" 
                    name="church_id" 
                    >
                <option selected disabled value="">إختار...</option>
                @forelse ($churches as $church)
                    <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                        {{ $church->name }} {{ $church->address ? ' - ' . $church->address : '' }}
                    </option>
                @empty
                    <option disabled>لا يوجد بيانات</option>
                @endforelse
            </select>
            @error('church_id')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>
        
        <!-- البند -->
        <div class="col-md-6">
            <label for="expense_category_id" class="form-label">البند</label>
            <select class="form-select @error('expense_category_id') is-invalid @enderror 
              @if(old('expense_category_id') && !$errors->has('expense_category_id')) is-valid @endif" 
                    id="expense_category_id" 
                    name="expense_category_id" 
                    >
                <option selected disabled value="">إختار...</option>
                @forelse ($categories as $category)
                    <option value="{{ $category->id }}" {{ old('expense_category_id') == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @empty
                    <option disabled>لا يوجد بيانات</option>
                @endforelse
            </select>
            @error('expense_category_id')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>

        <!-- المبلغ -->
        <div class="col-md-4">
            <label for="amount" class="form-label">المبلغ</label>
            <input type="number" 
                class="form-control @error('amount') is-invalid @enderror 
              @if(old('amount') && !$errors->has('amount')) is-valid @endif" 
                id="amount" 
                name="amount" 
                value="{{ old('amount') }}" 
                >
            @error('amount')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="valid-feedback">كده تمام 👍</div>
            @enderror
        </div>

        <!-- التاريخ -->
        <div class="col-md-4">
            <label for="expense_date" class="form-label">التاريخ</label>
            <input type="date" 
                class="form-control @error('expense_date') is-invalid @enderror 
              @if(old('expense_date') && !$errors->has('expense_date')) is-valid @endif" 
                id="expense_date" 
                name="expense_date" 
                value="{{ old('expense_date') }}"
                {{-- بداية الشهر الحالي --}}
                min="{{ \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d') }}" 
                {{-- اليوم الحالي --}}
                max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                >
            @error('expense_date')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="valid-feedback">كده تمام 👍</div>
            @enderror
        </div>

        <!-- الجزء الخاص بالتسوية -->
        <div class="card border-warning mb-3">
            <div class="card-body">
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" name="is_adjustment" id="isAdjustment" value="1" {{ old('is_adjustment') ? 'checked' : '' }}>
                    <label class="form-check-label fw-bold" for="isAdjustment">هذا القيد عبارة عن (تسوية / تعديل) لمصروف سابق</label>
                </div>

                <div id="referenceWrapper" style="display: none;">
                    <label class="form-label">اختر المصروف المراد تسويته:</label>
                    <select name="reference_id" class="form-select @error('reference_id') is-invalid @enderror 
              @if(old('reference_id') && !$errors->has('reference_id')) is-valid @endif">
                        <option value="">-- ابحث عن المصروف بالاسم أو التاريخ --</option>
                        @forelse($recentExpenses as $oldExpense)
                            <option value="{{ $oldExpense->id }}">
                                #{{ $oldExpense->id }} - {{ $oldExpense->expense_category->name }} 
                                ({{ $oldExpense->amount }} ج.م) - بتاريخ {{ $oldExpense->expense_date }}
                            </option>
                        @empty
                            <option disabled>لا يوجد بيانات</option>
                        @endforelse
                    </select>
                    <small class="text-muted">ملحوظة: يمكنك إدخال القيمة بالسالب في خانة المبلغ إذا كانت التسوية بالخصم.</small>
                </div>
            </div>
        </div>

        <!-- زر الإضافة -->
        <div class="text-center my-3">
            <button type="submit" class="btn btn-success">إضافة</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. تعريف العناصر
        const isAdjustment = document.getElementById('isAdjustment');
        const wrapper = document.getElementById('referenceWrapper');
        const churchSelect = document.getElementById('church_id');
        const categorySelect = document.getElementById('expense_category_id');
        const referenceSelect = document.querySelector('select[name="reference_id"]');
        const expenseDateInput = document.getElementById('expense_date'); // حقل التاريخ الأساسي

        // متغيّر لحفظ البيانات القادمة من السيرفر لاستخدامها في التحقق من التاريخ
        let fetchedExpenses = [];

        // 2. دالة إظهار وإخفاء الحاوية + جلب البيانات
        function handleAdjustmentChange() {
            if (isAdjustment.checked) {
                wrapper.style.display = 'block';
                fetchExpenses(); 
            } else {
                wrapper.style.display = 'none';
                referenceSelect.value = ''; 
                expenseDateInput.removeAttribute('min'); // إزالة القيود لو لغينا التسوية
            }
        }

        // 3. دالة الـ Ajax لجلب المصاريف
        function fetchExpenses() {
            const churchId = churchSelect.value;
            const categoryId = categorySelect.value;

            if (isAdjustment.checked && churchId && categoryId) {
                referenceSelect.innerHTML = '<option value="">جارِ جلب المصاريف السابقة...</option>';

                const url = `{{ route('expenses.get_previous') }}?church_id=${churchId}&category_id=${categoryId}`;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        fetchedExpenses = data; // حفظ البيانات في المتغيّر
                        let options = '<option value="">-- اختر المصروف المراد تسويته --</option>';
                        
                        if (data.length > 0) {
                            data.forEach(expense => {
                                const churchName = expense.church ? expense.church.name : 'غير محدد';
                                const categoryName = expense.expense_category ? expense.expense_category.name : 'غير محدد';
                                
                                options += `<option value="${expense.id}">
                                    ${churchName} - ${categoryName} - (${expense.amount} ج.م) - بتاريخ ${expense.expense_date}
                                </option>`;
                            });
                        } else {
                            options = '<option value="">لا توجد مصاريف سابقة لهذا البند</option>';
                        }
                        referenceSelect.innerHTML = options;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        referenceSelect.innerHTML = '<option value="">حدث خطأ في الاتصال</option>';
                    });
            }
        }

        // --- التركة الجديدة: مراقبة اختيار المصروف لتحديد الحد الأدنى للتاريخ ---
        referenceSelect.addEventListener('change', function() {
            const selectedId = this.value;
            const originalExpense = fetchedExpenses.find(e => e.id == selectedId);

            if (originalExpense) {
                // 1. تحديث الـ min عشان الكيبورد والـ Calendar في الموبايل يمنعوا التواريخ القديمة
                expenseDateInput.setAttribute('min', originalExpense.expense_date);
                
                // 2. بدل الـ Alert: لو التاريخ الحالي غير قانوني، هنحدثه فوراً لتاريخ المصروف الأصلي
                if (expenseDateInput.value && expenseDateInput.value < originalExpense.expense_date) {
                    expenseDateInput.value = originalExpense.expense_date;
                    
                    // إضافة تأثير بصري بسيط (تغيير لون مؤقت) عشان اليوزر يحس إن فيه حاجة اتعدلت
                    expenseDateInput.style.backgroundColor = '#f8d7da'; // لون تحذيري هادئ
                    setTimeout(() => {
                        expenseDateInput.style.backgroundColor = ''; // يرجع للونه الطبيعي
                    }, 5000);
                }
            } else {
                expenseDateInput.removeAttribute('min');
            }
        });

        // 4. ربط الأحداث (Events)
        isAdjustment.addEventListener('change', handleAdjustmentChange);
        churchSelect.addEventListener('change', fetchExpenses);
        categorySelect.addEventListener('change', fetchExpenses);

        // تنفيذ الحالة البدئية عند تحميل الصفحة
        if (isAdjustment.checked) {
            wrapper.style.display = 'block';
        }
    });
</script>
@endsection