@extends('admin.admin_dashboard')

@section('customcss')
<!-- Daterange picker -->
<link href="{{ asset('../asset/vendor/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet">
    <!-- Clockpicker -->
<link href="{{ asset('../asset/vendor/clockpicker/css/bootstrap-clockpicker.min.css')}}" rel="stylesheet">

 <!-- Pick date -->
 <link rel="stylesheet" href="{{ asset('../asset/vendor/pickadate/themes/default.css')}}">
<link rel="stylesheet" href="{{ asset('../asset/vendor/pickadate/themes/default.date.css')}}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@endsection

@section('admin')
        <!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">
            <div class="container-fluid">
                <div class="row page-titles">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
                        <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Class Routine</a></li>
                    </ol>
                </div>
                <!-- row -->
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Add Class Routine</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form action="{{ route('admin.store.class.routine') }}" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Class:</label>
                                            <select name="class_id" id="class_id" class="default-select form-control wide" onchange="getClassData()">
                                                <option value="">Select Class</option>
                                                @foreach($allClass as $class)
                                                    <option value="{{ $class->id }}" {{ old('class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Section:</label>
                                            <select name="section_id" id="section_id" class=" form-control wide mb-3">
                                                <option value="">Select Section</option>
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Subject:</label>
                                            <select name="subject_id" id="subject_id" class=" form-control wide mb-3">
                                                <option value="">Select Subject</option>
                                            </select>
                                        </div>

                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Day:</label>
                                            <select id="inputState" name="day" class="default-select form-control wide">
                                                <option value="1">Saturday</option>
                                                <option value="2">Sunday</option>
                                                <option value="3">Monday</option>
                                                <option value="4">Tuesday</option>
                                                <option value="5">Wednesday</option>
                                                <option value="6">Thursday</option>
                                                <option value="7">Friday</option>
                                                
                                            </select>
                                        </div>

                                        <div class="col-md-3 col-xl-3 col-xxl-3 mb-3">
                                            <label class="form-label">State Time</label>
                                            <div class="input-group clockpicker">
                                                <input type="text" class="form-control" name="start_time" value="09:30"><span class="input-group-text"><i class="far fa-clock"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xl-3 col-xxl-3 mb-3">
                                            <label class="form-label">End Time</label>
                                            <div class="input-group clockpicker">
                                                <input type="text" class="form-control" value="09:30" name="end_time"><span class="input-group-text"><i class="far fa-clock"></i></span>
                                            </div>
                                        </div>

                                        
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Status:</label>
                                            <select id="inputState" name="status" class="default-select form-control wide">
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row" style="text-align: right;">
                                        <div class="mb-3 col-md-6"></div>
                                        <div class="mb-3 col-md-6">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                            <button type="button" class="btn btn-danger">Cancel</button>
                                        </div>
                                    </div>
                                </form>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <!--**********************************
            Content body end
        ***********************************-->
@endsection

@section('customjs')
<script src="{{ asset('../asset/vendor/moment/moment.min.js')}}"></script>
<script src="{{ asset('../asset/vendor/bootstrap-daterangepicker/daterangepicker.js')}}"></script>

<script src="{{ asset('../asset/vendor/clockpicker/js/bootstrap-clockpicker.min.js')}}"></script>

<script src="{{ asset('../asset/js/plugins-init/clock-picker-init.js')}}"></script>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            function getClassData() {
                var classId = document.getElementById('class_id').value;
                if (classId) {
                    fetch('/get-sections-subjects/' + classId)
                        .then(response => response.json())
                        .then(data => {
                            console.log("Fetched data:", data);

                            var sectionDropdown = document.getElementById('section_id');
                            sectionDropdown.innerHTML = '<option value="">Select Section</option>';
                            data.sections.forEach(section => {
                                var option = document.createElement('option');
                                option.value = section.id;
                                option.textContent = section.name;
                                sectionDropdown.appendChild(option);
                            });

                            var subjectDropdown = document.getElementById('subject_id');
                            subjectDropdown.innerHTML = '<option value="">Select Subject</option>';
                            data.subjects.forEach(subject => {
                                var option = document.createElement('option');
                                option.value = subject.id;
                                option.textContent = subject.name;
                                subjectDropdown.appendChild(option);
                            });
                        })
                        .catch(error => {
                            console.error("Error fetching data:", error);
                        });
                } else {
                    document.getElementById('section_id').innerHTML = '<option value="">Select Section</option>';
                    document.getElementById('subject_id').innerHTML = '<option value="">Select Subject</option>';
                }
            }
            window.getClassData = getClassData;
        });
    </script>
@endsection