@extends('admin.include.main')
@section('content')
@if(count($settingdata)<=0)
<p style="text-align: center;
    color: red;
    font-size: 17px;
    margin-top: 24px;">Message Signature Not Available!!
  <br>
    First Set Signature!!
  </p>
@else
    <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="container">

                </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Broadcast</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">
                      <form action="{{route('addmessage')}}" method="post">
                        @csrf
                         <div class="row mb-3">
                            <input type="text" name="roles" id="roles" value="parent" hidden>

                            <div class="col-3">
                                   <div class="custom-control custom-radio">
                                        {{-- <input type="checkbox"  id="sms" name="sms" checked=""> --}}
                                        <input type="radio" name="msg_email" value="sms"  class="ml-2" onclick="/*emailcheck*/()" checked>
                                        <label for="sms">Sms</label>
                                    </div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-radio">
                                        <input type="radio" name="msg_email" value="email"  class="ml-2" onclick="/*emailcheck*/()">

                                        <label for="email" >Email</label>
                                    </div>
                            </div>


                    </div>
                         <h5> Category<span class="text-danger">*</span></h5>
                        <div class="row">
                            <div class="col-3">

                                  <div class="custom-control custom-radio">


                                        <input type="radio"  id="defaultGroupExample2" name="role" checked onclick="checkparent();showparent();">
                                        <label  for="defaultGroupExample2">Parents</label>
                                    </div>
                            </div>
                            <div class="col-3">
                                 <div class="custom-control custom-radio">
                                        <input type="radio" id="defaultGroupExample1" name="role" onclick="checkstudent();">
                                        <label  for="defaultGroupExample1">Student</label>
                                    </div>
                            </div>
                            <div class="col-3">
                                   <div class="custom-control custom-radio">
                                        <input type="radio"  id="defaultGroupExample3" name="role" onclick="checkteacher();">
                                        <label  for="defaultGroupExample3">Teacher</label>
                                    </div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-radio">
                                        <input type="radio"  id="defaultGroupExample4" name="role" onclick="checkstaff();counttotal();showstaff()" >
                                        <label for="defaultGroupExample4">Staff</label>
                                    </div>
                            </div>
                        </div>
                         <div class="row mt-5" id="classdiv">
                             <div class="col-md-4">
                                <div class="form-group"><label>Select Class<span class="text-danger">*</span></label>
                                    <select class="form-control m-b chekboxclass" name="class" id="broadcast_class" onchange="classesdata()">
                                        <label>Select CLass<span class="text-danger">*</span></label>

                                        <option value="0" selected >Select Class</option>
                                         @foreach($class as $classes)

                                        <option value="{{$classes->id}}">{{$classes->class_name}}</option>

                                        @endforeach


                                    </select>

                                </div>
                            </div>
                             <div class="col-md-8">
                                <div class="form-group" ><label> Section will be displayed here</label>
                                    {{--  --}}
                                    <div id="broadcast_div" class="row">
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                           <div class="col-md-12" id="subjectdiv" style="display: none">
                                  <div class="form-group text-left">
                                                <h5> Subject<span class="text-danger">*</span></h5>

                                                <input type="text" class="form-control" >


                                            </div>

                            </div>
                            {{-- {{dd($settingdata)}} --}}
                                                          <div class="col-md-10" id="recipientdetails">
                                <label for="">Recipient(s)</label>

                                  <select name="recipients[]" id="selectrecepient" class="selectpicker form-control" multiple data-live-search="true"  onchange="counttotalrecepient(this)">

                                    @foreach($guardian as $parent)
                                    <option id="{{$parent->id}}">{{$parent->father_name}}</option>
                                      @endforeach
                                  </select>
                                </div>
                                
                            <div class="col-md-10 mt-4">
                                  <div class="form-group text-left">
                                                <h5> Message<span class="text-danger">*</span></h5>

                                                                                                 <div data-emojiarea data-type="unicode" data-global-picker="false">
                                                <textarea class="form-control" id="input1" rows="5" oninput="test(this);showpreview()"  name="message" maxlength="{{$totalc}}"></textarea>
                                                <div class="emoji-button mr-4">&#x1f604;<span class="ml-1 text-danger" id="remaining">
                                                </span>/160</div>

                                                 
                                                <p><span style="color:red" id="remaining">

                                                </span></p>
                                            </div>


                                            </div>

                            </div>


                        </div>
                        <div>
                            <p id="" >
                               <b> Total Recipient(s): </b><input id="displaytotal" type="text"  value="{{sizeof($guardian)}}">
                            </p>
                        </div >
                        <div class="col-lg-12" id="previewdiv" style="display: none;" >
                          <h3><b>Preview</b></h3>
 
                          <pre id="preview" class="form-control" rows="5" readonly></pre>






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

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

                      </form>
                    </div>
                </div>

            </div>
        </div>
    </div>



<script>
    function counttotalrecepient(val){
      debugger;
      var foo = $('#selectrecepient').val();
      var length=foo.length;
        $('#displaytotal').val(length);



    }

  function showpreview(){
    $('#previewdiv').show();
      var sign_input=$('#input_sign').val();

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

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


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


  }
  function test(val){
    var testcount="";

    var allowedchar=160;

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

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

      alert('you have typed maximum lenght of messsage');
    }
    $('#remaining').html(remaininglength);
    // alert(remaininglength);
  }
function txtareacount(){
  alert('a');
}
function selectedrecepient(data){
  debugger;
  var a=data.val;
  // alert(a);
}
function sectioncheckfunction(data){
    var section_id=data.id;
    var values = [];

    $('.sectionclass').each(function(){
      var $this = $(this);
      if ($this.is(':checked')) {
        values.push($this.val());
      }
    });

      var parent=document.getElementById('defaultGroupExample2');
        var student=document.getElementById('defaultGroupExample1');
        var teacher=document.getElementById('defaultGroupExample3');
        var staff=document.getElementById('defaultGroupExample4');
        var classes=document.getElementById('broadcast_class').value;



         var url="{{url('')}}";
            if(parent.checked){
                var  p=1;
            }
            else{
                var p=0;
            }
            if(student.checked){
                var stu=1;
            }
            else{
                var stu=0;

            }
            if(teacher.checked){
                var t=1;
            }
            else{
                var t=0;
            }
            if(staff.checked){
                var st=1;
            }
            else{
                var st=0;
            }

    countsection=values.length;

    if(countsection>=1){
        $.get(url+'/get_totalcountbysection?p=' +p+'&stu='+stu+'&t='+t+'&st='+st+'&classid='+classes+'&section='+values,function (data1) {


              $('#selectrecepient').empty();
                debugger;


                      delete data1["role"];
                        $.each(data1,function (index,subcatObj) {

                          var role=subcatObj.role;
                    // alert(subcatObj);
                      if(role=='parent'){
                        delete subcatObj["role"];
                       $.each(subcatObj,function (index,subcatObj1) {
                        var b=subcatObj1;
                        $('#selectrecepient').append('<option id="'+subcatObj1.id+'">'+subcatObj1.father_name+'</option>');
                       })
                     }
                     if(role=='student'){
                        delete subcatObj["role"];
                       $.each(subcatObj,function (index,subcatObj1) {
                        var b=subcatObj1;
                        $('#selectrecepient').append('<option id="'+subcatObj1.id+'">'+subcatObj1.name+'</option>');
                       })
                     }




            })
                    // }

                 $("#selectrecepient").selectpicker("refresh");
         $("#selectrecepient").selectpicker('selectAll');


        })

    }
    else{
      classesdata();

    }




}

  function emailchecked(value){
    if(value.checked){
     $('#subjectdiv').show();

    }
    else{
     $('#subjectdiv').hide();
    }
  }



    function counttotal(){


         $('#broadcast_div').html('');
        $('#broadcast_class').val(0);

        var parent=document.getElementById('defaultGroupExample2');
        var student=document.getElementById('defaultGroupExample1');
        var teacher=document.getElementById('defaultGroupExample3');
        var staff=document.getElementById('defaultGroupExample4');


        if(parent.checked){
             $('#displaytotal').empty();
             var a="0";
             var b=0;
             var c=0;
             var d=0;
            if(student.checked){
                var b="0";
            }


            if(teacher.checked){
               var c="0";
            }

            if(staff.checked){
               var d="0";
            }

            var e=parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d);
            // alert(e);


            $('#displaytotal').val(e);


              }
             if(student.checked){
             $('#displaytotal').empty();
             var a="0";
             var b=0;
             var c=0;
             var d=0;
            if(parent.checked){
                var b="0";
            }


            if(teacher.checked){
               var c="0";
            }

            if(staff.checked){
               var d="0";
            }

            var e=parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d);


            $('#displaytotal').val(e);


    }
            if(teacher.checked){
             $('#displaytotal').empty();
             var a="0";
             var b=0;
             var c=0;
             var d=0;
            if(parent.checked){
                var b="0";
            }


            if(student.checked){
               var c="0";
            }

            if(staff.checked){
               var d="0";
            }

            var e=parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d);
            // alert(e);


            $('#displaytotal').val(e);


    }
              if(staff.checked){
             $('#displaytotal').empty();
             var a="0";
             var b=0;
             var c=0;
             var d=0;
            if(parent.checked){
                var b="0";
            }


            if(student.checked){
               var c="0";
            }

            if(teacher.checked){
               var d="0";
            }

            var e=parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d);



            $('#displaytotal').val(e);


    }

    }
</script>
<script >
  function showstaff(){
    debugger;
     var url="{{url('')}}";
    $.get(url+'/get_stafflist',function (data) {
            console.log("staff:",data);

                // alert(data);
                $('#selectrecepient').empty();
                debugger;


                 $.each(data,function (index,subcatObj) {
                      debugger;

                  $('#selectrecepient').append('<option id="'+subcatObj.st_id+'">'+subcatObj.staff_name+'</option>');
                debugger;


            })
                 $("#selectrecepient").selectpicker("refresh");
         $("#selectrecepient").selectpicker('selectAll');


            })
  }


  function checkparent(){
    var url="{{url('')}}";
    $('#roles').val('parent');
    $('#displaytotal').val(0);
    $('#classdiv').show();
    $('#broadcast_class').val(0);
    $('#broadcast_div').empty();
       $.get(url+'/get_parentlist',function (data) {
            console.log("parent:",data);

                // alert(data);
                $('#selectrecepient').empty();
                debugger;


                 $.each(data,function (index,subcatObj) {
                      debugger;

                  $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.father_name+'</option>');
                debugger;


            })
                 $("#selectrecepient").selectpicker("refresh");
         $("#selectrecepient").selectpicker('selectAll');


            })
  }
  
  function checkstudent(){
      var url="{{url('')}}";
    $('#displaytotal').val(0);
    $('#classdiv').show();
     $('#roles').val('student');
     $('#broadcast_class').val(0);
     $('#broadcast_div').empty();
      $.get(url+'/get_studentlist',function (data) {
            console.log("student:",data);
                // alert(data);
                                $('#selectrecepient').val();


                $('#selectrecepient').empty();

                debugger;


                 $.each(data,function (index,subcatObj) {
                      debugger;

                  $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                debugger;


            })
$("#selectrecepient").selectpicker("refresh");
          

            })
  }
  function checkteacher(){
    var url="{{url('')}}";
     $('#roles').val('teacher');
      $('#displaytotal').val(0);
    $('#classdiv').show();
     $('#broadcast_class').val(0);
     $('#broadcast_div').empty();
     $.get(url+'/get_teacherlist',function (data) {
            console.log(data);
               $('#selectrecepient').empty();
                debugger;
                $.each(data,function (index,subcatObj) {
                      debugger;
          $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.full_name+'</option>');
                debugger;


            })
                $("#selectrecepient").selectpicker("refresh");
         $("#selectrecepient").selectpicker('selectAll');


            })
  }
  function checkstaff(){
      $('#displaytotal').val(0);
    $('#classdiv').hide();
     $('#roles').val('staff');



  }
 function checkboxevent() {


 var parent=document.getElementById('defaultGroupExample2');
 var student=document.getElementById('defaultGroupExample1');
 var teacher=document.getElementById('defaultGroupExample3');
 var staff=document.getElementById('defaultGroupExample4');

    if(parent.checked || student.checked || teacher.checked){
         $('#classdiv').show();

    }
    else{
         $('#displaytotal').val(0);
        $('#classdiv').hide();
    }
}

$(document).on('change', '#defaultGroupExample2', function() {
    if(this.checked) {
     $('#classdiv').show();
    }

});
     $(document).on('change', '#defaultGroupExample1', function() {
    if(this.checked) {
     $('#classdiv').show();
    }

});
     function classesdata(){
      // alert('a');
       var url="{{url('')}}";
        // console.log(e);
        var a=document.getElementById('broadcast_class').value;
        var class_id=a;
        // alert(a);

        $.get(url+'/class_section?class_id=' +class_id,function (data) {
            $('#broadcast_div').empty();
            debugger;
            $.each(data,function (index,subcatObj) {
                $('#broadcast_div').append('<div class="col-2"><div class="custom-control custom-radio"> <input onchange    ="sectioncheckfunction(this)" class="sectionclass" type="checkbox" name="'+subcatObj.section_name+'" value="'+subcatObj.id+'" id="'+subcatObj.id+'"/><label></label> '+subcatObj.section_name+'</label></div></div>');

            })
        })

         var parent=document.getElementById('defaultGroupExample2');
        var student=document.getElementById('defaultGroupExample1');
        var teacher=document.getElementById('defaultGroupExample3');
        var staff=document.getElementById('defaultGroupExample4');

            if(parent.checked){
                  debugger;
                var  p=1;
                 $.get(url+'/get_parentlist?classid='+class_id,function (data) {
            console.log(data);
                // alert(data);
                $('#selectrecepient').empty();
                debugger;


                 $.each(data,function (index,subcatObj) {
                      debugger;

                  $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.father_name+'</option>');
                debugger;


            })
                 $("#selectrecepient").selectpicker("refresh");
              $("#selectrecepient").selectpicker('selectAll');

            })

            }

            else{
                var p=0;
            }

            if(student.checked){
                var stu=1;
                 $.get(url+'/get_studentlist?classid='+class_id,function (data) {
            console.log(data);
                // alert(data);
                $('#selectrecepient').empty();
                debugger;


                 $.each(data,function (index,subcatObj) {
                      debugger;

                  $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                debugger;


            })

                 $("#selectrecepient").selectpicker("refresh");
                 $("#selectrecepient").selectpicker('selectAll');
            })

            }
            else{
                var stu=0;

            }

            if(teacher.checked){
                 // $('#displaytotal').val(0);
                 debugger;
                var t=1;

                  $.get(url+'/get_teacherlist?classid='+class_id,function (data) {
            console.log(data);
               $('#selectrecepient').empty();
                debugger;
                $.each(data,function (index,subcatObj) {
                      debugger;
          $('#selectrecepient').append('<option id="'+subcatObj.id+'">'+subcatObj.full_name+'</option>');
                debugger;


            })
                $("#selectrecepient").selectpicker("refresh");
         $("#selectrecepient").selectpicker('selectAll');


            })

            }

            else{
                var t=0;
            }

            if(staff.checked){
                var st=1;

            }
            else{
                var st=0;
            }
            debugger;
     }
</script>

@endif

@endsection