@include('layouts.sidebar')
<style>
    .select2-container{
        width: 100%!important;
    }
</style>
<!-- =============== Left side End ================-->

<div class="main-content-wrap sidenav-open d-flex flex-column">
<!-- ============ Body content start ============= -->
<div class="main-content">		
<div class="row">
@if(Session::has('message'))
<p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
@endif
</div>		
<div class="row">
<div class="card text-left">
<div class="card-body">
<div class="row">
<div class="col-md-10">
<h4 class="card-title mb-3"> Appointments </h4> 
<p> {{$count}} Appointments </p>			
</div>
<div class="col-md-2">			   
<div class="btn-group">	
@if(Arr::exists($modules, 'Appointments-create'))   
<a href="{{url($current_menu.'/create')}}" class="btn btn-danger" type="button" aria-haspopup="true" aria-expanded="false">Create Appointment</a>
@endif
</div>
</div>
</div>
<ul class="nav nav-tabs" id="myIconTab" role="tablist">
<li class="nav-item"><a class="nav-link active show" id="home-icon-tab" data-toggle="tab" href="#homeIcon" role="tab" aria-controls="homeIcon" aria-selected="true"><i class="nav-icon i-Pen-2 mr-1"></i> All Appointments </a></li>								
</ul>
                        <div class="tab-content" id="myIconTabContent">
                            <div class="tab-pane fade active show" id="homeIcon" role="tabpanel" aria-labelledby="home-icon-tab">
                               <div class="table-responsive tableFixHead" style="height: 420px;">
                                    <table class="table table-bordered data-table">
                                        <thead>
                                            <tr>
                                                <th scope="col"> Sr. No. </th>
                                                <th scope="col"> Appointment Code </th>
                                              
                                                <th scope="col"> Customer Name </th>
                                                <th scope="col"> Executive Name </th>
                                                <th scope="col"> Appointment Date & Time </th>
                                                <th scope="col"> Customer Meeting URL </th>
                                                <th scope="col"> Executive Meeting URL </th>
                                                <th scope="col"> Created At </th>
                                                <th scope="col"> Appointment Status </th>
                                                @if(Arr::exists($modules, 'Appointments-assignExecutiveToCustomer'))   
                                                <th scope="col"> Assign Executive To Customer </th>
                                                @endif
                                                @if(Arr::exists($modules, 'Appointments-edit') || Arr::exists($modules, 'Appointments-delete'))
                                                <th scope="col"> Action </th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
            </div>
				<!-- Modal -->
                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Assign Executive To <span id="customer-full-name"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                    <form id="request">
                      <div class="modal-body">
                        <input type="hidden" id="appointment-id" name="id" value="">
                        <input type="hidden" id="customer-first-name" name="customer_first_name" value="">
                        <div class="row">
                          <div class="col-md-6 ml-auto">
                            <label>Pick Appointment Date & Time</label>
                            <br>
                              <div class="form-group">
                             <div class='input-group date'>
                            <input type='datetime-local' id="dt-picker" class="form-control" autocomplete="off" name="appointment_date_time" required="" /> {{-- class datetimepicker1 --}}
                            <span class="input-group-addon">
                            {{-- <button class="btn btn-primary" for="dt-picker" type="button"><i class="nav-icon i-Calendar"></i></button> --}}
                            </span>
                            </div>
                                                          </div>
                          </div>
                          <div class="col-md-6 ml-auto">
                            <label>Assign Executive</label>
                            <br>
                            <select name="executive_id" class="form-control">
                                <option value="" selected="">Select Executive</option>
                                @if(!empty($executive_full_names))
                                    @foreach($executive_full_names as $key=>$value)
                                        <option value="{{$key}}">{{$value}}</option>
                                    @endforeach
                                @endif
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                      </div>
                  </form>
                    </div>
                  </div>
                </div>
                                
                    <!----------- add multiple appointment------------>            
                  <div class="modal fade" id="exampleModalCenter_multiple" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Add more members </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                    <form id="request_multiple">
                      <div class="modal-body">
                        
                       
                        <div class="row">
                         
                          <div class="col-md-12 ml-auto">
                            <label>Customer</label>
                            <br>
                            <select name="customers_id[]" class="form-control chosen-select" id="select-custom" multiple="multiple">
                                <option value="" >Select Customer</option>
                                @if(!empty($customers))
                                    @foreach($customers as $key=>$value)
                                        <option value="{{$key}}">{{$value}}</option>
                                    @endforeach
                                @endif
                            </select>
                             <input type="hidden" id="class_id" name="class_id" value="">
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                      </div>
                  </form>
                    </div>
                  </div>
                </div>               
                                
                                
            </div>
    <div class="flex-grow-1"></div>

    <script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('js/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('js/script.min.js') }}"></script>
    <script src="{{ asset('js/sidebar.large.script.min.js') }}"></script>
    <script src="{{ asset('js/echarts.min.js') }}"></script>
    <script src="{{ asset('js/echart.options.min.js') }}"></script>
    <script src="{{ asset('js/dashboard.v1.script.min.js') }}"></script>
    <!-- ============ bootstrap-datetimepicker ============= -->
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <!-- ============ jquery-dataTables ============= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.9/jquery.datetimepicker.full.min.js" integrity="sha512-hDFt+089A+EmzZS6n/urree+gmentY36d9flHQ5ChfiRjEJJKFSsl1HqyEOS5qz7jjbMZ0JU4u/x1qe211534g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- ============ jquery-confirm ============= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.1/jquery-confirm.min.js"></script>
    

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {