@extends('layouts.web')

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css">
@endsection

@section('content')
<div class="container-fluid pt-3">
    <form action="{{ route('student.store_booking') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
    >
    @csrf
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">ตารางเรียน</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h5>คอร์ส : {{ "(".$enroll->courseType . ") " . $enroll->name }}</h5>
                                <input type="hidden" id="eid" name="eid" value="{{ $enroll->eid }}">
                                <input type="hidden" id="driveType" name="driveType" value="{{ $enroll->driveType }}">
                                <input type="hidden" id="courseTest" value="{{ $enroll->license_test }}">
                                <input type="hidden" id="courseHour" value="{{ $enroll->hour }}">
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-1">
                                <div class="form-group text-center">
                                    <label for="drive1">ครั้งที่ 1</label>
                                    <div class="icheck-nephritis">
                                        <input type="checkbox" id="drive1" name="drive1" value="1">
                                        <label for="drive1"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear1">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear1" name="gear1" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="ออโต้">ออโต้</option>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="date1">วันที่ <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="date1" name="date1" placeholder="วันที่ 1" autocomplete="off" disabled required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('date1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="starttime1">เวลาเริ่ม <span class="text-red">*</span></label>
                                    <select id="starttime1" name="starttime1" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                        @for ($i = 7; $i < 21; $i++)
                                        <option value="{{$i}}">{{ $i.":00"}}</option>
                                        @endfor   
                                    </select>
                                    @error('starttime1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="hour1">จำนวน ชม. <span class="text-red">*</span></label>
                                    <select id="hour1" name="hour1" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                    </select>
                                    @error('hour1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="endtime1">เวลาสิ้นสุด</label>
                                    <input type="text" class="form-control" id="endtime1" name="endtime1" placeholder="เวลาสิ้นสุด" readonly>
                                    @error('endtime1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="vehicle1">รถ <span class="text-red">*</span></label>
                                    <select id="vehicle1" name="vehicle1" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                    </select>
                                    @error('vehicle1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-1">
                                <div class="form-group text-center">
                                    <label for="drive2">ครั้งที่ 2</label>
                                    <div class="icheck-nephritis">
                                        <input type="checkbox" id="drive2" name="drive2" value="1">
                                        <label for="drive2"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear2">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear2" name="gear2" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="ออโต้">ออโต้</option>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="date2">วันที่ <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="date2" name="date2" placeholder="วันที่ครั้งที่ 2" autocomplete="off" disabled required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('date2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="starttime2">เวลาเริ่ม <span class="text-red">*</span></label>
                                    <select id="starttime2" name="starttime2" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                        @for ($i = 7; $i < 21; $i++)
                                        <option value="{{$i}}">{{ $i.":00"}}</option>
                                        @endfor   
                                    </select>
                                    @error('starttime2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="hour2">จำนวน ชม. <span class="text-red">*</span></label>
                                    <select id="hour2" name="hour2" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                    </select>
                                    @error('hour2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="endtime2">เวลาสิ้นสุด</label>
                                    <input type="text" class="form-control" id="endtime2" name="endtime2" placeholder="เวลาสิ้นสุด" readonly>
                                    @error('endtime2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="vehicle2">รถ <span class="text-red">*</span></label>
                                    <select id="vehicle2" name="vehicle2" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                    </select>
                                    @error('vehicle2')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-1">
                                <div class="form-group text-center">
                                    <label for="drive3">ครั้งที่ 3</label>
                                    <div class="icheck-nephritis">
                                        <input type="checkbox" id="drive3" name="drive3" value="1">
                                        <label for="drive3"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear3">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear3" name="gear3" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="ออโต้">ออโต้</option>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="date3">วันที่ <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="date3" name="date3" placeholder="วันที่ครั้งที่ 3" autocomplete="off" disabled required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('date3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="starttime3">เวลาเริ่ม <span class="text-red">*</span></label>
                                    <select id="starttime3" name="starttime3" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                        @for ($i = 7; $i < 21; $i++)
                                        <option value="{{$i}}">{{ $i.":00"}}</option>
                                        @endfor   
                                    </select>
                                    @error('starttime3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="hour3">จำนวน ชม. <span class="text-red">*</span></label>
                                    <select id="hour3" name="hour3" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                    </select>
                                    @error('hour3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="endtime3">เวลาสิ้นสุด</label>
                                    <input type="text" class="form-control" id="endtime3" name="endtime3" placeholder="เวลาสิ้นสุด" readonly>
                                    @error('endtime3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="vehicle3">รถ <span class="text-red">*</span></label>
                                    <select id="vehicle3" name="vehicle3" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                    </select>
                                    @error('vehicle3')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-1">
                                <div class="form-group text-center">
                                    <label for="drive4">ครั้งที่ 4</label>
                                    <div class="icheck-nephritis">
                                        <input type="checkbox" id="drive4" name="drive4" value="1">
                                        <label for="drive4"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear4">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear4" name="gear4" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="ออโต้">ออโต้</option>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="date4">วันที่ <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="date4" name="date4" placeholder="วันที่ครั้งที่ 4" autocomplete="off" disabled required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('date4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="starttime4">เวลาเริ่ม <span class="text-red">*</span></label>
                                    <select id="starttime4" name="starttime4" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                        @for ($i = 7; $i < 21; $i++)
                                        <option value="{{$i}}">{{ $i.":00"}}</option>
                                        @endfor   
                                    </select>
                                    @error('starttime4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="hour4">จำนวน ชม. <span class="text-red">*</span></label>
                                    <select id="hour4" name="hour4" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                    </select>
                                    @error('hour4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="endtime4">เวลาสิ้นสุด</label>
                                    <input type="text" class="form-control" id="endtime4" name="endtime4" placeholder="เวลาสิ้นสุด" readonly>
                                    @error('endtime4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="vehicle4">รถ <span class="text-red">*</span></label>
                                    <select id="vehicle4" name="vehicle4" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                    </select>
                                    @error('vehicle4')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-1">
                                <div class="form-group text-center">
                                    <label for="drive5">ครั้งที่ 5</label>
                                    <div class="icheck-nephritis">
                                        <input type="checkbox" id="drive5" name="drive5" value="1">
                                        <label for="drive5"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear5">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear5" name="gear5" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="ออโต้">ออโต้</option>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="date5">วันที่ <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="date5" name="date5" placeholder="วันที่ครั้งที่ 5" autocomplete="off" disabled required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('date5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="starttime5">เวลาเริ่ม <span class="text-red">*</span></label>
                                    <select id="starttime5" name="starttime5" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                        @for ($i = 7; $i < 21; $i++)
                                        <option value="{{$i}}">{{ $i.":00"}}</option>
                                        @endfor   
                                    </select>
                                    @error('starttime5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="hour5">จำนวน ชม. <span class="text-red">*</span></label>
                                    <select id="hour5" name="hour5" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                    </select>
                                    @error('hour5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="form-group">
                                    <label for="endtime5">เวลาสิ้นสุด</label>
                                    <input type="text" class="form-control" id="endtime5" name="endtime5" placeholder="เวลาสิ้นสุด" readonly>
                                    @error('endtime5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="vehicle5">รถ <span class="text-red">*</span></label>
                                    <select id="vehicle5" name="vehicle5" class="selectpicker show-menu-arrow form-control" title="--เลือก--" disabled required>
                                    </select>
                                    @error('vehicle5')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr />
                    </div>  <!-- div card body -->
                </div>
                <div class="row mt-3 mb-3">
                    <div class="col-12">
                        <div style="float:left">
                            <a href="{{ route('student.index') }}" class="btn btn-outline-secondary"><i class="fas fa-chevron-left"></i> ย้อนกลับ</a>
                        </div>
                        <div style="float: right">
                            <button type="reset" class="btn btn-outline-secondary" value="reset">ล้างข้อความ</button>
                            <button type="submit" id="nextBtn" class="btn btn-success ml-2" value="add-course" disabled>ถัดไป</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('footerscript')
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="{{ asset('js/bootstrap-datepicker-custom.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/booking.js') }}"></script>
<script>
    var courseHour;
    $(document).ready(function(){
        // if( $('#courseTest').val() == 'มี' ) {
        //     courseHour = (parseInt($('#courseHour').val()) - 5).toString();
        // } else {
        //     courseHour = $('#courseHour').val();
        // }
        $("input[type=checkbox]").click(function(){
            if($("input[type=checkbox]").is(":checked")) {
                $('#nextBtn').prop("disabled", false);
            } else {
                $('#nextBtn').prop("disabled", true);
            }
        });

        toggleInput();
        $('.selectpicker').selectpicker();
        bookingVehicle('vehicle1', 'gear1', 'date1', 'starttime1', 'endtime1', 'hour1');
        bookingVehicle('vehicle2', 'gear2', 'date2', 'starttime2', 'endtime2', 'hour2');  
        bookingVehicle('vehicle3', 'gear3', 'date3', 'starttime3', 'endtime3', 'hour3');
        bookingVehicle('vehicle4', 'gear4', 'date4', 'starttime4', 'endtime4', 'hour4');  
        bookingVehicle('vehicle5', 'gear5', 'date5', 'starttime5', 'endtime5', 'hour5'); 
    
    });
</script>
@endsection
