@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
<div class="btn btn-secondary rounded-pill" id="add-vendor" type="button"> <i class="las la-plus-circle"></i> add </div>


@include('crud::fields.inc.wrapper_end')
@push('crud_fields_scripts')
    <div class="modal" tabindex="-1" role="dialog" id="modal-vendor">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Project Supplier</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body" id="form-add-project-supplier">
                    <form>
                        <div class="form-group required">
                            <label>Category</label>
                            <select name="category_id" class="form-control"id="category_id"></select>
                        </div>
                        <div class="form-group required">
                            <label>Vendor</label>
                            <select name="vendor_id" id="vendor_id" class="form-control"></select>
                        </div>
                        <div class="form-group">
                            <label>Vendor Name(free text)</label>
                            <input type="text" name="vendor_name" id="vendor_name" class="form-control">
                        </div>
                        <div class="alert alert-warning mb-0">
                            You must fill in either <b>vendor for vendor approved</b> or <b>vendor name for vendor
                                non-approved</b>.
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btn-save-project-supplier">Save</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var project = null;
        $(document).on('click', '#add-vendor', function(e) {

            project = $("[name='project_id']").select2('data');
            //IF NOT SELECTED PROJECT
            if (isEmpty(project)) {
                console.log('empty project')
                new Noty({
                    text: 'Choose project first',
                    type: "error"
                }).show();
            }

            $(`#modal-vendor`).appendTo("body").modal('show');
            $('#modal-vendor').modal('show');
            $("#vendor_id").select2({
                theme: "bootstrap",
                placeholder: 'Select vendor..',
                allowClear: true,
            })

            let urlCategory = "{{ route('ajax.category.index') }}";
            $("#category_id").select2({
                theme: "bootstrap",
                placeholder: 'Select an category..',
                allowClear: true,
                ajax: {
                    url: urlCategory,
                    dataType: 'json',
                    delay: 200,
                    cache: true,
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1
                        }
                    },
                    processResults: function(data, params) {

                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    data: item,
                                    text: item.name,
                                    id: item.id
                                }
                            }),
                            pagination: {
                                more: data.next_page_url
                            }
                        }
                    },
                }
            })

            $("#category_id").on("select2:select", function(e) {
                //SET VENDOR TO NULL IF PROJECT SELECTED
                $("#vendor_id").val(null).trigger("change");
                let category = e.params.data.data;
                let urlSOW = "{{ route('ajax.category.index') }}";
                //SOW INTIAL SELECT2
                let urlVendor = "{{ route('ajax.vendor.index') }}";
                if (!isEmpty(category)) {
                    urlVendor += `?category_id=${category.id}&project_id=${project[0].id}`;
                    $("#vendor_id").select2({
                        theme: "bootstrap",
                        placeholder: 'Select vendor..',
                        allowClear: true,
                        ajax: {
                            url: urlVendor,
                            dataType: 'json',
                            delay: 200,
                            cache: true,
                            data: function(params) {
                                return {
                                    q: params.term || '',
                                    page: params.page || 1
                                }
                            },
                            processResults: function(data, params) {
                                return {
                                    results: $.map(data.data, function(item) {
                                        return {
                                            data: item,
                                            text: item.name,
                                            id: item.id
                                        }
                                    }),
                                    pagination: {
                                        more: data.next_page_url
                                    }
                                }
                            },
                        }
                    })
                }

            });




            $("#category_id").on('select2:unselecting', function(e) {
                $("#vendor_id").val(null).trigger("change");
                $("#vendor_id").select2({
                    theme: "bootstrap",
                    placeholder: 'Select vendor..',
                    allowClear: true,
                })
            });

        });

        //SAVE VENDOR TO PROJECT VENDOR
        $(document).on('click', '#btn-save-project-supplier', function(e) {
            $('.text-danger').empty();
            e.preventDefault();
            let findForm = $("#form-add-project-supplier");
            let url = "{{ route('supplier-invoice.add-supplier') }}";
            let params = {
                category_id: !isEmpty($("#category_id").val()) ? $("#category_id").val() : '',
                vendor_id: !isEmpty($("#vendor_id").val()) ? $("#vendor_id").val() : '',
                project_id: !isEmpty(project) ? project[0].id : '',
                vendor_name: !isEmpty($("#vendor_name").val()) ? $("#vendor_name").val() : '',
            }

            $.ajax({
                url: url,
                data: params,
                type: "POST",
                success: function(res) {
                    findForm.find("#category_id").val('').trigger('change')
                    findForm.find("#vendor_id").val('').trigger('change')
                    findForm.find("#vendor_name").val('').trigger('change')
                    new Noty({
                        text: res,
                        type: "success"
                    }).show();

                    $('#modal-vendor').modal('hide');
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    let msg = xhr.responseJSON.message;
                    new Noty({
                        text: msg,
                        type: "error"
                    }).show();

                    if (xhr.status == 422) {
                        $.each(xhr.responseJSON.errors, function(elem, messages) {
                            findForm.find('#' + elem).after(
                                '<p class="text-danger text-sm ml-2 mb-0">' + messages.join(
                                    '') + '</p>');
                        });
                    }
                }
            });
        })

        function getDataWithAjax(url_, method_ = 'GET', data_ = []) {
            var ajax_ = $.ajax({
                url: url_,
                method: method_,
                data: data_,
            });

            return ajax_;
        }

        function isEmpty(str) {
            return (!str || str.length === 0);
        }
        //FOR HIDE ELEMENT SUPPLIER APPROVED AND NOT
        $(document).ready(function() {
            $("[name='type']").trigger("change");
            $("[name='project_id']").trigger("change");
        });

        $("[name='type']").on('change', function() {
            if (this.value == 1) {
                $('.supplier-non-approved').hide();
                $('.supplier-approved').show();
            } else {
                $('.supplier-non-approved').show();
                $('.supplier-approved').hide();
            }
        });

        //IF PROJECT NULL TYPE APPROVED AND VENDOR IS SHOWING APPROVED
        {{--  $("[name='project_id']").on('change', function() {
        let project_id = $("[name='project_id']").select2('data');
        if(isEmpty(project_id[0]?.id)){
            $("[name='type']").val(1).change();
            $("[name='type']").prop('readOnly', true);
        }else{
            $("[name='type']").val(1).change();
            $("[name='type']").prop('readOnly', false);
        }
    });  --}}
        //FOR SUM AMOUNT CATEGORY PRICE
        $(document).on("click", ".add-repeatable-element-button", function(e) {
            $("[data-repeatable-input-name='amount']").change(function() {
                let values = $("[data-repeatable-input-name='amount']")
                    .map(function() {
                        return $(this).val();
                    }).get();
                sum = 0;
                $.each(values, function() {
                    sum += parseFloat(this) || 0;
                });
                $('[name="amount"]').val(sum.toFixed(2));
            });
        })

        $(document).on("click", ".delete-element", function(e) {
            console.log('delete')
            let values = $("[data-repeatable-input-name='amount']")
                .map(function() {
                    return $(this).val();
                }).get();
            sum = 0;
            $.each(values, function() {
                sum += parseFloat(this) || 0;
            });
            $('[name="amount"]').val(sum.toFixed(2));
        })

        $(document).on("keyup change", "[data-repeatable-input-name='amount']", function() {
            let values = $("[data-repeatable-input-name='amount']")
                .map(function() {
                    return $(this).val();
                }).get();
            sum = 0;
            $.each(values, function() {
                sum += parseFloat(this) || 0;
            });
            $('[name="amount"]').val(sum.toFixed(2));
        });

        $('.supplier-non-approved').hide()
        $("[name='type']").on('change', function() {
            if (this.value == 1) {
                $('.supplier-non-approved').hide();
                $('.supplier-approved').show();
            } else {
                $('.supplier-non-approved').show();
                $('.supplier-approved').hide();
            }
        });
    </script>
@endpush