@extends('root')
@section('content')
<section class="bg-05 page-hero-section division">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="hero-txt white-color">
                    <h3 class="h3-xs">Invoice Pengajuan Akreditasi</h3>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="categories-section division mt-30">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <!-- <div class="col-md-6">
                        <h4 class="h4-xs">Upload Bukti Pembayaran</h4>
                    </div> -->
                    <div class="col-md-12" style="overflow: auto;">
                        {!! Form::open(['files' => true, 'id' => 'main-form']) !!}
                        <div id="input-name" class="col-md-12 form-group row">
                            <label class="col-md-4">Invoice No*</label>
                            <div class="col-md-4">
                                <input name="invoice_id" type="text" class="form-control" value="{{$invoice_id}}" readonly required>
                            </div>
                        </div>
                        <div id="input-name" class="col-md-12 form-group row">
                            <label class="col-md-4">Pilih Bukti Transfer*</label>
                            <div class="col-md-4">
                                {!! Form::file('invoice_bukti_pembayaran',['accept'=>'application/pdf, image/*']) !!}
                                {!! $errors->first('invoice_bukti_pembayaran', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>
                        <hr>
                        <div id="input-name" class="col-md-12 form-group row">
                            <label class="col-md-4"></label>
                            <div class="col-md-4 form-btn mt-20 text-left">
                                <a href="{{url('/penerbit/invoice')}}" class="btn btn-md btn-blue tra-black-hover submit">Kembali</a>
                                <button type="button" id="submit-form" class="btn btn-md btn-rose tra-black-hover submit">Upload</button>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>

                </div>
            </div>
        </div>
</section>

<div class="modal fade" id="warningerror" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Peringatan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="pesan"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
<script type="text/javascript" src="{{ url('assets/global/js/validate.min.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/global/js/blockui.min.js') }}"></script>
<script type="text/javascript">
    var invoice_bukti_pembayaran = null;

    $(document).ready(function() {
        $("input[name=invoice_bukti_pembayaran]").on("change", function() {
            getBase64(this, 'invoice_bukti_pembayaran');
        });
        $("#submit-form").on("click", function() {
            $("input[name=invoice_bukti_pembayaran]").attr("required", true);
            submitData();

        });

        $(".btn-close").on("click", function() {
            redirect();

        });

        $("#main-form").validate({
            errorClass: 'validation-error-label'
            , successClass: 'validation-valid-label'
            , highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
                $('#panel-message').html('');
            }
            , unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
                $('#panel-message').html('');
            }
            , errorPlacement: function(error, element) {
                if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                    if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                        error.appendTo(element.parent().parent().parent().parent());
                    } else {
                        error.appendTo(element.parent().parent().parent().parent().parent());
                    }
                }

                // Unstyled checkboxes, radios
                else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                    error.appendTo(element.parent().parent().parent());
                }

                // Input with icons and Select2
                else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                }

                // Inline checkboxes, radios
                else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent());
                } else if (element.parents('label').hasClass('')) {
                    //error.appendTo(element.remove());
                    element.remove();
                }

                // Input group, styled file input
                else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else if (element.parent().hasClass('bootstrap-select')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            }
            , validClass: "validation-valid-label"
            , rules: {
                invoice_bukti_pembayaran: {
                    required: true
                }
                , invoice_id: {
                    required: true
                }
            , }
            , messages: {
                invoice_bukti_pembayaran: {
                    required: "Bukti Pembayaran Harus Diisi"
                }
                , invoice_id: {
                    required: "Nomor Invoice Harus Diisi"
                }
            }
            , submitHandler: function(form) {}
        });
    });

    function submitData() {
        if ($("#main-form").valid()) {
            var fd = $("#main-form").serializeArray();
            fd.push({
                name: 'invoice_bukti_pembayaran_base64'
                , value: invoice_bukti_pembayaran
            });
            var img = "{{url('assets/images/load.gif')}}"

            $.ajax({
                url: '{{ url("/") }}/penerbit/invoice/simpan-bukti-pembayaran'
                , type: "POST"
                , data: fd
                , beforeSend: function() {
                    $.blockUI({
                        message: 'Memproses data Anda...'
                    });
                }
                , success: function(json) {
                    $("#pesan-flag").val(json.response.Status);

                    if (json.response.Status == 1) {
                        $("#warningerror").modal('show');
                        $("#pesan").html(json.response.Message);
                        $.unblockUI();
                    } else {
                        $("#warningerror").modal('show');
                        $("#pesan").html(json.response.Message);
                        $('#main-form')[0].reset();
                        $.unblockUI();
                        window.location.href = baseurl + '/penerbit/invoice';
                    }

                    $.unblockUI();
                }
                , error: function(xhr) {
                    $.unblockUI();
                }
            , });

        } else {}
    }

    function redirect() {
        if ($("pesan-flag").val() == 1)
            window.location = "user-invoice";
    }

    function getBase64(file, target) {
        var reader = new FileReader();
        reader.readAsDataURL(file.files[0]);
        reader.onload = function() {
            if (target == 'invoice_bukti_pembayaran') {
                invoice_bukti_pembayaran = reader.result.replace(/^[^,]*,/, '');
            }
        };
        reader.onerror = function(error) {};
    }

</script>
@endpush