@extends('layout.app')
@section('content')
    {{-- Màn danh sách đơn từ: header (tạo đơn) -> thanh lọc (tìm tên + tab trạng thái + duyệt hàng loạt) -> bảng --}}
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-file-signature"></i> Danh sách đơn từ</h3>
                <div class="crm-list-header__actions">
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-plus-circle"></i> Tạo đơn
                        </button>
                        <div class="dropdown-menu dropdown-menu-right order-create-menu">
                            <a class="dropdown-item" href="/approval/order/create/0">
                                <span class="order-type order-type--leave"><i class="fas fa-calendar-times"></i></span> Đơn nghỉ
                            </a>
                            <a class="dropdown-item" href="/approval/order/create/1">
                                <span class="order-type order-type--checkin"><i class="fas fa-user-clock"></i></span> Đơn check-in/check-out
                            </a>
                            <a class="dropdown-item" href="/approval/order/create/2">
                                <span class="order-type order-type--overtime"><i class="fas fa-business-time"></i></span> Đơn tăng ca
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="crm-list-toolbar order-toolbar">
                <form action="{{url()->current()}}" method="get" id="gridForm" class="crm-list-toolbar__search" onsubmit="return false;">
                    <i class="fas fa-search"></i>
                    <input type="text" name="searchName" class="form-control searchName" placeholder="Tìm theo tên nhân viên..." autocomplete="off">
                </form>
                <nav class="order-tabs" aria-label="Lọc theo trạng thái">
                    <a class="order-tabs__item searchStatus active" href="#" data-status="">Tất cả <span class="order-tabs__count">{{$count}}</span></a>
                    <a class="order-tabs__item searchStatus" href="#" data-status="0"><i class="fas fa-hourglass-half"></i> Chờ duyệt</a>
                    <a class="order-tabs__item searchStatus" href="#" data-status="1"><i class="fas fa-check-circle"></i> Đã duyệt</a>
                    <a class="order-tabs__item searchStatus" href="#" data-status="2"><i class="fas fa-ban"></i> Không duyệt</a>
                </nav>
                @if(\Illuminate\Support\Facades\Auth::user()->department_id==\App\Constants\DepartmentConstant::ADMIN)
                    <button type="button" class="btn btn-success acceptAll order-toolbar__approve">
                        <i class="fas fa-check-double"></i> Duyệt đơn <span class="order-selected-count js-order-selected">0</span>
                    </button>
                @endif
            </div>

            {{-- Vùng chứa danh sách: JS thay nội dung khi tìm kiếm / đổi tab --}}
            <div id="order-list" class="order-list">
                @include('cham_cong.order.ajax')
            </div>
        </div>
    </div>
    @include('cham_cong.order.modal_accept')
@endsection
@section('_script')
    <script>
        $(function () {
            $(".draggable").draggable();
        });
        /** Cập nhật số đơn đang chọn trên nút "Duyệt đơn" + tô sáng dòng được chọn */
        function updateOrderSelected() {
            var $checked = $('input[getdataitem]:checked');
            $('.js-order-selected').text($checked.length).toggleClass('is-active', $checked.length > 0);
            $('input[getdataitem]').each(function () {
                $(this).closest('tr').toggleClass('is-selected', this.checked);
            });
            var $all = $('input[getdataitem]');
            $('#checkAll').prop('checked', $all.length > 0 && $checked.length === $all.length);
        }

        $(document).on('click', '#checkAll', function () {
            if (this.checked) {
                $('input:checkbox[getdataitem]').not(this).prop('checked', true);
            } else {
                $('input:checkbox[getdataitem]').not(this).prop('checked', false);
            }
            updateOrderSelected();
        })

        $(document).on('change', 'input[getdataitem]', updateOrderSelected);

        $(document).on('click','.acceptAll',function () {
            let favorite = [];
            $.each($("input[getdataitem]:checked"), function () {
                favorite.push($(this).val());
            });
            if(favorite.length < 1){
                alertify.warning('Vui lòng chọn đơn');
                return;
            } else {
                $('.js-order-modal-count').text(favorite.length);
                $('#myModalDuyet').modal('show');
            }
        })
        $(document).on('click','.submitAccept',function () {
            let favorite = [];
            $.each($("input[getdataitem]:checked"), function () {
                favorite.push($(this).val());
            });
            let type = $(this).data('type');

            $.ajax({
                url:'/approval/update-array-order',
                method: 'put',
                data:{
                    array_id: favorite,
                    type: type
                },
                success:function (data) {
                    if(data){
                        alertify.success('Cập nhật thành công !')
                        // Đóng modal và nạp lại danh sách theo bộ lọc hiện tại để thấy trạng thái mới
                        $('#myModalDuyet').modal('hide');
                        search(currentFilter());
                    } else {
                        alertify.error('Cập nhật không thành công !')
                    }
                }
            })
        })


        /** Bộ lọc hiện tại: kết hợp ô tìm tên + tab trạng thái đang chọn (trước đây 2 bộ lọc ghi đè nhau) */
        function currentFilter() {
            let data = {'searchName': $('.searchName').val()};
            let status = $('.searchStatus.active').data('status');
            if (status !== '' && status !== undefined) {
                data.status = status;
            }
            return data;
        }

        $(document).on('keyup', '.searchName', function () {
            doSearch(currentFilter());
        })

        $(document).on('click', '.searchStatus', function (e) {
            e.preventDefault();
            $('.searchStatus').removeClass('active');
            $(this).addClass('active');
            search(currentFilter());
        })

        function search(data) {
            $('#order-list').addClass('is-loading');
            $.ajax({
                url: `/approval/order`,
                data: data,
                success: function (data1) {
                    $('#order-list').html(data1);
                },
                complete: function () {
                    $('#order-list').removeClass('is-loading');
                }
            })
        }

        let delayTimer;

        function doSearch(data) {
            clearTimeout(delayTimer);
            delayTimer = setTimeout(function () {
                search(data)
            }, 500); // Will do the ajax stuff after 1000 ms, or 1 s
        }
    </script>
@endsection