@extends('backend.layouts.master')
@section('content')

    <style>
        #list-user .fa:before {
            font-size: 18px;
        }

        #list-user .user-now .fa:before {
            color: #b7aeae;
            cursor: not-allowed;
        }
    </style>

    <div class="content-body">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Thống kê thời gian học</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form id="form-search" action="" method="GET">
                                @csrf
                                <div class="row">
                                    <div style="margin-bottom: 0px !important;"
                                         class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="disabledInput">Họ tên</label>
                                            <input type="text" class="form-control" id="placeholderInput"
                                                   name="searchName" placeholder="Nhập họ tên"
                                                   value="{{@$dataSearch['searchName']}}">
                                        </fieldset>
                                    </div>
                                    <div style="margin-bottom: 0px !important;"
                                         class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="disabledInput">Số điện thoại</label>
                                            <input type="text" class="form-control" id="placeholderInput"
                                                   name="searchPhone" placeholder="Nhập số điện thoại"
                                                   value="{{@$dataSearch['searchPhone']}}">
                                        </fieldset>
                                    </div>
                                    @if(auth()->user()->department_id == \App\Constants\User::ADMIN)
                                        <div style="margin-bottom: 0px !important;" class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                            <fieldset class="form-group">
                                                <label for="disabledInput">Chọn phòng ban</label>
                                                <select id="departmentChange" name="searchDepartment" class=" form-control">
                                                    @foreach($department as $item)
                                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                                    @endforeach
                                                </select>
                                            </fieldset>
                                        </div>
                                        <div style="margin-bottom: 0px !important;"
                                             class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                            <fieldset class="form-group">
                                                <label for="disabledInput">Chọn chức vụ</label>
                                                <select  name="searchStep"
                                                        class="form-control dd-list">
                                                    @foreach($steps as $item)
                                                        <option value="{{$item->role_id}}">{{$item->role->name ?? null}}</option>
                                                    @endforeach
                                                </select>
                                            </fieldset>
                                        </div>
                                    @endif


                                    <div class="col-xl-12 col-lg-12 col-md-12 tb-btn-search" style="margin-top: 0px;">
                                        <button type="submit" class="btn btn-primary">Tìm kiếm <i
                                                    class="fa fa-search"></i></button>
                                        <button type="button" class="btn btn-warning btn-min-width"
                                                onclick="location.href='/admin/statistical-time-learn';">Làm mới <i
                                                    class="ft-rotate-cw"></i></button>
                                    </div>
                                </div>
                            </form>
                            @include('backend.pages.statistical.grid_time_lecture')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>--}}
    <script>
        $('#departmentChange').on('change', function () {
            const id = $(this).find(":selected").val();
            getDepartment(id);
        })

        function getDepartment(id) {
            let html = '';
            var row = $('body').find('.dd-list');
            $.ajax({
                url: `/admin/steps`,
                data: {id: id},
            }).done(function (data) {
                console.log(1111, data)
                let abc = data.data;
                abc.forEach(element => {
                    html += `<option value=` + element.role_id + `>` + element.role.name + `</option>`
                });
                row.html(html);
            });
        }
    </script>

@endsection