@extends('settings.layouts.master')
@section('styles')
  <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;
  }
  </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 page appears when you click Shift under the Attendance settings group. You can create shifts for your employees from this page. If a shift is already made, you can also see that from this page. The existing shift(s) appear with the shift colour, shift code, shift name, shift timing, and the icon of the actions (edit and delete) that you can perform on them.
  </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>Short Name</th>
                <th>Description</th>
                <th>Start Time</th>
                <th>End time</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->name}}</th>
                  <th>{{$value->start_time}}</th>
                  <th>{{$value->end_time}}</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>Short Name</th>
                <th>Description</th>
                <th>Start Time</th>
                <th>End time</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">Shif 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="form-group">
            <label for="recipient-name" class="control-label mb-10">Shift Code *:</label>
            <input type="text" class="form-control all-clean"  name="short" id="short" value="{{old('short')}}" placeholder="Please Enter capital" required>
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Zone *:</label>
            <select class="form-control all-clean" name="time_zone" id="time_zone">
              <option value="">Select Time Zone</option>
              @foreach($zone as $value)
              <option value="{{$value->id}}">{{$value->time}} ({{$value->gmt}})  </option>
              @endforeach
            </select>
          </div>
            
            <div class="form-group">
              <input type="checkbox" id="sum_session"  name="sum_session"  />
              <label for="sum_session" class="checkbox_button">Sum of Session's In and Out time.</label>
            </div>
            <div class="form-group">
              <input type="checkbox" id="duration_between"  name="duration_between"  />
              <label for="duration_between" class="checkbox_button">Duration between Shift Start Time and End Time.</label>
            </div>
            <div class="form-group">
              <table>
                <tr>
                  <th>Session</th>
                  <th  style="width:70px">In Time</th>
                  <th  style="width:70px">Out Time</th>
                  <th  style="width:70px">Grace in Time</th>
                  <th  style="width:70px">Grace out Time</th>
                  <th  style="width:70px">In Margin</th>
                  <th  style="width:70px">Out Margin</th>
                </tr>
                <tr>
                  <td>Session1</td>
                  <td><input type="text" name="start_time" id="start_time" value="00:00" style="width:56px"></td>
                  <td><input type="text" name="end_time" id="end_time"  value="00:00" style="width:56px"></td>
                  <td><input type="text" name="grace_in_time" id="grace_in_time"  value="00:00" style="width:56px"></td>
                  <td><input type="text" name="grace_out_time"  id="grace_out_time" value="00:00" style="width:56px"></td>
                  <td><input type="text" name="in_margin"  id="in_margin" value="00:00" style="width:56px"></td>
                  <td><input type="text" name="out_margin" id="out_margin"  value="00:00" style="width:56px"></td>
                </tr>
                <tr>
                  <td>Session2</td>
                  <td><input type="text" name="session_2_in"  id="session_2_in" value="00:00" style="width:56px"></td>
                  <td><input type="text" name="session_2_out"  id="session_2_out" value="00:00" style="width:56px"></td>
                  <td><input type="text" name="session_2_grace_in" id="session_2_grace_in"  value="00:00" style="width:56px"></td>
                  <td><input type="text" name="session_2_grace_out" id="session_2_grace_out"  value="00:00" style="width:56px"></td>
                  <td><input type="text" name="session_2_in_margin" id="session_2_in_margin"  value="00:00" style="width:56px"></td>
                  <td><input type="text" name="session_2_out_margin"  id="session_2_out_margin" value="00:00" style="width:56px"></td>
                </tr>
              </table>
            </div>
            <div class="form-group">
              <h4>Minimum working hours to mark present:</h4>
            </div>
            <div class="form-group">
              <label for="sum_of_session" class="checkbox_button">For Half day </label>
              <input type="text" class="form-control" id="for_half_day"  name="for_half_day"  />hours
            </div>
            <div class="form-group">
              <label for="sum_of_session" class="checkbox_button">For Full day </label>
              <input type="text" class="form-control" id="for_full_day"  name="for_full_day"  />hours
            </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">
  function addCompanyBank(type) {
    $('#listId').val('');
    $('#name').val('');
    $('#capital').val('');
    $('#description').val('');
    $('#bank-button').html('Add');
    $('#add-modal-made').modal('toggle');

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

  $(document).ready(function(){

 });
  
  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