@extends('layouts.banking')

@section('title', 'إدارة عمولات الوكلاء')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">قائمة عمولات الوكلاء</h5>
                    @can('create_agent_commissions')
                    <a href="{{ route('agent-commissions.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus-circle me-1"></i> إضافة عمولة جديدة
                    </a>
                    @endcan
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <form action="{{ route('agent-commissions.index') }}" method="GET" class="row g-3">
                            <div class="col-md-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="بحث..." name="search" value="{{ request('search') }}">
                                    <button class="btn btn-outline-secondary" type="submit">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <select name="agent_id" class="form-select" onchange="this.form.submit()">
                                    <option value="">-- جميع الوكلاء --</option>
                                    @foreach($agents as $agent)
                                        <option value="{{ $agent->id }}" {{ request('agent_id') == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select name="status" class="form-select" onchange="this.form.submit()">
                                    <option value="">-- جميع الحالات --</option>
                                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>معلقة</option>
                                    <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>مدفوعة</option>
                                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغاة</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" name="date_from" value="{{ request('date_from') }}" placeholder="من تاريخ">
                            </div>
                            <div class="col-md-2">
                                <div class="d-flex">
                                    <input type="date" class="form-control" name="date_to" value="{{ request('date_to') }}" placeholder="إلى تاريخ">
                                    <a href="{{ route('agent-commissions.index') }}" class="btn btn-secondary ms-2">
                                        <i class="fas fa-sync-alt"></i>
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>التاريخ</th>
                                    <th>الوكيل</th>
                                    <th>المبلغ</th>
                                    <th>نوع العمولة</th>
                                    <th>قيمة العمولة</th>
                                    <th>مبلغ العمولة</th>
                                    <th>العملة</th>
                                    <th>الحالة</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($commissions as $commission)
                                <tr>
                                    <td>{{ $commission->created_at->format('Y-m-d H:i') }}</td>
                                    <td>{{ $commission->agent->name }}</td>
                                    <td>{{ number_format($commission->amount, $commission->currency->decimal_places) }}</td>
                                    <td>{{ $commission->commission_type_name }}</td>
                                    <td>
                                        @if($commission->commission_type == 'percentage')
                                            {{ $commission->commission_value }}%
                                        @else
                                            {{ number_format($commission->commission_value, $commission->currency->decimal_places) }}
                                        @endif
                                    </td>
                                    <td>{{ number_format($commission->commission_amount, $commission->currency->decimal_places) }}</td>
                                    <td>{{ $commission->currency->code }}</td>
                                    <td>
                                        @if($commission->status == 'paid')
                                            <span class="badge bg-success">{{ $commission->status_name }}</span>
                                        @elseif($commission->status == 'pending')
                                            <span class="badge bg-warning">{{ $commission->status_name }}</span>
                                        @else
                                            <span class="badge bg-danger">{{ $commission->status_name }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            @can('view_agent_commissions')
                                            <a href="{{ route('agent-commissions.show', $commission) }}" class="btn btn-info" title="عرض">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            @endcan
                                            
                                            @if($commission->status == 'pending')
                                                @can('pay_agent_commissions')
                                                <button type="button" class="btn btn-success" title="دفع العمولة" 
                                                        onclick="confirmPay('{{ route('agent-commissions.pay', $commission) }}')">
                                                    <i class="fas fa-money-bill-wave"></i>
                                                </button>
                                                @endcan
                                                
                                                @can('cancel_agent_commissions')
                                                <button type="button" class="btn btn-danger" title="إلغاء العمولة" 
                                                        onclick="confirmCancel('{{ route('agent-commissions.cancel', $commission) }}')">
                                                    <i class="fas fa-ban"></i>
                                                </button>
                                                @endcan
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center">لا توجد بيانات</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4">
                        {{ $commissions->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- نموذج تأكيد الدفع -->
<div class="modal fade" id="payModal" tabindex="-1" aria-labelledby="payModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="payModalLabel">تأكيد دفع العمولة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            <form id="payForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <p>هل أنت متأكد من دفع هذه العمولة؟</p>
                    <div class="mb-3">
                        <label for="payment_reference" class="form-label">الرقم المرجعي للدفع</label>
                        <input type="text" class="form-control" id="payment_reference" name="payment_reference" placeholder="اختياري">
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">ملاحظات</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="اختياري"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success">تأكيد الدفع</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- نموذج تأكيد الإلغاء -->
<div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelModalLabel">تأكيد إلغاء العمولة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            <form id="cancelForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <p>هل أنت متأكد من إلغاء هذه العمولة؟</p>
                    <div class="mb-3">
                        <label for="cancel_notes" class="form-label">سبب الإلغاء</label>
                        <textarea class="form-control" id="cancel_notes" name="notes" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-danger">تأكيد الإلغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function confirmPay(url) {
        document.getElementById('payForm').action = url;
        
        var payModal = new bootstrap.Modal(document.getElementById('payModal'));
        payModal.show();
    }
    
    function confirmCancel(url) {
        document.getElementById('cancelForm').action = url;
        
        var cancelModal = new bootstrap.Modal(document.getElementById('cancelModal'));
        cancelModal.show();
    }
</script>
@endsection