@extends('layouts.web')

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

@section('content')
<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-3">
            <form action="{{ route('calendar.submit_day') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="get"
            >
            {{-- @csrf --}}
                <div class="form-group">
                    <label for="date">วันที่ <span class="text-red">*</span></label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control datepiacker" id="dateDay" name="date" placeholder="วันที่" autocomplete="off" value="{{$date}}" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                        <button type="submit" class="btn btn-outline-success show-outline-btn ml-2" value="show">แสดง</button>
                    </div>
                    @error('date')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </form>
        </div>
    </div>
    <div class="row mt-3">
        <button onclick="topFunction()" id="top-btn" title="กลับขึ้นด้านบน"><i class="fas fa-arrow-up"></i></button>
        <div class="col-12">
            @foreach($vehicles as $keyIndex => $vehicle)
                <div class="card">
                    <div class="card-body">
                        <label>{{ $vehicle->type . " (" . $vehicle->gear . ") คันที่ : ".$vehicle->number . " , " . $vehicle->brand." ".$vehicle->model. " [ ".$vehicle->registration_class." ".$vehicle->registration_number." ]" }}</label>
                        @for($w=0; $w<count($week); $w++)
                        <div class="row align-items-center mt-2">
                            <div class="col-12">
                                <table class="table table-sm calendar" id="vehicle{{$vehicle->id}}">
                                    <thead>
                                        <tr>
                                            <th scope="col" width="10%"></th>
                                            @for($i=7; $i<21; $i++)
                                            <th scope="col" colspan="2" width="6%" class="text-center">
                                                @if(date('Y-m-d') <= $week[$w])
                                                    @if(date('Y-m-d') == $week[$w])
                                                        @if(date('H') < $i)
                                                            <a href="#" data-toggle="modal" data-target="#vehicleBookingModal"
                                                                data-vehicle="{{ $vehicle->id }}"
                                                                data-type="{{ $vehicle->type }}"
                                                                data-date="{{ $week[$w] }}"
                                                                data-time="{{ $i }}"
                                                            >{{ $i .":00"}}</a>
                                                            @extends('calendar.modal_vehicle_booking')
                                                        @else
                                                            {{ $i .":00"}}
                                                        @endif
                                                    @else
                                                        <a href="#" data-toggle="modal" data-target="#vehicleBookingModal"
                                                                data-vehicle="{{ $vehicle->id }}"
                                                                data-type="{{ $vehicle->type }}"
                                                                data-date="{{ $week[$w] }}"
                                                                data-time="{{ $i }}"
                                                            >{{ $i .":00"}}</a>
                                                        @extends('calendar.modal_vehicle_booking')
                                                    @endif
                                                @elseif(date('Y-m-d') > $week[$w])
                                                {{ $i .":00"}}
                                                @endif

                                            </th>
                                            @endfor
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td width="10%">เพิ่มประสบการณ์</td>
                                            @for($i=0; $i<28; $i++)
                                                @if($arr1[$w][$vehicle->id][$i] != '-1')
                                                <td @if($arrSpan1[$w][$vehicle->id][$i] > '1') colspan="{{$arrSpan1[$w][$vehicle->id][$i]}}" class="bg-primary border-right border-left text-center @if($arrSig1[$w][$vehicle->id][$i]=='1') sig @endif" @endif width="{{ (($arrSpan1[$w][$vehicle->id][$i])*3) ."%" }}" >
                                                @if('1' == $arr1[$w][$vehicle->id][$i])
                                                    <a href="#teacherModal1{{$vehicle->id.$w.$i}}" data-toggle="modal" data-target="#teacherModal1{{$vehicle->id.$w.$i}}">
                                                        {{ getFirstname($arrValue1[$w][$vehicle->id][$i]) }}
                                                    </a>
                                                    @include('calendar.modal_booking_1')
                                                @endif
                                                </td>
                                                @endif
                                            @endfor
                                        </tr>
                                        <tr>
                                            <td width="10%">เรียนและสอบ</td>
                                            @for($i=0; $i<28; $i++)
                                                @if($arr2[$w][$vehicle->id][$i] != '-1')
                                                <td @if( $arrSpan2[$w][$vehicle->id][$i] > '1' ) colspan="{{$arrSpan2[$w][$vehicle->id][$i]}}" class="@if($arrGear2[$w][$vehicle->id][$i]=='m') bg-danger @else bg-success @endif border-right border-left text-center @if($arrSig2[$w][$vehicle->id][$i]=='1') sig @endif" @endif width="{{(($arrSpan2[$w][$vehicle->id][$i])*3)}}%" >
                                                @if('1' == $arr2[$w][$vehicle->id][$i])
                                                    <a href="#teacherModal2{{$vehicle->id.$w.$i}}" data-toggle="modal" data-target="#teacherModal2{{$vehicle->id.$w.$i}}">
                                                        {{ wordwrap(getFirstname($arrValue2[$w][$vehicle->id][$i])) }}
                                                    </a>
                                                    @include('calendar.modal_booking_2')
                                                @endif
                                                </td>
                                                @endif
                                            @endfor
                                        </tr>
                                        <tr>
                                            <td>เก็บชั่วโมงเพื่อสอบ</td>
                                            @for($i=0; $i<28; $i++)
                                                @if($arr3[$w][$vehicle->id][$i] != '-1')
                                                <td @if($arrSpan3[$w][$vehicle->id][$i] > '1') colspan="{{$arrSpan3[$w][$vehicle->id][$i]}}" class="bg-warning border-right border-left text-center @if($arrSig3[$w][$vehicle->id][$i]=='1') sig @endif" @endif width="{{ (((int)$arrSpan3[$w][$vehicle->id][$i])*3) ."%" }}" >
                                                @if('1' == $arr3[$w][$vehicle->id][$i])
                                                    <a href="#teacherModal3{{$vehicle->id.$w.$i}}" data-toggle="modal" data-target="#teacherModal3{{$vehicle->id.$w.$i}}">
                                                        {{ getFirstname($arrValue3[$w][$vehicle->id][$i]) }}
                                                    </a>
                                                    @include('calendar.modal_booking_3')
                                                @endif
                                                </td>
                                                @endif
                                            @endfor
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>
@endsection

@section('footerscript')
<script src="{{ asset('js/sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.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/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/calendar.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#dateDay').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            language: 'th',
            orientation: 'bottom',
        });
    });

    var topButton = document.getElementById("top-btn");
    let height = screen.height / 2;
    window.onscroll = function() { scrollFunction() };
    function scrollFunction() {
      if (document.body.scrollTop > height || document.documentElement.scrollTop > height) {
        topButton.style.display = "block";
      } else {
        topButton.style.display = "none";
      }
    }
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
</script>
@endsection
