@extends('layouts.mainlayout')
@section('title','Update Attendance')

@section('main')


<style>
  .action-icons i {
  cursor: pointer;
  font-size: 16px;
  margin: 0 6px;
}
</style>

<div class="card mb-4">
  <div class="card-body">

    <h4 class="mb-4">Mark Employee Attendance </h4>

    <div class="form-row align-items-end">

      {{-- DATE --}}
      <div class="form-group col-md-3">
        <label>Select Date</label>
        <input type="text" id="attendanceDate" class="form-control" readonly placeholder="Select Date">
      </div>

      {{-- TEAM --}}
      <div class="form-group col-md-3">
        <label>Select Team</label>
        <select id="teamSelect" class="form-control" disabled>
          <option value="">Select Team</option>
        </select>
      </div>

      {{-- USER --}}
      <div class="form-group col-md-3">
        <label>Select User</label>
        <select id="userSelect" class="form-control" disabled>
          <option value="">Select User</option>
        </select>
      </div>

      {{-- BUTTONS --}}
      <div class="form-group col-md-3">
        <button class="btn btn-primary mr-2" id="searchBtn">
          <i class="icon-search4"></i> Search
        </button>
        <button class="btn btn-light" id="clearBtn">Clear</button>
      </div>

    </div>

  </div>
</div>

{{-- PUNCH LIST --}}
<div class="card d-none" id="punchCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h6 class="mb-0">Punch List (Raw Data)</h6>
    <button class="btn btn-sm btn-success" id="addPunchBtn">
      <i class="icon-plus3"></i> Add Punch
    </button>
  </div>

  <div class="table-responsive">
    <table class="table mb-0">
      <thead>
        <tr>
          <th>PUNCH TIME</th>
          <th>SOURCE</th>
          <th class="text-center">ACTION</th>
        </tr>
      </thead>
      <tbody id="punchTableBody"></tbody>
    </table>
  </div>
</div>

{{-- MODAL (OUTSIDE CARD – IMPORTANT) --}}
<div class="modal fade" id="punchModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">

      <div class="modal-header">
        <h6 class="modal-title">Edit Punch Timing</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

    <div class="modal-body">
      <input type="hidden" id="punchId">

      <label>Punch Time</label>
      <input type="time" id="punchTime" class="form-control mb-2">

      <label>Reason</label>
      <select id="punchReason" class="form-control">
        <option value="">Select Reason</option>
        <option value="Forgot to punch">Forgot to punch</option>
        <option value="Biometric issue">Biometric issue</option>
        <option value="Manager approved">Manager approved</option>
        <option value="System issue">Power Cut</option>
        <option value="System issue">Other</option>
      </select>
    </div>


      <div class="modal-footer">
        <button class="btn btn-primary" id="savePunchBtn">Save</button>
      </div>

    </div>
  </div>
</div>

@endsection

@section('js')
<link rel="stylesheet" href="{{ asset('global_assets/css/bootstrap-datepicker.min.css') }}">
<script src="{{ asset('global_assets/js/plugins/pickers/bootstrap-datepicker.min.js') }}"></script>

{{-- REQUIRED FOR EDIT --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>


<script>
(function () {
  const nav = performance.getEntriesByType("navigation")[0];

  // If page was reloaded AND URL has query params → reset
  if (nav && nav.type === "reload" && window.location.search.length > 0) {
    window.location.replace("{{ route('update-attendance.index') }}");
  }
})();
</script>
<script>
let autoSearchDone = false;




$(document).ready(function () {

  const csrf = $('meta[name="csrf-token"]').attr('content');

  /* DATE PICKER */
  $('#attendanceDate').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    todayHighlight: true
  });
 

  /* DATE → TEAMS */
  $('#attendanceDate').on('change', function () {
    let date = $(this).val();
    if (!date) return;

    $('#teamSelect').prop('disabled', true).html('<option value="">Select Team</option>');
    $('#userSelect').prop('disabled', true).html('<option value="">Select User</option>');
    $('#punchCard').addClass('d-none');

    $.post("{{ route('getTeamsByDate') }}", {_token: csrf, date}, function (res) {
    res.teams.forEach(team => {
        const selected = (preTeamId && team.id == preTeamId) ? 'selected' : '';
        $('#teamSelect').append(
          `<option value="${team.id}" ${selected}>${team.team}</option>`
        );
      });

    $('#teamSelect').prop('disabled', false);

    if (preTeamId) {
      $('#teamSelect').trigger('change');
    }
        });
    });
     /* PREFILL FROM REPORT LINK */
    const urlParams = new URLSearchParams(window.location.search);
    const preUserId = urlParams.get('user_id');
    const preTeamId = urlParams.get('team_id');
    const preDateISO = urlParams.get('date'); // yyyy-mm-dd

    if (preDateISO) {
      const formatted = moment(preDateISO, 'YYYY-MM-DD').format('DD-MM-YYYY');
      $('#attendanceDate').datepicker('setDate', formatted);

      setTimeout(() => {
          $('#attendanceDate').datepicker('setDate', formatted);
          $('#attendanceDate').trigger('change');
      }, 0);
      // Itrigger change so teams load
      // $('#attendanceDate').trigger('change');
    }

  /* TEAM → USERS */
  $('#teamSelect').on('change', function () {
    let teamId = $(this).val();
    if (!teamId) return;

    $('#userSelect').prop('disabled', true).html('<option value="">Select User</option>');
    $('#punchCard').addClass('d-none');

    $.post('/attendance/get-users-by-team', {_token: csrf, teamId}, function (res) {
    res.users.forEach(user => {
      const selected = (preUserId && user.id == preUserId) ? 'selected' : '';
      $('#userSelect').append(
        `<option value="${user.id}" ${selected}>${user.name} ${user.lastName}</option>`
      );
    });

    $('#userSelect').prop('disabled', false);

    if (preUserId && !autoSearchDone) {
      autoSearchDone = true;
      $('#searchBtn').trigger('click');
    }
    });
  });

  /* SEARCH → LOAD PUNCHES */
  $('#searchBtn').on('click', function (e) {
    e.preventDefault();

    let date = $('#attendanceDate').val();
    let userId = $('#userSelect').val();

    if (!date || !userId) {
      alert('Please select Date, Team and User');
      return;
    }

    $('#punchTableBody').html('');
    $('#punchCard').addClass('d-none');

    $.post("{{ route('getPunchesFromDataPool') }}", {_token: csrf, userId, date}, function (res) {
      $('#punchTableBody').html(''); // hard reset
      if (!res.punches.length) {
        $('#punchTableBody').html(`<tr><td colspan="3" class="text-center text-muted">No punches found</td></tr>`);
      } else {
        res.punches.forEach(p => {

    let actions = '';

    if (p.is_manual) {
      actions = `
        <button class="btn btn-sm btn-outline-primary editPunch"
                data-id="${p.id}"
                data-time="${p.time}"
                data-comment="${p.comment}">
          <i class="icon-pencil"></i>
        </button>

        <button class="btn btn-sm btn-outline-danger deletePunch"
                data-id="${p.id}">
          <i class="icon-trash"></i>
        </button>
      `;
    } else {
      actions = `
        <span class="text-muted" title="Biometric punch (can not edit)">
          <i class="icon-lock2"></i>
        </span>
      `;
    }
        $('#punchTableBody').append(`
          <tr>
            <td>${p.time}</td>
            <td>${p.comment ?? 'Biometric raw punch'}</td>
              <td class="text-center action-icons">
                ${actions}
              </td>
          </tr>
        `);
      });
    }

      $('#punchCard').removeClass('d-none');
    });
  });

  /* ADD */
  $('#addPunchBtn').on('click', function () {
    $('#punchId').val('');
    $('#punchTime').val('');
    $('#punchModal').modal('show');
  });

    /* EDIT */
  $(document).on('click', '.editPunch', function () {
    $('#punchId').val($(this).data('id'));
    $('#punchTime').val(moment($(this).data('time'), 'hh:mm A').format('HH:mm'));

    // Extract reason from comment
    let comment = $(this).data('comment');
    if (comment && comment.includes('(')) {
      let reason = comment.match(/\((.*?)\)/);
      if (reason) {
        $('#punchReason').val(reason[1]);
      }
    }

    $('#punchModal').modal('show');
  });


  /* SAVE */
  $('#savePunchBtn').on('click', function () {

    let time = $('#punchTime').val();
    let reason = $('#punchReason').val();

    if (!time) {
      alert('Please select punch time');
      return;
    }

    if (!reason) {
      alert('Please select a reason');
      return;
    }

    $.post("{{ route('savePunch') }}", {
      _token: csrf,
      punchId: $('#punchId').val(),
      time: time,
      reason: reason,
      userId: $('#userSelect').val(),
      date: $('#attendanceDate').val()
    })
    .done(function () {
      $('#punchModal').modal('hide');
      $('#searchBtn').click();
    })
    .fail(function () {
      alert('Failed to save punch');
    });
  });

    /* DELETE */
    $(document).on('click', '.deletePunch', function () {
      if (!confirm('Delete this punch?')) return;

      $.post("{{ route('deletePunch') }}", {
        _token: csrf,
        id: $(this).data('id')
      }, function () {
        $('#searchBtn').click();
      });
    });

  /* CLEAR */
  $('#clearBtn').on('click', function () {
      window.location.href = "{{ route('update-attendance.index') }}";

    // $('#attendanceDate').val('');
    // $('#teamSelect').prop('disabled', true).html('<option value="">Select Team</option>');
    // $('#userSelect').prop('disabled', true).html('<option value="">Select User</option>');
    // $('#punchTableBody').html('');
    // $('#punchCard').addClass('d-none');
  });

});
</script>
@endsection