
<?php $__env->startSection('title','KM BackOffice'); ?>
<?php $__env->startSection('content'); ?>
<div class="main-content">
    <?php echo $__env->make('layouts/partials/back/header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    
    <main>
        <div class="banner">
            <span class="fas <?php echo e($page['data']['icon']); ?>"></span>
            <span><?php echo e($page['data']['name']); ?></span>
        </div>
        <div class="container" id="blade">
            <br>
            <div class="row">
                <div class="row justify-content-center">
                    <div class="col-2">
                        <button id="btn-add" type="button" class="btn btn-block btn-warning">
                            เพิ่ม <i class="fas fa-plus-circle"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table id="datatable-list" class="table align-top" style="width:100%">
                    <!-- Row of Column Name -->
                    <thead>
                        <tr class="bg-green">
                            <th>ลำดับ</th>
                            <th>ชื่อประเภท</th>
                            <th>วันที่สร้าง</th>
                            <th>วันที่แก้ไข</th>
                            <th>สถานะ</th>
                            <th>id</th>
                            <th>status</th>
                            <th>จัดการ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if($group['status'] == true): ?>
                        <?php $__currentLoopData = $group['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td width="5%"></td>
                            <td width="40%"><?php echo e($item['name']); ?></td>
                            <td width="10%"><?php echo e(formatDateThai($item['created_at'])); ?></td>
                            <td width="10%"><?php echo e(formatDateThai($item['updated_at'])); ?></td>
                            <td width="10%">
                                <?php if($item['status'] == 1): ?>
                                เปิดใช้งาน
                                <?php elseif($item['status'] == 2): ?>
                                ยกเลิก
                                <?php endif; ?>
                            </td>
                            <td width="10%"><?php echo e($item['id']); ?></td>
                            <td width="10%"><?php echo e($item['status']); ?></td>
                            <td width="5%"></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php else: ?>
                        <?php endif; ?>

                    </tbody>
                </table>
            </div>
        </div>

        <!-- Delete Modal -->
        <div class="modal fade" id="DeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #1aa6b7;color: #fff;">
                        <h5 class="modal-title" id="exampleModalLabel">ลบข้อมูล</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="text-align: center;">
                        <img src="<?php echo e(asset('image/icon/alert.png')); ?>" class="img-fluid" width="100px" hight="100px">
                        <p>
                        <h6>คุณแน่ใจแล้วใช่ไหมว่า จะลบข้อมูลที่เลือก?</h6>
                        </p>
                        <p class="text-warning"><small>หมายเหตุ หากลบข้อมูลแล้วจะไม่สามารถเรียกคืนข้อมูลได้</small>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                        <button type="button" class="btn btn-danger">ลบ</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- ADD Modal -->
<div class="modal" id="AddModalType" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">เพิ่มประเภท</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formAddType" name="formAddType" class="needs-validation" novalidate>
                    <div class="row justify-content-md-center">
                        <div class="col">
                            <input type="hidden" id="type_id">
                            <div class="mb-3">
                                <label class="form-label">ชื่อประเภท</label>
                                <input id="type_name" name="type_name" type="text" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">สถานะการใช้งาน</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="type_status" value="1">
                                    <label class="form-check-label">ยังใช้งาน</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="type_status" value="2">
                                    <label class="form-check-label">เลิกใช้งาน</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="col-md-10"></div>
                                <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>

<script>
var tableList = $('#datatable-list').DataTable({
    "columnDefs": [{
            "targets": 0,
            "searchable": false,
            "orderable": false,
            "width": "5%",
            "className": "text-center",
        },
        {
            "targets": 5,
            "visible": false,
            "searchable": false
        },
        {
            "targets": 6,
            "visible": false,
            "searchable": false
        },
        {
            "targets": -1,
            "data": null,
            "className": "text-center",
            "defaultContent": "<a class='on-default btn-edit' id='btn-edit' data-toggle='tooltip' title='แก้ไข'><i class='fa fa-edit'></i></a> " +
                "<a class='on-default btn-delete' id='btn-delete' data-toggle='tooltip' title='ลบ'><i class='fa fa-trash-alt'></i></a>"
        }
    ],
    "order": [
        [0, 'asc']
    ],
    "autoWidth": false,
    "searching": true,
    "destroy": false,
    "paging": true,
    "info": true,
    "responsive": false,
    "orderable": false,
    "fixedColumns": true
});

tableList.on('order.dt search.dt', function() {
    tableList.column(0, {
        search: 'applied',
        order: 'applied'
    }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
    });
}).draw();

$('#datatable-list tbody').on('click', '.btn-edit', function() {
    var RowIndex = $(this).closest('tr');
    var data = tableList.row(RowIndex).data();
    // var data = tableList.row( this ).data();
    $("#type_name").val(data[1]);
    $("#type_id").val(data[5]);
    $("input[name=type_status][value=" + data[6] + "]").attr('checked', 'checked');
    $("#AddModalType").modal('show');
});

$('#datatable-list tbody').on('click', '.btn-delete', function() {
    var RowIndex = $(this).closest('tr');
    var data = tableList.row(RowIndex).data();
    // var data = tableList.row( this ).data();
    var id = data[5];

    Swal.fire({
        icon: 'info',
        title: 'คุณแน่ใจแล้วใช่ไหมว่าจะลบข้อมูลที่เลือก',
        text: '',
        allowOutsideClick: false,
        focusConfirm: true,
        showCancelButton: true,
        confirmButtonText: 'ตกลง',
        cancelButtonText: 'ยกเลิก',
    }).then((result) => {
        if (result.value) {
            $(".loader").show();
            $.ajax({
                type: "post",
                url: 'typeManagement/delete/' + id,
                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) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "typeManagement";
                            }
                        })
                        return false;
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                    }
                },
            });
        }
    });
});

$("#btn-add").click(function() {
    $("#AddModalType").modal('show');
});

var $savetype = $("#formAddType");
$savetype.validate({
    rules: {
        type_name: {
            required: true,
        },
        type_status: {
            required: true,
        }
    },
    messages: {
        type_name: {
            required: "กรุณากรอกชื่อคำสำคัญ",
        },
        type_status: {
            required: "กรุณาเลือกระดับสถานะ",
        }
    },
    submitHandler: function() {
        // $(".loader").show();
        var type_id = $("#type_id").val();
        var type_name = $("#type_name").val();
        var type_status = $('input[name="type_status"]:checked').val();
        var form_data = new FormData();
        form_data.append('type_name', type_name);
        form_data.append('type_status', type_status);

        if (type_id == '') {
            // add
            $.ajax({
                type: "post",
                url: 'typeManagement/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();
                    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 = "typeManagement";
                            }
                        })
                        return false;
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                        return false;
                    }
                },
            });
        } else {
            // update
            $.ajax({
                type: "post",
                url: 'typeManagement/update/' + type_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) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "typeManagement";
                            }
                        })
                        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 $__env->stopSection(); ?>
<?php echo $__env->make('layouts.back.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\km-web\resources\views/backOffice/typeManagement.blade.php ENDPATH**/ ?>