@extends('admin.include.main') @section('content')
<div class="wrapper wrapper-content">
     @if ($errors->any())
    <div class="alert alert-danger" id="broaderror">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Send Personal</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li><a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <h5> Category<span class="text-danger">*</span></h5>
                    <div class="row">

                        <div class="col-lg-3">

                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="parent" name="radio" checked onclick="showparentdiv()">
                                <label class="custom-control-label" for="parent">Parents</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="student" name="radio" onclick="showstudentdiv()">
                                <label class="custom-control-label" for="student">Students</label>
                            </div>

                        </div>

                        <div class="col-md-3">
                              <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="teacher" name="radio" onclick="showteacherdiv()">
                                <label class="custom-control-label" for="teacher">Teacher</label>
                            </div>

                        </div>
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="staff" name="radio" onclick="showstaffdiv()">
                                <label class="custom-control-label" for="staff">Staff</label>
                            </div>
                        </div>
                    </div>
                    <form method="post" action="{{route('addpersonalmessage')}}">
                        @csrf
                    <div id="personal_maindiv" class="mt-5">


                    </div>
                    <div id="msgdiv" style="display: none">
                     @include('admin/include/emojitextarea')
                     <input type="submit" name="submit" value="submit" class="btn btn-primary">
                    </div>


                </form>








        </div>
    </div>
</div>
{{-- {{dd($class)}} --}}

<script>

        function showparentsections(){

            // alert('a');
        var class_id=$('#parentclass').val();
        // alert(class_id);
        // alert(class_id);
        var url="{{url('')}}";
        $.get(url+'/class_section?class_id=' +class_id,function (data) {
            $('#parentclasssection').empty();
            debugger;
           $('#parentclasssection').append('<option> select section</option>');
            $.each(data,function (index,subcatObj) {
                $('#parentclasssection').append('<option value="'+subcatObj.id+'"> '+subcatObj.section_name+'</option>');
            })
        })
    }
function showstudentsections(){

            // alert('a');
        var class_id=$('#studentclass').val();
        // alert(class_id);
        // alert(class_id);
        var url="{{url('')}}";
        $.get(url+'/class_section?class_id=' +class_id,function (data) {
            $('#studentclasssection').empty();
            debugger;
           $('#studentclasssection').append('<option> select section</option>');
            $.each(data,function (index,subcatObj) {
                $('#studentclasssection').append('<option value="'+subcatObj.id+'"> '+subcatObj.section_name+'</option>');
            })
        })
    }
    // });
// $('#parentclasssection').on('change',function(e){
    function parentsectioncheck(){
        // debugger;
        // alert('a');

        var class_id=$('#parentclass').children("option:selected").val();
        var section_id=$('#parentclasssection').children("option:selected").val();
         var url="{{url('')}}";
        $.get(url+'/getparents?class_id=' +class_id+'&section_id='+section_id,function (data) {
            $('#parentselect').empty();
            debugger;
            $.each(data,function (index,subcatObj) {
                $('#parentselect').append('<option value="'+subcatObj.id+'"> '+subcatObj.father_name+'</option>');
            })
        })
          // });
      }
      function studentsectioncheck(){

        var class_id=$('#studentclass').children("option:selected").val();
        var section_id=$('#studentclasssection').children("option:selected").val();
         var url="{{url('')}}";
        $.get(url+'/getstudents?class_id=' +class_id+'&section_id='+section_id,function (data) {
            $('#studentselect').empty();
            debugger;
            $.each(data,function (index,subcatObj) {
                $('#studentselect').append('<option value="'+subcatObj.id+'"> '+subcatObj.name+'</option>');
            })
        })
      }

     function showteacherdiv(){
        $('#msgdiv').show();
        $('#personal_maindiv').empty();
        $('#personal_maindiv').append('<div class="col-md-6"><div class="form-group"><label>Select User<span class="text-danger">*</span></label><select class="form-control m-b" name="user" required=""><label>Select Class<span class="text-danger">*</span></label><option value="" selected disabled>Select Teacher</option>@foreach($teacher as $teachers)<option value="{{$teachers->id}}">{{$teachers->full_name}}</option>@endforeach</select></div></div>');

    }
    function showstaffdiv(){

        $('#msgdiv').show();
        $('#personal_maindiv').empty();
         $('#personal_maindiv').append(' <div class="row"><div class="col-md-6"><div class="form-group"><input type="text" name="role" value="staff" hidden><label>Select User<span class="text-danger">*</span></label><select class="form-control m-b" name="user" required=""><label>Select Staff<span class="text-danger">*</span></label><option value="" selected disabled>Select Staff</option>@foreach($staff as $staffs)<option value="{{$staffs->st_id}}">{{$staffs->staff_name}}</option>@endforeach</select></div></div><div class="col-md-6"><div class="form-group"></div></div></div>');
    }

    function showparentdiv(){
         $('#msgdiv').show();
        $('#personal_maindiv').empty();
       $('#personal_maindiv').append('<div class="row "><input name="role" value="parent" hidden><div class="col-md-6"><div class="form-group"><label>Select Class<span class="text-danger">*</span></label><select class="form-control m-b" name="class" id="parentclass" required=""  onchange="showparentsections()"><label>Select CLass<span class="text-danger">*</span></label><option value="" selected disabled>Select Class</option>@foreach($class as $classes)<option value="{{$classes->id}}">{{$classes->class_name}}</option>@endforeach</select></div></div><div class="col-md-6"><div class="form-group"><label>Select Section<span class="text-danger">*</span></label><select class="form-control m-b" name="section" id="parentclasssection" onchange="parentsectioncheck()"><label>Select Section<span class="text-danger">*</span></label><option value="" selected disabled>Select Section</option></select></div></div></div><div class="row"><div class="col-md-6"><div class="form-group"><label>Select User<span class="text-danger">*</span></label><select class="form-control m-b" name="user" id="parentselect"  required="" ></select></div></div> ');
    }
      function showstudentdiv(){
         $('#msgdiv').show();
        $('#personal_maindiv').empty();
       $('#personal_maindiv').append('<div class="row "><input type="text" name="role" value="student" hidden> <div class="col-md-6"><div class="form-group"><label>Select Class<span class="text-danger">*</span></label><select class="form-control m-b" name="class" id="studentclass" required="" onchange="showstudentsections()"><label>Select CLass<span class="text-danger">*</span></label><option value="" selected disabled>Select Class</option>@foreach($class as $classes)<option value="{{$classes->id}}">{{$classes->class_name}}</option>@endforeach</select></div></div><div class="col-md-6"><div class="form-group"><label>Select Section<span class="text-danger">*</span></label><select class="form-control m-b" name="section" id="studentclasssection" required="" onchange="studentsectioncheck()"><label>Select Section<span class="text-danger">*</span></label><option value="" selected disabled>Select Section</option></select></div></div></div><div class="row"><div class="col-md-6"><div class="form-group"><label>Select User<span class="text-danger">*</span></label><select class="form-control m-b" name="user"  id="studentselect" required=""><option value="" >Select Student</option></select></div></div><div class="col-md-6"><div class="form-group"></div></div></div>');
    }





    function showpreviews(){
         // var text=$('#input_staff').val();
          var sign_input=$('#input_sign').val();

      var text=$('#input_staff').val()+'<br></br>'+sign_input;

      document.getElementById('previewdiv_st').style.display = "";

      var preview=$('#preview_st').html(text);

    }

    function test_p(val){
    var sign= $('#input_sign_p').val();
     var signlen=sign.length;

    var allowedchar=160;

    if(val.value.length == '0'){
      var len=0+signlen;
    }
    else{
      var len = val.value.length+signlen;
    }

    console.log(len);
    var remaininglength = allowedchar-len;
    if(remaininglength == len){

      document.getElementById("input_parent").disabled = true;
    }
    $('#remaining_p').html(remaininglength+' characters remaining');
    }

    function test_st(val){
    var sign= $('#input_sign_st').val();
     var signlen=sign.length;

    var allowedchar=160;

    if(val.value.length == '0'){
      var len=0+signlen;
    }
    else{
      var len = val.value.length+signlen;
    }

    console.log(len);
    var remaininglength = allowedchar-len;
    if(remaininglength == len){

      document.getElementById("input_staff").disabled = true;
    }
    $('#remaining_st').html(remaininglength+' characters remaining');
    }

    function test_t(val){
    var sign= $('#input_sign_t').val();
     var signlen=sign.length;

    var allowedchar=160;

    if(val.value.length == '0'){
      var len=0+signlen;
    }
    else{
      var len = val.value.length+signlen;
    }

    console.log(len);
    var remaininglength = allowedchar-len;
    if(remaininglength == len){

      document.getElementById("input_teacher").disabled = true;
    }
    $('#remaining_t').html(remaininglength+' characters remaining');
    }

     function test_s(val){

    var sign= $('#input_sign_s').val();
     var signlen=sign.length;

    var allowedchar=160;

    if(val.value.length == '0'){
      var len=0+signlen;
    }
    else{
      var len = val.value.length+signlen;
    }

    console.log(len);
    var remaininglength = allowedchar-len;
    if(remaininglength == len){

      document.getElementById("input_student").disabled = true;
    }
    $('#remaining_s').html(remaininglength+' characters remaining');
    }

$(document).ready(function($) {
    $('#parent').click();
});







</script>
@endsection