@extends('layouts.master')
@section('content')
    <div class="card">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Create Class</h5> <a href="{{ route('student_class.index') }}" class="btn btn-sm btn-primary">Class List</a>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger m-3">
                <ul class="m-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card-body">
            <form method="POST" action="{{ route('student_class.store') }}">
                @csrf
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="class_name">Shift *</label>
                            {{ generateDropdown($shifts, 'class="form-control" name="shift_id" ', old('shift_id'), 'Select Option') }}
                        </div>
                        <div class="form-group">
                            <label for="class_name">Class Name *</label>
                            <input id="class_name" type="text"
                                class="form-control @error('class_name') is-invalid @enderror" name="class_name"
                                value="{{ old('class_name') }}" placeholder="Enter class name" autofocus>
                            @error('class_name')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>Sections</label>
                            @foreach ($sections as $section)
                                <div class="custom-control custom-checkbox mb-2">
                                    <input type="checkbox" class="custom-control-input" id="section{{ $section->id }}"
                                        name="sections[]" value="{{ $section->id }}">
                                    <label class="custom-control-label"
                                        for="section{{ $section->id }}">{{ $section->section_name }}</label>
                                </div>
                            @endforeach
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Create Class</button>
                            <a href="{{ route('student_class.index') }}" class="btn btn-secondary ml-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
@endsection

@section('scripts')
    <script>
        $('.building_id').on('change', function() {
            // alert($(this).val())
            let _this = $(this);
            let building_id = _this.val();
            if (building_id) {
                $.get('{{ route('building_floors.search_floor') }}', {
                    building_id: building_id
                }, function(response) {
                    let building_floors = response;
                    let option = '';
                    for (let i = 0; i < building_floors.length; i++) {
                        if (building_floors[i].building_id == building_id) {
                            option += '<option value=' + building_floors[i].id + ' >' + building_floors[i]
                                .floor_number + '</option>';
                        }
                    }
                    $('select.building_floor_id').append(option);
                });
            }
        });

        $('.building_floor_id').on('change', function() {
            let _this = $(this);
            let building_floor_id = _this.val();
            if (building_floor_id) {
                $.get('{{ route('class_rooms.search_rooms') }}', {
                    building_floor_id: building_floor_id
                }, function(response) {
                    let class_rooms = response;
                    console.log(response);
                    let option = '';
                    for (let i = 0; i < class_rooms.length; i++) {
                        if (class_rooms[i].building_floor_id == building_floor_id) {
                            option += '<option value=' + class_rooms[i].id + ' >' + class_rooms[i].room_no +
                                '</option>';
                        }
                    }
                    $('select.class_room_id').append(option);
                });
            }
        });
    </script>
@endsection