@if(backpack_user()->can('storeQuotationInquiry', new \App\Models\Quotation\QuotationInquiry()))
    <div class="col-12">
        <a style="color:white;" id="popup_receipt_create" class="btn btn-default float-right mb-2 {{$field['class']}}">{{$field['button_text']}}</a>
    </div>
@endif

@php
    use \App\Models\Quotation\Invoice;
    $invoices = CRUD::getCurrentEntry()->invoices()->whereIn("status", [Invoice::STATUS_APPROVED, Invoice::STATUS_PAID])->get();
@endphp

@push('after_scripts')
    <script>
        $(document).ready(function () {
            $('#popup_receipt_create').click(function () {
                createPopupReceipt();
            });

            function createPopupReceipt(){
                let popup_receipt_create_is_loading = false;

                let message = "";
                message += '<div class="receipt_store_root_element">';
                message += '    <form class="receipt_submit_form" data-url="{{ route('admin.receipt.store') }}">';
                message += '        <input type="hidden" name="quotation_inquiry_id" value="{{ CRUD::getCurrentEntry()->getKey() }}">';
                message += '        @method("PUT")';
                message += '        <div class="col-12 mb-2 form-group receipt_create_popup-wapper">';
                message += '            <label style="width: 20%;">{{ trans("backpack::receipt.label.select").trans("backpack::receipt.label.invoice_id") }}<sup>*</sup></label>';
                message += '            <select  style="width: 78%; display: inline-block;" class="form-control" id="invoice_id" name="invoice_id">';
                @foreach($invoices as $invoice)
                    message += '            <option value="{{$invoice->id}}" data-invoice-name="{{$invoice->name}}" data-invoice-custom-code="{{$invoice->custom_code}}" data-amount="{{$invoice->amount}}" data-difference_amount="{{$invoice->difference_amount}}">{{$invoice->cruddisplay}}</option>';
                @endforeach
                    message += '         </select>';
                message += '        </div>';

                message += '        <div class="col-12 mb-2 form-group">';
                message += '            <label style="width: 20%;">{{ trans("backpack::receipt.label.account_number") }}<sup>*</sup></label>';
                message += '            <input id="accounting_record_number" style="width: 78%; display: inline-block;" class="col-9 d-inline form-control" type="text" name="accounting_record_number" />';
                message += '        </div>';

                message += '        <div class="col-12 mb-2 form-group">';
                message += '            <label style="width: 20%;">{{ trans("backpack::receipt.label.amount") }}<sup>*</sup></label>';
                message += '            <input id="invoice_amount" style="width: 78%; display: inline-block;" class="col-9 d-inline form-control" type="text" name="amount" value="0" />';
                message += '        </div>';

                message += '        <div id="receipt_file_group" class="col-12 mb-2 form-group">';
                message += '            <label style="width: 20%;">{{ trans("backpack::receipt.label.select_file") }}</label>';
                message += '            <input style="width: 78%; display: none;" type="file" id="receipt_file" name="receipt_file" value=""/>';
                message += '            <span id="upload_file_name"></span>';
                message += '            <i id="receipt_file_icon" class="la la-upload"></i>';
                message += '        </div>';
                message += '        <div class="col-12" style="margin-bottom: 15px;"><span >請在「會計系統」建立收據後填寫以上欄位以完成報價工作流程。</span></div>';

                message += '        <div class="d-flex justify-content-center">';
                message += '            <div class="btn btn-default btn-normal-save">新增收據 <i class="las la-spinner la-spin" style="color: #FFFFFF; margin-left: 5px;"></i></div>';
                message += '        </div>';
                message += '    </from>';
                message += '</div>';

                let popup_receipt_create = bootbox.dialog({
                    title: "{{$field['button_text']}}",
                    message: message,
                    size: 'xl',
                    onEscape: true,
                    backdrop: true,
                });

                popup_receipt_create.init(function () {
                    popup_receipt_create_is_loading = false;

                    popup_receipt_create.removeAttr("tabindex");

                    let select2_invoice_id = $(".receipt_store_root_element #invoice_id").select2({
                        theme: "bootstrap",
                        language: {
                            noResults: function () {
                                return "未有任何進行中的發票單"
                            }
                        }
                    }).after(function(){
                        $('.receipt_create_popup-wapper .select2-container').css('display', 'inline-block');
                        let amount = popup_receipt_create.find('#invoice_id option:selected').data('amount');
                        popup_receipt_create.find('#invoice_amount').val(amount);
                    });

                    select2_invoice_id.change(function(){
                        let amount = popup_receipt_create.find('#invoice_id option:selected').data('amount');
                        popup_receipt_create.find('#invoice_amount').val(amount);
                    });

                    $(".receipt_store_root_element #receipt_file_icon,.receipt_store_root_element #upload_file_name").click(function () {
                        $('#receipt_file').click();
                    });

                    $('#receipt_file').change(function(){
                        let file_name = $(this).val().replace(/C:\\fakepath\\/i, '')
                        $('#upload_file_name').text(file_name);
                    });

                    $(".receipt_store_root_element ").find('.la-spinner').hide();
                    $(".receipt_store_root_element").on('click','.btn-normal-save',function () {
                        let new_difference_amount = popup_receipt_create.find('#invoice_id option:selected').data('difference_amount') - popup_receipt_create.find('#invoice_amount').val();
                        let is_can_submit = new_difference_amount >= 0;

                        let invoice_amount = popup_receipt_create.find('#invoice_amount').val();
                        let invoice_name = popup_receipt_create.find('#invoice_id option:selected').data('invoice-name');
                        let invoice_custom_code = popup_receipt_create.find('#invoice_id option:selected').data('invoice-custom-code');
                        let submit_form = new FormData($(".receipt_store_root_element").find('form')[0]);
                        let receipt_submit_form_url = $(".receipt_store_root_element .receipt_submit_form").data("url");
                        alertInputInvoiceAmount(invoice_amount,invoice_name,invoice_custom_code,submit_form,receipt_submit_form_url,is_can_submit)
                    });

                    function alertInputInvoiceAmount(invoice_amount,invoice_name,invoice_custom_code,submit_form,receipt_submit_form_url,is_can_submit){

                        let message = '';

                        if(is_can_submit){
                            message += '<p>您確定已收到關於 ' + invoice_name + '#' + invoice_custom_code + ' 總共HK$' + invoice_amount + '的金額嗎？</p>';
                        }else{
                            message += '<p>您輸入的HK$'+invoice_amount+'金額已超出發票的總金額，請確認是否繼續新增此收據紀錄？</p>';
                        }
                        message += '<p>請小心核對已收款金額，因為在您確認新增收據後，系統會透過電郵通知負責老師已收到的金額。</p>';

                        bootbox.hideAll();
                        let alert_input_invoice_amount = bootbox.dialog({
                            title: '建立收據',
                            message: message,
                            size: 'xl',
                            onEscape: true,
                            backdrop: true,
                            onShow:function(){

                            },
                            buttons:{
                                no: {
                                    label: '否',
                                    className: 'btn btn-normal-cancel bootbox-cancel',
                                    callback: function(){
                                        bootbox.hideAll();
                                    }
                                },
                                yes:{
                                    label: '是',
                                    className: 'btn btn-normal-comfirm bootbox-accept',
                                    callback: function(){
                                        if(is_can_submit){
                                            submitCreateForm(receipt_submit_form_url,submit_form)

                                            bootbox.hideAll();
                                        }else{
                                            is_can_submit = true;
                                            bootbox.hideAll();

                                            alertInputInvoiceAmount(invoice_amount,invoice_name,invoice_custom_code,submit_form,receipt_submit_form_url,is_can_submit);
                                        }
                                    }
                                }
                            }
                        });
                    }

                    function submitCreateForm(receipt_submit_form_url,submit_form){
                        if (popup_receipt_create_is_loading) {
                            return;
                        }
                        popup_receipt_create_is_loading = true;
                        @include("backpack::crud.partials.bootbox_loading")

                        popup_receipt_create.find(".receipt_store_root_element").find('.la-spinner').show();

                        $.ajax({
                            url: receipt_submit_form_url,
                            type: 'POST',
                            headers: {
                                "Accept": "application/json; charset=utf-8",
                            },

                            // Form data
                            data: submit_form,

                            cache: false,
                            contentType: false,
                            processData: false,

                            // Custom XMLHttpRequest
                            xhr: function () {
                                var myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload) {
                                    // For handling the progress of the upload
                                    myXhr.upload.addEventListener('progress', function (e) {
                                        if (e.lengthComputable) {
                                            $('progress').attr({
                                                value: e.loaded,
                                                max: e.total,
                                            });
                                        }
                                    }, false);
                                }
                                return myXhr;
                            },
                            success: function (result) {
                                window.location.reload();
                            },
                            error: function (response) {
                                setTimeout(function () {
                                    bootbox.hideAll();
                                }, 550);

                                popup_receipt_create.find(".receipt_store_root_element").find('.la-spinner').hide();
                                popup_receipt_create_is_loading = false;

                                $.each(JSON.parse(response.responseText)['errors'], function (key, error) {
                                    new Noty({
                                        text: error,
                                        type: 'error'
                                    }).show();
                                });
                            }
                        });
                    }
                })
            }
        });
    </script>
@endpush