@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">

                <div class="card-header">
                    <span class="panel_header">Adding New Schedule</span>
                </div>
                <div class="card-body">

                    <div class="xhidden_panels">
                        <form id="addingScheduleForm" method="POST" action="{{ route('addOneSchedule')}}">
                            @csrf
                            <div class="form-group row">
                                <label for="departmentSelector" class="col-sm-3 col-form-label"><b>Select Department</b></label>
                                <div class="col-sm-6">
                                    <select name="departmentSelector" id="departmentSelector" class="form-select" onchange="getInstructorCourseData(this)" required>
                                        @foreach ($departments as $department)
                                            <option value="{{$department->id}}">{{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="instructorName" class="col-sm-3 col-form-label"><b>Select Instructor</b></label>
                                <div class="col-sm-6">
                                    <input type="text" name="instructorName"
                                        list="instructor_list"
                                        class="form-control"
                                        {{-- autocomplete="on" --}}
                                        placeholder="Type Instructor here..."
                                        required>

                                        <datalist id="instructor_list">
                                            @foreach ($instructors as $instructor)
                                                <option value="{{$instructor->name}}">
                                                    {{ $instructor->dept }}
                                                </option>
                                            @endforeach
                                        </datalist>
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="courseName" class="col-sm-3 col-form-label"><b>Course Name</b></label>
                                <div class="col-sm-6">
                                    <select name="courseName" id="courseName" class="form-select" required>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="daySelector" class="col-sm-3 col-form-label"><b>Select Day</b></label>
                                <div class="col-sm-6">
                                    <select name="daySelector" id="daySelector" class="form-select">
                                        <option value="Monday">Monday</option>
                                        <option value="Tuesday">Tuesday</option>
                                        <option value="Wednesday">Wednesday</option>
                                        <option value="Thursday">Thursday</option>
                                        <option value="Friday">Friday</option>
                                        <option value="Saturday">Saturday</option>
                                        <option value="Sunday">Sunday</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="timeFrom" class="col-sm-3 col-form-label"><b>Select Time</b></label>
                                <div class="col-sm-2">
                                    <select name="timeFrom" id="timeFrom" class="form-select" onchange="updateTime(this)">
                                        <option value="0">8:30 AM</option>
                                        <option value="1">9:00 AM</option>
                                        <option value="2">9:30 AM</option>
                                        <option value="3">10:00 AM</option>
                                        <option value="4">10:30 AM</option>
                                        <option value="5">11:00 AM</option>
                                        <option value="6">11:30 AM</option>
                                        <option value="7">12:00 AM</option>
                                        <option value="8">12:30 AM</option>
                                        <option value="9">1:30 PM</option>
                                        <option value="10">2:00 PM</option>
                                        <option value="11">2:30 PM</option>
                                        <option value="12">3:00 PM</option>
                                        <option value="13">3:30 PM</option>
                                        <option value="14">4:00 PM</option>
                                        <option value="15">4:30 PM</option>
										<option value="16">5:00 PM</option>
										<option value="17">5:30 PM</option>
										<option value="18">6:00 PM</option>
                                    </select>
                                </div>
                                <label for="timeTo" class="col-sm-1 col-form-label text-center">To</label>
                                <div class="col-sm-2">
                                    <select name="timeTo" id="timeTo" class="form-select" required onchange="checkTime()">
                                        <option></option>
                                        <option value="0">8:30 AM</option>
                                        <option value="1">9:00 AM</option>
                                        <option value="2">9:30 AM</option>
                                        <option value="3">10:00 AM</option>
                                        <option value="4">10:30 AM</option>
                                        <option value="5">11:00 AM</option>
                                        <option value="6">11:30 AM</option>
                                        <option value="7">12:00 AM</option>
                                        <option value="8">12:30 AM</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" name="scheduleTime" id="scheduleTime" class="form-control" readonly>
                                </div>
                                <p class="text-center warning_message" id="time_message"></p>
                            </div>
                            <br>
                            <div class="form-group row">
                              <label for="year" class="col-sm-3 col-form-label"><b>Student Year</b></label>
                              <div class="col-sm-3">
                                  <select name="year" id="year" class="form-control">
                                      <option value="Year I">Year I</option>
                                      @if (isNotFreshman())
                                        <option value="Year II">Year II</option>
                                        <option value="Year III">Year III</option>
                                        <option value="Year IV">Year IV</option>
                                        <option value="Year V">Year V</option>
                                        <option value="Year VI">Year VI</option>
                                        <option value="Year VII">Year VII</option>
                                      @endif
                                  </select>
                              </div>
                              <label for="semester" class="col-sm-2 col-form-label"><b>Semester</b></label>
                              <div class="col-sm-3">
                                <select name="semester" id="semester" class="form-control">
                                    <option value="Sem. I">Sem. I</option>
                                    <option value="Sem. II">Sem. II</option>
                                    @if (isNotFreshman())
                                        <option value="Sem. III">Sem. III</option>
                                        <option value="Sem. IV">Sem. IV</option>
                                    @endif
                                </select>
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="labTheory" class="col-sm-3 col-form-label"><b>Theory/Lab</b></label>
                                <div class="col-sm-4">
                                    <input type="text" name="labTheory" id="labTheory" list="suggests"
                                        class="form-control" required placeholder="Theor or Lab or Practice">
                                </div>
                                <datalist id="suggests">
                                    <option value="Theory">
                                    <option value="Lab">
                                    <option value="Practice">
                                    @for ($i=1; $i<=100; $i++)
                                      <option value="Lab - Section {{ $i }}">
                                    @endfor
                                    @for ($i=1; $i<=100; $i++)
                                      <option value="Theory - Section {{ $i }}">
                                    @endfor
                                </datalist>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="room" class="col-sm-3 col-form-label"><b>Enter Room</b></label>
                                <div class="col-sm-4">
                                    <input type="text" name="room" id="room" list="room_datalist"
                                        class="form-control" placeholder="Class Room" required>
                                </div>
                                <datalist id="room_datalist">
                                </datalist>
                            </div>
                            <br>

                            <span id="messanger"></span>
                            <div class="row mb-0">
                                <div class="col-md-6 offset-md-3">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Save Schedule') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded",function(){
        $(function(){
            //load jQuery just on start
            //use dept Id for staff/instructor
            var deptId = $("#departmentSelector").val();
            var colId = {{Auth::user()->college_id}};
            //
            jQueryInitialLoading(colId, deptId);
        });
    });


    function getInstructorCourseData(obj){
        var colId = {{Auth::user()->college_id}};
        var deptId  = obj.value;
        //load it again
        jQueryInitialLoading(colId, deptId);
    }

    function jQueryInitialLoading(cid, did)
    {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        $.ajax({
            url: "load_instructor_course",
            type: 'POST',
            data: {
                college_id:cid,
                dept_id: did
            },
            dataType: 'json',
            success: function(result){
                $("#instructorName").html(result.staffs);
                $("#courseName").html(result.courses);
                $("#room_datalist").html(result.rooms);
            }
        });
    }


    function updateTime(fromObj)
    {
        var first_half = "<option></option>"
                            +"<option value='0'>8:30 AM</option>"
                            +"<option value='1'>9:00 AM</option>"
                            +"<option value='2'>9:30 AM</option>"
                            +"<option value='3'>10:00 AM</option>"
                            +"<option value='4'>10:30 AM</option>"
                            +"<option value='5'>11:00 AM</option>"
                            +"<option value='6'>11:30 AM</option>"
                            +"<option value='7'>12:00 AM</option>"
                            +"<option value='8'>12:30 AM</option>";

        var second_half = "<option></option>"
                            +"<option value='9'>1:30 PM</option>"
                            +"<option value='10'>2:00 PM</option>"
                            +"<option value='11'>2:30 PM</option>"
                            +"<option value='12'>3:00 PM</option>"
                            +"<option value='13'>3:30 PM</option>"
                            +"<option value='14'>4:00 PM</option>"
                            +"<option value='15'>4:30 PM</option>"
							+"<option value='16'>5:00 PM</option>"
							+"<option value='17'>5:30 PM</option>"
							+"<option value='18'>6:00 PM</option>";

        if (Number(fromObj.value) <= 8){
            document.getElementById("timeTo").innerHTML = first_half;
        }else{
            document.getElementById("timeTo").innerHTML = second_half;
        }
    }

    function checkTime()
    {
        var timeFrom = Number(document.getElementById("timeFrom").value);
        var timeTo = Number(document.getElementById("timeTo").value);
        //
        var times = [
            "8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30",
            "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00"
        ];
        //
        if (timeTo <= timeFrom){
            document.getElementById("time_message").innerHTML = "Incorrect Class Time";
        }else{
            document.getElementById("time_message").innerHTML = "";
        }

        if (timeTo <= 8)
            var am_pm = "AM";
        else
            var am_pm = "PM";
        //
        document.getElementById("scheduleTime").value = times[timeFrom]+" - "+times[timeTo]+" "+am_pm;
    }
</script>
@endsection