@extends('layouts.app')
@section('title', 'إدارة الإيرادات الأخرى')
@section('content')
<div class="container">
    <x-header title="إدارة الإيرادات الأخرى" />
    
    <x-alert />

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

            @canany(['other_income.lock'])
                <!-- فورم غلق الإيرادات -->
                <div class="col-md-4" dir="ltr">
                    <div class="input-group">
                        <button class="btn btn-danger" type="button" id="lockOtherIncomesBtn">
                            <i class="fa-solid fa-lock"></i> غلق الإيرادات
                        </button>
                        <input type="month" id="lockMonth" class="form-control">
                    </div>
                </div>
            @endcanany
        </div>
    @endcanany
      
    {{-- فورم البحث والفلترة الموحد --}}
    <form action="{{ route('other_incomes.index') }}" method="GET" id="ajaxFilterForm">
        <div class="row">
            {{-- حقل البحث النصي --}}
            <div class="col-md-6 mb-3">
                <div class="input-group input-group-sm">
                    <input  type="text"
                            name="search"
                            value="{{ request('search') }}"
                            class="form-control filter-input"
                            placeholder="بحث بالبند أو المبلغ أو الملاحظات...">
                </div>
            </div>

            {{-- الأكورديون الخاص بالفلاتر الإضافية --}}
            <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>
                                            @foreach ($churches as $church)
                                                <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>{{ $church->name }} {{ $church->address ? '(' . $church->address . ')' : '' }}</option>
                                            @endforeach
                                        </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-12 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>
                    @canany(['other_income.edit', 'other_income.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody class="text-center">
                @forelse ($other_incomes as $other_income)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($other_incomes->currentPage() - 1) * $other_incomes->perPage() }}</td>
                    <td>{{ $other_income->church->name . ' - ' . $other_income->church->address }}</td>
                    <td>{{ $other_income->source_name }}</td>
                    <td>{{ $other_income->amount }}</td>
                    <td>{{ $other_income->income_date }}</td>
                    <td>{{$other_income->notes}}</td>
                    @canany(['other_income.edit', 'other_income.delete'])
                    <td>
                        @if(!$other_income->is_locked)
                            @canany(['other_income.edit'])
                                <a href="{{ route('other_incomes.edit', $other_income->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                            @endcan
                            @canany(['other_income.delete'])
                                <!-- زر الحذف -->
                                <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                        data-id="{{ $other_income->id }}"
                                        data-name="{{ $other_income->source_name . ' (' . $other_income->amount . ' ج.م) ' . $other_income->income_date  }}"
                                        data-url="/financials/other-incomes"
                                        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="6" class="text-center">
                        لا توجد لإيرادات أخرى مسجلة حالياً
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- للعرض على الموبايل --}}
    <div class="d-block d-md-none">
        <ul class="list-group list-group-flush">
            @forelse ($other_incomes as $other_income)
                <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 + ($other_incomes->currentPage() - 1) * $other_incomes->perPage() }}</span>
                        @if($other_income->is_locked)
                            <span class="badge bg-danger"><i class="fa-solid fa-lock"></i> مغلق</span>
                        @endif
                    </div>

                    <strong>البند:</strong> {{ $other_income->source_name }} <br>
                    <strong>المبلغ:</strong> <span class="text-success fw-bold">{{ number_format($other_income->amount, 2) }} ج.م</span> <br>
                    <strong>التاريخ:</strong> {{ $other_income->income_date }} <br>
                    <strong>الكنيسة:</strong> {{ $other_income->church->name }} {{ $other_income->church->address ? ' (' . $other_income->church->address . ')': ''}} <br>
                    
                    @if($other_income->is_adjustment)
                        <span class="badge rounded-pill bg-warning text-dark mt-1">
                            <i class="bi bi-arrow-repeat"></i> تسوية
                        </span> <br>
                    @endif

                    @if($other_income->notes)
                        <strong>ملاحظات:</strong> <small class="text-muted">{{ $other_income->notes }}</small> <br>
                    @endif

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

                                @can('other_income.delete')
                                    <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                            data-id="{{ $other_income->id }}"
                                            data-name="{{ $other_income->source_name . ' (' . $other_income->amount . ' ج.م) ' . $other_income->income_date  }}"
                                            data-url="/financials/other-incomes"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal0">
                                        <i class="fa-solid fa-trash"></i> حذف
                                    </button>
                                @endcan
                            @else
                                <small class="text-danger"><i class="fa-solid fa-lock"></i> لا يمكن التعديل أو الحذف (مقفل)</small>
                            @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="$other_incomes" />
</div>
@canany(['other_income.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="other_incomes" />
@endcanany

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

                    if (!selectedMonth) {
                        $('#lockMonth').addClass('is-invalid');
                        return;
                    }

                    $.ajax({
                        url: "{{ route('other_incomes.lock_month') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            month: selectedMonth
                        },
                        beforeSend: function() {
                            $('#lockOtherIncomesBtn').prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i>');
                        },
                        success: function(response) {
                            location.reload(); 
                        },
                        error: function(xhr) {
                            location.reload();
                        }
                    });
                });
            }
        }, 100);
    });
</script>

{{-- البحث --}}
<script>
    // الطريقة دي بتشتغل بدون الحاجة لـ jQuery في أول سطر
    document.addEventListener('DOMContentLoaded', function() {
        
        // هنا نتأكد إن jQuery اتحملت فعلاً
        if (typeof jQuery === "undefined") {
            console.error("jQuery is not loaded yet!");
            return;
        }
        $(document).ready(function() {
            // الفلترة التلقائية للقوائم والتواريخ فقط
            $('select.filter-input, input[type="date"].filter-input').on('change', function() {
                $('#ajaxFilterForm').submit();
            });

            // البحث النصي يعمل عند الضغط على Enter أو عند الخروج من الحقل (blur)
            $('input[name="search"]').on('keypress', function(e) {
                if (e.which == 13) { // Enter key
                    e.preventDefault();
                    $('#ajaxFilterForm').submit();
                }
            });

            // زر إعادة الضبط
            $('#resetFilters').on('click', function() {
                window.location.href = window.location.pathname; // أسرع وأضمن طريقة لتصفير كل شيء
            });
        });
    });
</script>
@endsection