<div class="modal fade contactModal"  tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">Kapcsolat tartó</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 class="text-center d-none spinnerDiv">
                    <strong style="vertical-align: super;padding-right: 1em;">Betöltés...</strong>
                    <div class="spinner-border text-success" role="status" aria-hidden="true"></div>
                </div>
                <form class="contactModalForm" action="{{route('admin.contact.store')}}">
                    <input type="text" name="contactId" value="">
                    <div class="form-group">
                        <label for="contactModal-name" class="col-form-label">Név:</label>
                        <input type="text" class="form-control" id="contactModal-name"
                               name="contactName" value="Kapcsolattartó Béla">
                    </div>
                    <div class="form-group">
                        <label for="contactModal-phone" class="col-form-label">Telefonszám:</label>
                        <input type="text" class="form-control" id="contactModal-phone" name="contactPhone"
                               placeholder="{{App\Rules\PhoneRule::$placeHolder}}"
                               {{--value="+36 "--}}
                               {{--value="+36303334444"--}}
                               data-inputmask="'alias': 'phoneNumber'"
                        >
                    </div>


                    <div class="form-group ">
                        <label for="contactType" class="col-sm-2 col-form-label">Típus:</label>
                        <select class="contactType" name="contactType" multiple="multiple" data-maximum-selection-length="1" style="width: 100%">

                            @foreach(App\Enums\ContactTypeEnum::asArray() as $k=>$v)
                            <option value="{{$k}}" selected >{{$v}}</option>
                            @endforeach

                        </select>
                    </div>

                    <div class="form-group">
                        <label for="contactModal-email" class="col-form-label">E-mail:</label>
                        <input type="text" class="form-control" id="contactModal-email" name="contactEmail"
                               data-inputmask="'alias': 'email'"
                               value="jeno@email.hu"
                        >
                        {{--
                        $('.phone_number_3').inputmask('+99-9999999999');
                        placeholder:" ", clearMaskOnLostFocus: true
                        "onincomplete": function(){ alert('inputmask incomplete');
                        --}}
                    </div>
                    <div class="form-group">
                        <label for="contactModal-note" class="col-form-label">Megjegyzés:</label>
                        <textarea class="form-control" id="contactModal-note"
                                  name="contactNote">Ez a megjegyzés</textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary buttonClose" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary buttonSave">Mentés</button>
            </div>

        </div>

    </div>

</div>

<script>
    $(document).ready(function () {
        //console.error('ez meg mikor');
        $('[data-toggle="tooltip"]').tooltip();
        $(":input").inputmask({
            /*"placeholder": "#",*/
            "onincomplete": function () {
                if ($(this).val().length > 0 || $(this).data('required') === true) {
                    $(this).addClass('is-invalid');
                }
            },
            "oncomplete": function () {
                $(this).removeClass('is-invalid');
                $(this).addClass('is-valid');
            },
            "oncleared": function () {
                $(this).removeClass('is-invalid');
            }
        });
    });



    window.ajaxErrorFieldHandler = function (errors, container) {
        let toastBodyHtml = '';
        $.each(errors, function (index, value) {
            toastBodyHtml += '<div>' + value.detail + '<div>';
        });
        Toast.create("Hiba!", toastBodyHtml, TOAST_STATUS.DANGER, 10000);
    }

    /*

        if(!$.fn.jstree){
            $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js',
                function(){
                    APP.initProductGroupTree();
                }
            );
        }else{
            APP.initProductGroupTree();
        }
        */
</script>

