@extends('layouts.app')
@section('title', __('lang_v1.due_ages_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_v1.due_ages_report') }}</h1>
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-xs-12">
                @component('components.widget', ['class' => 'box-primary'])
                    <div style="direction: ltr;">
                        {!! $chart->container() !!}
                    </div>
                @endcomponent
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#due_ages" data-toggle="tab" aria-expanded="true"><i class="fa fa-list"
                                    aria-hidden="true"></i> @lang('lang_v1.due_ages_report')</a>
                        </li>
                        <li>
                            <a href="#due_ages_with_days" data-toggle="tab" aria-expanded="true"><i class="fa fa-list"
                                    aria-hidden="true"></i> @lang('lang_v1.due_ages_report_with_days')</a>
                        </li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="due_ages">
                            @component('components.filters', ['title' => __('report.filters')])
                            <div class="col-md-6">
                                <div class="form-group">
                                    {!! Form::label('day', __('lang_v1.days') . ':') !!}
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-info"></i>
                                        </span>
                                        {!! Form::number('day',  null, ['class' => 'form-control input_number','id'=>'day','min' => 0,'step' => 1]); !!}
                                    </div>
                                </div>
                            </div>
                    
                                <div class="col-md-6">
                                    <div class="form-group">
                                        {!! Form::label('customer_group_id', __('lang_v1.customer_group_name') . ':') !!}
                                        {!! Form::select('customer_group_id', $customer_group, null, [
                                            'class' => 'form-control select2',
                                            'style' => 'width:100%',
                                            'id' => 'customer_group_id',
                                        ]) !!}
                                    </div>
                                </div>
                                @if ($is_gps)
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            {!! Form::label('sector_id', __('lang_v1.customer_sector') . ':') !!}
                                            {!! Form::select('sector_id', $customer_sectors ?? [], null, [
                                                'placeholder' => __('messages.all'),
                                                'class' => 'form-control select2',
                                                'style' => 'width:100%',
                                                'id' => 'sector_id',
                                            ]) !!}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            {!! Form::label('tag_id', __('lang_v1.tags') . ':') !!}
                                            {!! Form::select('tag_id', $tags ?? [], null, [
                                                'placeholder' => __('messages.all'),
                                                'class' => 'form-control select2',
                                                'style' => 'width:100%',
                                                'id' => 'tag_id',
                                            ]) !!}
                                        </div>
                                    </div>
                                @endif
                            @endcomponent
                            @component('components.widget', ['class' => 'box-primary'])
                                <table class="table" id="due_ages_report_table">
                                    <thead>
                                        <tr>
                                            <th>@lang('contact.name')</th>
                                            <th>@lang('lang_v1.customer_group')</th>
                                            <th>@lang('home.due_amount')</th>
                                            <th>@lang('lang_v1.last_payment_date')</th>
                                            <th>{{ __('account.from') . ' ' . __('lang_v1.days') }}</th>
                                            <th>@lang('lang_v1.last_payment')</th>
                                            <th>@lang('purchase.ref_no')</th>
                                        </tr>
                                    </thead>

                                    <tfoot>
                                        <tr class="bg-gray font-17 footer-total text-center">
                                            <td colspan="1" rowspan="1"><strong>@lang('sale.total'):</strong></td>
                                            <td></td>
                                            <td>
                                                <span class="display_currency" id="footer_subtotal"
                                                    data-currency_symbol="true"></span>
                                            </td>
                                            <td colspan="1" rowspan="1"></td>
                                            <td colspan="1" rowspan="1"></td>
                                            <td colspan="1" rowspan="1"></td>
                                            <td colspan="1" rowspan="1"></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            @endcomponent
                        </div>


                        <div class="tab-pane" id="due_ages_with_days">
                            <div
                                class="tw-transition-all tw-mb-4 lg:tw-col-span-1 tw-duration-200 tw-bg-white tw-shadow-sm tw-rounded-xl tw-ring-1 hover:tw-shadow-md tw-ring-gray-200">
                                <div class="box-header with-border" style="cursor: pointer;" data-toggle="collapse"
                                    data-parent="#accordion" href="#collapseFilter1">
                                    <h3 class="box-title tw-pt-2 tw-pb-2 tw-pl-2">
                                        <a>
                                            @if (!empty($icon))
                                                {!! $icon !!}
                                            @else
                                                <i class="fa fa-filter" aria-hidden="true"></i>
                                            @endif {{ __('report.filters') ?? '' }}
                                        </a>
                                    </h3>
                                </div>
                                @php
                                    if (isMobile()) {
                                        $closed = true;
                                    }
                                    $closed = true;
                                @endphp
                                <div id="collapseFilter1"
                                    class="panel-collapse active collapse @if (empty($closed)) in @endif tw-pt-4 tw-pb-4"
                                    aria-expanded="true">
                                    <div class="box-body">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('day_id', __('lang_v1.days') . ':') !!}
                                                {!! Form::select('day_id', $days ?? [], null, [
                                                    'placeholder' => __('messages.all'),
                                                    'class' => 'form-control select2',
                                                    'style' => 'width:100%',
                                                    'id' => 'day_id',
                                                ]) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            @component('components.widget', ['class' => 'box-primary'])
                                <table class="table" id="due_ages_with_days_report_table">
                                    <thead>
                                        <tr>
                                            <th>@lang('contact.name')</th>
                                            <th>@lang('home.due_amount')</th>


                                        </tr>
                                    </thead>


                                </table>
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    {!! $chart->script() !!}

    <script>
       


        $(document).ready(function() {
          
            $('#day_id').change(function() {
                due_ages_with_days_report_table.ajax.reload();
            });
         
            $('#customer_group_id,#tag_id,#sector_id,#day').on('change', function() {

                due_ages_report.ajax.reload();
            });


            let columns = [{
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'customer_group',
                    name: 'customer_group'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'last_payment_date',
                    name: 'last_payment_date'
                },
                {
                    data: 'from_days',
                    name: 'from_days',
                    orderable:false
                },
                {
                    data: 'last_payment_amount',
                    name: 'last_payment_amount'
                },
                {
                    data: 'last_payment_number',
                    name: 'last_payment_number'
                },
            ];
            due_ages_report = $('table#due_ages_report_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader: false,
               
                ajax: {
                    url: '/reports/due/ages',
                    data: function(d) {
                      
                        
                        d.day = $('#day').val();
                      
                        d.customer_group_id = $('#customer_group_id').val();
                        d.sector_id = $('#sector_id').val();
                        d.tag_id = $('#tag_id').val();
                    },
                },
                columns: columns,

                fnDrawCallback: function(oSettings) {
                    $('#footer_subtotal').text(
                        sum_table_col($('#due_ages_report_table'), 'row_subtotal')
                    );
                    __currency_convert_recursively($('#due_ages_report_table'));

                },
            });

            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                var target = $(e.target).attr('href');

                if (target == '#due_ages_with_days') {
                    if (!$.fn.dataTable.isDataTable('#due_ages_with_days_report_table')) {
                        due_ages_with_days_report_table = $('#due_ages_with_days_report_table').DataTable({
                            processing: true,
                            serverSide: true,
                            fixedHeader: false,
                            ajax: {
                                url: '/reports/due/ages/days',
                                data: function(d) {
                                    d.day_id = $('#day_id').val();
                                }
                            },
                            columns: [{
                                    data: 'contact_name',
                                    name: 'contact_name'
                                },
                                {
                                    data: 'due_amount',
                                    name: 'due_amount'
                                },

                            ],
                            fnDrawCallback: function(oSettings) {

                                __currency_convert_recursively($(
                                    '#due_ages_with_days_report_table'));
                            },
                        });
                    } else {
                        due_ages_with_days_report_table.ajax.reload();
                    }
                }
            });
        });
    </script>
@endsection