@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">{{ __('No.') }}</td>
                                            <td class="text-center">{{ __('ประเภทอาหาร') }}</td>
                                            <td class="text-center">{{ __('หมวด') }}</td>
                                            <td class="text-center">{{ __('ห้องครัว') }}</td>
                                            <td class="text-center">{{ __('แก้ไข') }}</td>
                                            <td class="text-center">{{ __('ลบ') }}</td>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<form action="" method="POST" id="shared-form" novalidate enctype="multipart/form-data">
    <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_id">{{ __('ห้องครัว') }} <span class="text-danger">*</span></label>
                                <select class="form-control" id="kit_id" name="kit_id" required>
                                    @forelse ($kit as $item)
                                    <option value="{{ $item->id }}">{{ $item->kit_name }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="type_id">{{ __('หมวด') }} <span class="text-danger">*</span></label>
                                <select class="form-control" id="type_id" name="type_id" required>
                                    @forelse ($type as $item)
                                    <option value="{{ $item->id }}">{{ $item->type_name }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="cate_name">{{ __('ประเภทอาหาร') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="cate_name" name="cate_name" 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 route_index = "{{ route('category.index') }}";
    var route_store = "{{ route('category.store') }}";


    $(function () {

        table = $('#dtTable').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: false,
            ajax: route_index,
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'cate_name',
                    name: 'cate_name'
                },
                {
                    data: 'type_name',
                    name: 'type_name'
                },
                {
                    data: 'kit_name',
                    name: 'kit_name'
                },
                {
                    data: 'edit',
                    name: 'edit',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'delete',
                    name: 'delete',
                    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_id').val(data.kit_id);
                $('#type_id').val(data.type_id);
                $('#cate_name').val(data.cate_name);
                $('#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