@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;
  }
  .timeline {
            list-style: none;
            padding: 0;
        }

        .timeline-item {
            display: flex;
            margin: 20px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .timeline-item::before {
            content: "";
            width: 20px;
            height: 20px;
            background-color: #007bff;
            border-radius: 50%;
            margin-right: 20px;
        }
         .timeline-item-green::before {
            content: "";
            width: 20px;
            height: 20px;
            background-color: #42d39d;
            border-radius: 50%;
            margin-right: 20px;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        h2 {
            margin: 0;
            font-size: 18px;
        }

        p {
            margin-top: 10px;
        }

        .timeline-item::after {
            content: "";
            flex: 1;
            border-top: 2px solid #ccc;
            align-self: center;
            margin-left: 20px;
        }
        .checkbox_button{
          margin-left: 14px;
          margin-top: 3px;
        }
        .green-tick {
            position: relative;
            width: 50px;
            height: 50px;
        }

        .green-tick::before {
            content: '\2713'; /* Unicode character for a checkmark */
            font-size: 36px;
            color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  </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 stretch-card grid-margin">
    <div class="card">
      <div class="card-body">
          @csrf
         
          <div class="row">
            <div class="col-md-6">
              <h3>Use GPS to mark employees attendance</h3><br>
              <h5>greytHR maps the GPS coordinates of your office premises and thereby allows employees to mark their attendance within that predefined location.</h5>
            </div>
            <div class="col-md-6">
              <button class="btn btn-success" onclick="addCompanyBank('Add')">Add {{$category}}</button>
            </div>
          </div>
         <div class="col-md-12">

           <ol class="timeline">
              <li class="timeline-item ">
                  <a>
                    <div>
                      <h2>Define location for employees to mark attendance</h2>
                      <p>Using the Office Locator mobile app, mark the coordinates around your office premises, within which employees can mark their attendance. Generate the access code and send to users across locations for them to record their office coordinates.</p>
                    </div>
                  </a>
              </li>
              <li class="timeline-item timeline-item-green">
                  <div>
                      <h2>Allow employees to manually mark attendance</h2>
                      <p>Enable the following option to allow employees to mark their attendance manually using mobile application.</p>
                  <br>
                    <h2>Enable/Disable from the below option</h2>
                    <br>
                    <div class="form-group">
                      <input type="checkbox" id="manual_signIn"  name="manual_signIn"  checked/>
                      <label for="manual_signIn" class="checkbox_button">Manual Sign In</label>
                    </div>
                     <p>Employees should manually sign in to the mobile application, only when they are within the office premises, that is defined.</p>
                  </div>
              </li>
              <li class="timeline-item">
                  <div>
                      <h2>Invite employees who do not have the mobile app installed</h2>
                      <p>Invite employees to start using the greytHR mobile app, and get their attendance marked through mobile app.</p>
                  </div>
              </li>
            </ol>
         </div>
      </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,name,capital,description) {
   
    $('#listId').val(id);
    $('#name').val(name);
    $('#capital').val(capital);
    $('#description').val(description);

    $('#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