@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.payments.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.addNew')</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/switchery/dist/switchery.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datetime-picker/datetimepicker.css') }}">
@endpush

@section('content')

<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading"> Payment Invoice Tenant </div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!! Form::open(['id'=>'createPayment','class'=>'ajax-form','method'=>'POST']) !!}
                    <div class="form-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th colspan="4" class="text-center" style="font-weight: 800;color: #000;">Tagihan Invoice Belum Dibayar</th>
                                        </tr>
                                        <tr>
                                            <th>Invoice</th>
                                            <th>Tanggal</th>
                                            <th>Tagihan</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="4">Total</td>
                                                <td>0</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <!--/span-->

                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label>@lang('modules.payments.amount')</label>
                                    <input type="number" name="amount" id="amount" value="{{ $total_invoice }}" class="form-control">
                                    <span class="help-block" id="message_amount" style="color:red;display:none"> </span>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label>@lang('modules.payments.paymentGateway')</label>
                                    <input type="text" name="gateway" id="gateway" class="form-control">
                                    <span class="help-block"> Bank Transfer, Cash or others.</span>
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label>@lang('modules.payments.transactionId')</label>
                                    <input type="text" name="transaction_id" id="transaction_id" class="form-control">
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">@lang('modules.payments.paidOn')</label>
                                    <input type="text" class="form-control" name="paid_on" id="paid_on" value="{{ Carbon\Carbon::now($global->timezone)->format('d/m/Y H:i') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">@lang('modules.payments.remark')</label>
                                    <textarea class="form-control" name="remarks" id="remark"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--/span-->
                    </div>
                    <div class="form-actions">
                        <button type="submit" id="save-form-2" class="btn btn-success"><i class="fa fa-check"></i>
                            @lang('app.save')
                        </button>

                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>    <!-- .row -->
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/switchery/dist/switchery.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/datetime-picker/datetimepicker.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var tenant_id = '';
    var total_invoice = '0';
    $('#amount').on('keyup', function(){
        var x = $(this).val()
        if (parseInt(total_invoice) == parseInt(x)) {
            $('#save-form-2').attr('disabled',false)
            $('#message_amount').hide().text('')
        }else{
            $('#message_amount').show().text('Minimum Payment ' + total_invoice)
            $('#save-form-2').attr('disabled',true)
        }
        console.log(x)
    })
    // Switchery
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    $('.js-switch').each(function() {
    new Switchery($(this)[0], $(this).data());
    });
    $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    jQuery('#paid_on').datetimepicker({
    format: 'D/M/Y HH:mm',
    });
    $('#createPayment').on('submit', function (e) {
        e.preventDefault();
        $('#save-form-2').attr('disabled',true)
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/admin/finance/payments/ajaxPostPaymentTenant/' + tenant_id,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $('#save-form-2').attr('disabled',false)
                if (data.status == 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: data.message,
                        allowOutsideClick: false
                    }).then((result) => {
                        window.location.href = data.redirect
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
</script>
@endpush