@php
  $account_id = null;
  if(!empty($accounts)){
    $account_id = array_key_first($accounts);
  }
@endphp
<div class="modal-dialog" role="document">
  <div class="modal-content">

    {!! Form::open(['url' => action([\App\Http\Controllers\TransactionPaymentController::class, 'postPayContactDue']), 'method' => 'post', 'id' => 'pay_contact_due_form', 'files' => true ]) !!}
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">{{ !empty($pay_type) ? $pay_type :  __( 'purchase.add_payment' ) }}</h4>
    </div>

    <div class="modal-body">
        <div class="row payment_row">
            <div class="col-md-7">
                <div class="form-group">
                    {!! Form::label("contact_id" , __('lang.'. $type) . ':*') !!}
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fas fa-user"></i>
                        </span>
                        {!! Form::select("contact_id", $contacts, null, ['class' => 'form-control select2', 'id' => 'contact_id', 'required', 'style' => 'width:100%;']) !!}
                    </div>
                </div>
            </div>

            <div class="col-md-5">
                <div class="well">
                    <input type="hidden" class="total_debt" value="0">
                    <strong>@lang('lang.total_debt'): </strong><span class="total_debt" data-currency_symbol="true">{{ 0 }}</span><br>
                    <strong>@lang('lang.paid'): </strong><span class="paid" data-currency_symbol="true">{{ 0 }}</span><br>
                    <strong>@lang('lang.remaining_amount'): </strong><span class="remaining_amount" data-currency_symbol="true">0</span><br>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label('location_id', __( 'sale.location' ) . ':*') !!}
                    <div class="input-group">
                        {!! Form::select('location_id', $business_locations, auth()->user()->location_id??null, ['class' => 'form-control select2', 'required', 'style' => 'width: 275px !important;']); !!}
                    </div>
                </div>
            </div>

            @if(isset($users) && !empty($users))
            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label("user_id" , __('lang.users') . ':') !!}
                    <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fas fa-user"></i>
                    </span>
                    {!! Form::select("user_id", $users, null, ['class' => 'form-control select2', 'id' => 'user_id', 'required', 'style' => 'width:100%;']) !!}
                    </div>
                </div>
            </div>
            @endif

            <div class="clearfix"></div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label("method" , __('purchase.payment_method') . ':*') !!}
                    <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fas fa-money-bill-alt"></i>
                    </span>
                    {!! Form::select("method", $payment_types, null, ['class' => 'form-control select2 payment_types_dropdown', 'required', 'style' => 'width:100%;']) !!}
                    </div>
                </div>
            </div>

            <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("paid_on" , __('lang_v1.paid_on') . ':*') !!}
                <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
                {!! Form::text('paid_on', @format_datetime($payment_line->paid_on), ['class' => 'form-control', 'readonly', 'required']) !!}
                </div>
            </div>
            </div>

            <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("amount" , __('sale.amount') . ':*') !!}
                <div class="input-group">
                <span class="input-group-addon">
                    <i class="fas fa-money-bill-alt"></i>
                </span>
                {!! Form::text("amount", @num_format($payment_line->amount), ['class' => 'form-control input_number payment_amount', 'id' => 'amount', 'required', 'placeholder' => 'Amount', 'data-rule-max-value' => $payment_line->amount, 'data-msg-max-value' => __('lang_v1.max_amount_to_be_paid_is', ['amount' => $amount_formated])]) !!}
                </div>
            </div>
            </div>

            @if(!empty($accounts))
            <div class="col-md-6">
                <div class="form-group">
                {!! Form::label("account_id" , __('lang_v1.payment_account') . ':') !!}
                <div class="input-group">
                    <span class="input-group-addon">
                    <i class="fas fa-money-bill-alt"></i>
                    </span>
                    {!! Form::select("account_id", $accounts, $account_id , ['class' => 'form-control select2', 'id' => "", 'style' => 'width:100%;']) !!}
                </div>
                </div>
            </div>
            @endif

            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('document', __('purchase.attach_document') . ':') !!}
                    {!! Form::file('document', ['accept' => implode(',', array_keys(config('constants.document_upload_mimes_types')))]) !!}
                    <p class="help-block">
                    @includeIf('components.document_help_text')</p>
                </div>
            </div>

            <div class="clearfix"></div>
            <div class="col-md-12">
                <div class="form-group">
                    {!! Form::label("note", __('lang_v1.payment_note') . ':') !!}
                    {!! Form::textarea("note", null, ['class' => 'form-control', 'rows' => 3]) !!}
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
      <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white">@lang( 'messages.save' )</button>
      <button type="button" class="tw-dw-btn tw-dw-btn-neutral tw-text-white" data-dismiss="modal">@lang( 'messages.close' )</button>
    </div>

    {!! Form::close() !!}

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

<script type="text/javascript">
    $(document).ready(function() {
        $('#amount').on('input', function() {
            let total = $('.total_debt').val();
            let paid = $(this).val();
            let remaining_amount =  total - paid;

            $('.paid').text(paid);
            $('.remaining_amount').text(total - paid)
        });
    
        $('#contact_id').on('change', function(){
            var contact_id = $(this).val();
            var type = '{{ $type }}' == 'supplier' ? 'purchase' : 'sell' ;
    
            $('.total_debt').text(0);
            $('.paid').text(0);
            $('.remaining_amount').text(0);
            $('#amount').val(0);
    
            $.ajax({
                url: "{{ url('/payments/pay-contact-due/') }}/"+contact_id, // Route must be POST
                type: 'GET',
                data: {
                    'type': type,
                    'payment_type': 'voucher',
                },
                success: function (data) {
                    var location_id = data.location_id;
                    var sales_person_id = data.sales_person_id;
                    if(sales_person_id <= 0){
                        sales_person_id = '{{ auth()->id() }}';
                    }
                    if(location_id <= 0){
                        location_id = '{{ auth()->user()->location_id }}';
                    }

                    $('#location_id').val(location_id).trigger('change');
                    $('#user_id').val(sales_person_id).trigger('change');
                    $('.total_debt').text(data.amount);
                    $('.total_debt').val(data.amount);
                    $('.paid').text(0);
                    $('.remaining_amount').text(data.amount);
                    $('#amount').val(data.amount);
                },
            });
        })
    });


</script>