<br>
<div class="form-group">

    <!----------------- TAB ----------------->
    <ul class="nav navtab-pills" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="navtab-link active" id="pills-personal-tab" data-bs-toggle="pill"
                data-bs-target="#pills-personal" type="button" role="tab" aria-controls="pills-personal"
                aria-selected="true"><i class="fas fa-user-alt"></i>
                ข้อมูลลิงก์ความรู้
            </button>
        </li>
    </ul>
    <!----------------- Content Tab ----------------->
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-personal" role="tabpanel" aria-labelledby="pills-personal-tab">
            <div class="borders-green">
                <div class="container" style="padding-top: 1rem">
                    <!----------------- data ----------------->
                    <form id="formAddLink" name="formAddAdv" class="needs-validation" novalidate>
                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <?php if($link['status'] == true): ?>
                                <input type="hidden" id="link_id" value="<?php echo e($link['data']['id']); ?>">
                                <input type="hidden" id="link_idtype" value="<?php echo e($link['data']['type_id']); ?>">
                                <input type="hidden" id="link_publish" value="<?php echo e($link['data']['publish']); ?>">
                                <?php else: ?>
                                <input type="hidden" id="link_id">
                                <?php endif; ?>

                                <div class="mb-3">
                                    <label class="form-label">ชื่อลิงก์ความรู้</label>
                                    <?php if($link['status'] == true): ?>
                                    <input id="link_name" name="link_name" type="text" class="form-control"
                                        value="<?php echo e($link['data']['name']); ?>" required>
                                    <?php else: ?>
                                    <input id="link_name" name="link_name" type="text" class="form-control">
                                    <?php endif; ?>
                                </div>
                                <div class="mb-3 text-center">
                                    <?php if($link['status'] == true): ?>
                                    <input type="hidden" id="old_img" name="old_img" value="<?php echo e($link['data']['photo']); ?>">
                                    <img id="link_pic" name="link_pic" class="img-thumbnail" width="250px" hight="250px"
                                        src="<?php echo e(asset('../storage/km/cover/'.$link['data']['photo'])); ?>">
                                    <?php else: ?>
                                    <img id="link_pic" name="link_pic" class="img-thumbnail" width="250px" hight="250px"
                                        src="<?php echo e(asset('../storage/km/cover/link.png')); ?>">
                                    <?php endif; ?>
                                    <p style="font-size: 14px;color:Gray;">(ภาพขนาด 334 x 334 px)</p>
                                </div>
                                <div class="mb-3">
                                    <input id="link_img" name="link_img" class="form-control" type="file">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">การเชื่อมโยง</label>
                                    <?php if($link['status'] == true): ?>
                                    <input id="link_link" name="link_link" type="text" class="form-control"
                                        value="<?php echo e($link['data']['detail']); ?>">
                                    <?php else: ?>
                                    <input id="link_link" name="link_link" type="text" class="form-control">
                                    <?php endif; ?>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">ประเภทลิงก์ความรู้</label>
                                    <select id="link_type" name="link_type" class="form-select">
                                        <option value="" selected disabled>เลือกประเภทลิงก์ความรู้</option>
                                        <?php if($type['status'] == true): ?>
                                        <?php $__currentLoopData = $type['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ty): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($ty['id']); ?>"><?php echo e($ty['name']); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <?php endif; ?>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">การแสดงผล</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="link_status" value="1">
                                        <label class="form-check-label">สาธารณะ</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="link_status" value="2">
                                        <label class="form-check-label">เฉพาะสมาชิก</label>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="d-grid gap-2 col-md-2 mx-auto">
                                        <button class="btn btn-warning" type="submit">
                                            บันทึก <i class="fas fa-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("select").select2({
        theme: "bootstrap-5"
    });

    var link_id = $("#link_id").val();
    if (link_id != "") {
        var link_idtype = $("#link_idtype").val();
        $("#link_type").val(link_idtype).change();
        var link_publish = $("#link_publish").val();
        $('input:radio[name="link_status"]').filter('[value=' + link_publish + ']').attr('checked', true);
    }
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('#link_pic').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

var _URL = window.URL || window.webkitURL;
$("#link_img").change(function() {
    var file, img;

    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            // alert((this.width == 2500) && (this.height == 730));
            if (!((this.width == 334) && (this.height == 334))) {
                Swal.fire({
                    icon: 'warning',
                    title: 'คำเตือน',
                    text: 'กรุณาใช้ภาพขนาด 334 x 334 px',
                });
                $("#link_img").val("");
                $('#link_pic').attr("src", "<?php echo e(asset('../storage/km/cover/link.png')); ?>");
                return false;
            }
        };
        img.onerror = function() {
            alert("กรุณาอัพโหลดไฟล์ภาพ เนื่องจากเป็นไฟล์ประเภท" + file.type);
        };
        img.src = _URL.createObjectURL(file);
        readURL(this);
    }
});


jQuery.validator.addMethod('update_rule', function(value, element) {
    var adv_id = $("#link_id").val();
    if (adv_id != "") {
        return true;
    } else {
        var link_img = $('#link_img').prop('files')[0];
        if (link_img == null) {
            return false;
        } else {
            return true;
        }
    };
});

var $savelink = $("#formAddLink");
$savelink.validate({
    rules: {
        link_name: {
            required: true,
        },
        link_img: {
            update_rule: true,
        },
        link_link: {
            required: true,
        },
        link_type: {
            required: true,
        },
        adv_end: {
            required: true,
        },
        link_status: {
            required: true,
        }
    },
    messages: {
        link_name: {
            required: "กรุณากรอกชื่อลิงก์ความรู้",
        },
        link_img: {
            update_rule: "กรุณาเลือกไฟล์",
        },
        link_link: {
            required: "กรุณากรอกลิงก์การเชื่อมโยง",
        },
        link_type: {
            required: "กรุณาเลือกประเภทลิงก์ความรู้",
        },
        link_status: {
            required: "กรุณาเลือกสถานะการใช้งาน",
        }
    },
    submitHandler: function() {
        // $(".loader").show();
        var link_id = $("#link_id").val();
        var link_name = $("#link_name").val();
        var link_img = $('#link_img').prop('files')[0];
        var link_link = $("#link_link").val();
        var link_type = $("#link_type").val();
        var link_status = $('input[name="link_status"]:checked').val();

        var form_data = new FormData();
        form_data.append('link_name', link_name);
        form_data.append('link_img', link_img);
        form_data.append('link_link', link_link);
        form_data.append('link_type', link_type);
        form_data.append('link_status', link_status);

        if (link_id == '') {
            // add
            $.ajax({
                type: "post",
                url: 'linkManagement/add',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // $(".loader").hide();
                    // console.log(data.status);
                    if (data.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "linkManagement";
                            }
                        })
                        return false;

                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                        return false;
                    }
                },
            });
        } else {
            // update
            var old_img = $("#old_img").val();
            form_data.append('old_img', old_img);
            $.ajax({
                type: "post",
                url: 'linkManagement/update/' + link_id,
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    $(".loader").hide();
                    if (data.status == true) {
                        // location.reload();
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "linkManagement";
                            }
                        })
                        return false;
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                        return false;
                    }
                },
            });
        }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
        // Add the `invalid-feedback` class to the error element
        error.addClass("invalid-feedback");

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        // element.parents(".col-sm-5").addClass("has-feedback");

        if (element.prop("type") === "checkbox") {
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            element = $("#select2-" + elem.attr("id") + "-container").parent();
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if (!element.next("span")[0]) {
            $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                .insertAfter(element);
        }
    },
    success: function(label, element) {
        // Add the span element, if doesn't exists, and apply the icon classes to it.
        // console.log(element);
        if (!$(element).next("span")[0]) {
            $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>")
                .insertAfter(
                    $(element));
        }
    },
    highlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
        // $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().addClass(
                errorClass);
        } else {
            elem.addClass(errorClass);
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
        // $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().removeClass(
                errorClass);
        } else {
            elem.removeClass(errorClass);
        }
    }
});
</script><?php /**PATH /var/www/html/km-web/resources/views/subpageBack/add_link.blade.php ENDPATH**/ ?>