@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper">
<div class="content">

<div class="page-header d-flex justify-content-between">
    <h3 class="page-title">Cancel Attendance (HR)</h3>
</div>

{{-- ================= FORM ================= --}}
<div class="card">
<div class="card-body">

<form method="POST"
      action="{{ route('attendance.cancel.delete') }}"
      onsubmit="return confirm(
        'This will permanently delete attendance records.\n\n' +
        '• Attendance logs will be removed\n' +
        '• Attendance requests will be removed\n' +
        '• Audit log will be preserved\n\n' +
        'Proceed?'
      )">
@csrf

<div class="row g-3">

    {{-- EMPLOYEE --}}
    <div class="col-md-4">
        <label class="form-label fw-bold">Employee</label>
        <select name="resource_id" class="form-control select2" required>
            <option value="">Select Employee</option>
            @foreach($resources as $r)
                <option value="{{ $r['id'] }}">
                    {{ $r['name'] }}
                    ({{ $r['employee_type'] == 2 ? 'International' : 'Domestic / Onsite' }})
                </option>
            @endforeach
        </select>
    </div>

    {{-- FROM DATE --}}
    <div class="col-md-3">
        <label class="form-label fw-bold">From Date</label>
        <input type="date" name="from_date" class="form-control" required>
    </div>

    {{-- TO DATE --}}
    <div class="col-md-3">
        <label class="form-label fw-bold">To Date</label>
        <input type="date" name="to_date" class="form-control" required>
    </div>

    {{-- REASON --}}
    <div class="col-md-12">
        <label class="form-label fw-bold">Reason for Cancellation</label>
        <textarea name="reason"
                  class="form-control"
                  rows="3"
                  placeholder="E.g. Wrong biometric sync, policy violation, incorrect approval"
                  required></textarea>
    </div>

</div>

<hr>



<div class="text-end">
    <button class="btn btn-warning"
        id="previewBtn">
    Preview Attendance
</button>

    <button class="btn btn-danger px-4">
        Cancel Attendance
    </button>
</div>

</form>

</div>
</div>

</div>
</div>

<div class="modal fade" id="previewModal">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">

<div class="modal-header">
    <h5 class="modal-title">Attendance Preview</h5>
    <button class="btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">
    <table class="table table-bordered">
        <thead class="table-light">
        <tr>
            <th>Date</th>
            <th>Status</th>
            <th>In</th>
            <th>Out</th>
            <th>Hours</th>
            <th>Mode</th>
        </tr>
        </thead>
        <tbody id="previewTable"></tbody>
    </table>
</div>

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

@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('.select2').select2({
        width: '100%'
    });
});
</script>
<script>
$('#previewBtn').on('click', function () {

    const data = {
        resource_id: $('select[name="resource_id"]').val(),
        from_date: $('input[name="from_date"]').val(),
        to_date: $('input[name="to_date"]').val(),
        _token: '{{ csrf_token() }}'
    };

    if (!data.resource_id || !data.from_date || !data.to_date) {
        alert('Select resource and date range');
        return;
    }

    $.post("{{ route('attendance.preview') }}", data, function (res) {

        let rows = '';

        if (res.logs.length === 0) {
            rows = `<tr>
                        <td colspan="6" class="text-center text-muted">
                            No attendance found
                        </td>
                    </tr>`;
        }

        res.logs.forEach(l => {
            rows += `
                <tr>
                    <td>${l.date}</td>
                    <td><strong>${l.status_code}</strong></td>
                    <td>${l.in_time ?? '-'}</td>
                    <td>${l.out_time ?? '-'}</td>
                    <td>${l.working_hours ?? '-'}</td>
                    <td>${l.mode}</td>
                </tr>
            `;
        });

        $('#previewTable').html(rows);
        $('#previewModal').modal('show');
    });
});
</script>
@endpush