@if(isset($data) && count($data))
    @include('backend.pages.statistical.bieu_do_time_lecture')
@endif


<div class="table-responsive" style="margin-top: 10px;">
    <table id="list-user" class="table table-bordered table-hover">
        <thead class="bg-info text-white">
        <tr class="text-center">
            <th>STT</th>
            <th>Ảnh đại diện</th>
            <th>Người dùng</th>
            <th>SĐT</th>
            <th class="text-center">Trạng thái</th>
            <th class="text-center">Chức vụ</th>
            <th>Xem chi tiết</th>
        </tr>
        </thead>
        <tbody>
        @if (isset($user_phong_ban) && count($user_phong_ban))
            @foreach ($user_phong_ban as $key => $item)
                <tr>
                    <th scope="row">{{$key+1}}</th>
                    <td class="text-center">
                        <div class="tb-avatar">
                               <span class="_image_avatar_round"><img
                                           src="{{@$item->avatar ? asset($item->avatar) : asset('backend/images/account.png')}}"
                                           alt="avatar"></span>
                        </div>
                    </td>
                    <td class="text-center text-bold-600">{{$item->full_name ? : ''}}</td>
                    <td class="text-center">{{$item->phone}}</td>
                    <td class="text-center">
                        @if ($item->status === \App\Constants\UserSetting::ENABLE)
                            <span class="badge badge-success">Hoạt động</span>
                        @elseif ($item->status === \App\Constants\UserSetting::DISABLE)
                            <span class="badge badge-danger">Không hoạt động</span>
                        @endif
                    </td>
                    <td>{{@$item->role_text}}</td>
                    <td>
                        <button class="btn btn-primary btn-sm click-modal" data-id="{{$item->id}}">Xem</button>
                    </td>
                </tr>
            @endforeach
        @else
            Không có bản ghi nào.
        @endif
        </tbody>
    </table>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Chi tiết</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body video-for">

            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary primary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-primary primary" data-dismiss="modal" style="color:#fff !important;">Close</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function ($) {

        function secondsToHms(d) {
            d = Number(d);
            var h = Math.floor(d / 3600);
            var m = Math.floor(d % 3600 / 60);
            var s = Math.floor(d % 3600 % 60);

            var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " giờ, ") : "";
            var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " phút, ") : "";
            var sDisplay = s > 0 ? s + (s == 1 ? " second" : " giây") : "";
            return hDisplay + mDisplay + sDisplay;
        }

        $('.click-modal').on("click", function () {
            const data = $(this).data('id');
            const name = $(this).data('name');
            $('.course_name_modal').html(name);
            $.ajax('statistical-time-learn/' + data, {
                method: 'GET',
                data: {lecture_id: data}
            }).done(function (response) {
                console.log(1111, response);
                var html = `
                       <div class="row">
                            <div class="col-2">

                            </div>
                            <div class="col-5">
                                Tên khóa học
                            </div>
                            <div class="col-3">
                                Thời gian học
                            </div>
                        </div>
                        <hr>
                `;
                if(response.length > 0){
                    $.each(response, function (index, value) {
                        var time = value.sum_time;
                        html += `
                        <div class="row">
                            <div class="col-2">
                                <div class="image">
                                    <img src="{{\App\Constants\DirectoryConstant::UPLOAD_FOLDER_LECTURE_THUMB}}`+value.lecture.thumbnail +`" alt=""
                                         style="width:100%;height: 90px;">
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="mr-1 mt-2">
                                    <h5 class="ngon-ngay font-weight-bold">` + value.lecture.title + `</h5>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mr-1 mt-2">
                                    <h6 class="ngon-ngay">`+ secondsToHms(time) +`</h6>
                                </div>
                            </div>
                        </div>
                    `;
                        // $('.video-for').html(html);
                    });
                } else {
                    html = `
                       <div class="row">
                            <div class="col-2">

                            </div>
                            <div class="col-5">
                                Tên khóa học
                            </div>
                            <div class="col-3">
                                Thời gian học
                            </div>
                        </div>
                        <hr>
                `;
                }
                $('.video-for').html(html);
                jQuery('#exampleModalLong').modal('show');

                // console.log(response);
            })
        });
    })

</script>