@extends('layouts.app')
@section('title', 'إدارة المصروفات')

@section('content')
<div class="container">
    <x-header title="إدارة المصروفات" />
    
    <x-alert />

    @canany(['expense.create', 'expense.lock'])
        <div class="row align-items-center justify-content-between mb-3">
        <!-- زرار الإضافة -->
            @canany(['expense.create'])
                <div class="col-auto mt-3 mt-md-0">
                    <a href="{{ route('expenses.create') }}" class="btn btn-success">
                        <i class="fa-solid fa-plus"></i> إضافة مصروف جديد
                    </a>
                </div>
            @endcanany

            @canany(['expense.lock'])
                <!-- فورم غلق المصروفات -->
                <div class="col-md-4 mt-3 mt-md-0" dir="ltr">
                    <div class="input-group">
                        <button class="btn btn-danger"
                                type="button"
                                id="lockExpensesBtn"
                                title="غلق مصروفات شهر">
                            <i class="fa-solid fa-lock"></i>
                        </button>
                        <input type="month" id="lockMonth" class="form-control">
                    </div>
                </div>
            @endcanany
        </div>
    @endcanany

    {{-- فورم البحث والفلترة الموحد --}}
    <form action="{{ route('expenses.index') }}" method="GET" id="ajaxFilterForm">
        <div class="row">
            {{-- الأكورديون الخاص بالفلاتر الإضافية --}}
            <div class="col-md-12">
                <div class="accordion mb-3" id="filterAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#Filter-selected">
                                تصفية متقدمة
                            </button>
                        </h2>
                        <div id="Filter-selected" class="accordion-collapse collapse {{ request()->except('search', 'page') ? 'show' : '' }}">
                            <div class="accordion-body">
                                <div class="row g-2">
                                    {{-- الكنيسة --}}
                                    <div class="col-md-4">
                                        <select name="church_id" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">كل الكنائس</option>
                                            @forelse ($churches ?? [] as $church)
                                                <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>{{ $church->name }} {{ $church->address ? '(' . $church->address . ')' : '' }}</option>
                                                @empty
                                                {{-- مفيش كنائس موجودة، ممكن تسيبها فاضية أو تحط اختيار افتراضي --}}
                                                <option disabled>لا يوجد بيانات</option>
                                            @endforelse
                                        </select>
                                    </div>
                                    
                                    {{-- البند --}}
                                    <div class="col-md-4">
                                        <select name="expense_category_id" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">كل البنود</option>
                                            @forelse ($expense_categories ?? [] as $expense_category)
                                                <option value="{{ $expense_category->id }}" {{ request('expense_category_id') == $expense_category->id ? 'selected' : '' }}>{{ $expense_category->name }}</option>
                                            @empty
                                                {{-- مفيش تصنيف موجود، ممكن تسيبها فاضية أو تحط اختيار افتراضي --}}
                                                <option disabled>لا يوجد بيانات</option>
                                            @endforelse
                                        </select>
                                    </div>

                                    {{-- حالة التسوية --}}
                                    <div class="col-md-4">
                                        <select name="is_adjustment" class="form-select form-select-sm filter-input tom-select">
                                            <option value="">كل الحالات</option>
                                            <option value="1" {{ request('is_adjustment') === '1' ? 'selected' : '' }}>تسويات فقط</option>
                                            <option value="0" {{ request('is_adjustment') === '0' ? 'selected' : '' }}>مصروفات فقط</option>
                                        </select>
                                    </div>

                                    {{-- التاريخ من --}}
                                    <div class="col-md-4">
                                        <input type="date" name="from_date" class="form-control filter-input" value="{{ request('from_date') }}">
                                    </div>

                                    {{-- التاريخ إلى --}}
                                    <div class="col-md-4">
                                        <input type="date" name="to_date" class="form-control filter-input" value="{{ request('to_date') }}">
                                    </div>

                                    <div class="text-center col-md-4 mt-3">
                                        <button type="button" id="resetFilters" class="btn btn-outline-secondary btn-sm">إعادة ضبط</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    {{-- للعرض على الشاشات الكبيرة --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-bordered table-striped table-hover table-sm text-center align-middle caption-top">
            @isset($Academic_year_active)
            <caption class="text-center fw-bolder text-success">
                العام الدراسي: {{ $Academic_year_active->year ?? '' }} - {{ $Academic_year_active->term_name ?? '' }}
            </caption>
            @endisset
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>الكنيسة</th>
                    <th>البند</th>
                    <th>المبلغ</th>
                    <th>التاريخ</th>
                    <th>تسوية</th>
                    <th>ملاحظات</th>
                    @canany(['expense.edit', 'expense.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody class="text-center">
                @forelse ($expenses ?? [] as $expense)
                <tr class="text-center {{ $expense->amount < 0 ? 'table-danger' : 'table-success' }}">
                    <td>{{ $loop->iteration + ($expenses->currentPage() - 1) * $expenses->perPage() }}</td>
                    <td>{{ $expense->church?->name . ' - ' . $expense->church?->address }}</td>
                    <td>{{ $expense->expense_category?->name }}</td>
                    <td >{{ $expense->amount }}</td>
                    <td>{{ $expense->expense_date }}</td>
                    <td>
                        @if($expense->is_adjustment)
                            <div class="text-center">
                                <span class="badge rounded-pill bg-warning text-dark me-1">
                                    <i class="bi bi-arrow-repeat"></i>تسوية
                                </span>
                            </div>
                        @else
                            <span class="text-muted text-center d-block">---</span>
                        @endif
                    </td>
                    <td>{{$expense->notes}}</td>
                    @canany(['expense.edit', 'expense.delete'])
                    <td>
                        @if(!$expense->is_locked)
                            @canany(['expense.edit'])
                                <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                            @endcanany
                            @canany(['expense.delete'])
                                <!-- زر الحذف -->
                                <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                        data-id="{{ $expense->id }}"
                                        data-name="{{ $expense->expense_category?->name . ' - ' . $expense->church?->name . ' (' . $expense->church?->address .') ' . $expense->amount . ' ج.م' }}"
                                        data-url="/financials/expenses"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal0">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            @endcanany
                        @endif
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center">لا توجد مصروفات مسجلة حالياً</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- للعرض على الموبايل --}}
    <div class="d-block d-md-none">
        <ul class="list-group list-group-flush">
            @forelse ($expenses ?? [] as $expense)
                <li class="list-group-item shadow-sm mb-2 border-rounded">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge text-bg-dark rounded-pill"># {{ $loop->iteration + ($expenses->currentPage() - 1) * $expenses->perPage() }}</span>
                        @if($expense->is_locked)
                            <span class="badge bg-danger"><i class="fa-solid fa-lock"></i> مغلق</span>
                        @endif
                    </div>
                    
                    <strong>البند:</strong> {{ $expense->expense_category?->name }} <br>
                    <strong class="{{ $expense->amount < 0 ? 'text-danger' : 'text-success' }}">المبلغ:</strong> <span class="fw-bold {{ $expense->amount < 0 ? 'text-danger' : 'text-success' }}">{{ $expense->amount }} ج.م</span> <br>
                    <strong>التاريخ:</strong> {{ $expense->expense_date }} <br>
                    <strong>الكنيسة:</strong> {{ $expense->church?->name }} {{ $expense->church?->address ? ' (' . $expense->church?->address . ')': ''}} <br>
                    
                    <strong>تسوية:</strong> 
                    @if($expense->is_adjustment)
                        <span class="badge rounded-pill bg-warning text-dark">
                            <i class="bi bi-arrow-repeat"></i> تسوية
                        </span>
                    @else
                        <span class="text-muted">---</span>
                    @endif
                    <br>

                    <strong>ملاحظات:</strong> {{ $expense->notes ?? '---' }} <br>

                    @canany(['expense.edit', 'expense.delete'])
                        <div class="d-flex justify-content-evenly mt-3">
                            @if(!$expense->is_locked)
                                @can('expense.edit')
                                    <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-sm btn-warning">
                                        <i class="fa-regular fa-pen-to-square"></i> تعديل
                                    </a>
                                @endcan

                                @can('expense.delete')
                                    <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                            data-id="{{ $expense->id }}"
                                            data-name="{{ $expense->expense_category?->name . ' - ' . $expense->church?->name . ' (' . $expense->amount . ' ج.م)' }}"
                                            data-url="/financials/expenses"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal0">
                                        <i class="fa-solid fa-trash"></i> حذف
                                    </button>
                                @endcan
                            @else
                                <div class="alert alert-secondary w-100 text-center p-1 mb-0">
                                    <i class="fa-solid fa-lock"></i> السجل مغلق
                                </div>
                            @endif
                        </div>
                    @endcanany
                </li>       
            @empty
                <li class="list-group-item shadow-sm mb-2 border-rounded text-center">لا توجد مصروفات مسجلة حالياً</li>
            @endforelse
        </ul>
    </div>

<x-pagination :data="$expenses" />

</div>
@canany(['expense.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="expenses" />
@endcanany

{{-- غلق مصروفات شهر --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var checkjQuery = setInterval(function() {
            if (window.jQuery) {
                clearInterval(checkjQuery);
                
                $(document).on('click', '#lockExpensesBtn', function(e) {
                    e.preventDefault();
                    var selectedMonth = $('#lockMonth').val();

                    if (!selectedMonth) {
                        // لو الشهر فاضي مش هنعمل حاجة أو ممكن تدي لون أحمر للـ input
                        $('#lockMonth').addClass('is-invalid');
                        return;
                    }

                    $.ajax({
                        url: "{{ route('expenses.lock_month') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            month: selectedMonth
                        },
                        beforeSend: function() {
                            $('#lockExpensesBtn').prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i>');
                        },
                        success: function(response) {
                            // نجاح أو فشل.. هنعمل ريفريش والـ Blade هو اللي هيظهر الرسالة
                            location.reload(); 
                        },
                        error: function(xhr) {
                            // حتى في الخطأ هنعمل ريفريش عشان الـ Blade يعرض الـ error alert
                            location.reload();
                        }
                    });
                });
            }
        }, 100);
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // التأكد من تحميل jQuery أولاً
        var checkFilterJQ = setInterval(function() {
            if (window.jQuery) {
                clearInterval(checkFilterJQ);

                console.log("Filter Script Loaded"); // للتأكد في الـ Console إن الكود اشتغل

                // مراقبة أي تغيير في الـ Select أو الـ Input اللي واخد كلاس filter-input
                $(document).on('change', '.filter-input', function() {
                    console.log("Filter Changed: " + $(this).val()); // هيطبع القيمة اللي اخترتها في الـ Console
                    $('#ajaxFilterForm').submit();
                });

                // سكريبت زرار إعادة الضبط (Reset)
                $('#resetFilters').on('click', function() {
                    // تفريغ القيم
                    $('.filter-input').val(function() {
                        return this.defaultValue;
                    });
                    
                    // لو الـ Select فيه قيمة 0 كقيمة افتراضية
                    $('select.filter-input').val('0');
                    $('input[type="date"]').val('');
                    
                    // إرسال الفورم بعد التصفير
                    $('#ajaxFilterForm').submit();
                });
            }
        }, 100);
    });
</script>
@endsection