@extends('fronted.layout.main') @section('adcontent')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"
/>
<style>
  #calendar {
    background-color: #fff;
    width: 100%;
    height: 400px;
    padding: 5px;
    overflow: auto;
    /* color: #fff; */
  }

  .slick-prev {
    left: -11px;
  }

  .slick-next {
    right: -11px;
  }

  .fc-today {
    color: #333;
  }

  .fc-day-header {
    /* background-color: #333; */
    /* color: #fff; */
    font-weight: bold;
  }

  #attendanceView .card {
    text-align: center;
    min-width: 180px;
    min-height: 90px;
  }

  #attendanceView .card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    opacity: 0.7;
  }

  #attendanceView .card:first-child::after {
    background-color: green;
  }

  #attendanceView .card:nth-child(2):after {
    background-color: orange;
  }

  #attendanceView .card:nth-child(3):after {
    background-color: red;
  }

  #attendanceView .card:last-child:after {
    background: linear-gradient(120deg, green 50%, orange 50%);
  }
</style>
@if ($dataNotFound)
<p>Data not found</p>
@else
<div class="container-fluid mt-2">
  <div class="container">
    <a class="btn btn-warning btn-sm mb-1" href="{{ route('employees.show') }}"
      >Employee List
    </a>
    <a class="btn btn-warning btn-sm mb-1 ms-1" href="{{ route('emp_attendance.view') }}">Attendance</a>
    <div
      id="attendanceView"
      class="d-flex justify-content-between align-items-center mt-2 flex-wrap gap-2"
    >
      <div class="card border-0 shadow">
        <div class="card-body m-0 px-0 py-auto">
          <h6 class="text-success">Present</h6>
          <div class="d-flex justify-content-around align-items-center m-0">
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Total</h6>
              <h6 class="text-center">{{ $persent }}</h6>
            </div>
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Current</h6>
              <h6 class="text-center">{{ $currentPresent }}</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="card border-0 shadow">
        <div class="card-body m-0 px-0 py-auto">
          <h6 class="text-warning">Absent</h6>
          <div class="d-flex justify-content-around align-items-center m-0">
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Total</h6>
              <h6 class="text-center">{{ $absent }}</h6>
            </div>
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Current</h6>
              <h6 class="text-center">{{ $currentAbsent }}</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="card border-0 shadow">
        <div class="card-body m-0 px-0 py-auto">
          <h6 class="text-danger">leave</h6>
          <div class="d-flex justify-content-around align-items-center m-0">
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Total</h6>
              <h6 class="text-center">{{ $leaves }}</h6>
            </div>
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Current</h6>
              <h6 class="text-center">{{ $currentLeave }}</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="card border-0 shadow">
        <div class="card-body">
          <h6
            style="
              background: linear-gradient(120deg, green 50%, orange 50%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            "
          >
            Half Days
          </h6>
          <div class="d-flex justify-content-around align-items-center m-0">
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Total</h6>
              <h6 class="text-center">{{ $halfdays }}</h6>
            </div>
            <div class="">
              <h6 class="text-center" style="font-size: 0.8rem">Current</h6>
              <h6 class="text-center">{{ $currentHalfDays }}</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container my-2 p-2">
    <div class="container">
      <div class="row autoplay m-0 px-0 py-auto">
        <div class="col-3">
          <div class="card m-0 p-0 shadow-sm">
            <div class="card-body p-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster1.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster2.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster3.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0 border-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster4.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0 border-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster5.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0 border-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster6.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0 border-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster7.jpg') }}"
              />
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card m-0 p-0">
            <div class="card-body p-0 border-0">
              <img
                class="d-block rounded-0"
                src="{{ asset('assets/images/poster8.jpg') }}"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container mt-3">
    <div class="row">
      <div class="col-lg-6">
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="text-center">Employee Details</h5>
            @if($employeeDetails->candidate_photo)
            <img
              src="{{$employeeDetails->candidate_photo}}"
              class="mx-auto d-block rounded-circle"
              alt="emp img"
              width="100px"
              height="100px"
            />
            @else
            <img
              src="{{ asset('assets/images/img-uploade-icon.png') }}"
              class="mx-auto d-block rounded-circle"
              alt="emp img"
              width="100px"
              height="100px"
            />
            @endif
            <div class="d-flex justify-content-end align-item-center">
              <button
                class="btn btn-warning btn-sm paymentSetupBtn"
                data-user="{{$employeeDetails->id}}"
                type="button"
              >
                Payment Setup
              </button>
            </div>
            <div
              class="container mt-2"
              style="border: 2px solid black; border-radius: 5px"
            >
              <div class="d-flex justify-content-between align-items-center">
                <span class="shadow p-3 rounded-0">
                  Id #{{ $employeeDetails->form_no }}
                </span>
                <span class="shadow p-3 rounded-0">
                  Reg Date:
                  {{ date('d-M-Y', strtotime($employeeDetails->registration_date)) }}
                </span>
              </div>

              <div class="container shadow my-3 p-3">
                <div
                  class="d-flex justify-content-around flex-column align-items-start"
                >
                  <h6 class="text-warning text-capitalize mx-2 my-2">
                    <i class="fa-solid fa-circle-user me-5"></i
                    >{{ strtolower($employeeDetails->candidate_name) }}
                  </h6>
                  <h6 class="text-warning mx-2 my-2">
                    <i class="fa-solid fa-envelope me-5"></i
                    >{{ $employeeDetails->email }}
                  </h6>
                  <h6 class="text-warning mx-2 my-2">
                    <i class="fa-solid fa-phone-volume me-5"></i
                    >{{ $employeeDetails->mobile }}
                  </h6>
                </div>
                <a
                  class="text-end d-block"
                  href="{{route('emp.registrationform.edit',['empId'=>$employeeDetails->id])}}"
                  >View More</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div id="calendar" class="shadow p-1"></div>
      </div>
    </div>
  </div>
</div>
<div
  class="modal fade"
  id="AttendaceModal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="AttendaceModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="AttendaceModalLabel">Attendance</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <label class="form-label" for="">What Do You Want?</label>
        <select class="form-select" name="attendance" id="changeAttendance">
          <option value="P">Mark Present</option>
          <option value="A">Mark Absent</option>
          <option value="L">Mark Leave</option>
          <option value="H">Mark Half Day</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" id="makeAttendacebtn" class="btn btn-warning">
          Change
        </button>
      </div>
    </div>
  </div>
</div>
<!-- payment setup modal -->
<div
  class="modal fade"
  id="addPaymentSetupModal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="addPaymentSetupModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addPaymentSetupModalLabel">
          Payment Setup
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form id="addPaymentSatupForm" action="" method="post">
          @csrf @php $monthlyPayment = ""; $leaveAllowed = ''; @endphp
          <div class="input-group mb-2">
            <label for="inputSetupDates" class="input-group-text">Date</label>
            <select
              class="form-control"
              name="InputSetupDates"
              id="inputSetupDates"
            >
              @foreach($paymentSetup as $details)
              <option value="{{$details->date}}" selected>
                {{ date('d-F-Y', strtotime($details->date)) }}
              </option>
              @php $monthlyPayment = $details->monthly_payment; $leaveAllowed =
              $details->leave_allowed; @endphp @endforeach
            </select>
            <input
              type="date"
              name="date"
              id="paymentSetupDate"
              class="form-control"
              required
            />
          </div>
          <div class="input-group mb-2">
            <label for="monthlyPatmentInput" class="input-group-text"
              >Monthly Payment</label
            >
            <input
              type="number"
              class="form-control"
              value="{{ $monthlyPayment }}"
              name="monthly_payment"
              min="0"
              id="monthlyPatmentInput"
            />
          </div>
          <div class="input-group mb-2">
            <label for="leaveAllowedInput" class="input-group-text"
              >Leave Allowed</label
            >
            <input
              type="number"
              class="form-control"
              value="{{ $leaveAllowed }}"
              name="leave_allowed"
              min="0"
              id="leaveAllowedInput"
            />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="addPaymentSetupBtn" type="button" class="btn btn-warning">
          Submit
        </button>
        <button id="setupUpdateBtn" type="button" class="btn btn-warning">
          Update
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
      var events = @json($attendance);
      var currentDate = new Date();
      setScrollSlide(5);
      var calendar = $('#calendar').fullCalendar({
          height: "100%",
          contentHeight: "100%",
          expandRows: true,
          editable: true,
          header: {
              left: 'prev, next today',
              center: 'title',
              right: 'month',
          },
          events: events,
          eventAfterRender: function(event, element) {
              if (event.title === "P") {
                  element.css({
                      'background-color': '#198754'
                  });
              } else if (event.title === "A") {
                  element.css({
                      'background-color': '#ffc107'
                  });
              } else if (event.title === "H") {
                  element.css({
                      'background-image': 'linear-gradient(120deg, #198754 50%, #ffc107 50%)'
                  });
              } else if (event.title === "L") {
                  element.css({
                      'background-color': 'Red'
                  });
              } else {
                  element.css({
                      'background-color': 'blue'
                  });
              }
          },
          validRange: {
              end: currentDate
          },
          selectable: true,
          selectHelper: true,
          select: function(start, end, allDay) {
              $("#AttendaceModal").modal("show");
              $("#makeAttendacebtn").on("click", function() {
                  var attendance = $("#changeAttendance").val();
                  var date = moment(start).format("YYYY-MM-DD");
                  $.ajax({
                      url: "{{ route('update')}}",
                      type: "post",
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {
                          empid: "{{ $employeeDetails->id }}",
                          status: attendance,
                          date: date,
                      },
                      success: function() {
                          Swal.fire({
                              icon: "success",
                              title: "Attendace",
                              text: "Attendace has been taken successfully",
                              timer: 3000,
                              timerProgressBar: true,
                          })
                          location.reload();
                      },
                      error: function() {
                          Swal.fire({
                              icon: "warning",
                              title: "Attendace",
                              text: "Attendace has not been taken",
                              timer: 3000,
                              timerProgressBar: true,
                          })
                      }
                  });
              });

          },
          editable: false,
          eventClick: function(event) {
              Swal.fire({
                  title: 'Are you sure?',
                  text: "You won't be able to revert this!",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Yes, delete it!'
              }).then((result) => {
                  if (result.isConfirmed) {
                      var recordId = "{{$employeeDetails->id}}";
                      var recordDate = moment(event.start).format("YYYY-MM-DD");
                      $.ajax({
                          url: '{{ route("delete.record", [":id", ":date"]) }}'.replace(':id', recordId).replace(':date', recordDate),
                          type: 'DELETE',
                          headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                          },
                          dataType: 'json',
                          success: function(response) {
                              Swal.fire({
                                  icon: "success",
                                  title: "Attendace",
                                  text: response.message,
                                  timer: 3000,
                                  timerProgressBar: true,
                              })
                              location.reload();
                          },
                          error: function(error) {
                              Swal.fire({
                                  icon: "warning",
                                  title: "Attendace",
                                  text: "Attendace Recored has not been deleted",
                                  timer: 3000,
                                  timerProgressBar: true,
                              })
                          }
                      });

                  }
              })
          },

      });


      let paymentSetupDateInput = $("#paymentSetupDate");
      let addPaymentSetupBtn = $("#addPaymentSetupBtn");
      let setupUpdateBtn = $("#setupUpdateBtn");
      let inputSetupDates = $("#inputSetupDates");
      let monthlyPatmentInput = $("#monthlyPatmentInput");
      let leaveAllowedInput = $("#leaveAllowedInput");
      let selectedAmount;
      let selectedLeaveAlloewd;

      setupUpdateBtn.on('click', function() {
          $(this).hide();
          paymentSetupDateInput.show();
          addPaymentSetupBtn.show();
          inputSetupDates.hide();
          selectedAmount = monthlyPatmentInput.val();
          selectedLeaveAlloewd = leaveAllowedInput.val();
          monthlyPatmentInput.val(0);
          leaveAllowedInput.val(0);
          monthlyPatmentInput.attr('readonly', false);
          leaveAllowedInput.attr('readonly', false);

      });

      $("#addPaymentSetupModal").on('hide.bs.modal', function() {
          setupUpdateBtn.show();
          paymentSetupDateInput.hide();
          inputSetupDates.show();
          monthlyPatmentInput.attr('readonly', true);
          leaveAllowedInput.attr('readonly', true);
          monthlyPatmentInput.val(selectedAmount);
          leaveAllowedInput.val(selectedLeaveAlloewd);
          $(addPaymentSetupBtn).hide();
      });

      $(".paymentSetupBtn").on('click', function() {
          var employeeId = $(this).data('user');
          $("#addPaymentSetupModal").on('show.bs.modal', function() {
              paymentSetupDateInput.hide();
              monthlyPatmentInput.attr('readonly', true);
              leaveAllowedInput.attr('readonly', true);
              $(addPaymentSetupBtn).hide();
              let url = "{{route('store.emp.paymentsetup',['empId'=>':id'])}}";
              url = url.replace(':id', employeeId);
              $('#addPaymentSatupForm').attr('action', url);
          }).modal('show');
      });

      $('#addPaymentSetupBtn').on('click', function() {
          $(this).attr('disabled', true);
          const setupForm = $("#addPaymentSatupForm");
          setupForm.submit();
      });
      $("#addPaymentSatupForm").on('submit', function(event) {
          let dataInput = $("#paymentSetupDate");
          let monthlyPatmentInput = $("#monthlyPatmentInput");
          let leaveAllowedInput = $("#leaveAllowedInput");
          if (dataInput.val().trim() === "") {
              dataInput.addClass('is-invalid');
              event.preventDefault();
              $("#addPaymentSetupBtn").attr('disabled', false);
          } else if (monthlyPatmentInput.val() === "") {
              monthlyPatmentInput.addClass('is-invalid');
              event.preventDefault();
          } else if (leaveAllowedInput.val() === "") {
              leaveAllowedInput.addClass('is-invalid');
              event.preventDefault();
          } else {
              dataInput.removeClass('is-invalid');
              monthlyPatmentInput.removeClass('is-invalid');
              leaveAllowedInput.removeClass('is-invalid');
          }
      });

      $("#inputSetupDates").on('change', function() {
          let selectedDate = $(this).val();
          $.ajax({
              type: "get",
              url: "{{route('get.payment.setup.data')}}",
              data: {
                  'selectedData': selectedDate,
              },
              dataType: "json",
              success: function(response) {
                  const data = response.data;
                  let monthlyPayment = data.monthly_payment;
                  let leaveAllowed = data.leave_allowed;
                  selectedAmount = monthlyPayment;
                  selectedLeaveAlloewd = leaveAllowed;
                  $('#monthlyPatmentInput').val(monthlyPayment);
                  $('#leaveAllowedInput').val(leaveAllowed);
              },
              error: function(xhr) {
                  Swal.fire({
                      icon: 'error',
                      title: 'Error',
                      text: xhr.responseJSON.message,
                      toast: true,
                      timer: 3000,
                      timerProgressBar: true,
                  });
              }
          });
      });

  });
</script>

@endif @endsection