@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 alert alert-warning">
                    <span class="my_header_1">
                        Editing Schedule
                    </span>
                </div>
                <div class="card-body">
                    <div class="xhidden_panels">
                        <form id="updatingSchedule" method="POST" action="{{ route('saveUpdatedSchedule')}}">
                            @csrf

                            <div class="form-group row">
                                <label for="instructorName" class="col-sm-3 col-form-label"><b>Update Instructor</b></label>
                                <div class="col-sm-6">
                                    <input type="text" name="instructorName"
                                    class="form-control"
                                    value="{{$schedule->instructor}}"
                                    list="instructor_list"
                                    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="daySelector" class="col-sm-3 col-form-label"><b>Update Day</b></label>
                                <div class="col-sm-6">
                                    <select name="daySelector" id="daySelector" class="form-select">
                                        <option value="{{$schedule->day}}">{{$schedule->day}}</option>
                                        <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>Update 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" value="{{$schedule->time}}" 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>Update 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"
                                        value="{{$schedule->theory_lab}}"
                                        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"
                                        value="{{$schedule->room}}"
                                        class="form-control" placeholder="Class Room" required>
                                </div>
                                <datalist id="room_datalist">

                                </datalist>
                            </div>
                            <br>

                            <input type="hidden" name="scheduleId" value="{{$schedule->id}}">
                            <input type="hidden" name="deptId" value="{{$schedule->did}}">

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

<script>

    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"
        ];
        //
        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