@extends('backend.layouts.master')
@section('content')
    <style>
        .select2 .select2-selection .select2-selection--multiple{
            height: 70px;
        }
    </style>
    <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">10.3 Quản lý danh mục tác nghiệp</h4>
                            </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="row">
                                    <div class="col-12">
                                        <div class="">
                                            <div class="pu-caption">Trạng thái khách hàng</div>
                                        </div>
                                        <div class="tableFixHead table-bordered table-hover"
                                             style="width: 100%; overflow-x: auto;">
                                            <table class="table-sortable1 table table-custom">
                                                <thead>
                                                <tr>
                                                    <th class="text-center nowrap">Tên</th>
                                                    <th class="text-center">T/g báo đỏ</th>
                                                    {{--<th class="text-center">T/g chuyển sale</th>--}}
                                                    <th class="text-center">T/g chuyển CSKH</th>
                                                    <th class="text-center">Trạng thái con</th>
                                                    <th class="text-center">Màu nền</th>
                                                    <th class="text-center nowrap">
                                                        <a id="add_new_status"><i class="fa fa-plus"></i> Thêm</a>
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody id="sortable1">
                                                @if(count($status))
                                                    @foreach($status as $item)
                                                        <tr data-id="{{$item->id}}">

                                                            <td class="text-center" data-position="{{$item->position}}">
                                                                <input type="text"
                                                                       class="txt-dotted height-30 name"
                                                                       value="{{$item->name}}">
                                                            </td>
                                                            <td>
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <input type="text" class="form-control txt-dotted height-30 expired_time"
                                                                               value="{{$item->expired_time}}">
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <select name="" id="" class="form-control type_expired_time">
                                                                            <option value="1"  {{$item->type_expired_time==1 ? 'selected':''}}>Ngày</option>
                                                                            <option value="2"  {{$item->type_expired_time==2 ? 'selected':''}}>Giờ</option>
                                                                            <option value="3"  {{$item->type_expired_time==3 ? 'selected':''}}>Phút</option>
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                            </td>
                                                            <td>
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <input type="text" class="form-control txt-dotted height-30 time_move"
                                                                               value="{{$item->time_move}}">
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <select name="" id="" class="form-control type_move_gio">
                                                                            <option value="1" {{$item->type_time_move==1 ? 'selected':''}}>Ngày</option>
                                                                            <option value="2" {{$item->type_time_move==2 ? 'selected':''}}>Giờ</option>
                                                                            <option value="3" {{$item->type_time_move==3 ? 'selected':''}}>Phút</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </td>




                                                            {{--<td>--}}
                                                                {{--<div class="row">--}}
                                                                    {{--<div class="col-6">--}}
                                                                        {{--<input type="text" class="form-control txt-dotted height-30 time_move_cskh"--}}
                                                                               {{--value="{{$item->time_move_cskh}}">--}}
                                                                    {{--</div>--}}
                                                                    {{--<div class="col-6">--}}
                                                                        {{--<select name="" id="" class="form-control type_move_cskh">--}}
                                                                            {{--<option value="1" {{$item->type_time_move_cskh==1 ? 'selected':''}}>Ngày</option>--}}
                                                                            {{--<option value="2" {{$item->type_time_move_cskh==2 ? 'selected':''}}>Giờ</option>--}}
                                                                            {{--<option value="3" {{$item->type_time_move_cskh==3 ? 'selected':''}}>Phút</option>--}}
                                                                        {{--</select>--}}
                                                                    {{--</div>--}}
                                                                {{--</div>--}}
                                                            {{--</td>--}}



                                                            <td>
                                                                <select class="square select2 selectChild" data-placeholder="--Chọn trạng thái--" multiple>
                                                                    <option value=""></option>
                                                                    @if(count($status))
                                                                        @foreach($status as $item1)
                                                                            <option value="{{$item1->id}}" {{in_array($item1->id, $item->customer_child) ? 'selected' : ''}}>{{$item1->name}}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input class="form-control changeColor1" type="color" style="padding: 0;" value="{{$item->color}}" data-id="{{$item->id}}">
                                                            </td>

                                                            <td class="text-center">
                                                                <a class="action-control save-status" href="javascript:void(0)"
                                                                   data-id="{{$item->id}}">
                                                                    <i class="fa fa-save fa-2x"></i>
                                                                </a>
                                                                <a class="action-control delete-item"
                                                                   href="javascript:void(0)"
                                                                   data-id="{{$item->id}}"
                                                                   data-url="/ajax/system/delete-customer-status/"
                                                                >
                                                                    <i class="fa fa-trash fa-2x"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-2">
                                            {{--{{$posts->links()}}--}}
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="">
                                            <div class="pu-caption">Trạng thái đơn hàng</div>
                                        </div>
                                        <div class="tableFixHead table-bordered table-hover"
                                             style="width: 100%; overflow-x: auto;">
                                            <table class="table-sortable table table-custom">
                                                <thead>
                                                <tr>
                                                    <th class="text-center" style="width: 30px;">Id</th>
                                                    <th class="text-center nowrap">Tên</th>
                                                    {{--<th class="text-center">Chốt đơn</th>--}}
                                                    <th class="text-center nowrap">Màu nền</th>
                                                    <th class="text-center nowrap">Cập nhật</th>
                                                    <th class="text-center nowrap">
                                                        <a id="add_new_action" data-toggle="modal"
                                                           data-target="#add_new_form"><i
                                                                    class="fa fa-plus"></i> Thêm
                                                        </a>
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody id="sortable">
                                                @if(count($action))
                                                    @foreach($action as $key=>$item)
                                                <tr data-id="{{$item->id}}">
                                                    <td class="text-center" data-position="{{$item->position}}">{{$key+1}}</td>
                                                    <td class="text-center">
                                                        <input type="text"
                                                               class="txt-dotted height-30 name"
                                                               value="{{$item->name}}">
                                                    </td>
                                                    {{--<td class="text-center skin skin-square"><input type="checkbox" {{$item->close_order ? 'checked' : ''}} class="closeOrder">--}}
                                                    {{--</td>--}}
                                                    <td class="">
                                                        <input type="color" class="form-control changeColor" value="{{$item->color}}" data-id="{{$item->id}}" style="padding: 0">
                                                    </td>
                                                    <td class="text-center">{{$item->updated_at}}</td>
                                                    <td class="text-center">
                                                        <a class="action-control save-action" href="javascript:void(0)"
                                                           data-id="{{$item->id}}">
                                                            <i class="fa fa-save fa-2x"></i>
                                                        </a>
                                                        <a class="action-control delete-item" href="javascript:void(0)"
                                                           data-id="{{$item->id}}"
                                                           data-url="/ajax/system/delete-order-status/"
                                                        >
                                                            <i class="fa fa-trash fa-2x"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                    @endforeach
                                                @endif
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-2">
                                            {{--{{$posts->links()}}--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection
@section('script')
    @include('backend.layouts.script')
    <script src="{{asset('js/jquery-ui.js')}}"></script>
    <script>
        $("body").on("click", ".delete-item", function () {

            var elt = $(this).parents('tr');
            var data_id = $(this).data('id');
            var data_url = $(this).data('url');
            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: data_url + 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) {
            });
        });

        //status
        $(document).on('click', '#add_new_status', function () {
            $.ajax({
                url: '/ajax/system/create-customer-status',
                method: 'POST',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })
        $(document).on('click', '.save-status', function () {
            showLoading()
            let id = $(this).data('id');
            let data = {
                name :$(this).closest('tr').find('.name').val(),
                position:$(this).closest('tr').find('.stt').val(),

                expired_time:$(this).closest('tr').find('.expired_time').val(),
                type_expired_time:$(this).closest('tr').find('.type_expired_time').val(),

                time_move:$(this).closest('tr').find('.time_move').val(),
                type_time_move:$(this).closest('tr').find('.type_move_gio').val(),

                // time_move_cskh:$(this).closest('tr').find('.time_move_cskh').val(),
                // type_move_cskh:$(this).closest('tr').find('.type_move_cskh').val(),

                customer_child : JSON.stringify($(this).closest('tr').find('.selectChild').val())
                // start: $(this).closest('tr').find('.start').is(":checked"),
                // is_depot_number_float:$(this).closest('tr').find('.numberFloat').is(":checked"),
                // change_time : $(this).closest('tr').find('.changeTime').is(":checked")
            }
            console.log(12313,data);
            $.ajax({
                url: '/ajax/system/update-customer-status/'+id,
                data:data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        hideLoading();
                        // window.location.reload();
                        alertify.success('Cập nhật thành công !');
                    }
                }
            })
        })

        // customer
        $(document).on('click', '#add_new_action', function () {
            $.ajax({
                url: '/ajax/system/create-order-status',
                method: 'POST',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })
        $(document).on('click', '.save-action', function () {
            let id = $(this).data('id');
            let data = {
                name :$(this).closest('tr').find('.name').val(),
                // close_order : $(this).closest('tr').find('.closeOrder').is(":checked")
            }
            $.ajax({
                url: '/ajax/system/update-order-status/'+id,
                data:data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        alertify.success('Cập nhật thành công!');
                        // window.location.reload();
                    }
                }
            })
        })

        // time
        $(document).on('click', '#add_new_time', function () {
            $.ajax({
                url: '/ajax/system/create-customer-time',
                method: 'POST',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })
        $(document).on('click', '.save-time', function () {
            let id = $(this).data('id');
            let data = {
                name :$(this).closest('tr').find('.name').val(),
                time :$(this).closest('tr').find('.time').val(),
                time_text : $(this).closest('tr').find('.time_text').val()
            }
            $.ajax({
                url: '/ajax/system/update-customer-time/'+id,
                data:data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        alertify.success('Cập nhật thành công!');
                        // window.location.reload();
                    }
                }
            })
        })

        //sortable
        $(function () {
            $("#sortable").sortable({ //update trạng thái đơn hàng
                stop: function (event, ui) {
                    let rows = $('.table-sortable tbody tr');
                    let dataPosition = [];
                    console.log(rows.length)
                    for (let r = 0; r < rows.length; r++) {
                        $(rows[r]).attr('data-position', r)
                        dataPosition.push({
                            id: $(rows[r]).attr('data-id'),
                            position: r
                        })
                    }
                    swal({
                        title: 'Bạn có muộn cập nhật?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        showCloseButton: true,
                    }).then(function () {
                        $.ajax({
                            url: '/ajax/system/update-order-position',
                            method: 'put',
                            data: {
                                data: dataPosition
                            },
                            success: function (data) {
                                alertify.success('Cập nhật thành công !');
                            }
                        })
                    })
                }
            });
            $("#sortable1").sortable({ //update trạng thái khách hàng
                stop: function (event, ui) {
                    let rows = $('.table-sortable1 tbody tr');
                    let dataPosition = [];
                    console.log(rows.length)
                    for (let r = 0; r < rows.length; r++) {
                        $(rows[r]).attr('data-position', r)
                        dataPosition.push({
                            id: $(rows[r]).attr('data-id'),
                            position: r
                        })
                    }

                    swal({
                        title: 'Bạn có muộn cập nhật?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        showCloseButton: true,
                    }).then(function () {
                        $.ajax({
                            url: '/ajax/system/update-customer-position',
                            method:'put',
                            data: {
                                data:dataPosition
                            },
                            success:function (data) {
                                alertify.success('Cập nhật thành công !');
                            }
                        })
                    })
                }
            });
        });
        
        //change color
        $(document).on('change','.changeColor',function () {
            let id = $(this).data('id');
            let value = $(this).val();
            swal({
                title: 'Bạn có muộn cập nhật?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                $.ajax({
                    url:'/ajax/system/update-order-status/' + id,
                    method:'put',
                    data:{
                        color:value
                    },
                    success:function (data) {
                        if(data){
                            alertify.success('Cập nhật thành công !')
                        }
                    }
                })
            }, function (dismiss) {
            });
        })


        //change color customer status
        $(document).on('change','.changeColor1',function () {
            let id = $(this).data('id');
            let value = $(this).val();
            swal({
                title: 'Bạn có muộn cập nhật?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                $.ajax({
                    url:'/ajax/system/update-color-customer-status',
                    method:'put',
                    data:{
                        id: id,
                        color:value
                    },
                    success:function (data) {
                        if(data){
                            alertify.success('Cập nhật thành công !')
                        }
                    }
                })
            }, function (dismiss) {
            });
        })
    </script>
@endsection