@extends('admin.root')
@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{url('/')}}/admin/dashboard">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Penerbit</a></li>
        <li class="breadcrumb-item active" aria-current="page">Daftar Penerbit Baru</li>
    </ol>
</nav>
@endsection
@section('content')
<div class="content-wrapper">
    <div class="content">

        @if($invoice->invoice_status == 9 || $invoice->invoice_status == 10 || $invoice->invoice_status == 10)
        <form id="main-form" novalidate="novalidate">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <section class="card">
                <div class="card-body">
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2">No Invoice</label>
                        <div class="col-sm-9">
                            <input type="text" name="invoice_id" class="form-control" placeholder="eg.: John Doe" value="{{$invoice->no}}" readonly required>
                        </div>
                    </div>
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2">Nama Lengkap</label>
                        <div class="col-sm-9">
                            <input type="text" name="namalengkap" class="form-control" placeholder="eg.: John Doe" value="{{$invoice->namalengkap}}" readonly>
                        </div>
                    </div>
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2">Konfimasi</label>
                        <div class="col-sm-9">
                            <select name="invoice_status" class="form-control" required>
                                @foreach($status as $s)
                                <option value="{{$s->id}}" @if($s->id == $invoice->invoice_status) selected @endif>{{$s->nama_status}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2">Bukti Pembayaran</label>
                        <div class="col-sm-9">
                            <a style="margin-top:10px;" href="{{url('/'.$invoice->invoice_bukti_pembayaran)}}" target="_blank">DOWNLOAD BUKTI PEMBAYARAN</a>
                        </div>
                    </div>
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2">Catatan</label>
                        <div class="col-sm-9">
                            <input type="text" name="invoice_note" class="form-control" placeholder="eg.: Catatan" value="">
                        </div>
                    </div>
                    <div class="form-group row has-error">
                        <label class="col-sm-3 control-label text-sm-left pt-2"></label>
                        <div class="col-sm-9">
                            <button onclick="_submitData()" class="btn btn-primary">Konfirmasi</button>
                        </div>
                    </div>
                </div>
            </section>
        </form>
        @endif
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-12 text-center mb-4">
                        <h4 class="text-primary mb-2 mt-md-2">Invoice No. #{{$invoice->invoice_id}}</h4>
                        <span class="text-muted">Masukkan Nomor Invoice Pada Berita Transfer</span>
                    </div>
                </div>
                <div class="d-md-flex flex-md-wrap">
                    <div class="mb-4 mb-md-2">
                        <span class="text-muted">Invoice Untuk:</span>
                        <ul class="list list-unstyled mb-0">
                            <li>
                                <h5 class="my-2">{{ $invoice->namalengkap }}</h5>
                            </li>
                            <li>{{ $invoice->email }} / {{ $invoice->telepon }}</li>
                        </ul>
                    </div>

                    <div class="mb-2 ml-auto">
                        <span class="text-muted">Detail Pembayaran:</span>

                        <div class="d-flex flex-wrap wmin-md-400">
                            <ul class="list list-unstyled mb-0">
                                <li>
                                    <h5 class="my-2">Total Tagihan</h5>
                                </li>
                                <li>Nama Bank</li>
                                <li>Nomor Rekening</li>
                                <li>Atas Nama</li>
                            </ul>

                            <ul class="list list-unstyled text-right mb-0 ml-auto">
                                <li>
                                    <h5 class="font-weight-semibold my-2">Rp{{ number_format($invoice->invoice_total, 0, ',', '.') }}</h5>
                                </li>
                                <li><span class="font-weight-semibold">Bank BRI</span></li>
                                <li> +62 812 8981 5332</li>
                                <li>Perhimpunan Periset Indonesia</li>
                            </ul>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-lg">
                            <thead>
                                <tr>
                                    <th>Deskripsi</th>
                                    <th class="text-right">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Pengajuan Akreditasi </td>
                                    <td class="text-right"><span class="font-weight-semibold">Rp{{ number_format($invoice->invoice_total, 0, ',', '.') }}</span></td>
                                </tr>
                            </tbody>
                            <tr>
                                <td><span class="font-weight-bold">Total Tagihan</span></td>
                                <td class="text-right"><span class="font-weight-bold">Rp{{ number_format($invoice->invoice_total, 0, ',', '.') }}</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            @if($invoice->invoice_status == 11)
            <img style="width: 150px; position: absolute; right: 0; left: 0; margin: auto; top:150px" src="{{ url('assets/admin/lunas.png') }}" />
            @endif
        </div>
    </div>

</div>
</div>

<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="modalTitle">Informasi</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>
                <input type="hidden" id="pesan-flag">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('styles')
<style>
    [data-href] {
        cursor: pointer;
    }
</style>
@endsection
@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $("#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_status: {
                    required: true
                },
                invoice_status: {
                    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();
            var img = "{{url('assets/images/load.gif')}}"

            $.ajax({
                url: '{{ url("/") }}/admin/invoice/konfirmasi',
                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 + '/admin/invoice/';
                    }

                    $.unblockUI();
                },
                error: function(xhr) {
                    // $('#spin').unblock();
                    $.unblockUI();
                },
            });

        } else {}
    }
</script>
@endsection