@extends('adminlte::page')

@section('title', 'Taxes')

@section('content_header')
    <h1>Taxes</h1>
@endsection

@section('content')

    <x-filter>
        <x-row>
            @if(auth()->user()->hasRole('superadmin'))
                <x-col width="3">
                    <x-form-group.select for="annuaire_id" label="global.Annuaire">
                        @foreach (get_all_annuaires() as $annuaire)
                            <option value="{{ $annuaire->id }}">{{ $annuaire->raison_sociale }}</option>
                        @endforeach
                    </x-form-group.select>
                </x-col>
            @endif

            <x-col width="3">
                <x-form-group.select id="tax" label="global.Tax">
                    @foreach (get_intitules_by_group([['slug', '=', 'taux-tvas']]) as $intitule)
                        <option value="{{ $intitule->valeur }}">{{ $intitule->libelle }}</option>
                    @endforeach
                </x-form-group.select>
            </x-col>

            <x-col width="3">
                <x-form-group.input id="mobile" label="global.Mobile" />
            </x-col>

            <x-col width="3">
                <div class="form-group">
                    <label>@lang('global.Date')</label>
                    <div class="input-group">
                        <button type="button" class="btn btn-default flex-grow-1 text-left" id="daterange-btn">
                            <i class="far fa-calendar-alt"></i> @lang('global.Period')
                            <i lass="fas fa-caret-down float-right"></i>
                        </button>
                    </div>
                </div>
                <input type="hidden" name="date" id="date" />
            </x-col>
        </x-row>
    </x-filter>

    <x-row>
        <x-col>
            <x-card>
                <x-table id="invoices">
                    <thead>
                        <tr>
                            <th>@lang('global.Id') #</th>
                            <th>@lang('global.Ref Doc')</th>
                            <th>@lang('global.Doc Type')</th>
                            <th>@lang('global.Date Declaration')</th>
                            <th>@lang('global.Taxed Amount')</th>
                            <th nowrap>@lang('global.Rate%')</th>
                            <th>@lang('global.Amount HT')</th>
                            <th>@lang('global.Action')</th>
                        </tr>
                    </thead>

                    <tbody></tbody>
                    <tfoot>
                        <th colspan="4" class="text-left">@lang('global.Total')</th>
                        <th class="text-center">&nbsp;</th>
                        <th class="text-center">&nbsp;</th>
                        <th class="text-center">&nbsp;</th>
                        <th class="text-center">&nbsp;</th>
                    </tfoot>
                </x-table>
            </x-card>
        </x-col>
    </x-row>

@endsection


@push('js')
    <script>
        $(function () {
            window.dataTable = $('#invoices').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                    url: '{{ route('taxes.index') }}',
                    data: d => {

                        if( $('#tax').val() ) { d.tax = $('#tax').val(); }
                        if( $('#date').val() ) { d.date = $('#date').val(); }
                        if( $('#mobile').val() ) { d.mobile = $('#mobile').val(); }
                        if( $('#annuaire_id').val() ) { d.annuaire_id = $('#annuaire_id').val(); }
                    }
                },
                order: [[0, "desc"]],
                columns: [
                    {data: 'id'},
                    {data: 'ref_doc'},
                    {data: 'title_doc'},
                    {data: 'date_sign'},
                    {data: 'taxed_amount', className: 'text-center'},
                    {data: 'tax', width: '30px', className: 'text-center'},
                    {data: 'amount', className: 'text-center'},
                    {data: 'action', orderable: false, className: 'text-center'}
                ],
                drawCallback: (settings) => {

                    $('body #invoices span').tooltip();
                },
                footerCallback: function (row, data, start, end, display) {
                    var api = this.api();

                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };

                    // Total over this page
                    pageTotal = api
                        .column(6, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    let taxTotal = 0;
                    let taxedAmount = 0;

                    for(i in data) {

                        const tx = $(data[i].tax);
                        taxedAmount += +(data[0].taxed_amount)

                        tx.each(function() {

                            taxTotal+= +($(this).attr('title'));
                        });
                    }

                    // Update footer
                    $(api.column(4).footer()).html( `<h4><span class="badge badge-primary">${taxedAmount}</span></h4>` );
                    $(api.column(5).footer()).html( `<h4><span class="badge badge-primary">${taxTotal}</span></h4>` );
                    $(api.column(6).footer()).html( `<h4><span class="badge badge-primary">${pageTotal}</span></h4>` );
                },
            });
        });

        $('#tax, #date, #mobile, #annuaire_id').on('change input', function () {

            window.dataTable.ajax.reload();
        });

        //Date range as a button
        $('#daterange-btn').daterangepicker(
        {
            ranges   : {
                '@lang("global.Today")'       : [moment(), moment()],
                '@lang("global.Yesterday")'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '@lang("global.Last 7 Days")' : [moment().subtract(6, 'days'), moment()],
                '@lang("global.Last 30 Days")': [moment().subtract(29, 'days'), moment()],
                '@lang("global.This Month")'  : [moment().startOf('month'), moment().endOf('month')],
                '@lang("global.Last Month")'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            /* startDate: moment().subtract(29, 'days'),
            endDate  : moment() */
        },
        function (start, end) {

            $('#daterange-btn').html( "<span>"+start.format('DD-MM-YYYY') + ' ~ ' + end.format('DD-MM-YYYY')+'&nbsp; </span><i class="fas fa-caret-down"></i>');

            const daterange = start.format('MMMM D, YYYY') + '-' + end.format('MMMM D, YYYY');
            $('#date').val( daterange ).trigger('change');
        }
        )
    </script>
@endpush