@extends('admin.layouts.index')



@section('content')
<!--main content start-->

 <section id="main-content">
    <script src="https://cdn.ckeditor.com/4.20.0/standard-all/ckeditor.js"></script>
    <section class="wrapper">
    <div class="panel-heading">
     
    
    <form action="assign/store" method="post">
        @csrf
    <div class="row">
        <div class="col-md-4">
            <div class="Card-body">
                <h4 class="fee-heading" style="color: #fff;">
                    <span class="f-w-500 f-s-16">
                        Teacher/User
                       
                        <span class="plus-icon">
                            <a href="teachers" class="add-new-icon"><i class="fa fa-plus-square" id="pluse_icon" aria-hidden="true"></i></a>
                        </span>
                    </span>
                </h4>
                <div class="check_inner_body">
                    @foreach ($admins as $admin)
                <div class="checkbox-field">
                    <input id="teachers{{ $admin->id }}" type="checkbox" name="teachers[]" value="{{ $admin->id }}" />
                    <label for="teachers{{ $admin->id }}">{{ $admin->name }}</label>    
                </div>
                @endforeach
             
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="Card-body">
                <h4 class="fee-heading" style="color: #fff;"><span class="f-w-500 f-s-16">Class
                    {{-- <span class="pull-right btn-fill-lg font-normal text-light bg-dark-pastel-green p2x"> <input type="button" id="toggle2" value="select" onClick="do_this2()" /></span> --}}
                <span class="plus-icon">
                            <a href="create_classes" class="add-new-icon"><i class="fa fa-plus-square" id="pluse_icon" aria-hidden="true"></i></a>
                        </span>
                    </span></h4>
                <div class="check_inner_body">
                    @foreach ($classes as $classe)
                        
                    
                <div class="checkbox-field">
                    <input id="classes{{ $classe->id }}" type="checkbox" name="classes[]" value="{{ $classe->id }}" />
                    <label for="classes{{ $classe->id }}">{{ $classe->name }}</label>    
                </div>
                @endforeach
             
                </div>
            </div>
        </div>
   
        <div class="col-md-4">
            <div class="Card-body">
                <h4 class="fee-heading" style="color: #fff;"><span class="f-w-500 f-s-16">Subject
                    {{-- <span class="pull-right btn-fill-lg font-normal text-light bg-dark-pastel-green p2x"> <input type="button" id="toggle4" value="select" onClick="do_this4()" /></span> --}}
                <span class="plus-icon">
                            <a href="create_subjects" class="add-new-icon"><i class="fa fa-plus-square" id="pluse_icon" aria-hidden="true"></i></a>
                        </span>
                    </span></h4>
                <div class="check_inner_body">
                    @foreach ($subjects as $subject)
                        
                    
                <div class="checkbox-field">
                    <input id="subjects{{ $subject->id }}" type="checkbox" name="subjects[]" value="{{ $subject->id }}" />
                    <label for="subjects{{ $subject->id }}">{{ $subject->name }}</label>    
                </div>
                @endforeach
           
                </div>
            </div>
        </div>
    </div>
    <div class="save_button">
        <button type="submit" href="#" id="save_btn">Save</button>
    </div>
</form>


                           
   
 <div class="panel panel-default" style="margin-top:15px;">
    <div class="panel-heading">
     <h2 style="padding-top: 15px;">Assign Subject Detail</h2>
    </div>
    
    <div>
      <table class="table" ui-jq="footable" ui-options='{
        "paging": {
          "enabled": true
        },
        "filtering": {
          "enabled": true
        },
        "sorting": {
          "enabled": true
        }}'>
       
        <thead>
          <tr>
            <th >Sl. No.</th>
            <th>Teacher</th>
            <th>Class</th>
            {{-- <th>Sec</th> --}}
            <th>Subject</th>
            <th >Action</th>
           
          </tr>
        </thead>
        <tbody>
{{-- {{ dd($meta) }} --}}
@foreach ($assigns as $assign)
    
{{-- {{ dd( $meta['subjects']['name']) }} 
{{ dd($assign->subject_id) }}  --}}
          <tr data-expanded="true">
            <td>{{ $loop->index + 1 }}</td>
            <td>{{ $meta['teachers']['name'][$assign->teacher_id] }}</td>
            <td> {{ $meta['classes']['name'][$assign->class_id] }}</td>
            <td>{{ $meta['subjects']['name'][$assign->subject_id] }}</td>

            <td><a href="assign/delete?r={{$assign->id}}" class="btn btn-danger">Delete</td>
          </tr>
@endforeach


        
          
        </tbody>
      </table>
      {{-- <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav> --}}
    </div>
  </div>
</div>
</section>
<style type="text/css">

    .add-new-icon{color: #fff;}

    .add-new-icon:hover{color: #00c853;}

    #pluse_icon{font-size: 25px;}

    .plus-icon{float: right;
margin-right: 15px;
margin-top: -4px;}

.Card-body{margin-top: 10px;
margin-bottom: 30px;
border: 1px solid #ddd;
border-radius: 10px;
padding-bottom: 10px;padding-left: 0px;padding-right: 0px;}


@media only screen and (max-width: 600px) {
  .Card-body{margin-top: 10px;
margin-bottom: 30px;
border: 1px solid #ddd;
border-radius: 10px;
padding-bottom: 10px;padding-left: 0px;padding-right: 0px;}
}

    .check_inner_body{padding: 10px 15px;height: 150px;
overflow-x: hidden;}

input[type="checkbox"]{height: 20px;width: 20px;}

label{margin-left: 10px;font-size: 20px;
font-weight: 300;}

#save_btn{border: 1px solid;
padding: 10px 15px;
border-radius: 10px;border: 1px solid #8b5c7e;
background: #8b5c7e;
color: #fff;
}
#save_btn:hover{border: 1px solid;
padding: 10px 15px;
border-radius: 10px;border: 1px solid #f0bcb4;
background: #f0bcb4;
color: #fff;
}

.save_button{text-align: right;
margin: 40px 0;}

    #toggle ,#toggle2 ,#toggle3 ,#toggle4{padding: 0px;
background: transparent;
border: none;}

    .fee-heading {
  background: #f0f1f3;
  margin-bottom: 0;
  padding: 8px 15px;
  color: #333;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: #042954;
}
.f-w-500 {
  font-weight: 500 !important;
}
.f-s-16 {
  font-size: 16px !important;
}
.pull-right {
  float: right;
}
.p2x {
  padding: 0px 5px;
  margin-top: 3px;
}
.text-light {
  color: #ffffff !important;
}
.font-normal {
  font-weight: 400;
}
.bg-dark-pastel-green {
  background-color: #00c853;
  margin-top: 0px;
}
.text-white {
  color: #fff !important;
}
</style>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
<script type="text/javascript">

    function do_this2(){

        var checkboxes = document.getElementsByName('approve2[]');
        var button = document.getElementById('toggle2');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
<script type="text/javascript">

    function do_this3(){

        var checkboxes = document.getElementsByName('approve3[]');
        var button = document.getElementById('toggle3');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
<script type="text/javascript">

    function do_this4(){

        var checkboxes = document.getElementsByName('approve4[]');
        var button = document.getElementById('toggle4');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>



<!--modal-->
<div style="z-index: 999999; margin-top: 2%;" class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div style="width:900px;" class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel" style="margin-right:40px;">Create          Assignment</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        
        <div class="row">
                
                        <div class="panel-body">
                            <div class="form">
                                <form class="cmxform form-horizontal" id="signupForm" method="get" action="" >
                                <div class="form-group ">
                                        <label for="confirm_password" class="control-label col-lg-4 text-right">Title:</label>
                                        <div class="col-lg-8">
                                            <input  type="text" class="form-control " id="confirm_password" name="confirm_password" type="password">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="lastname" class="control-label col-lg-4 pull-left">Session:</label>
                                        <div class="col-lg-8">
                                        <select class="form-control ">
                                <option>Create New Parents</option>
                                <option>F & M</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="username" class="control-label col-lg-4 pull-left">Term:</label>
                                        <div class="col-lg-8">
                                        <select class="form-control ">
                                <option>Create New Parents</option>
                                <option>F & M</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">Select Class:</label>
                                        <div class="col-lg-8">
                                            <select class="form-control ">
                                <option>Create New Parents</option>
                                <option>F & M</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="password" class="control-label col-lg-4 pull-left">Select Subject:</label>
                                        <div class="col-lg-8">
                                            <select class="form-control ">
                                <option>Create New Parents</option>
                                <option>F & M</option></select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="firstname" class="control-label col-lg-4 pull-left">Assignment Contents:</label>
                                        <div class="col-lg-8">
                                         <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      height: 260,
      width: 580,
      removeButtons: 'PasteFromWord'
    });
  </script>
                                        </div>
                                    </div>
                                  
                                    <div class="form-group ">
                                        <label for="confirm_password" class="control-label col-lg-4  pull-left">Due Date:</label>
                                        <div class="col-lg-8">
                                            <input  type="date" class="form-control " id="confirm_password" name="confirm_password" type="password">
                                        </div>
                                    </div>
                                    

                                    <div class="form-group " >
                                        <div class="col-lg-offset-3 col-lg-6" style="margin-top:15px;">
                                            <button class="btn btn-primary" type="submit">Create Assignment</button>
                                            <button class="btn btn-default" type="button">Cancel</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>




    </div>
    
      <div style="padding: 10px;" class="modal-body">
        
      </div>
     
    </div>
  </div>
</div>
<!--modal-->
<!--modal1-->
<div style="z-index: 999999; margin-top: 2%;" class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div style="width:450px;" class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel" style="margin-right:40px;">Add Fee</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        
    </div>
    
      <div style="padding: 10px;" class="modal-body">
        
      </div>
     
    </div>
  </div>
</div>
<!--modal1-->
        <!--  -->
        <!-- footer -->
         
  <!-- / footer -->
</section>
<!--main content end-->
</section>


@endsection