@extends('layouts.master')
@section('css')
<!--  Owl-carousel css-->
<link href="{{ URL::asset('assets/plugins/owl-carousel/owl.carousel.css') }}" rel="stylesheet" />
<!-- Maps css -->
<link href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
@endsection

@section('title')
{{ __('home.commissions') }}
@stop

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">{{ __('home.representatives_management') }}</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ {{ __('home.commission_settlement') }}</span>
            </div>
        </div>
    </div>
    @endsection


@section('content')
    @if (session()->has('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>{{ session()->get('success') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h4 class="card-title mg-b-0">{{ __('home.pending_commissions') }}</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mg-b-20">
                        <div class="col-lg-4">
                            <label>{{ __('home.filter_by_rep') }}</label>
                            <select class="form-control select2" id="rep_filter">
                                <option value="">{{ __('home.all_reps') }}</option>
                                @foreach($representatives as $rep)
                                    <option value="{{ $rep->name }}">{{ $rep->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <form action="{{ route('reps.commissions.updateStatus') }}" method="POST" id="settlementForm">
                        @csrf
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover text-md-nowrap" id="example1">
                                <thead>
                                    <tr>
                                        <th class="wd-5p">
                                            <input type="checkbox" id="select_all" title="{{ __('home.select_all') }}">
                                        </th>
                                        <th>#</th>
                                        <th>{{ __('home.representative_name') }}</th>
                                        <th>{{ __('home.invoice_number') }}</th>
                                        <th>{{ __('home.commission_val') }}</th>
                                        <th>{{ __('home.due_date') }}</th>
                                        <th>{{ __('home.status') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($pendingCommissions as $index => $commission)
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="ids[]" value="{{ $commission->id }}" class="box1">
                                            </td>
                                            <td>{{ $index + 1 }}</td>
                                            {{-- الوصول للاسم عبر العلاقة --}}
                                            <td>{{ $commission->representative->name ?? __('home.no_name') }}</td>
                                            {{-- الوصول لرقم الفاتورة عبر العلاقة --}}
                                            <td>{{ $commission->invoice->invoice_number ?? '---' }}</td>
                                            <td class="text-success fw-bold">{{ number_format($commission->commission_amount, 2) }}</td>
                                            <td>{{ $commission->created_at->format('Y-m-d') }}</td>
                                            <td>
                                                <span class="badge badge-warning text-white">{{ __('home.pending') }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mg-t-20">
                            <button type="submit" class="btn btn-primary-gradient btn-block" id="submitBtn" disabled>
                                <i class="fas fa-check-circle"></i> {{ __('home.settle_selected') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('js')
<script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>

    <script>
        $(document).ready(function() {
            var table = $('#example1').DataTable();

            // فلتر المندوب (Client-side fast filter)
            $('#rep_filter').on('change', function() {
                table.column(2).search(this.value).draw();
            });

            // اختيار الكل
            $('#select_all').on('click', function() {
                $('.box1').prop('checked', this.checked);
                toggleSubmitBtn();
            });

            // تفعيل زر الصرف عند اختيار أي عمولة
            $(document).on('change', '.box1', function() {
                toggleSubmitBtn();
            });

            function toggleSubmitBtn() {
                var checkedCount = $('.box1:checked').length;
                $('#submitBtn').prop('disabled', checkedCount === 0);
            }
        });
    </script>
@endsection