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


            <div class="wrapper wrapper-content">
        <div class="row">
                    <div class="col-lg-3">
                        <div class="widget style1 blue-bg">
                    <div class="row">
                        <div class="col-4">
                            <i class="fa fa-money fa-5x"></i>
                        </div>
                        <div class="col-8 text-right">
                            <span> Total Income </span>
                            <h2 class="font-bold">2688</h2>
                        </div>
                    </div>
                </div>


                    </div>
                    <div class="col-lg-3">
                         <div class="widget style1 navy-bg">
                    <div class="row">
                        <div class="col-4">
                            <i class="fa fa-usd fa-5x"></i>
                        </div>
                        <div class="col-8 text-right">
                            <span> Total Expenses </span>
                            <h2 class="font-bold">2688</h2>
                        </div>
                    </div>
                </div>

                    </div>
                    <div class="col-lg-3">
                        <div class="widget style1 red-bg">
                    <div class="row">
                        <div class="col-4">
                            <i class="fa fa-user fa-5x"></i>
                        </div>
                        <div class="col-8 text-right">
                            <span> Total Students </span>
                            <h2 class="font-bold">2688</h2>
                        </div>
                    </div>
                </div>


                    </div>
                    <div class="col-lg-3">
                        <div class="widget style1 yellow-bg">
                    <div class="row">
                        <div class="col-4">
                            <i class="fa fa-users fa-5x"></i>
                        </div>
                        <div class="col-8 text-right">
                            <span> Total Teacher </span>
                            <h2 class="font-bold">2688</h2>
                        </div>
                    </div>
                </div>
                        {{-- <div class="card bg-info text-white">
    <div class="row card-body">

        <div class="col-md-8 pt-0">
            <span class="ml-2"><i class="fa fa-user  fa-2x" style=" padding:20px;
    border-radius: 50%;background: #357faf;"></i></span><br>
          <p class="mt-3 mb-0" style="font-size: 15px;">  Total Teacher</p>
        </div>
        <div class="col-md-4 text-right mt-4" ><p class="pt-3">22</p></div>
    </div>
  </div> --}}

            </div>
        </div>
        <div class="row">
                    <div class="col-lg-12">
                       <div class="ibox ">
                        <div class="ibox-title">
                            <h5>Student Attendance

                            </h5>
                        </div>
                        <div class="ibox-content">
                            <div>
                                <canvas id="lineChart" height="140"></canvas>
                            </div>
                        </div>
                    </div>
                        </div>
                    </div>


                <div class="row">
                   {{--  <div class="col-lg-4">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <h5>Messages</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content ibox-heading">
                                <h3><i class="fa fa-envelope-o"></i> New messages</h3>
                                <small><i class="fa fa-tim"></i> You have 22 new messages and 16 waiting in draft folder.</small>
                            </div>
                            <div class="ibox-content">
                                <div class="feed-activity-list">

                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right text-navy">1m ago</small>
                                            <strong>Monica Smith</strong>
                                            <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
                                            <small class="text-muted">Today 5:60 pm - 12.06.2014</small>
                                        </div>
                                    </div>

                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">2m ago</small>
                                            <strong>Jogn Angel</strong>
                                            <div>There are many variations of passages of Lorem Ipsum available</div>
                                            <small class="text-muted">Today 2:23 pm - 11.06.2014</small>
                                        </div>
                                    </div>

                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">5m ago</small>
                                            <strong>Jesica Ocean</strong>
                                            <div>Contrary to popular belief, Lorem Ipsum</div>
                                            <small class="text-muted">Today 1:00 pm - 08.06.2014</small>
                                        </div>
                                    </div>

                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">5m ago</small>
                                            <strong>Monica Jackson</strong>
                                            <div>The generated Lorem Ipsum is therefore </div>
                                            <small class="text-muted">Yesterday 8:48 pm - 10.06.2014</small>
                                        </div>
                                    </div>


                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">5m ago</small>
                                            <strong>Anna Legend</strong>
                                            <div>All the Lorem Ipsum generators on the Internet tend to repeat </div>
                                            <small class="text-muted">Yesterday 8:48 pm - 10.06.2014</small>
                                        </div>
                                    </div>
                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">5m ago</small>
                                            <strong>Damian Nowak</strong>
                                            <div>The standard chunk of Lorem Ipsum used </div>
                                            <small class="text-muted">Yesterday 8:48 pm - 10.06.2014</small>
                                        </div>
                                    </div>
                                    <div class="feed-element">
                                        <div>
                                            <small class="float-right">5m ago</small>
                                            <strong>Gary Smith</strong>
                                            <div>200 Latin words, combined with a handful</div>
                                            <small class="text-muted">Yesterday 8:48 pm - 10.06.2014</small>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div> --}}

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

              <div class="row animated fadeInDown">
        <div class="col-lg-3">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Draggable Events</h5>
                    <div class="ibox-tools">
                         <a class="add-link" data-toggle="modal" data-target="#addcalendarevent">
                                                <i class="fa fa-plus"></i>
                                            </a>
                        <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">
                    <div id='external-events'>

                        <p>Drag a event and drop into callendar.</p>

                        @for($i=0;$i<5;$i++)
                        <div class='external-event navy-bg'>{{$draggabledata}}</div>
                        @endfor



                        {{-- <div class='external-event navy-bg'>Check the new CI from Corporation.</div>
                        <div class='external-event navy-bg'>Send documents to John.</div>
                        <div class='external-event navy-bg'>Phone to Sandra.</div>
                        <div class='external-event navy-bg'>Chat with Michael.</div>
                         <div class='external-event navy-bg'>Chat with Michael.</div>
                          <div class='external-event navy-bg'>Chat with Michaedfdfl.</div>
 --}}
                    </div>
                    <div>
                        <p class="m-t">
                            <input type='checkbox' id='drop-remove' class="i-checks" checked /> <label for='drop-remove'>remove after drop</label>
                        </p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-9">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Calender </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">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>Events</h5>
                                        <div class="ibox-tools">
                                            <a class="add-link" data-toggle="modal" data-target="#addevent">
                                                <i class="fa fa-plus"></i>
                                            </a>
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="close-link">
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="ibox-content table-responsive">
                                        <table class="table table-hover no-margins">
                                            <thead>
                                            <tr>
                                                {{-- <th>Status</th> --}}
                                                <th>Date</th>
                                                <th>Detail</th>
                                                {{-- <th>Value</th> --}}
                                            </tr>
                                            </thead>
                                            <tbody id="eventlist">
                                            <tr >
                                                {{-- <td><small>Pending...</small></td> --}}
                                                <td><i class="fa fa-clock-o"></i> 11:20pm</td>
                                                <td>Samantha's birthday</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 24% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><span class="label label-warning">Canceled</span> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 10:40am</td>
                                                <td>Monica</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 66% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><small>Pending...</small> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 01:30pm</td>
                                                <td>John</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 54% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><small>Pending...</small> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 02:20pm</td>
                                                <td>Agnes</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 12% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><small>Pending...</small> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 09:40pm</td>
                                                <td>Janet</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 22% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><span class="label label-primary">Completed</span> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 04:10am</td>
                                                <td>Amelia</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 66% </td> --}}
                                            </tr>
                                            <tr>
                                                {{-- <td><small>Pending...</small> </td> --}}
                                                <td><i class="fa fa-clock-o"></i> 12:08am</td>
                                                <td>Damian</td>
                                                {{-- <td class="text-navy"> <i class="fa fa-level-up"></i> 23% </td> --}}
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>Todo List</h5>
                                        <div class="ibox-tools">
                                            <a class="add-link" data-toggle="modal" data-target="#addtodo">
                                                <i class="fa fa-plus"></i>
                                            </a>
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="close-link">
                                                <i class="fa fa-times"></i>
                                            </a>

                                        </div>
                                    </div>
                                    <div class="ibox-content">
                                        <ul class="todo-list m-t small-list" id="todo_ul">
                                            <li id='todo1' class="todo1" >
                                                <input type="checkbox" class="todo1" id="aaa" onclick=check(this)>
                                                <span class="m-l-xs {{-- todo-completed --}}">Buy a milk</span>
                                                <span onclick="todochecked(this)" style="margin-right:10px;"><i class="fa fa-trash ml-2" ></i></span>

                                            </li>
                                            <li id="todo2">
                                                <input type="checkbox" class="todo1" id="aaa">
                                                <span class="m-l-xs">Go to shop and find some products.</span><span onclick="todochecked(this)"><i class="fa fa-trash ml-2"></i></span>

                                            </li>
                                           {{--  <li id="todo3">
                                                <input type="checkbox" class="todo1" id="aaa" onchecked="todochecked(this)">
                                                <span class="m-l-xs">Send documents to Mike</span>

                                            </li> --}}
                                            <li id="todo4">
                                                <input type="checkbox" class="todo1" id="aaa" >
                                                <span class="m-l-xs">Go to the doctor dr Smith</span><span onclick="todochecked(this)"><i class="fa fa-trash ml-2"></i></span>
                                            </li>
                                            <li id="todo5">
                                                <input type="checkbox" class="todo1" id="aaa">
                                                <span class="m-l-xs ">Plan vacation</span><span onclick="todochecked(this)"><i class="fa fa-trash ml-2"></i></span>
                                            </li>
                                            <li id="todo6">
                                               <input type="checkbox" class="todo1" id="aaa" >
                                                <span class="m-l-xs">Create new stuff</span><span onclick="todochecked(this)"><i class="fa fa-trash ml-2"></i></span>
                                            </li>
                                            <li id="todo7">
                                                <input type="checkbox" class="todo1" id="aaa">
                                                <span class="m-l-xs">Call to Anna for dinner</span><span onclick="todochecked(this)"><i class="fa fa-trash ml-2"></i></span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-lg-12">

                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>News And Events</h5>
                                        <div class="ibox-tools">
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="close-link">
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="ibox-content">

                                    <div class="row">
                                            <div class="col-lg-12">
                                                <table class="table table-hover margin bottom">
                                                    <thead>
                                                    <tr>
                                                        <th style="width: 1%" class="text-center">S.N</th>
                                                        <th>Details</th>

                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                         @for($i=0;$i<5;$i++)
                                                    <tr>
                                                        <td class="text-center">1</td>
                                                        <td> Security doorsdfsdfsdfsfddsf....
                                                            </td>
                                                        {{-- <td class="text-center small">16 Jun 2014</td> --}}
                                                        <td class="text-center"><button class="btn btn-success">view more</button></td>

                                                    </tr>
                                                        @endfor
                                                    </tbody>
                                                </table>
                                            </div>

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

                    </div>


                </div>

            </div>

<script>
    function check(data){
        var id=data.id;
         var list=$("id").closest(".m-l-xs");
         list.innerHTML+="todo-completed ";


    }

    function todochecked(data){
         // if(data.checked == true){
        var ul = document.getElementById("todo_ul");
        var li_id=data.parentNode.id;
        // alert(li_id);
        var liremove=document.getElementById(li_id);
         // liremove.innerHTML = '';
            ul.removeChild(liremove);
    // }



    }
    function addtodofunction(){
         $('#addtodo').modal('hide');

        var value=document.getElementById('input_todo').value;
        var empty=document.getElementById('input_todo').value="";
         return document.getElementById('todo_ul').innerHTML+='<li id='+value+' class="todo1" ><input type="checkbox" class="todo1" id="aaa" > '+value+'<span onclick="todochecked(this)" style="margin-right:10px;"><i class="fa fa-trash ml-2"></i></span></li>';
// alert(parent);

    }
    function addcalendareventfunction(){
        $('#addcalendarevent').modal('hide');
        var value=document.getElementById('input_calender_event').value;
        var empty=document.getElementById('input_calender_event').value="";
         return document.getElementById('external-events').innerHTML+='<div class="external-event navy-bg" style="position: relative;">'+value+'</div>';
        // alert(value);
    }
    function addeventfunction(){
        $('#addevent').modal('hide');
        var value=document.getElementById('input_event1').value;
         var date=document.getElementById('input_date1').value;
        var empty=document.getElementById('input_event1').value="";
         var empty1=document.getElementById('input_date1').value="";

         debugger;
         return document.getElementById('eventlist').innerHTML+='<tr ><td><i class="fa fa-clock-o"></i> '+date+'</td><td>'+value+'</td></tr>';
    }


</script>
 <div class="modal" id="addtodo">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-info">
          <h4 class="modal-title">Add to Todo list</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <form>
        <div class="modal-body">
          <input type="text" placeholder="Enter todo list" required id="input_todo" class="form-control">
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-info" onclick="return addtodofunction()">Submit</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
            </form>
      </div>
    </div>
  </div>

   <div class="modal" id="addcalendarevent">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-info">
          <h4 class="modal-title">Add to Calender Event</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <form action="{{route('addeventtocalendar')}}" method="post">
        <div class="modal-body">
          <input type="text" placeholder="Enter Events" required id="input_calender_event" class="form-control">
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="submit" class="btn btn-info" {{-- onclick="return addcalendareventfunction()" --}}>Submit</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
            </form>
      </div>
    </div>
  </div>

     <div class="modal" id="addevent">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-info">
          <h4 class="modal-title">Add to Event</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <form>
        <div class="modal-body">
            <input required type="time" id="input_date1" class="form-control">
          <input required type="text" placeholder="Enter Events"  id="input_event1" class="form-control" >
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-info" onclick="return addeventfunction()">Submit</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
            </form>
      </div>
    </div>
  </div>

@endsection