@extends('layout')

@section('content')
<div class="page-body">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4>{{ __('ตั้งค่าห้องครัว') }}</h4>
                    <div class="card-header-right">
                        {{-- <ul class="list-unstyled card-option">
                            <li><button type="button" class="btn btn-success btn-sm" onclick="addData()"><i class="fas fa-plus"></i> {{ __('เพิ่ม') }}</button></li>
                        </ul> --}}
                    </div>
                </div>

                <div class="card-block">
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table" id="dtTable">
                                    <thead>
                                        <tr class="table-success">
                                            <td class="text-center">{{ __('ลำดับ') }}</td>
                                            <td class="text-center">{{ __('ชื่อห้องครัว') }}</td>
                                            <td class="text-center">{{ __('ชื่อเครื่องปริ้น') }}</td>
                                            <td class="text-center">{{ __('IP Printer') }}</td>
                                            <td class="text-center">{{ __('แก้ไข') }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<form action="" method="POST" id="shared-form" novalidate enctype="multipart/form-data">
    @method('POST')
    <input type="hidden" name="id" id="id">
    <div class="modal fade" id="shared-modal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('ตั้งค่าห้องครัว') }}</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="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="kit_name">{{ __('ชื่อห้องครัว') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="kit_name" name="kit_name" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="kit_printerName">{{ __('ชื่อเครื่องปริ้น') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="kit_printerName" name="kit_printerName" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="kit_printerIP">{{ __('IP Printer') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="kit_printerIP" name="kit_printerIP" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> {{ __('ปิด') }}</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ __('บันทึก') }}</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('script')
<script>
var table = '';
var route_index = "{{ route('kitchen.index') }}";
var route_store = "{{ route('kitchen.store') }}";

$(function () {
    table = $('#dtTable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        ajax: route_index,
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex'
            },
            {
                data: 'kit_name',
                name: 'kit_name'
            },
            {
                data: 'kit_printerName',
                name: 'kit_printerName'
            },
            {
                data: 'kit_printerIP',
                name: 'kit_printerIP'
            },
            {
                data: 'edit',
                name: 'edit',
                orderable: false,
                searchable: false
            }
        ],
    });


    $("#shared-form").validate({
        submitHandler: function (form) {
            formData = new FormData(form);
            $.ajax({
                type: form.method,
                url: route_store,
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function (response) {
                    console.log(response);

                    if(response.success)
                    {
                        table.ajax.reload();
                        $('#shared-modal').modal('hide');
                        show_success();
                    }else{
                        show_warning(response.message);
                    }
                },
                error: function (err) {

                    show_error();
                    console.log(err.responseText);
                }
            });
        }
    });
});

function addData()
{
    $('#shared-form').trigger('reset');
    $('#id').val('');
    $('#shared-modal').modal('show');
}

function editData(id) {
    $('#shared-form').trigger('reset');
    $('#id').val(id);
    $.ajax({
        url: route_index +'/'+ id +'/edit',
        type: "GET",
        dataType: "JSON",
        success: function (data) {
            console.log(data);

            $('#kit_name').val(data.kit_name);
            $('#kit_printerName').val(data.kit_printerName);
            $('#kit_printerIP').val(data.kit_printerIP);
            $('#shared-modal').modal('show');
        },
        error: function (err) {
            console.log(err.responseText);
        }
    });
}

function deleteData(id) {

    Swal.fire({
        title: '',
        text: "{{ __('คุณต้องการลบข้อมูลนี้ใช่ หรือ ไม่?') }}",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#fe5d70',
        cancelButtonColor: '#868e96',
        confirmButtonText: "{{ __('ลบ') }}",
        cancelButtonText: "{{ __('ยกเลิก') }}",
        reverseButtons: true,
    }).then((result) => {
        if (result.value) {
            $.ajax({
                type: "POST",
                url: route_store+'/'+id+'/destroy',
                success: function (data) {
                    table.ajax.reload();
                    show_success("{{ __('ลบ') }}");
                },
                error: function (err) {
                    console.log(err.responseText);
                }
            });
        }
    });
}
</script>

@endsection