@extends('layouts.app')
@section('title', __('installments::installment.installments'))

@section('content')

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="page-heading">
                    <h2 class="page-title">
                        <i class="page-icon bi bi-card-checklist"></i>
                        @lang('installments::installment.installments')
                    </h2>

                    <div class="page-actions">
                        @can('installments.create')
                            <button class="btn btn-primary btn-modal" data-backdrop="false" data-href="{{ action('Modules\Installments\Http\Controllers\InstallmentsController@create') }}" data-container=".installment_modal">
                                <i class="fa fa-plus"></i>
                                @lang('messages.add')
                            </button>
                        @endcan
                        <a href="#datatableFilters" data-toggle="collapse" class="btn btn-default">
                            <i class="fa fa-filter" aria-hidden="true"></i>
                            @lang('report.filters')
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                @component('components.datatable')
                    @slot('filters')
                        @if (auth()->user()->can('installments.view_all'))
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                                    {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    {!! Form::label('added_by', __('lang_v1.added_by') . ':') !!}
                                    {!! Form::select('added_by', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                        @endif
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('installments_customer_id',  __('contact.customer') . ':') !!}
                                {!! Form::select('installments_customer_id', $customers, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('installments_date_range', __('report.date_range') . ':') !!}
                                {!! Form::text('date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'id' => 'installments_date_range', 'readonly']) !!}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('installments_payment_status', __('installment.payment_status') . ':') !!}
                                {!! Form::select('installments_payment_status', ['paid' => __('lang_v1.paid'), 'due' => __('lang_v1.due'), 'partial' => __('lang_v1.partial')], null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
                            </div>
                        </div>
                    @endslot

                    @slot('table')
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" style="width:100%" id="installments_table">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.action')</th>
                                        <th>@lang('installments::installment.transaction_id')</th>
                                        <th>@lang('installments::installment.conatct_name')</th>
                                        <th>@lang('installments::installment.mobile')</th>
                                        <th>@lang('business.location')</th>
                                        <th>@lang('installments::installment.payment_status')</th>
                                        <th>@lang('installments::installment.final_total')</th>
                                        <th>@lang('installments::installment.paid_amounts')</th>
                                        <th>@lang('installments::installment.total_remaining')</th>
                                        <th>@lang('installments::installment.total_installments')</th>
                                        <th>@lang('installments::installment.paid_installments')</th>
                                        <th>@lang('installments::installment.date')</th>
                                        <th>@lang('lang_v1.added_by')</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr class="bg-gray text-center footer-total">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="footer_payment_status_count"></td>
                                        <td class="footer_installment_total"></td>
                                        <td class="footer_paid_amounts_total"></td>
                                        <td class="footer_total_remaining_total"></td>
                                        <td class="footer_total_installments"></td>
                                        <td class="footer_paid_installments"></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    @endslot
                @endcomponent
            </div>
        </div>

    </section>

    <div class="modal fade installment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

    <div class="modal fade installment_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

    <div class="modal fade edit_installment_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>
@stop
@section('javascript')
    <script src="{{ asset('modules/installments/js/lib/repeater.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('modules/installments/js/payment.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('modules/installments/js/installment.js?v=' . $asset_v) }}"></script>
@endsection