@extends('layouts.dashboard')

@section('content')
<!-- Loader Overlay -->
<div id="ajax-loader" style="
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(255,255,255,0.7);
    z-index:9999;
    text-align:center;
    padding-top:20%;
    font-size:20px;
    font-weight:bold;
    color:#333;
">
    Loading... Please wait
</div>

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Attendance</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Attendance</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>


<section class="content">
  <div class="container-fluid">


    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
        role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <!-- /.row -->
    <div class="row">
      <div class="col-12">
         <div class="card">
            <div class="card-header">
            {{-- <h3 class="card-title">Fixed Header Table</h3> --}}

            <div class="card-tools">
              <div class="input-group">
                <input type="text" class="form-control ename" id="name" name="name" placeholder="Enter Name">

                <input type="text" class="form-control ml-2" id="fromDate" name="from_date" placeholder="Select From Date">
                <div class="input-group-append">
                  <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                </div>

                <input type="text" class="form-control ml-2" id="toDate" name="to_date" placeholder="Select To Date">
                <div class="input-group-append">
                  <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                </div>

                <button type="button" id="filter" class="btn uniqbtn-btn btn-sm float-right ml-2">Filter</button>
                <!-- <a class="btn btn-warning float-end" href="{{ route('attendance.export',request()->query()) }}"><i class="fa fa-download"></i> Export</a> -->

                <a id="exportBtn" class="btn uniqbtn-btn float-end ml-1" href="#"><i class="fa fa-download"></i> Export</a>

              </div>
            </div>
          </div>
         </div>
      </div>
      <div class="col-12">
        <div class="card">
          <!-- /.card-header -->
          <div class="card-body p-2">
            <div class="table-responsive at-responsive">
              <table id="attendance-table" class="table table-head-fixed table-striped table-bordered text-wrap text-center at-tble">
                <thead>
                  <tr>
                    <!-- <th>Sr No.</th> -->
                    <th>Sr.#</th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>In-Time Status</th>
                    <th>In-Time</th>
                    <th>In-Time (Late-Reason) </th>
                    <th class="cus-width">In-Time Location</th>
                    <th>Out-Time Status</th>
                    <th>Out-Time</th>
                    <th>Out-Time (Early-Reason) </th>
                    <th class="cus-width">Out-Time Location</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->

        <div class="modal fade" id="verificationModal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="verificationModalTitle">Verifications</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>In-Date</th>
                      <th>In-Time</th>
                      <th>In-Time Location</th>
                      <th>Out-Date</th>
                      <th>Out-Time</th>
                      <th>Out-Time Location</th>
                      <th>Approve</th>
                    </tr>
                  </thead>
                  <tbody id="verificationTableBody">
                    <!-- Populated via AJAX -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>



      </div>
    </div>
    <!-- /.row -->

  </div><!-- /.container-fluid -->
</section>

@endsection


@push('scripts')
<script>

  // jQuery global events
$(document).on({
    ajaxStart: function() {
        $("#ajax-loader").show();  // Show overlay when any ajax starts
    },
    ajaxStop: function() {
        $("#ajax-loader").hide();  // Hide overlay when all ajax requests complete
    }
});

  $(function() {
    $("#fromDate, #toDate").datepicker({
      dateFormat: "dd-mm-yy"
    });

    $("#fromDate").on("change", function() {
      let selectedDate = $(this).datepicker("getDate");
      if (!selectedDate) return;

      let minDate = new Date(selectedDate);
      let maxDate = new Date(minDate);
      maxDate.setMonth(minDate.getMonth() + 1);

      $("#toDate").datepicker("option", {
        minDate: minDate,
        maxDate: maxDate,
        dateFormat: "dd-mm-yy"
      });

      $("#fromDate").val(formatDate(minDate));
      $("#toDate").val(formatDate(maxDate));
    });
  });

  $('#attendance-table').DataTable({
    processing: true,
    serverSide: true,
    bLengthChange: false,
    order: [
      [0, "desc"]
    ],
    pageLength: 15,
    searching: false,
    ajax: {
      url: '{{ route("attendance.index") }}',
      data: function(d) {
        d.name = $('#name').val();
        d.from_date = $('#fromDate').val();
        d.to_date = $('#toDate').val();
      }
    },
    columns: [{
        data: 'DT_RowIndex',
        name: 'DT_RowIndex',
        orderable: false,
        searchable: false
      },
      {
        data: 'name',
        name: 'name',
        render: function(data, type, row) {
          if (row.login_type === 1) {
            return `
              ${data}
              <span 
                class="badge badge-success view-today-verification" 
                data-emp_id="${row.sr_no}" 
                data-name="${row.name}" 
                data-date="${row.date}"
                style="cursor: pointer;">
                ${row.in_verification_count}
              </span>
            `;
          } else {
            return data;
          }
        }
      },
      {
        data: 'date',
        name: 'date'
      },
      {
        data: 'timeliness',
        name: 'timeliness',
        render: function(data) {
          if (data === "late") {
            return '<span class="badge badge-secondary">Late</span>';
          } else if (data === "on-time") {
            return '<span class="badge badge-success">On Time</span>';
          } else if (data === "failed") {
            return '<span class="badge badge-danger">Failed</span>';
          } else {
            return '<span class="badge badge-warning">-</span>';
          }
        }
      },
      {
        data: 'verified_at',
        name: 'verified_at',
      },
      {
        data: 'late_reason',
        name: 'late_reason'
      },
      {
        data: 'location',
        name: 'location',
        render: function(data) {
          if (!data) return '';
          let formatted = data.match(/.{1,25}/g)?.join('<br>') || data;
          return formatted;
        },
        createdCell: function(td) {
          $(td).addClass('cus-width text-wrap');
        }
      },

      {
        data: 'out_timeliness',
        name: 'out_timeliness',
        render: function(data) {
          if (data === "early-leaving") {
            return '<span class="badge badge-secondary">Early Leaving</span>';
          } else if (data === "on-time") {
            return '<span class="badge badge-success">On Time</span>';
          } else if (data === "after-time") {
            return '<span class="badge badge-success">After Time</span>';
          } else if (data === "failed") {
            return '<span class="badge badge-danger">Failed</span>';
          } else {
            return '<span class="badge badge-warning">-</span>';
          }
        }
      },
      {
        data: 'out_time',
        name: 'out_time'
      },
      {
        data: 'out_reason',
        name: 'out_reason'
      },
      {
        data: 'out_location',
        name: 'out_location',
        render: function(data) {
          if (!data) return '';
          let formatted = data.match(/.{1,25}/g)?.join('<br>') || data;
          return formatted;
        },
        createdCell: function(td) {
          $(td).addClass('cus-width text-wrap');
        }
      },
      {
        data: 'attendance_approve_toggle'
      }
    ],
    

    // this line highlight sumday 
    createdRow: function(row, data, dataIndex) {
        // Highlight Sunday
        if (data.date) {
            let parts = data.date.split('-'); // dd-mm-yyyy
            let dateObj = new Date(parts[2], parts[1] - 1, parts[0]);
            if (dateObj.getDay() === 0) { // Sunday
                $(row).css('background-color', '#f8d7da'); // light red
                $(row).css('color', '#721c24'); // dark red text
            }
        }
    },
  
      drawCallback: function() {
        // Reinitialize bootstrapToggle for dynamically loaded checkboxes
        $('.chkToggle').bootstrapToggle();

        // Remove old handlers and bind new one
        $('.chkToggle').off('change').on('change', function() {
          const checkbox = $(this);
          const id = checkbox.data('id');
          const checked = checkbox.prop('checked');

          Swal.fire({
            title: "Are you sure to change the status?",
            showDenyButton: true,
            denyButtonText: "No",
            confirmButtonText: "Yes",
          }).then((result) => {
            if (result.isConfirmed) {
              $.ajax({
                type: "POST",
                url: "{{ route('verify.attendance') }}",
                data: {
                  "_token": "{{ csrf_token() }}",
                  'id': id
                },
                success: function(data) {
                  if (data.status === "success") {
                    Swal.fire("Status changed successfully!", "", "success");
                  } else {
                    Swal.fire("Not able to change status!", "", "info");
                  }
                },
                error: function() {
                  Swal.fire("Error changing status!", "", "error");
                }
              });
            } else if (result.isDenied) {
              // Undo the checkbox state
              checkbox.bootstrapToggle('toggle');
              Swal.fire("Action cancelled", "", "info");
            }
          });
        });
      }
  });

  function updateExportLink() {
    let name = $('#name').val();
    let from_date = $('#fromDate').val();
    let to_date = $('#toDate').val();

    let query = $.param({
      name: name,
      from_date: from_date,
      to_date: to_date
    });

    $('#exportBtn').attr('href', '/turantams/attendance/export?' + query);
  }

  updateExportLink();

  $("#filter").on('click', function() {
    $('#attendance-table').DataTable().ajax.reload();
    updateExportLink();
  });

  $(document).on('click', '.view-today-verification', function() {
    const empId = $(this).data('emp_id');
    const empName = $(this).data('name');
    const selectedDate = $(this).data('date');

    $.ajax({
      url: '{{ route("attendance.employee-verification-today") }}',
      method: 'GET',
      data: {
        emp_id: empId,
        from_date: selectedDate,
        to_date: selectedDate
      },
      success: function(response) {
        $('#verificationModalTitle').text(`Verification for ${empName} on ${selectedDate}`);
        $('#verificationTableBody').html(response.tableRows);
        $('#verificationModal').modal('show');
      },
      error: function() {
        $('#verificationTableBody').html('<tr><td colspan="6">Something went wrong.</td></tr>');
      }
    });
  });

  // Optional: Date format helper
  function formatDate(dateObj) {
    const day = String(dateObj.getDate()).padStart(2, '0');
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const year = dateObj.getFullYear();
    return `${day}-${month}-${year}`;
  }
</script>

@endpush