@extends('admin.include.main') @section('content')

<div class="wrapper wrapper-content">

    <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">Teachers</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>
                    <div id="parentdiv" class="mt-5" style="display:''">
                        <form action="{{route('addpersonalmessage')}}" method="POST">
                            @csrf
                        <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="">
                                        <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">
                                        <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>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5> Message<span class="text-danger">*</span></h5>
                                    
    @include('admin/include/emojitextarea')

                                </div>
                            </div>

                        </div>
                        <div class="hr-line-dashed"></div>

                        <button type="submit" class="btn btn-success">Send</button>
                        </form>
                    </div>
                    <div id="studentdiv" class="mt-5" style="display:none">
                        <form method="post" action="{{route('addpersonalmessage')}}">
                            @csrf
                        <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="">
                                        <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="">
                                        <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">
                                    <h5> Message<span class="text-danger">*</span></h5>
                                      @include('admin/include/emojitextarea')
                                </div>
                            </div>

                        </div>
                        <div class="hr-line-dashed"></div>
                        <button type="submit" class="btn btn-success">Send</button>
                        </form>
                    </div>
                    <div id="teacherdiv" class="mt-5" style="display:none">
                        <form method="post" action="{{route('addpersonalmessage')}}">
                        @csrf

                        <div class="row">
                            <input name='role' value="teacher" hidden>
                            <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>
                             <div class="col-md-6">
                                <div class="form-group">
                                    <h5> Message<span class="text-danger">*</span></h5>
                                     
                                     @include('admin/include/emojitextarea')
                                </div>
                            </div>

                        </div>
                        <div class="hr-line-dashed"></div>
                        <button type="submit" class="btn btn-success">Send</button>
                        </form>
                    </div>
                    <div id="staffdiv" class="mt-5" style="display:none">
                    <form method="post" action="{{route('addpersonalmessage')}}">
                        @csrf

                        <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">
                                    <h5> Message<span class="text-danger">*</span></h5>
                                    
                                  @include('admin/include/emojitextarea')
                                </div>
                            </div>


                        </div>

                        <div class="hr-line-dashed"></div>

                        <button type="submit" class="btn btn-success">Send</button>
                        </form>
                    </div>


        </div>
    </div>
</div>
<div class="modal fade" id="previewmodal" role="dialog">
            <div class="modal-dialog">

            <!-- Modal content-->
                <div class="modal-content">
                <div class="modal-header" style="background-color:#f2f2f2">
                     <h4 class="modal-title text-left"> Message Preview</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>



                 </div>



                     <div class="modal-body">
                        <p id="preview_para">

                        </p>

                        <div class="modal-footer">

                        <button type="button" class="btn btn-warning actionbtn" data-dismiss="modal">close </button>


                     </div>




              </div>
            </div>
        </div>
<script>
    function showpreviews(){
         var text=$('#input_staff').val();
      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');
    }


    function showparentdiv(){

        document.getElementById("parentdiv").style.display = "";
         document.getElementById("studentdiv").style.display = "none";
          document.getElementById("teacherdiv").style.display = "none";
           document.getElementById("staffdiv").style.display = "none";
    }
    function showstudentdiv(){
        document.getElementById("parentdiv").style.display = "none";
         document.getElementById("studentdiv").style.display = "";
          document.getElementById("teacherdiv").style.display = "none";
           document.getElementById("staffdiv").style.display = "none";
            }

    function showteacherdiv(){
        document.getElementById("parentdiv").style.display = "none";
         document.getElementById("studentdiv").style.display = "none";
          document.getElementById("teacherdiv").style.display = "";
           document.getElementById("staffdiv").style.display = "none";
            }

    function showstaffdiv(){
        document.getElementById("parentdiv").style.display = "none";
         document.getElementById("studentdiv").style.display = "none";
          document.getElementById("teacherdiv").style.display = "none";
           document.getElementById("staffdiv").style.display = "";
            }


</script>
@endsection