@extends('layouts.app')
@section('title', 'مكافأة و خصومات الموظفين')
@section('content')
<div class="container">
    <x-header title="مكافأة و خصومات الموظفين" />
    
    <x-alert />

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

            @canany(['staff_transaction.lock'])
                <!-- فورم غلق المكافات والخصومات -->
                <div class="col-md-4 mb-2" 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('staff_transactions.index') }}" method="GET" id="ajaxFilterForm">
        <div class="row">
            {{-- حقل البحث النصي --}}
            <div class="col-md-12 mb-3" dir="ltr">
                <div class="input-group">
                    <button class="btn btn-dark" type="submit">بحث</button>
                    <input type="text" name="search" value="{{ request('search') }}" 
                    class="form-control" placeholder="بحث باسم الشخص، البند، أو المبلغ...">
                    <span class="input-group-text bg-white"><i class="fa fa-search text-muted"></i></span>
                </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">
                                <i class="fa-solid fa-filter me-2"></i> تصفية متقدمة
                            </button>
                        </h2>
                        <div id="Filter-selected" class="accordion-collapse collapse {{ request()->hasAny(['person_type', 'transaction_type', 'church_id', 'from_date', 'to_date']) ? 'show' : '' }}">
                            <div class="accordion-body">
                                <div class="row g-3">
                                    {{-- نوع الشخص (موظف / مدرس) --}}
                                    <div class="col-md-4">
                                        <label class="small fw-bold">فئة الشخص:</label>
                                        <select name="person_type" class="form-select form-select-sm filter-input tom-select">
                                            <option value="">كل الفئات</option>
                                            <option value="user" {{ request('person_type') == 'user' ? 'selected' : '' }}>موظف</option>
                                            <option value="teacher" {{ request('person_type') == 'teacher' ? 'selected' : '' }}>مدرس</option>
                                        </select>
                                    </div>

                                    {{-- نوع العملية (مكافأة / خصم) --}}
                                    <div class="col-md-4">
                                        <label class="small fw-bold">نوع العملية:</label>
                                        <select name="transaction_type" class="form-select form-select-sm filter-input tom-select">
                                            <option value="">كل العمليات</option>
                                            <option value="bonus" {{ request('transaction_type') == 'bonus' ? 'selected' : '' }}>مكافأة</option>
                                            <option value="deduction" {{ request('transaction_type') == 'deduction' ? 'selected' : '' }}>خصم</option>
                                        </select>
                                    </div>

                                    {{-- الكنيسة --}}
                                    <div class="col-md-4">
                                        <label class="small fw-bold">الكنيسة:</label>
                                        <select name="church_id" class="form-select form-select-sm filter-input tom-select">
                                            <option value="">كل الكنائس</option>
                                            @foreach($churches as $church)
                                                <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>{{ $church->name . ' (' . $church->address . ')' }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    {{-- التاريخ --}}
                                    <div class="col-md-6">
                                        <label class="small fw-bold">من تاريخ:</label>
                                        <input type="date" name="from_date" class="form-control form-control-sm filter-input" value="{{ request('from_date') }}">
                                    </div>

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

                                    <div class="text-center col-md-12">
                                        <hr>
                                        <button type="button" id="resetFilters" class="btn btn-light btn-sm border">إعادة ضبط الكل</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 class="table-light">
                <tr>
                    <th>#</th>
                    <th>المستفيد</th> <th>الكنيسة</th>
                    <th>نوع العملية</th> <th>المبلغ</th>
                    <th>التاريخ</th>
                    <th>البند / الملاحظات</th>
                    @canany(['staff_transaction.edit', 'staff_transaction.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($transactions as $transaction)
                <tr>
                    {{-- 1. التسلسل --}}
                    <td>{{ $loop->iteration + ($transactions->currentPage() - 1) * $transactions->perPage() }}</td>

                    {{-- 2. اسم الشخص (مع التحقق من الوجود) --}}
                    <td class="fw-bold">
                        {{ $transaction->transactionable->name ?? 'غير محدد' }}
                        <br>
                        <small class="text-muted">
                            {{ $transaction->transactionable->job_title ?? 'مدرس' }}
                        </small>
                    </td>

                    {{-- 3. الكنيسة (استخدام الـ Optional chaining لمنع الـ Error) --}}
                    <td>
                        @foreach($transaction->assigned_churches as $church)
                            <span class="badge bg-info">
                                {{ $church->name }} {{ $church->address ? ' (' . $church->address . ')' : ')' }}

                            </span>
                        @endforeach
                    </td>

                    {{-- 4. نوع العملية (تلوين النوع) --}}
                    <td>
                        @if($transaction->type == 'bonus')
                            <span class="badge bg-success-subtle text-success border border-success">مكافأة</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger border border-danger">خصم</span>
                        @endif
                    </td>

                    {{-- 5. المبلغ --}}
                    <td class="fw-bold {{ $transaction->type == 'bonus' ? 'text-success' : 'text-danger' }}">
                        {{ number_format($transaction->amount, 2) }} ج.م
                    </td>

                    {{-- 6. التاريخ --}}
                    <td>{{ $transaction->transaction_date }}</td>

                    {{-- 7. الوصف --}}
                    <td class="small {{ $transaction->type == 'bonus' ? 'text-success' : 'text-danger' }}">
                        {{ $transaction->description ?: '---' }}
                    </td>

                    {{-- 8. الإجراءات --}}
                    @canany(['staff_transaction.edit', 'staff_transaction.delete'])
                    <td>
                        @if(!$transaction->is_locked)
                            <div class="btn-group" role="group" dir="ltr">
                                @can('staff_transaction.delete')
                                    <button type="button" class="btn btn-outline-danger btn-sm delete-ajax-trigger" 
                                            data-id="{{ $transaction->id }}"
                                            data-name="{{ $transaction->type_text }} {{ $transaction->transactionable_type === 'App\Models\User' ? 'موظف' : 'مدرس' }}
                                                        <br> {{ $transaction->transactionable->name ?? 'مستفيد غير معروف' }}
                                                        <br> {{ ($transaction->description ?: 'عملية')}}
                                                        <br> {{' (' . $transaction->amount . ' ج.م)' }}"
                                            data-url="/financials/staff-transactions"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal0">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                @endcan

                                 @can('staff_transaction.edit')
                                    <a href="{{ route('staff_transactions.edit', $transaction->id) }}" class="btn btn-sm btn-outline-warning">
                                        <i class="fa-regular fa-pen-to-square"></i>
                                    </a>
                                @endcan
                            </div>
                        @else
                            <span class="badge bg-secondary"><i class="fa fa-lock"></i> مغلق</span>
                        @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 ($transactions as $transaction)
                <li class="list-group-item shadow-sm mb-3 border rounded p-3">
                    {{-- رأس البطاقة: التسلسل، الحالة، ونوع العملية --}}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge text-bg-dark rounded-pill"># {{ $loop->iteration + ($transactions->currentPage() - 1) * $transactions->perPage() }}</span>
                        <div>
                            @if($transaction->is_locked)
                                <span class="badge bg-danger me-1"><i class="fa-solid fa-lock"></i> مغلق</span>
                            @endif
                            
                            @if($transaction->type == 'bonus')
                                <span class="badge bg-success-subtle text-success border border-success">مكافأة</span>
                            @else
                                <span class="badge bg-danger-subtle text-danger border border-danger">خصم</span>
                            @endif
                        </div>
                    </div>

                    {{-- 1. اسم الشخص (المستفيد) --}}
                    <div class="mb-2">
                        <i class="fa-solid fa-user-circle text-secondary me-1"></i>
                        <strong class="fw-bold">{{ $transaction->transactionable->name ?? 'غير محدد' }}</strong>
                        <small class="text-muted ms-4">
                            {{ $transaction->transactionable->job_title ?? 'مدرس' }}
                        </small>
                    </div>

                    {{-- 2. الكنائس (تطبيق نفس الـ Pattern الخاص بالكمبيوتر) --}}
                    <div class="mb-2">
                        <i class="fa-solid fa-church text-secondary me-1"></i>
                        <strong>الكنيسة:</strong>
                        <div class="ms-4 mt-1">
                            @forelse($transaction->assigned_churches as $church)
                                <span class="badge bg-info text-dark mb-1">
                                    {{ $church->name }} {{ $church->address ? ' (' . $church->address . ')' : '' }}
                                </span>
                            @empty
                                <span class="text-muted small">غير مرتبط بكنائس</span>
                            @endforelse
                        </div>
                    </div>

                    {{-- 3. المبلغ (تلوين حسب النوع) --}}
                    <div class="mb-2">
                        <i class="fa-solid fa-money-bill-wave text-secondary me-1"></i>
                        <strong>المبلغ:</strong> 
                        <span class="{{ $transaction->type == 'bonus' ? 'text-success' : 'text-danger' }} fw-bold">
                            {{ number_format($transaction->amount, 2) }} ج.م
                        </span>
                    </div>

                    {{-- 4. التاريخ --}}
                    <div class="mb-2">
                        <i class="fa-solid fa-calendar-day text-secondary me-1"></i>
                        <strong>التاريخ:</strong> {{ $transaction->transaction_date }}
                    </div>

                    {{-- 5. البند والملاحظات (بنفس تلوين النوع) --}}
                    <div class="bg-light p-2 rounded mt-2 border-start border-4 {{ $transaction->type == 'bonus' ? 'border-success' : 'border-danger' }}">
                        <strong class="small">البند:</strong> 
                        <span class="small {{ $transaction->type == 'bonus' ? 'text-success' : 'text-danger' }}">
                            {{ $transaction->description ?: '---' }}
                        </span>
                    </div>

                    {{-- 6. الإجراءات (بنفس ترتيب الكمبيوتر btn-group) --}}
                    @canany(['staff_transaction.edit', 'staff_transaction.delete'])
                        <div class="d-flex justify-content-center mt-3 border-top pt-2">
                            @if(!$transaction->is_locked)
                                <div class="btn-group w-100" role="group" dir="ltr">
                                    @can('staff_transaction.delete')
                                        <button type="button" class="btn btn-outline-danger btn-sm delete-ajax-trigger" 
                                                data-id="{{ $transaction->id }}"
                                                data-name="{{ ($transaction->description ?: 'عملية') . ' (' . $transaction->amount . ' ج.م)' }}"
                                                data-url="/financials/staff-transactions"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModal0">
                                            <i class="fa-solid fa-trash"></i> حذف
                                        </button>
                                    @endcan

                                    @can('staff_transaction.edit')
                                        <a href="{{ route('staff_transactions.edit', $transaction->id) }}" class="btn btn-sm btn-outline-warning">
                                            <i class="fa-regular fa-pen-to-square"></i> تعديل
                                        </a>
                                    @endcan
                                </div>
                            @else
                                <small class="text-muted text-center"><i class="fa-solid fa-lock"></i> البيانات مؤرشفة (للقراءة فقط)</small>
                            @endif
                        </div>
                    @endcanany
                </li>
            @empty
                <li class="list-group-item text-center text-muted">لا يوجد بيانات</li>
            @endforelse
        </ul>
    </div>

    <x-pagination :data="$transactions" />
</div>
@canany(['staff_transaction.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="staff_transactions" />
@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