@extends('layouts.appn')

@section('content')
<link href="{{ asset('monos/plugins/daterangepicker/daterangepicker.css') }}" rel="stylesheet" />

<style>
  .bg-row-secondary{
    background-color: #ffe6e6;
  }
.mbottom{
  margin-bottom: 0rem;
} 
.pbottom{
  padding-bottom: 0rem !important;
} 
#SlotList_Table th, #SlotList_Table td{
  padding: .5rem .15rem .25rem .15rem;
  line-height:1;
}

#SlotList_Table.table-hover tbody tr:hover td {
  color: #1c1c9b;
  font-weight: bold;
  background-color: lightgray;
}
#SlotList_Table .btn-icon {
  width: 30px;
  height: 30px;
  padding: 0.15rem 0.19em;
  line-height:1;
}
#EmpList_Table  td,#EmpList_Table  th {
  padding: 0.25rem;
line-height: 1;
}

#exampleModallarge .table-wrapper {
        height: 400px; /* Adjust as necessary */
        overflow-y: auto;
    }

   #exampleModallarge table thead th {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 0;
        background-color: #f8f9fa; /* Background color for the sticky header */
        z-index: 1; /* Ensure the header is above other content */
    }

    #exampleModallarge table thead th, table tbody td {
        white-space: nowrap; /* Prevent cell content from wrapping */
    }
</style>
<div class="content-wrapper" >
    <div class="content"><!-- For Components documentaion -->


<div class="row">     
<div class="col-xl-12">
<!-- Basic Table-->
<div class="card card-default" id="card-default-page"  style="min-height: 500px;">
  <div class="card-header">
    <h2><?php echo $page_name ; ?></h2>
  </div>
  <div class="card-body px-3 px-md-5 pbottom" id="card-body-page">
    <div class="row">
      <div class="col-lg-4 col-xl-3">
        <div class="form-group mbottom">
          <label for="Br_ID">Branch</label>
          <select class="form-control rounded-0" id="Br_ID" autocomplete="off" onchange="get_section(); ">
            <option value="">-Branch-</option>
            @foreach($branch as $p)
            <option value="{{ $p->Br_ID}}">{{ $p->Br_Name}}</option>
             @endforeach
           
          </select>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3">
        <div class="form-group mbottom">
          <label for="Sec_ID">Section</label>
          <select class="form-control rounded-0" id="Sec_ID" onchange="schedule_valid();">
            <option value="">-Section-</option>
          </select>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3">
        <div class="form-group mbottom">
          <label for="exampleFormControlSelect14">Date</label>
        <input type="text" class="form-control" name="dateRange" id="sh_date" value="" placeholder="Date"  onchange="schedule_valid();" >
        </div>
      </div>
    </div>
  </div>



<div class="card-body" style="min-height: 400px;">
{{--   <div class="form-row">
    <div class="col-6">
      <input type="text" class="form-control" placeholder="col-6">
    </div>
    <div class="col-3">
      <input type="text" class="form-control" placeholder="col-3">
    </div>
    <div class="col-3">
      <input type="text" class="form-control" placeholder="col-3">
    </div>
  </div> --}}

  <div class="collapse" id="collapse-table-1">
   
  </div>
  
  <table class="table table-hover" id="SlotList_Table">
    <thead>
      <tr>
        <th scope="col">Slot_ID</th>
        <th scope="col">Slot_Name</th>
        <th scope="col">Time From</th>
        <th scope="col">Add/ Edit</th>
        <th scope="col">View</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>{{-- 
      <tr>
        <td scope="row">1</td>
        <td>7AM</td>
        <td>7:00 AM</td>
        <td></td>
        <td><span class="mdi  mdi-24px mdi-clock-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-eye-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-near-me"></span></td>
      </tr>
       <tr class="table-success">
        <td scope="row" >2</td>
        <td>8AM</td>
        <td>8:00 AM</td>
        <td></td>
        <td><span class="mdi  mdi-24px mdi-clock-outline"></span></td>
        <td></td>
        <td><span class="mdi  mdi-24px mdi-near-me"></span></td>
      </tr>
       <tr  class="table-warning">
        <td scope="row">3</td>
        <td>10AM</td>
        <td>10:00 AM</td>
        <td></td>
        <td><span class="mdi  mdi-24px mdi-clock-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-eye-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-near-me"></span></td>
      </tr>
       <tr class="table-danger">
        <td scope="row">4</td>
        <td>11AM</td>
        <td>11:00 AM</td>
        <td></td>
        <td  data-toggle="modal" data-target="#exampleModallarge">span class="mdi  mdi-24px mdi-clock-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-eye-outline"></span></td>
        <td><span class="mdi  mdi-24px mdi-near-me"></span></td>
      </tr>
       --}}
    </tbody>
  </table>
</div>
</div>
<input type="hidden" id="Ts_ID" value="0">
<input type="hidden" id="SchID" value="0">

</div>


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




  <!-- Large Modal -->
<div class="modal fade" id="exampleModallarge" tabindex="-1" role="dialog" aria-labelledby="exampleModalLarge"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="DateShed_Title" ><div class="sub-title  h4">
        <span class="mr-1  text-primary" id="Br_IDLabel"></span> |
        <span class="mr-1  text-info" id="Sec_IDLabel"></span> |
        <span class="mr-1  text-secondary" id="sh_dateLabel"><span> |
        <span class="mr-1  text-primary" id="SlotLabel"><span> 
       
      </div></h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
        <div class="form-row">
          <div class="col-lg-4 col-xl-3">
            <div class="form-group ">
              <label for="search"> 	Employee Name-Code</label>
              <input type="text" class="form-control" value="" autocomplete="off" placeholder="search"    id="search"  >
            </div>
          </div>
          <div class="col-lg-4 col-xl-3">
            <div class="form-group ">
              <label for="Dep_ID">Department</label>
              <select class="form-control rounded-0" id="Dep_ID" onchange="SortEmp_ByDip();">
                <option value="">-All Department-</option>
                @foreach($dp_result as $p)
                <option value="{{ $p->Dep_ID}}">{{ $p->Dep_Name}}</option>
                 @endforeach
              </select>
            </div>
          </div>
        </div>
        <div class="table-wrapper">
        <table class="table " id="EmpList_Table">
           
          <thead class="thead-light">
            <tr>
              <th scope="col">SI</th>
              <th scope="col">Employee Name</th>
              <th scope="col">Code</th>
              <th scope="col">Branch</th>
              <th scope="col">Department</th>
              <th scope="col"></th>
              <th scope="col">Cur Slot</th>
              <th scope="col"> </th>
            </tr>
          </thead>
          <tbody>
           
          </tbody>
          </table>
        </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-pill" onclick="SaveShedule();">Save </button>
    </div>
  </div>
</div>
</div>



  <!-- Large Modal -->
  <div class="modal fade" id="viewModallarge" tabindex="-1" role="dialog" aria-labelledby="viewModalLarge"
  aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="DateShed_Title" ><div class="sub-title  h4">
          <span class="mr-1  text-primary" id="viewBr_IDLabel"></span> |
          <span class="mr-1  text-info" id="viewSec_IDLabel"></span> |
          <span class="mr-1  text-secondary" id="viewsh_dateLabel"><span> |
          <span class="mr-1  text-primary" id="viewSlotLabel"><span> 
         
        </div></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="view_close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
        
          <table class="table " id="ViewEmpList_Table">
              <thead class="thead-light">
                <tr>
                  <th scope="col">Emp.ID</th>
                  <th scope="col">Employee Name</th>
                  <th scope="col">Code</th>
                  <th scope="col">Department</th>
                  <th scope="col"  style="text-align: right;">
                    <button id="del_tab" onclick="Delete_schedule();"  id="del_SchID" style="line-height: 1;width: 30px;height: 30px;padding: 0.12rem 0.25rem;" type="button" class="mb-1 btn btn-icon pinterest btn-rounded-circle">
                      <i class="mdi mdi-trash-can"></i>
                    </button>
                    </th>
                </tr>
              </thead>
              <tbody>
               
              </tbody>
            </table>
      </div>
      <div class="modal-footer">
      {{--   <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-pill" onclick="SaveShedule();">Save Changes</button> --}}
      </div>
    </div>
  </div>
  </div>
@endsection
@section('script')
<script src="{{ asset('monos/plugins/daterangepicker/moment.min.js') }}"></script>
<script src="{{ asset('monos/plugins/jquery-mask-input/jquery.mask.min.js') }}"></script>
<script src="{{ asset('monos/plugins/daterangepicker/daterangepicker.js') }}"></script>
                    <script >
                        jQuery(document).ready(function() {
                        jQuery('input[name="dateRange"]').daterangepicker({
                        autoUpdateInput: false,
                        singleDatePicker: true,
                        locale: {
                          cancelLabel: 'Clear',
                          format: 'DD/MMM/YYYY'
                        }
                      });
                        jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
                          jQuery(this).val(picker.startDate.format('DD/MMM/YYYY'));
                          schedule_valid();
                        });
                        jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
                          jQuery(this).val('');
                          schedule_valid();
                        });
                        $('#sh_date').val('{{$max_day}}');
                      });

                      function get_section(){
                        $('#SlotList_Table tbody').html('');
                        $.ajax({
          url: "/get_section",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
            'Br_ID':$('#Br_ID').val()             
          },
          success:function(response){
            option='';
            if(response!=''){
              $.each(response, function(index, value) {
                   option+='<option value="'+value['Sec_ID']+'">'+value['Sec_Name']+'</option>';
/// alert(value['Sec_ID'])
});
            }else{
              option='<option value="">-Section-</option>';
            }
            $('#Sec_ID').html(option);
            schedule_valid();
          }
        });
                      }



                      function get_max_date(){
                        $.ajax({
          url: "/get_max_date",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}"            
          },
          success:function(response){
            $('#Sec_ID').html(option);
          }
        });
                      }
                      function schedule_valid(){ 
                        $('#SlotList_Table tbody').html('');
                        status=1;
                        if($.trim($('#Br_ID').val())==''){ 
                          status=0;
                          $('#Br_ID').focus();
                          toaster_fn_set('error',' ','Select Branch Name',"toast-top-right");
                          return;
                        }
                        
                        if($.trim($('#Sec_ID').val())==''){
                          status=0;
                          $('#Sec_ID').focus();
                          toaster_fn_set('error',' ','Select Section Name',"toast-top-right");
                          return;
                        }
                        
                        if($.trim($('#sh_date').val())==''){
                          status=0;
                          $('#sh_date').focus();
                          toaster_fn_set('error',' ','Select Date',"toast-top-right");
                          return;
                        }
                        if(status){
                          schedule();
                        }
                    /*      */
                      }
                      function schedule(){
                        $.ajax({
          url: "/Get_SlotList_Schedule",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}"   ,
             Sec_ID:$.trim($('#Sec_ID').val()),       
             Br_ID:$.trim($('#Br_ID').val()),       
             sh_date:$.trim($('#sh_date').val())     
          },
          success:function(response){
           // alert(response.length);
            trs='';
            $.each(response, function(index, value) {
              complete_btn='';
              Ts_Name="'"+value['Ts_Name']+"'";
              if(value['Completed']>0){
                complete_btn='<button type="button" class="mb-1 btn btn-icon btn-outline vimeo btn-rounded-circle"><i class="mdi mdi-near-me"></i> </button>';
              }
              view_btn='';
             if(value['Sch_ID']>0){
                view_btn='<button type="button" data-toggle="modal" data-target="#viewModallarge"  onclick="ViewSchedule_Modal('+Ts_Name+','+value['Ts_ID']+');"  class="mb-1 btn btn-icon btn-outline dropbox btn-rounded-circle"><i class="mdi  mdi-eye-outline"></i></button>';
                 }
            

              trs+='<tr style="color:'+value['Ts_Fcolor']+'; background-color:'+value['Ts_Bcolor']+';">';
                trs+='<td scope="row" >'+(index+1)+'</td>';
                trs+='<td>'+value['Ts_Name']+'</td>';
                trs+='<td>'+value['Ts_TimeFrom']+'</td>';
                trs+='<td>  <button type="button"   data-toggle="modal" data-target="#exampleModallarge" onclick="OpenSchedule_Modal('+Ts_Name+','+value['Ts_ID']+');" class="mb-1 btn btn-icon btn-outline facebook btn-rounded-circle"> <i class="mdi mdi-clock-outline"></i> </button></td>';
                trs+='<td>'+view_btn+'</td>';
                trs+='<td>'+complete_btn+'</td>';
              trs+='</tr>';
            });
            $('#SlotList_Table tbody').html(trs);
          }
        });
                      }
                      function ViewSchedule_Modal(Ts_Name,Ts_ID){
                        sh_date=$('#sh_date').val();
                        Sec_ID=$('#Sec_ID option:selected').html();
                        Br_ID=$('#Br_ID option:selected').html();

                        
                        $('#Ts_ID').val(Ts_ID);
                        $('#viewBr_IDLabel').html(Br_ID);
                        $('#viewSec_IDLabel').html(Sec_ID);
                        $('#viewsh_dateLabel').html(sh_date+'-'+Ts_Name);
                        $('#ViewEmpList_Table tbody').html('');
                        View_Scheduled_Emplye();
                      
                      }
                      function OpenSchedule_Modal(Ts_Name,Ts_ID){
                        sh_date=$('#sh_date').val();
                        Sec_ID=$('#Sec_ID option:selected').html();
                        Br_ID=$('#Br_ID option:selected').html();

                        
                        $('#Ts_ID').val(Ts_ID);
                        $('#Br_IDLabel').html(Br_ID);
                        $('#Sec_IDLabel').html(Sec_ID);
                        $('#sh_dateLabel').html(sh_date+'-'+Ts_Name);
                        $('#EmpList_Table tbody').html('');
                        Get_Emplyees_Schedule();
                     //   $('#DateShed_Title').html('  &nbsp; - &nbsp; <span class="text-success">'+Sec_ID+'</span>  &nbsp; <span class="text-danger">'+sh_date+'-'+Ts_Name+'</span>');
                      }

                      function View_Scheduled_Emplye(){
                        Sec_ID=$.trim($('#Sec_ID').val());       
             Br_ID=$.trim($('#Br_ID').val());       
             sh_date=$.trim($('#sh_date').val());               
             Ts_ID=$.trim($('#Ts_ID').val()); 
                        $.ajax({
          url: "/View_Scheduled_Emplye",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
             Sec_ID:Sec_ID,       
             Br_ID:Br_ID,       
             sh_date:sh_date,               
             Ts_ID:Ts_ID                
          },
          success:function(response){

            if(response!=''){
               thrs='';
              $.each(response, function(index, value) {
            
              
                status='1';

                   thrs+='<tr class="" id="">';
                    thrs+='<td scope="row">'+(index+1)+'</td>';
                    thrs+='<td clss="enm_td">'+value['Em_Name']+'</td>';
                    thrs+='<td>'+value['Em_Code']+'</td>';
                    thrs+='<td>'+value['Br_Name']+'</td>';
                    thrs+='<td>'+value['Dep_Name']+' </td>';
                    thrs+='<td> </td>';
                    thrs+='</tr>';
                    $('#del_tab').attr('Sch_ID',value['Sch_ID']);
              });

              
              $('#del_tab').show();
            }
            $('#ViewEmpList_Table tbody').html(thrs);
            
          }

        });

                      }
                      function Get_Emplyees_Schedule(){
                        Sec_ID=$.trim($('#Sec_ID').val());       
             Br_ID=$.trim($('#Br_ID').val());       
             sh_date=$.trim($('#sh_date').val());               
             Ts_ID=$.trim($('#Ts_ID').val()); 
                        $.ajax({
          url: "/Get_Emplyees_Schedule",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
             Sec_ID:Sec_ID,       
             Br_ID:Br_ID,       
             sh_date:sh_date,               
             Ts_ID:Ts_ID                
          },
          success:function(response){
            $('#SchID').val(0);
            thrs='';
            if(response!=''){
              Emp_parr=[];
              $.each(response, function(index, value) {
            
                c_status='';
                status='1';
                
                if(value['Available']==0){
                  color_class='text-info';
                  c_status='<span class="mdi  mdi-24px mdi-worker"></span>';
                  status='0';
                }
                if(value['Lve']){
                  color_class='text-danger';
                  c_status='<span class="mdi  mdi-24px mdi-account-off"></span>';
                  status='0';
                }

                if(value['Available']==1){
                  color_class='';
                  c_status='<span class="mdi  mdi-24px mdi-human-handsup"></span>';
                }
                
               
                statusBtn='';
                chk='';
                dsb='';
               
              
                if(status==1){
                  color_class='';
                  console.log(Emp_parr);
                console.log($.inArray(value['Em_ID'], Emp_parr));
                if(Emp_parr.includes(value['Em_ID'])){ 
                  dsb=' disabled="disabled" ';
                }else{
                  dsb='';
                }
              
                  if(value['SchID']>0){
                    chk='checked';
                  $('#SchID').val(value['SchID']);
                  Emp_parr.push(value['Em_ID']);
                }
                  
                
               
                  statusBtn+=' <label class="switch switch-icon switch-secondary form-control-label mr-2">';
                    statusBtn+='<input type="checkbox" name="activeStaff" class="switch-input form-check-input" SchID="'+value['SchID']+'"  Em_ID="'+value['Em_ID']+'"  Dep_ID="'+value['Dep_ID']+'" value="on" '+chk+'  '+dsb+' Onchange="Trigger_row('+index+');">';
                    statusBtn+='<span class="switch-label"></span>';
                    statusBtn+='<span class="switch-handle"></span>';
                    statusBtn+='</label>';
                }

                   thrs+='<tr class="EmpList_ToShedule dep'+value['Dep_ID']+' '+color_class+' " id="tr_'+index+'">';
                    thrs+='<td scope="row">'+(index+1)+'</td>';
                    thrs+='<td clss="enm_td">'+value['Em_Name']+'</td>';
                    thrs+='<td>'+value['Em_Code']+'</td>';
                    thrs+='<td>'+value['Br_Name']+' </td>';
                    thrs+='<td>'+value['Dep_Name']+' </td>';
                    thrs+='<td>'+c_status+'</td>';
                    thrs+='<td>'+value['CurrentSlot']+'</td>';
                    thrs+='<td>'+statusBtn+'</td>';    
                    thrs+='</tr>';

              });
            }
            $('#EmpList_Table tbody').html(thrs);
           
            //schedule_valid();
          }
        });
                      }
function SortEmp_ByDip(){
  $('.EmpList_ToShedule').fadeOut(500);
  Dep_ID=$('#Dep_ID').val();
  if(Dep_ID==''){
    $('.EmpList_ToShedule').fadeIn(1000);
  }else{
    $('.dep'+Dep_ID).fadeIn(1000);
  }
  set_slnumber();
}


$('#search').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$('#Dep_ID').val('');
    $('#EmpList_Table tbody tr').each(function(){
            var rowData = $(this).find('td:nth-child(2)').text().replace(/ +/g, ' ').toLowerCase()+'-'+$(this).find('td:nth-child(3)').text().replace(/ +/g, ' ').toLowerCase(); 
         //  console.log(rowData.indexOf(val));
          
            if(rowData.indexOf(val) === -1){
                $(this).fadeOut(500);
            } else {
                $(this).fadeIn(1000);
            }
            set_slnumber();
        });

});
function set_slnumber(){
  $('#EmpList_Table tbody tr').each(function(index){
        // Set the text of the first td in each row to the serial number (index + 1)
        $(this).find('td:first').text(index + 1);
    });
}

function Trigger_row(ind) {
    var checkbox = $('#tr_' + ind).find('input[type="checkbox"]');
    var table = document.getElementById("EmpList_Table");
    var tbody = table.getElementsByTagName('tbody')[0];
    var row = document.getElementById('tr_' + ind);
    em_id=checkbox.attr('em_id');
    if (checkbox.prop('checked')) {
    $('input[type="checkbox"][em_id="'+em_id+'"]').attr("disabled", true);
    checkbox.removeAttr('disabled');
        $(row).fadeOut(400, function() {
            $(this).prependTo(tbody).fadeIn();
                set_slnumber();
        });
    } else {
      $('input[type="checkbox"][em_id="'+em_id+'"]').removeAttr('disabled');
        $(row).fadeOut(400, function() {
            $(this).appendTo(tbody).fadeIn();
                set_slnumber();
        });
    }
    

}

function SaveShedule(){
  if($('input[name="activeStaff"]:checked').length==0){
    toaster_fn_set('error',' ','Select Atleast One Employee',"toast-top-center");
  }else{
    var EmpArr = $('input[name="activeStaff"]:checked').map(function(){
      return $(this).val();
      console.log(EmpArr);
    }).get();
    ESH=[];
    $('#EmpList_Table  tbody tr').each(function(index){ console.log();
      if($(this).find('input[name="activeStaff"]').prop('checked')){
       ar={
        Sch_Em_ID:$(this).find('input[name="activeStaff"]').attr('em_id'),
        Sch_Dep_ID:$(this).find('input[name="activeStaff"]').attr('dep_id')
       };
       ESH.push(ar);
      }
    });
    console.log($('#SchID').val());
                       $.ajax({
          url: "/op_schedule",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
             Sec_ID:$.trim($('#Sec_ID').val()),       
             Br_ID:$.trim($('#Br_ID').val()),       
             Ts_ID:$.trim($('#Ts_ID').val()),       
             sh_date:$.trim($('#sh_date').val()),       
             SchID:$.trim($('#SchID').val()),
             ESH:ESH
          },
          success:function(response){
            arr=JSON.parse(response);
            if(arr.flag){
              toaster_fn_set('success',' ',arr.msg,"toast-top-center");
              $('#exampleModallarge').modal('hide')
              schedule();
              Get_Emplyees_Schedule();
             // reset_form();
            }

          }
        }); 
  }
}


function Delete_schedule(){

                       $.ajax({
          url: "/Delete_schedule",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
             sch_id:$.trim($('#del_tab').attr('sch_id'))
          },
          success:function(response){
            if(response==0){
              toaster_fn_set('success',' ','Deleted Successfully',"toast-top-center");
              schedule();
              $('#view_close').click();
            }
          }
        }); 
  
}




                    </script>

  @endsection