@extends('settings.layouts.master')
@section('styles')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="{{asset('admin/plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('admin/plugins/toastr/toastr.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css')}}">
  <style type="text/css">
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 14px;
  }
  .box-span {
    width: 46px;
    margin: 4px;
    display: inline-block; /* Make the box an inline-block element */
    padding: 10px; /* Add padding for spacing around the text */
/*    background-color: #0074D9; /* Set the background color */*/
    color: #FFFFFF; /* Set the text color */
    border-radius: 5px; /* Add rounded corners to the box */
  } 
  </style>

@endsection 
@section('contents')
<div class="content-wrapper pb-0">
<div class="page-header flex-wrap">
  <h3 class="mb-0">{{$category}}</h3>
</div>
<div class="row">
  <div class="col-md-12">
    The Shift Rotation Policy page appears when you click Shift Rotation Policy under the Attendance settings group. You can create rotation policies for shifts from this page. If a Shift Rotation Policy is already created, you can also see that from this page. 
  </div>
  <div class="col-md-12 stretch-card grid-margin">
  
    <div class="card">
      <div class="card-body">
          @csrf
         
          <div class="row">
            <div class="col-md-6">
              <h3>{{$category}}</h3>
            </div>
            <div class="col-md-6">
              <button class="btn btn-success" onclick="addCompanyBank('Add')">Add {{$category}}</button>
            </div>
          </div>
          <div class="col-md-12">
             <table id="example1" class="table table-bordered table-striped">
              <thead>
              <tr>
                <th>Sno</th>
                <th>Policy Name</th>
                <th>Shift Rotations</th>
                <th>Action</th>
              </tr>
              </thead>
              <tbody>
                 @if(count($data)>0) 
                 @foreach($data as $key=>$value)
                 <tr>
                  <th>{{$key+1}}</th>
                  <th>{{$value->name}}</th>
                  <th>{{$value->rotation}}</th>
                  <th>
                    <button class="btn btn-info" onclick="editDetails('{{$value->id}}','{{$value->short}}','{{$value->name}}','{{$value->start_time}}','{{$value->end_time}}','{{$value->grace_in_time}}','{{$value->grace_out_time}}','{{$value->in_margin}}','{{$value->out_margin}}','{{$value->sum_session}}','{{$value->duration_between}}','{{$value->time_zone}}','{{$value->session_2_in}}','{{$value->session_2_out}}','{{$value->session_2_grace_in}}','{{$value->session_2_grace_out}}','{{$value->session_2_in_margin}}','{{$value->session_2_out_margin}}','{{$value->for_half_day}}','{{$value->for_full_day}}')">
                      <i class="fa fa-edit"></i>
                    </button>
                  </th>
                </tr>
                 @endforeach  
                 @else
                 <tr>
                 <th colspan="10">{{$category}} details not Found</th>
               </tr>
                 @endif
              </tbody>
              <tfoot>
               <tr>
                <th>Sno</th>
                <th>Policy Name</th>
                <th>Shift Rotations</th>
                <th>Action</th>
              </tr>
         
              </tfoot>
            </table>
          </div>
          </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-add fade show" id="add-modal-made" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
    <div class="modal-dialog">
      <div class="modal-content" style="width: 653px;">
        <div class="modal-header">
          <h4 class="modal-title">{{$category}} <span id="type"></span></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        <form id="modal-add-form" action="{{ route('save_shift_time') }}" method="post" >
          @csrf
          <div class="form-group">
            <div class="add-id">
            </div>
              <input type="hidden" name="listId" id="listId" value="">
        
            <label for="recipient-name" class="control-label mb-10">Policy Name *:</label>
            <input type="text" class="form-control all-clean"  name="name" id="name" value="{{old('name')}}" placeholder="Please Enter name" required>
          </div>
          <div class="row">
            <div class="col-md-5">
                <div class="form-group">
                  <label for="recipient-name" class="control-label mb-10">AVAILABLE SHIFTS *:</label>
                 <select  class="form-control all-clean" id="avl_shift" multiple>
                    @foreach($shift as $value)
                    <option value="{{$value->id}}" style="background-color: {{$value->colour}}">{{$value->name}}</option>
                    @endforeach
                  </select>
                </div>
                
                 </div>
                  <div class="col-md-2">
                   <div class="form-group">
                      <i class="fas fa-arrow-circle-right" onclick="getSelected()"></i><br>
                      <i class="fas fa-arrow-circle-left"  onclick="removeSelected()"></i><br><br><br>
                      <i class="fas fa-arrow-circle-up"  onclick="moveUp()"></i><br>
                      <i class="fas fa-arrow-circle-down"  onclick="moveDown()"></i><br>
                   </div>
                 </div>
                  <div class="col-md-5">
                 <div class="form-group" id="form-main-change">
                  <label for="recipient-name" class="control-label mb-10">Selected SHIFTS *:</label>
                  <select name="selected_shift[]"  class="form-control all-clean" id="selected_shift" multiple>
                  </select>
                </div>
              </div>
            </div>
          
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Rotation Start Day *:</label>
            <select name="rotaion_start_day[]"  class="form-control all-clean" id="rotaion_start_day" >
              <option value="Sunday">Sunday</option>
              <option value="Monday">Monday</option>
              <option value="Tuesday">Tuesday</option>
              <option value="Wednesday">Wednesday</option>
              <option value="Thurusday">Thurusday</option>
              <option value="Friday">Friday</option>
              <option value="Saturday">Saturday</option>
            </select>
          </div>
           <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Rotation Frequency *:</label>
           <input type="text" class="form-control all-clean"  name="rotation_frequency" id="rotation_frequency" value="{{old('rotation_frequency')}}" placeholder="Please rotation_frequency" required>
          </div>
            
           
            <div class="form-group" id="week_setup_show">
                @for($i = 0 ;$i < 30;$i++)
                @if($i%10 == 0)
                  <br>
                  <span class="box-span">W{{$i+1}}</span>
                @else
                  <span class="box-span">W{{$i+1}}</span>
                @endif
                @endfor
            </div>
          
        </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="$('#modal-add-form').submit()"><span id="bank-button" >Save</span></button>
        </div>
      </div>
    </div>
  </div>  
@endsection
@section('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.0.0/index.global.min.js'></script>
<script src="{{asset('admin/plugins/select2/js/select2.full.min.js')}}"></script>
<!-- Toastr -->
<script src="{{asset('admin/plugins/sweetalert2/sweetalert2.min.js')}}"></script>
<script src="{{asset('admin/plugins/toastr/toastr.min.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){

  });
  function addCompanyBank(type) {
    $('#listId').val('');
    $('#name').val('');
    $('#capital').val('');
    $('#description').val('');
    $('#bank-button').html('Add');
    $('#add-modal-made').modal('toggle');

  }
  $('.select2').select2();


  function getSelected() {

    var avl_shift = $('#avl_shift').val();
    var selected_shift = $('#selected_shift').val();

    // alert(selected_shift);

    var rotaion_start_day =  $('#rotaion_start_day').val();
    var rotation_frequency =  $('#rotation_frequency').val();
    

    var reqUrl = "{{route('attendence-shift-options')}}";

    $.ajax({
        type: "get", // HTTP request type (GET in this case)
        url: reqUrl, // URL to send the request to
        data: {
            'id': avl_shift,
            'selected_shift': selected_shift,
            'rotaion_start_day': rotaion_start_day,
            'rotation_frequency': rotation_frequency
        }, // Data to send with the request as parameters
        dataType: "json", // Expected data type of the response
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }, // Headers to include in the request
        beforeSend: function() {
            // Code to run before the request is sent (optional)
        },
        complete: function() {
            // Code to run when the request is complete, whether it succeeds or fails (optional)
        },
        success: function(response) {
            // Code to run when the request is successful
            console.log(response.selected_shift);
            console.log(response.selected_shift.length); 
            // Log the response to the console

            // Update the content of elements with the received data
            for (var i = 0; i < response.selected_shift.length ; i++) {
                $("#selected_shift").append('<option value=' + response.selected_shift.id[i] + '>' + response.selected_shift.name[i] + '</option>');
            }
            $('#week_setup_show').html(response.data);


        }
    });
  }
  function removeSelected() {
   
  }
  function moveUp() {
   
  }
  function moveDown() {
   
  }

  function addBankBranch(type) {

    $('#bank-button').html(type);
    $('#type').html(type);
    $('#add-modal-made').modal('toggle');

  }
  function editDetails(id,short,name,start_time,end_time,grace_in_time,grace_out_time,in_margin,out_margin,sum_session,duration_between,time_zone,session_2_in,session_2_out,session_2_grace_in,session_2_grace_out,session_2_in_margin,session_2_out_margin,for_half_day,for_full_day) {
   
    $('#listId').val(id);
    $('#short').val(short);
    $('#name').val(name);
    $('#start_time').val(start_time);
    $('#end_time').val(end_time);
    $('#grace_in_time').val(grace_in_time);
    $('#grace_out_time').val(grace_out_time);
    $('#in_margin').val(in_margin);
    $('#out_margin').val(out_margin);
    $('#sum_session').val(sum_session);
    $('#duration_between').val(duration_between);
    $('#time_zone').val(time_zone);
    $('#session_2_in').val(session_2_in);
    $('#session_2_out').val(session_2_out);
    $('#session_2_grace_in').val(session_2_grace_in);
    $('#session_2_grace_out').val(session_2_grace_out);
    $('#session_2_in_margin').val(session_2_in_margin);
    $('#session_2_out_margin').val(session_2_out_margin);
    $('#for_half_day').val(for_half_day);
    $('#for_full_day').val(for_full_day);

    $('#bank-button').html('Edit');
    $('#add-modal-made').modal('toggle');
  }
 
  function getListBox(){

    var list_box = $('#list_box').val();
    console.log(list_box);
    reqUrl = "{{route('ifsc_save')}}";
    $('.global-loader').css('display','block');
        $.ajax({
          type: "get",
          url: reqUrl,
          data: {'list_box':list_box},
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
          },
          complete: function() {
          },
          success: function(response) {
            $('#list_value').html(response.success);
            $('.global-loader').css('display','none');
              // console.log(response);
          }
        });
  }
  function callSaveMessage(message){
    var Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
    Toast.fire({
        icon: 'success',
        title: message
    })
    $('.global-loader').css('display','none');
  }
</script>
@endsection