@extends('dashboard.layouts.master')

@section('css')
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">طلب المتابعة</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">طلب المتابعة</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('admin.followup.setup-store')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label>عنوان المتابعة</label>
                            <input type="text" name="title" class="form-control" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>التارجت اليومي</label>
                            <input type="number" name="target" class="form-control" value="0" required>
                            @error('target')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>نوع المتابعة</label>
                            <select class="form-control" name="type" id="type" required>
                                <option value="">اختر</option>
                                <option value="lecture">محاضرة</option>
                                <option value="exam">امتحان</option>
                                <option value="center-attend">حضور سنتر</option>
                                <option value="center">امتحان سنتر</option>
                                <option value="group">طلاب المجموعة</option>
                            </select>
                            @error('type')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div id="lecture">
                            <div class="form-group">
                                <label>حضر المحاضرة</label>
                                <select class="form-control" name="attend_lecture_id" id="attend_lecture_id">
                                   
                                </select>
                                @error('attend_lecture_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>لم يحضر المحاضرة</label>
                                <select class="form-control" name="absent_lecture_id" id="absent_lecture_id">
                                   
                                </select>
                                @error('absent_lecture_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div id="exam" style="display: none;">
                            <div class="form-group">
                                <label>الامتحان</label>
                                <select class="form-control" name="exam_id" id="exam_id">
                                   
                                </select>
                                @error('exam_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>من الدرجة</label>
                                <input class="form-control" name="from_degree" value="0" type="number">
                                @error('from_degree')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>الى الدرجة</label>
                                <input class="form-control" name="to_degree" value="0" type="number">
                                @error('to_degree')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div id="center-attend" style="display: none;">
                            <div class="form-group">
                                <label>المجموعة</label>
                                <select class="form-control" name="attend_group_id">
                                    <option value="">جميع المجموعات</option>
                                    @foreach($groups as $group)
                                        <option value="{{$group->id}}">{{$group->name}}</option>
                                    @endforeach
                                </select>
                                @error('attend_group_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>حضر الحصة</label>
                                <select class="form-control" name="attend_class_id" id="attend_class_id">
                                   
                                </select>
                                @error('attend_class_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>لم يحضر الحصة</label>
                                <select class="form-control" name="absent_class_id" id="absent_class_id">
                                   
                                </select>
                                @error('absent_class_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div id="group" style="display: none;">
                            <div class="form-group">
                                <label>المجموعة</label>
                                <select class="form-control" name="group_id">
                                    @foreach($groups as $group)
                                        <option value="{{$group->id}}">{{$group->name}}</option>
                                    @endforeach
                                </select>
                                @error('group_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div id="center" style="display: none;">
                            <div class="form-group">
                                <label>المجموعة</label>
                                <select class="form-control" name="exam_group_id">
                                    <option value="">جميع المجموعات</option>
                                    @foreach($groups as $group)
                                        <option value="{{$group->id}}">{{$group->name}}</option>
                                    @endforeach
                                </select>
                                @error('exam_group_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>حصة السنتر</label>
                                <select class="form-control" name="class_id" id="class_id">
                                   
                                </select>
                                @error('class_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>من الدرجة</label>
                                <input class="form-control" name="class_from_degree" value="0" type="number">
                                @error('from_degree')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>الى الدرجة</label>
                                <input class="form-control" name="class_to_degree" value="0" type="number">
                                @error('to_degree')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <label>تعيين الادمن</label>
                            <select class="form-control" name="admin_ids[]" id="admin_ids" multiple>
                               @foreach($admins as $admin)
                                <option value="{{$admin->id}}">{{$admin->name}}</option>
                               @endforeach
                            </select>
                            @error('admin_ids')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary waves-effect waves-light" type="submit" aria-haspopup="true" aria-expanded="false">
                                تنفيذ
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')
    <script>
        $('#level_id, #type').change(function() {
            var attend = '#attend_lecture_id';
            var absent = '#absent_lecture_id';
            var attendClass = '#attend_class_id';
            var absentClass = '#absent_class_id';
            var exams = '#exam_id';
            var classes = '#class_id';
            var id = $('#level_id').val();
            var type = $('#type').val();
            if(type == 'lecture'){
                $('#exam').hide();
                $('#center').hide();
                $('#center-attend').hide();
                $('#lecture').show();
                $('#group').hide();
            }else if(type == 'exam'){
                $('#exam').show();
                $('#lecture').hide();
                $('#center').hide();
                $('#center-attend').hide();
                $('#group').hide();
            }else if(type == 'center-attend'){
                $('#exam').hide();
                $('#lecture').hide();
                $('#center').hide();
                $('#center-attend').show();
                $('#group').hide();
            }else if(type == 'group'){
                $('#exam').hide();
                $('#lecture').hide();
                $('#center').hide();
                $('#group').show();
                $('#center-attend').hide();
            }else{
                $('#exam').hide();
                $('#lecture').hide();
                $('#center').show();
                $('#center-attend').hide();
                $('#group').hide();
            }
            var url = '{{ route('admin.followup.get-setup-data', ['id' => '_id', 'type' => '_type' ]) }}';
            console.log(id);
            url = url.replace('_id', id);
            console.log(type);
            url = url.replace('_type', type);
            console.log(url);
            $.ajax({
                type: 'get',
                url: url,
                dataType: 'json',
                success: function(data) {
                    $(attend).empty();
                    $(absent).empty();
                    $(exams).empty();
                    $(classes).empty();
                    $(attendClass).empty();
                    $(absentClass).empty();
                    if(type == 'lecture'){
                        // $(attend).append(`<option value="">Select One if you need</option>`);
                        data.forEach(function(element) {
                            $(attend).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                       
                        // $(absent).append(`<option value="">Select One if you need</option>`);
                        data.forEach(function(element) {
                            $(absent).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                    }else if(type == 'exam'){
                        // $(exams).append(`<option value="">Select One if you need</option>`);
                        data.forEach(function(element) {
                            $(exams).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                    }else if(type == 'group'){
                        // $(exams).append(`<option value="">Select One if you need</option>`);
                        // data.forEach(function(element) {
                        //     $(exams).append(`<option value="` + element["id"] + `">` + element[
                        //         "title"] + `</option>`);
                        // });
                    }else if(type == 'center-attend'){
                        console.log(data);
                        data.forEach(function(element) {
                            $(attendClass).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                       
                        data.forEach(function(element) {
                            $(absentClass).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                    }else{
                        // $(exams).append(`<option value="">Select One if you need</option>`);
                        data.forEach(function(element) {
                            $(classes).append(`<option value="` + element["id"] + `">` + element[
                                "title"] + `</option>`);
                        });
                    }
                    
                },
            });
        });
    </script>
@endsection