@extends('layouts.teacher.app')

@section('content')

<div class="pagetitle">
    <h1>Assign Class</h1>
    <nav>
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
        <li class="breadcrumb-item">Admin Access</li>
        <li class="breadcrumb-item active">Assign Class</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="container">
            @include('errors')
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Assign Class - {{$teacher->mrsm_name}}</h5>
                </div>
                        <div class="card-body">
                            <form id="app" method="post" action="{{ route('teacher.storeclasssession') }}" data-parsley-validate="">
                                @csrf
                            <div class="row">
                                <div class="col-4 col-md-5">
                                    <label class="required">Teacher</label>
                                    <select name='teacher_id' class="form-control" data-parsley-trigger="change" required>
                                        <option value="">Select a teacher</option>
                                        @foreach ($teacherlist as $t)
                                            <option value="{{ $t->teacher_id }}">{{ $t->teacher_id }} - {{ $t->name }}</option>
                                        @endforeach
                                    </select>
                                </div>                                            
                                <div class="col-4 col-md-5">  
                                    <label class="required">Subject</label>
                                    <select name='subjek' class="form-control" data-parsley-trigger="change" required>
                                        <option value="">Select a subject</option>
                                        <option value="BM - BAHASA MALAYSIA">BM - BAHASA MALAYSIA</option>
                                        <option value="EN - ENGLISH">EN - ENGLISH</option>
                                        <option value="SE - HISTORY">SE - HISTORY</option>
                                        <option value="MC - MATHEMATIC">MC - MATHEMATIC</option>
                                        <option value="AM - ADDITIONAL MATHEMATIC">AM - ADDITIONAL MATHEMATIC</option>
                                        <option value="SC - SCIENCE">SC - SCIENCE</option>
                                        <option value="MON - MONDAY">MON - MONDAY</option>
                                        <option value="TUE - TUESDAY">TUE - TUESDAY</option>
                                        <option value="WED - WEDNESDAY">WED - WEDNESDAY</option>
                                        <option value="THU - THURSDAY">THU - THURSDAY</option>
                                        <option value="FRI - FRIDAY">FRI - FRIDAY</option>
                                    </select>
                                </div>
                                <div class="col-4 col-md-2">  
                                    <label class="required">Class</label>
                                    <select name='kelas' class="form-control" data-parsley-trigger="change" required>
                                        <option value="">Select a Class</option>
                                        @foreach ($class_list as $c)
                                            <option value="{{ $c->kelas }}">{{ $c->kelas }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="row">
                                    <div class="col-4 col-md-4">  
                                        <label class="required">Day</label>
                                        <select name='hari' class="form-control" data-parsley-trigger="change" required>
                                            <option value="">Select a 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>
                                        </select>
                                    </div>
                                    <div class="col-4 col-md-2">
                                        <label class="required">Class Start</label>
                                        <select name='start_time' class='form-control' data-parsley-trigger="change" required>
                                            <!-- Options will be added by JavaScript -->
                                        </select>
                                    </div>
                                    <div class="col-4 col-md-2">
                                        <label class="required">Class End</label>
                                        <select name='end_time' class='form-control' data-parsley-trigger="change" required>
                                            <!-- Options will be added by JavaScript -->
                                        </select>
                                    </div>
                                    
                                    {{-- <div class="col-4 col-md-2">
                                        <label class="required">Class Start</label>
                                        <input name='start_time' type='time' class='form-control' placeholder='HH:MM' step="60" min="00:00" max="23:59" pattern='^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$' data-parsley-trigger="change" required>
                                    </div>
                                    <div class="col-4 col-md-2">
                                        <label class="required">Class End</label>
                                        <input name='end_time' type='time' class='form-control' placeholder='HH:MM' step="60" min="00:00" max="23:59" pattern='^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$' data-parsley-trigger="change" required>
                                    </div> --}}
                                    <div class="col-4 col-md">
                                        <button type="submit" class="btn btn-primary mt-4">Assign Class</button>
                                    </div>
                                </div>  
                            </form>
                            </div><hr>
                            <div class="fdb-box py-3 mt-3 mb-3 overflow-auto">
                                <div class="row justify-content">
                                    <div class="col my-0 py-0">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead class="thead-light">
                                            <tr>
                                                <th scope="col">No.</th>
                                                <th scope="col" class="text-justify">Teacher ID</th>
                                                <th scope="col" class="text-justify">Class Day</th>
                                                <th scope="col" class="text-center">Class Period</th>
                                                <th scope="col" class="text-left">Subject</th>
                                                <th scope="col" class="text-justify">Code</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($classsession as $sess)
                                            <tr>
                                                <td class="text-right">{{ $loop->iteration }}.</td>
                                                <td class="text-left">{{ $sess->teacher_id }}</td>
                                                <td class="text-left">{{ $sess->hari }}</td>
                                                <td class="text-center">{{ $sess->mula_kelas }} - {{ $sess->tamat_kelas }}</td>
                                                <td class="text-left">{{ $sess->subjek }}</td>
                                                <td class="text-left">{{ $sess->code_sub }}</td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="7" class="text-center py-3">No records found</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                    {{ $classsession->links() }}
                                </div>                                            
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                function generateTimeOptions() {
                    const startSelect = document.querySelector('select[name="start_time"]');
                    const endSelect = document.querySelector('select[name="end_time"]');
                    let time = 0;
                    
                    while (time < 24 * 60) { // 24 hours * 60 minutes
                        const hours = Math.floor(time / 60);
                        const minutes = time % 60;
                        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
                        
                        // Create option elements
                        const optionStart = document.createElement('option');
                        optionStart.value = formattedTime;
                        optionStart.textContent = formattedTime;
                        
                        const optionEnd = document.createElement('option');
                        optionEnd.value = formattedTime;
                        optionEnd.textContent = formattedTime;
                        
                        // Append options to selects
                        startSelect.appendChild(optionStart);
                        endSelect.appendChild(optionEnd);
                        
                        // Increment time by 30 minutes
                        time += 30;
                    }
                }
                
                // Call the function to generate options
                document.addEventListener('DOMContentLoaded', generateTimeOptions);
            </script>
            
</section>
@endsection