@extends('layouts.app')
@section('content')


    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{url('home')}}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <a href="{{url('res_types')}}">Resources</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span> Blocking Resource</span>

                    </li>
                </ul>
                <div class="page-toolbar">
                    <div id="dashboard-report-range" class="pull-right tooltips btn btn-sm" data-container="body" data-placement="bottom" data-original-title="Change dashboard date range">
                        <i class="icon-calendar"></i>&nbsp;
                        <span class="thin uppercase hidden-xs"></span>&nbsp;
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
            <br>


            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
            <link href="{{asset('calendar2/css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
            <link href="{{asset('calendar2/css/custom.css')}}" rel="stylesheet">




            <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
            <script src=" https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
            <script src="{{asset('calendar2/js/bootstrap-datetimepicker.min.js')}}"></script>
            <script src="{{asset('calendar2/js/parsley.js')}}"></script>



            <div class="panel panel-primary">
          <div class="panel-heading text-right">
            <button id="create_event"  type="button" class="btn btn-success btn-md"><i class="fa fa-plus"></i>  Create Event</button>
          </div>
          <div class="panel-body">
              <div id="alert_tmeassage_area"></div>
                 <div class="table-responsive">
                  <table id="data_table" class="table">
                  <thead>
                    <tr class="bg-light">
                      <th>#</th>
                      <th>Title</th>
                      <th >Time</th>
                      <th >Crete</th>
                      <th class="text-right">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
          </div>
    </div>

<!-- View Event-->
    <div class="modal fade" id="view_event_modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog" >                           
            <div class="modal-content admin-form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">View Event</h4>
                </div> 
                <div class="modal-body">
                   <div id="view_event_alert"></div>
                   <div class="section row">
                    <div class="col-md-12 col-xs-12">
                        <div class="section row">
                        <div class="col-lg-12 col-xs-12">
                              <label class="">Event Title</label>
                          <label for="" class="field">
                              <span id="view_event_title"></span>
                          </label>
                        </div>     
                         </div>
                        
                         <div class="section row">
                          <div class="col-lg-12 col-xs-12">
                              <label class="">Time</label>
                          <label for="" class="field">
                              <span id="view_event_time"></span>
                          </label>         
                            </div>              
                      </div>
                  <div class="section row">
                    
                    <div class="col-md-12">
                        
                        <label class="">Event Description</label>
                         <label for="" class="field">
                              <span id="view_event_description"></span>
                          </label>
                   
                      </div>
                </div>   
                    </div>
                  
                  </div>
                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  
                </div>         
        </div>
    </div>   
      
</div>      
          
        <!--     Create Event  -->        
        <div class="modal fade" id="create_event_modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" >
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Create Event</h4>
              </div>
              <div class="modal-body">
                <div id="create_event_alert"></div>
                <form id="create_event_frm"  action="{{route('event')}}"  method="post" enctype="multipart/form-data"  >
                     {{ csrf_field() }}
                  <div class="row">
                    <div class="col-lg-12 col-xs-12">
                      <div class="form-group">
                        <input type="text" name="event_title" id="event_title" required=""  class="form-control" placeholder="Event Title">
                        <input  type="hidden" id="set_start_time_data" value="No" />  
                        <input  type="hidden" id="set_end_time_data" value="No" />  
                        <input  type="hidden" name="set_end_date_data" id="set_end_date_data" value="No" />  
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="pull-left" style="width: 75%;">
                      <div class="col-lg-5 col-xs-12">
                        <div class="form-group">
                          <input type="text"   name="event_start_date" required="" id="event_start_date" value="" class="form-control date_pick" placeholder="Start Date">
                        </div>
                      </div>
                      <div class="col-lg-2 col-xs-2">
                        <div id="start_time_toggle">
                            <button type="button"  class="btn btn-md"  title="Add Start Time" onclick="add_start_time()"> 
                          <i class="text-success fa fa-plus"></i>
                          <i class="text-success fa fa-clock"></i>
                          </button>  
                        </div>
                      </div>
                      <div class="col-lg-5 col-xs-12" id="event_start_time_area" style="display: none">
                        <!--                                 none-->
                        <div class="form-group">
                          <input type="text"   name="event_start_time" id="event_start_time" value="12:00 AM" class="form-control time_pick" placeholder="Start Time">
                        </div>
                      </div>
                    </div>
                    <div class="pull-right" >
                      <div class="col-lg-2 col-xs-2">
                        <div id="end_date_toggle">
                          <button type="button" class="btn btn-md"  onclick="add_end_date()" style="width: 117px" >
                          <i class="text-success fa fa-plus"></i> End Date</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="section row" id="end_date_area" style="display: none">
                    <!--                            none-->
                    <div class="pull-left" style="width: 75%;">
                      <div class="col-lg-5 col-xs-12">
                        <div class="form-group">
                          <input type="text"   name="event_end_date" id="event_end_date" value="" class="form-control date_pick" placeholder="End Date">
                        </div>
                      </div>
                      <div class="col-lg-2 col-xs-2">
                        <div id="end_time_toggle">
                          <button type="button"  class="btn btn-md"  title="Add End Time"  onclick="add_end_time()"> 
                          <i class="text-success fa fa-plus"></i>
                          <i class="text-success fa fa-clock"></i>
                          </button>  
                        </div>
                      </div>
                      <div class="col-lg-5 col-xs-12" id="event_end_time_area" style="display: none">
                        <!--                    //none-->
                        <input type="text"   name="event_end_time" id="event_end_time" value="11:59 PM" class="form-control time_pick" placeholder="End Time">
                      </div>
                    </div>
                    <div class="pull-right">
                      <div class="col-lg-2 col-xs-2">
                        <button type="button" class="btn btn-md" onclick="remove_end_date()" style="width: 117px" > <i class="text-danger fa fa-times"></i> Remove</button>
                      </div>
                    </div>
                  </div>
                
                  <div class="section row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <textarea class="form-control" id="event_description" name="event_description" placeholder="Description" ></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="section" style="margin-top: 10px">
                    <div  class="text-right" id="event_image_error_msg"></div>
                    <p class="text-right">
                        <button type="button" id="create_event_btn"  class="btn btn-primary">Save</button>
                    </p>
                  </div>
                  <!-- end section row -->
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>  
        </div>
           
        
        <!--     Edit Event  -->
        <div class="modal fade" id="edit_event_modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" >
            <div class="modal-content admin-form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Event</h4>
              </div>
              <div class="modal-body">
                <div id="edit_event_alert"></div>
                <form id="edit_event_frm" action=""  method="post" enctype="multipart/form-data"  >
                     {{ csrf_field() }}

                  <div class="row">
                    <div class="col-lg-12 col-xs-12">
                      <div class="form-group">
                        <label class="">Event Title</label>
                        <input type="text" name="event_title" id="edit_event_title" required=""  class="form-control" placeholder="Event Title">
                      </div>
                      <input  type="hidden" id="edit_event_id" value="" name="id" />  
                      <input  type="hidden" id="edit_set_start_time_data" value="Yes" />  
                      <input  type="hidden" id="edit_set_end_time_data" value="Yes" />  
                      <input  type="hidden" name="set_end_date_data" id="edit_set_end_date_data" value="Yes" />  
                    </div>
                  </div>
                  <div class="row">
                    <div class="pull-left" style="width: 75%;">
                      <div class="col-lg-5 col-xs-12">
                        <div class="form-group">
                          <label class="">Start Date</label>
                          <input type="text"   name="event_start_date" required="" id="edit_event_start_date" value="" class="form-control date_pick" placeholder="Start Date">
                        </div>
                      </div>
                      <div class="col-lg-2 col-xs-2">
                        <div id="edit_start_time_toggle" class="mt30">
                          <button type="button"  class="btn btn-md" title="Remove Start Time"   onclick="edit_remove_start_time()"> 
                          <i class="text-danger fa fa-times"></i>
                          <i class="text-danger fa fa-clock"></i>
                          </button>  
                        </div>
                      </div>
                      <div class="col-lg-5 col-xs-12" id="edit_event_start_time_area" style="display: block">
                        <div class="form-group">
                          <label class="">Start Time</label>
                          <input type="text"   name="event_start_time" id="edit_event_start_time" value="" class="form-control time_pick" placeholder="Start Time">
                        </div>
                      </div>
                    </div>
                    <div class="pull-right" >
                      <div class="col-lg-2 col-xs-2">
                        <div id="edit_end_date_toggle" class="mt30" style="display: none" >
                          <button type="button" class="btn btn-md"  onclick="edit_add_end_date()" style="width: 117px" >
                          <i class="text-success fa fa-plus"></i> End Date</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row" id="edit_end_date_area" style="display: block">
                    <div class="pull-left" style="width: 75%;">
                      <div class="col-lg-5 col-xs-12">
                        <div class="form-group">
                          <label class="">End Date</label>
                          <input type="text"   name="event_end_date" id="edit_event_end_date" value="" class="form-control date_pick" placeholder="End Date">
                        </div>
                      </div>
                      <div class="col-lg-2 col-xs-2">
                        <div id="edit_end_time_toggle" class="mt30">
                          <button type="button"  class="btn btn-md" title="Remove End Time"   onclick="edit_remove_end_time()"> 
                          <i class="text-danger fa fa-times"></i>
                          <i class="text-danger fa fa-clock"></i>
                          </button>  
                        </div>
                      </div>
                      <div class="col-lg-5 col-xs-12" id="edit_event_end_time_area" style="display: block">
                        <div class="form-group">
                          <label class="">End Time</label>
                          <input type="text"   name="event_end_time" id="edit_event_end_time" value="" class="form-control time_pick" placeholder="End Time">
                        </div>
                      </div>
                    </div>
                    <div class="pull-right">
                      <div class="col-lg-2 col-xs-2 mt30" >
                        <button type="button" class="btn btn-md" onclick="edit_remove_end_date()" style="width: 117px" > <i class="text-danger fa fa-times"></i> Remove</button>
                      </div>
                    </div>
                  </div>
                  
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="">Event Description</label>
                        <textarea class="form-control" id="edit_event_description" name="event_description" placeholder="Description" ></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="section" style="margin-top: 10px">
                    <p class="text-right">
                      <button type="button" id="edit_event_btn"  class="btn btn-primary">Update</button>
                    </p>
                  </div>
                  <!-- end section row -->
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
        </div>

        </div>
    </div>

        <script>
    var loader='<img class="loader" src="