@extends('backend.layouts.master')
@section('content')
    <div class="content-body">
        <!-- card actions section start -->
        <section id="card-actions">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header fix-header bottom-card">
                            <div class="row" style="align-items: baseline">
                                <h4 class="col-lg-3">Thiết lập tác nghiệp</h4>
                                <div class="col-lg-2 col-md-6">
                                    <select name="" id="" class="select2" data-placeholder="--Chọn tác nghiệp cần--">
                                        <option></option>
                                        <option value="1">Khách hàng mới</option>
                                        <option value="2">Gọi lần 2</option>
                                        <option value="3">Gọi lần 3</option>
                                    </select>
                                </div>
                                <div class="col-lg-2 col-md-6">
                                    <select name="" id="" class="select2" data-placeholder="--Chọn kết quả tác nghiệp--">
                                        <option></option>
                                        <option value="1">Chốt đơn</option>
                                        <option value="2">Máy bận/Thuê bao</option>
                                        <option value="3">Gọi lại sau 2h</option>
                                    </select>
                                </div>
                                <div class="col-lg-2 col-md-6">
                                    <select name="" id="" class="select2" data-placeholder="--Chọn tác nghiệp tiếp--">
                                        <option></option>
                                        <option value="1">Khách hàng mới</option>
                                        <option value="2">Gọi lần 2</option>
                                        <option value="3">Gọi lần 3</option>
                                    </select>
                                </div>
                                <button class="btn btn-primary"><i class="fa fa-search"></i> Tìm kiếm</button>
                            </div>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-header fix-header"></div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="table-responsive tableFixHead table-bordered table-hover"
                                     style="width: 100%; overflow-x: auto;">
                                    <table class="table table-custom">
                                        <thead>
                                        <tr>
                                            <th class="text-center" style="width: 30px;">STT</th>
                                            <th class="text-center nowrap">Nếu</th>
                                            <th class="text-center">Kết quả</th>
                                            <th class="text-center">Thì</th>
                                            <th class="text-center nowrap">Sau bao lâu</th>
                                            <th class="text-center nowrap">Cập nhật</th>
                                            <th class="text-center nowrap">
                                                <a id="add_new"><i class="fa fa-plus"></i> Thêm</a>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(count($settings))
                                            @foreach($settings as $k => $item)
                                        <tr>
                                            <td class="text-center">{{$k+1}}</td>
                                            <td class="text-center ifStatus" data-id="{{$item->if}}">{{@$item->ifCustomerStatus->name}}</td>
                                            <td class="text-center actionCustomer" data-id="{{$item->action}}">{{@$item->customerAction->name}}</td>
                                            <td class="text-center thenStatus" data-id="{{$item->then}}">{{@$item->thenCustomerStatus->name}}</td>
                                            <td class="text-center timeAuto" data-id="{{$item->time_auto_id}}">{{@$item->timeAuto->name}}</td>
                                            <td class="text-center">{{$item->updated_at}}</td>
                                            <td class="text-center">
                                                <a class="action-control edit" href="javascript:void(0)"
                                                   data-id="{{$item->id}}">
                                                    <i class="fa fa-edit fa-2x"></i>
                                                </a>
                                                <a class="action-control delete-item" href="javascript:void(0)"
                                                   data-id="{{$item->id}}">
                                                    <i class="fa fa-trash fa-2x"></i>
                                                </a>
                                            </td>
                                        </tr>
                                            @endforeach
                                            @else
                                            <tr>
                                                <td colspan="8">Không có bản ghi nào !</td>
                                            </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-2">
                                    {{$settings->links()}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection
@section('script')
    @include('backend.layouts.script')
    <script>
        $("body").on("click", ".delete-item", function () {
            var elt = $(this).parents('tr');
            var data_id = $(this).data('id');
            swal({
                title: 'Bạn có chắc chắn xóa mục này?',
                type: 'error',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                $.ajax({
                    data: {id: data_id},
                    url: '/system/setting-operation/' + data_id,
                    method: 'delete',
                    success: function (data) {
                        if (data && data.success === false) {
                            swal({
                                title: data.message ? data.message : '',
                                type: 'warning'
                            })
                        } else {
                            swal({
                                title: 'Đã xóa thành công!',
                                type: 'success'
                            })
                            elt.remove();
                            setTimeout(function () {
                                // location.reload();
                            }, 1000);
                        }
                    }
                });
            }, function (dismiss) {
            });
        });

        $(document).on('click', '#add_new', function () {
            $.ajax({
                url: '/ajax/system/setting-operation',
                method: 'POST',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })
        $(document).on('click','.edit',function () {
            $(this).addClass('save').removeClass('edit').find('.fa-edit').addClass('fa-save').removeClass('fa-edit');

            $(this).closest('tr').find('.ifStatus').html(
                `{!! Form::select(null, $customerStatus,null, array('class' => 'form-control select2 square if_value','placeholder'=>'--Source--')) !!}`
            );
            $('.if_value').val($(this).closest('tr').find('.ifStatus').data('id'));

            $(this).closest('tr').find('.actionCustomer').html(
                `{!! Form::select(null, $customerAction,null, array('class' => 'form-control select2 square action_value','placeholder'=>'--Source--')) !!}`
            );
            $('.action_value').val($(this).closest('tr').find('.actionCustomer').data('id'));

            $(this).closest('tr').find('.thenStatus').html(
                `{!! Form::select(null, $customerStatus,null, array('class' => 'form-control select2 square then_value','placeholder'=>'--Source--')) !!}`
            );
            $('.then_value').val($(this).closest('tr').find('.thenStatus').data('id'));

            $(this).closest('tr').find('.timeAuto').html(
                `{!! Form::select(null, $timeAuto,null, array('class' => 'form-control select2 square time_value','placeholder'=>'--Source--')) !!}`
            );
            $('.time_value').val($(this).closest('tr').find('.timeAuto').data('id'));

            $('.select2').select2({
                placeholder: '-- Chọn --',
                width: '100%',
                allowClear: true
            });

        })

        $(document).on('click','.save',function () {
            let id = $(this).data('id');
            let data = {
                if: $(this).closest('tr').find('.ifStatus .if_value').val(),
                action: $(this).closest('tr').find('.actionCustomer .action_value').val(),
                then: $(this).closest('tr').find('.thenStatus .then_value').val(),
                time_auto_id: $(this).closest('tr').find('.timeAuto .time_value').val()
            }
            console.log(1111,data);
            console.log(2222,id);
            $.ajax({
                url: '/ajax/system/setting-operation/'+id,
                data: data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })


    </script>
@endsection