@extends('layouts.master')
@section('css')
    <link href="{{URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css')}}" rel="stylesheet">

    <link href="{{URL::asset('assets/plugins/amazeui-datetimepicker/css/amazeui.datetimepicker.css')}}" rel="stylesheet">
    <link href="{{URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.css')}}" rel="stylesheet">
    <link href="{{URL::asset('assets/plugins/pickerjs/picker.min.css')}}" 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.commissions_report') }}</span>
            </div>
        </div>
    </div>
@endsection

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

            <div class="col-lg-3">
                <label>{{ __('home.status') }}</label>
                <select id="status" class="form-control select2">
                    <option value="">{{ __('home.all_status') }}</option>
                    <option value="0">{{ __('home.pending') }}</option>
                    <option value="1">{{ __('home.paid') }}</option>
                </select>
            </div>

            <div class="col-lg-3">
                <label>{{ __('home.from_date') }}</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
                        </div>
                    </div>
                    <input class="form-control fc-datepicker" id="from_date" placeholder="YYYY-MM-DD" type="text">
                </div>
            </div>

            <div class="col-lg-3">
                <label>{{ __('home.to_date') }}</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
                        </div>
                    </div>
                    <input class="form-control fc-datepicker" id="to_date" placeholder="YYYY-MM-DD" type="text">
                </div>
            </div>
        </div>

        <div class="row mg-b-20">
            <div class="col-lg-12">
                <div class="btn-list d-flex">
                    <button id="print_report" class="btn btn-danger-gradient ml-2">
                        <i class="fas fa-print"></i> {{ __('home.Print account statement') }}
                    </button>

                    <button id="btn_reset" class="btn btn-secondary-gradient">
                        <i class="fas fa-sync-alt"></i> {{ __('home.reset') }}
                    </button>
                </div>
            </div>
        </div>

                <hr>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-md-nowrap" id="example1">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('home.representative_name') }}</th>
                                <th>{{ __('home.invoice_number') }}</th>
                                <th>{{ __('home.commission_val') }}</th>
                                <th>{{ __('home.status') }}</th>
                                <th>{{ __('home.due_date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            </tbody>
                    </table>
                </div>
            </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 src="{{URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js')}}"></script>

<script>
$(document).ready(function() {
    // 1. تشغيل التقويم (Datepicker)
    $('.fc-datepicker').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        rtl: true,
        onSelect: function() {
            // تحديث الجدول فور اختيار تاريخ من النتيجة
            table.ajax.reload();
        }
    });

    // 2. إعداد DataTable
    var table = $('#example1').DataTable({
        "processing": true,
        "serverSide": false,
        "paging": false,
        "searching": false,
        "info": false,
        "dom": 'Bfrtip',
        "buttons": [
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i> طباعة',
                className: 'btn btn-primary-gradient ml-2'
            },
            {
                extend: 'excel',
                text: '<i class="fas fa-file-excel"></i> اكسل',
                className: 'btn btn-success-gradient'
            }
        ],
        "ajax": {
            "url": "{{ route('reps.commissions.report') }}",
            "data": function (d) {
                d.rep_id = $('#rep_id').val();
                d.status = $('#status').val();
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
            },
            "dataSrc": function (json) {
                // منع ظهور أي بيانات إذا لم يتم اختيار مندوب
                if (!$('#rep_id').val()) {
                    return [];
                }
                return json.data;
            }
        },
        "columns": [
            { "data": "index" },
            { "data": "rep_name" },
            { "data": "invoice_number" },
            { "data": "amount" },
            {
                "data": "status_val",
                "render": function(data) {
                    if(data == 1) {
                        return '<span class="badge" style="background:linear-gradient(to left, #2dce89, #2dce89); color:white; padding:7px 12px; border-radius:50px;">{{ __("home.paid") }}</span>';
                    }
                    return '<span class="badge" style="background:linear-gradient(to left, #ffad0a, #ffad0a); color:white; padding:7px 12px; border-radius:50px;">{{ __("home.pending") }}</span>';
                }
            },
            { "data": "date" }
        ],
        "language": { "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Arabic.json" }
    });

    // 3. تحديث الجدول عند تغيير الفلاتر (المندوب والحالة)
    $('#rep_id, #status').on('change', function() {
        if ($('#rep_id').val() == "") {
            table.clear().draw(); // مسح الجدول فوراً لو رجع اختار "الكل" أو فضى المندوب
        } else {
            table.ajax.reload();
        }
    });

    // 4. مراقبة الكتابة اليدوية في التاريخ (للاحتياط)
    $('#from_date, #to_date').on('blur', function() {
        table.ajax.reload();
    });

    // 5. زر الطباعة المحسن
    $('#print_report').on('click', function() {
        var rep_id = $('#rep_id').val();
        var status = $('#status').val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        if(!rep_id) {
            alert('يرجى اختيار المندوب أولاً للطباعة');
            return;
        }

        var url = "{{ route('reps.commissions.print') }}?" + $.param({
            rep_id: rep_id,
            status: status,
            from_date: from_date,
            to_date: to_date
        });

        window.open(url, '_blank');
    });

    // 6. زر إعادة الضبط (Reset) الشامل
    $('#btn_reset').on('click', function() {
        // تصفير الحقول وتنبيه Select2
        $('#rep_id, #status').val('').trigger('change.select2');
        $('#from_date, #to_date').val('');

        // مسح الداتا المرسومة في الجدول حالاً
        table.clear().draw();

        // إعادة طلب البيانات (هيرجع فاضي بسبب شرط المندوب)
        table.ajax.reload();
    });
});
</script>
@endsection