@extends('layouts.web')

@section('css')
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/sweetalert2.min.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid pt-3">
    <div class="row mt-3">
        <div class="col">
            <div class="card card-outline card-success">
                <div class="card-header text-center">
                    ครูสแกนที่ว่างในวันที่ : {{ date('d/m/Y') }}
                </div>
                <div class="card-body table-responsive">
                    <table class="table time-table" id="time-table">
                        <thead>
                          <tr>
                            <th class="text-center" scope="col" width="50%">เวลา</th>
                            <th class="text-center" scope="col" width="50%">จำนวน (คน)</th>
                          </tr>
                        </thead>
                        <tbody>
                            @for($i=0; $i<count($data); $i++)
                            <tr class="hand-hover" data-toggle="modal" data-target="#teacherModal{{$i}}">
                                <td class="align-middle text-center">
                                    <a href="#" class="course-title-link">{{ $data[$i]['time'] }}</a>
                                    <!-- Modal -->
                                    <div class="modal fade" style="display:none;" id="teacherModal{{ $i }}" tabindex="-1" aria-labelledby="teacherModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                                        <div class="modal-dialog modal-dialog-centered text-left">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <table class="table table-hover teacher-table" id="teacher-table{{ $i }}">
                                                            <thead class="thead-light">
                                                                <tr>
                                                                    <th></th>
                                                                    <th>รายชื่อครูที่ว่างเวลา {{ $data[$i]['time'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @for($t=0; $t<count($teachers[$i]); $t++)
                                                                    <tr>
                                                                        <td>{{ $t+1 }}</td>
                                                                        <td><a href="{{ route('teacher.show', $teachers[$i][$t]['id']) }}" class="course-title-link">{{ $teachers[$i][$t]['title'] . $teachers[$i][$t]['firstname'] . ' ' . $teachers[$i][$t]['lastname'] }}</a></td>
                                                                    </tr>
                                                                @endfor
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-center">{{ $data[$i]['amount'] }}</td>
                            </tr>
                            @endfor
                        </tbody>
                      </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footerscript')
<script src="{{ asset('js/sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.time-table tr td:not(:last-child)').click(function () {
            var href = $(this).closest('tr').find('a').attr('href');
            location.href = href;
        });

        $('.teacher-table tr td:not(:last-child)').click(function () {
            var href = $(this).closest('tr').find('a').attr('href');
            location.href = href;
        });
    });
</script>
@if (session('feedback'))
<script>
    Swal.fire({
                text: '{{ session('feedback') }}',
                icon: 'success',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#62966C'
    })
</script>
@endif
@endsection

