@extends('layouts.app')
@section('title', __('lang.customers_report'))
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black"> @lang('lang.customers_report')</h1>
    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('contact_ids[]', __('lang.customers') . ':') !!}
                    <!-- زرار تحديد الكل -->
                    <button type="button"  class="btn btn-success btn-xs select_contact_ids"><i class="fa fa-check" id="select_contact_ids" style="font-size: 10px;"></i></button>
                    <!-- زرار إلغاء التحديد -->
                    <button type="button"  class="btn btn-danger btn-xs deselect_contact_ids"><i class="fa fa-times" id="deselect_contact_ids" style="font-size: 10px;"></i></button>
                    
                    <div class="form-group">
                        {!! Form::select('contact_ids[]', $customers, null, ['class' => 'form-control select2 multiple-select', 'id' => 'contact_ids', 'multiple' => 'multiple', 'style' => 'width:100%']) !!}
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('assigned_to', __('lang.sales_person') . ':') !!}
                    {!! Form::select('assigned_to', getSalesPersons()??[], null, ['class' => 'form-control select2', 'id' => 'assigned_to',  'placeholder' => __('lang.all'), 'style' => 'width:100%']) !!}
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('tags[]', __('lang.tags') . ':') !!}
                    <!-- زرار تحديد الكل -->
                    <button type="button"  class="btn btn-success btn-xs select_tags"><i class="fa fa-check" id="select_tags" style="font-size: 10px;"></i></button>
                    <!-- زرار إلغاء التحديد -->
                    <button type="button"  class="btn btn-danger btn-xs deselect_tags"><i class="fa fa-times" id="deselect_tags" style="font-size: 10px;"></i></button>
                    
                    <div class="form-group">
                        {!! Form::select('tags[]', getTags(), null, ['class' => 'form-control select2 multiple-select', 'id' => 'tags', 'multiple' => 'multiple', 'style' => 'width:100%']) !!}
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('date_range', __('report.date_range') . ':') !!}
                    {!! Form::text('date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
                </div>
            </div>

            @includeIf('locations::layouts.location_filter')

            <div class="col-md-3">
                <div class="form-group">
                    <label for="has_no_sell_from">@lang('lang_v1.has_no_sell_from'):</label>
                    {!! Form::select(
                        'has_no_sell_from',
                        [
                            'one_month' => __('lang_v1.one_month'),
                            'three_months' => __('lang_v1.three_months'),
                            'six_months' => __('lang_v1.six_months'),
                            'one_year' => __('lang_v1.one_year'),
                        ],
                        null,
                        ['class' => 'form-control', 'id' => 'has_no_sell_from', 'placeholder' => __('messages.please_select')],
                    ) !!}
                </div>
            </div>
        @endcomponent
        
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('lang.customers', ['contacts' => __('lang.customers')]),
        ])
            @if (auth()->user()->can('customer.view') || auth()->user()->can('customer.view_own'))
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="contact_report_table">
                        <thead>
                            <tr>
                                <th>@lang('lang.customer_name')</th>
                                <th>@lang('contact.mobile')</th>
                                <th>@lang('lang.sales_person')</th>
                                <th>@lang('lang.indebted_people')</th>
                                <th>@lang('lang.date_last_invoice')</th>
                                <th>@lang('lang.value_last_invoice')</th>
                                <th>@lang('lang.date_last_payment')</th>
                                <th>@lang('lang.value_last_payment')</th>
                                {{-- <th>@lang('lang.number_of_days_late_last_payment')</th> --}}
                            </tr>
                        </thead>
                    </table>
                </div>
            @endif
        @endcomponent

    </section>
    <!-- /.content -->
@stop
@section('javascript')
    <script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

    <script>
        $(document).ready(function () {
            // تفعيل select2
            $('.multiple-select').select2();

            // تحديد الكل
            $('.select_tags').click(function () {
                let allOptions = $('#tags option').map(function () {
                    return $(this).val();
                }).get();

                $('#tags').val(allOptions).trigger('change');
            });

            // إلغاء التحديد
            $('.deselect_tags').click(function () {
                $('#tags').val(null).trigger('change');
            });
            
            // تحديد الكل
            $('.select_contact_ids').click(function () {
                let allOptions = $('#contact_ids option').map(function () {
                    return $(this).val();
                }).get();

                $('#contact_ids').val(allOptions).trigger('change');
            });

            // إلغاء التحديد
            $('.deselect_contact_ids').click(function () {
                $('#contact_ids').val(null).trigger('change');
            });
        
        });

    </script>

    <script>
        $(document).ready(function() {

            $('#date_range').daterangepicker(
                dateRangeSettings,
                function(start, end) {
                    $('#date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(
                        moment_date_format));
                    contact_report_table.ajax.reload();
                }
            );
            $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
                $('#date_range').val('');
                contact_report_table.ajax.reload();
            });

            contact_report_table = $('#contact_report_table').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                aaSorting: [[1, 'desc']],
                ajax: {
                    url: '{{action([\App\Http\Controllers\ContactController::class, 'contactsReport'])}}',
                    "data": function ( d ) {
                        if ($('#date_range').val()) {
                            var start = $('#date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                            var end = $('#date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
                            d.start_date = start;
                            d.end_date = end;
                        }

                        d.contact_ids = $('#contact_ids').val();
                        d.assigned_to = $('#assigned_to').val();
                        d.tags        = $('#tags').val();
                        d.state_id    = $('#state_id').val();
                        d.city_id     = $('#city_id').val();
                        d.has_no_sell_from = $('#has_no_sell_from').val();
                    },
                },
                columnDefs: [
                    {
                        targets: [3, 3],
                        orderable: false,
                        searchable: false,
                    },
                ],
                columns: [
                    { data: 'name', name: 'name', searchable: true, orderable: false},
                    { data: 'mobile', name: 'mobile', searchable: true, orderable: false},
                    { data: 'sales_person', name: 'sales_person', searchable: true, orderable: false},
                    { data: 'indebted_people', name: 'indebted_people', orderable: false, searchable: false},
                    { data: 'date_last_invoice', name: 'date_last_invoice', orderable: false, searchable: false},
                    { data: 'value_last_invoice', name: 'value_last_invoice', orderable: false, searchable: false},
                    { data: 'date_last_payment', name: 'date_last_payment', orderable: false, searchable: false},
                    { data: 'value_last_payment', name: 'value_last_payment', orderable: false, searchable: false},
                    // { data: 'number_of_days_late_last_payment', name: 'number_of_days_late_last_payment', orderable: false, searchable: false},
                ],
                fnDrawCallback: function(oSettings) {
                    __currency_convert_recursively($('#contact_report_table'));
                }
            });

            $(document).on('change', '#contact_ids, #assigned_to, #tags, #has_no_sell_from', function(){
                contact_report_table.ajax.reload();
            });
        });
    </script>
    
@endsection