@extends('layouts.app')
@section('title', 'إدارة العمولات')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>إدارة العمولات</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">الرئيسية</a></li>
                    <li class="breadcrumb-item active">إدارة العمولات</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="mb-3">
            <button type="button" class="btn btn-secondary" onclick="window.print()"><i class="fas fa-print"></i> طباعة</button>
        </div>
        <div class="card card-outline card-info mb-3">
            <div class="card-header">
                <h3 class="card-title">فلاتر البحث</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.voucher-distributor-commissions.index') }}" method="GET">
                    <div class="row">
                        <!-- فلتر الشركة -->
                        <div class="col-md-3 mb-3">
                            <label for="company_id">الشركة الموزعة</label>
                            <select class="form-control" id="company_id" name="company_id">
                                <option value="">الكل</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ request('company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <!-- فلتر الحالة -->
                        <div class="col-md-3 mb-3">
                            <label for="status">الحالة</label>
                            <select class="form-control" id="status" name="status">
                                <option value="">الكل</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>معلقة</option>
                                <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>مدفوعة</option>
                            </select>
                        </div>
                        <!-- فلتر التاريخ: من -->
                        <div class="col-md-3 mb-3">
                            <label for="date_from">من تاريخ</label>
                            <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
                        </div>
                        <!-- فلتر التاريخ: إلى -->
                        <div class="col-md-3 mb-3">
                            <label for="date_to">إلى تاريخ</label>
                            <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-12 d-flex align-items-end mt-2">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> بحث</button>
                            <a href="{{ route('admin.voucher-distributor-commissions.index', ['reset' => 1]) }}" class="btn btn-secondary ml-2 mr-2"><i class="fas fa-sync-alt"></i> إعادة تعيين</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">قائمة العمولات</h3>
            </div>
            <div class="card-body p-0">
                <form method="POST" action="{{ route('distributor-commissions.bulkMarkPaid') }}" id="bulk-payment-form">
                    @csrf
                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="select-all" title="تحديد الكل">
                                            <label class="custom-control-label" for="select-all"></label>
                                        </div>
                                    </th>
                                    <th>#</th>
                                    <th>كود الكرت</th>
                                    <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>
                                        @if($commission->status === 'pending')
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input commission-checkbox" id="commission_{{ $commission->id }}" name="commission_ids[]" value="{{ $commission->id }}"
                                                data-amount="{{ $commission->commission_amount }}"
                                                data-tourista="{{ $commission->our_share }}"
                                                data-redeemed="{{ $commission->redeemed_value }}">
                                                <label class="custom-control-label" for="commission_{{ $commission->id }}"></label>
                                            </div>
                                        @endif
                                    </td>
                                    <td>{{ $commission->id }}</td>
                                    <td>{{ $commission->voucher->code }}</td>
                                    <td>{{ $commission->voucher->categoryVoucher->name }} ({{ $commission->voucher->categoryVoucher->value }} د.ل)</td>
                                    <td>{{ $commission->company->name }}</td>
                                    <td>{{ number_format($commission->redeemed_value, 2) }} د.ل</td>
                                    <td>{{ number_format($commission->commission_rate, 2) }}%</td>
                                    <td>{{ number_format($commission->commission_amount, 2) }} د.ل</td>
                                    <td>{{ number_format($commission->our_share, 2) }} د.ل</td>
                                    <td>
                                        @if($commission->status === 'pending')
                                            <span class="badge badge-warning">معلقة</span>
                                        @elseif($commission->status === 'paid')
                                            <span class="badge badge-success">مدفوعة</span>
                                        @endif
                                    </td>
                                    <td>{{ $commission->transaction_date->format('Y-m-d H:i') }}</td>
                                    <td>
                                        @if($commission->status === 'pending')
                                            <button type="button" class="btn btn-success btn-sm" onclick="submitPaidForm({{ $commission->id }})" title="تحديد كمدفوعة"><i class="fas fa-check"></i></button>
                                        @elseif($commission->status === 'paid')
                                            <button type="button" class="btn btn-warning btn-sm" onclick="submitPendingForm({{ $commission->id }})" title="تحديد كمعلقة"><i class="fas fa-undo"></i></button>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="12" class="text-center">لا توجد عمولات متاحة.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <!-- ملخص الكروت المحددة - نسخة مضغوطة وأنيقة -->
                    <div class="d-flex flex-wrap align-items-center justify-content-between p-3 border-top bg-light">
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <span class="badge badge-primary p-2 fs-6 mr-2">
                                عدد المحدد: <strong id="selected-count">0</strong>
                            </span>
                            <span class="badge badge-success p-2 fs-6 mr-2">
                                إجمالي الكروت: <strong id="total-redeemed">0.00</strong> د.ل
                            </span>
                            <span class="badge badge-warning p-2 fs-6 mr-2">
                                إجمالي العمولة: <strong id="total-amount">0.00</strong> د.ل
                            </span>
                            <span class="badge badge-info p-2 fs-6 mr-2">
                                إجمالي توريستا: <strong id="total-tourista">0.00</strong> د.ل
                            </span>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-success" onclick="return confirm('هل أنت متأكد أنك استلمت المبلغ من الشركة؟')">
                                <i class="fas fa-money-bill-wave"></i> دفع العمولات المحددة
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer clearfix">
                {{ $commissions->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</section>
{{-- نماذج مخفية --}}
@foreach ($commissions as $commission)
    @if($commission->status === 'paid')
        <form id="pending-form-{{ $commission->id }}" action="{{ route('admin.voucher_distributor_commissions.markPending', $commission->id) }}" method="POST" style="display: none;">
            @csrf
        </form>
    @endif
    @if($commission->status === 'pending')
        <form id="paid-form-{{ $commission->id }}" action="{{ route('admin.voucher_distributor_commissions.markPaid', $commission->id) }}" method="POST" style="display: none;">
            @csrf
        </form>
    @endif
@endforeach
<form method="POST" action="{{ route('distributor-commissions.bulkMarkPending') }}" id="bulk-pending-form" style="display: none;">
    @csrf
    <input type="hidden" name="commission_ids" id="pending-commission-ids">
</form>
<script>
function updateSummary() {
    const checkboxes = document.querySelectorAll('.commission-checkbox');
    const totalAmountSpan = document.getElementById('total-amount');
    const selectedCountSpan = document.getElementById('selected-count');
    const totalTouristaSpan = document.getElementById('total-tourista');
    const totalRedeemedSpan = document.getElementById('total-redeemed');
    let totalAmount = 0;
    let totalTourista = 0;
    let totalRedeemed = 0;
    let count = 0;
    checkboxes.forEach(cb => {
        if (cb.checked) {
            count++;
            totalAmount += parseFloat(cb.dataset.amount);
            totalTourista += parseFloat(cb.dataset.tourista);
            totalRedeemed += parseFloat(cb.dataset.redeemed);
        }
    });
    selectedCountSpan.textContent = count;
    totalAmountSpan.textContent = totalAmount.toFixed(2);
    totalTouristaSpan.textContent = totalTourista.toFixed(2);
    totalRedeemedSpan.textContent = totalRedeemed.toFixed(2);
}
function updateSelectAllCheckbox() {
    const allCheckboxes = document.querySelectorAll('.commission-checkbox');
    const selectAllCheckbox = document.getElementById('select-all');
    selectAllCheckbox.checked = Array.from(allCheckboxes).every(cb => cb.checked);
}
document.querySelectorAll('.commission-checkbox').forEach(cb => {
    cb.addEventListener('change', () => {
        updateSummary();
        updateSelectAllCheckbox();
    });
});
document.getElementById('select-all').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.commission-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
    updateSummary();
});
function submitPaidForm(id) {
    document.getElementById('paid-form-' + id).submit();
}
function submitPendingForm(id) {
    document.getElementById('pending-form-' + id).submit();
}
</script>
<script>
    function printCommissionsTable() {
    const table = document.querySelector('.table-responsive table').cloneNode(true);
    // إزالة عمود الإجراءات
    const ths = table.querySelectorAll('th');
    const actionIndex = Array.from(ths).findIndex(th => th.textContent.trim() === 'الإجراءات');
    if (actionIndex !== -1) {
        table.querySelectorAll('tr').forEach(tr => {
            tr.children[actionIndex].remove();
        });
    }
    const printWindow = window.open('', '', 'height=600,width=900');
    printWindow.document.write('<html><head><title>طباعة الكروت</title>');
    printWindow.document.write('<link rel="stylesheet" href="{{ asset("css/bootstrap.min.css") }}">');
    printWindow.document.write('');
    printWindow.document.write('</head><body>');
    printWindow.document.write('<h3 class="text-center">الكروت</h3>');
    printWindow.document.write(table.outerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}
</script>
@endsection