@push('title')
    Attendance Management
@endpush
<x-app-layout>
    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif

        @if (session('info'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-info">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('info') }}</div>
            </div>
        @endif

        @if (session('warning'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-warning">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('warning') }}</div>
            </div>
        @endif

        @if (session('danger'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-danger">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('danger') }}</div>
            </div>
        @endif
    </div>

    @can('attendance_management')
        <div class="row mb-4">
            <div class="col-md-12 mt-4 d-flex align-items-end justify-content-end gap-2">
                <div class="col-md-3">
                    <input type="text" name="employee_id_no" value="{{ $filters['employee_id_no'] ?? '' }}"
                        class="form-control" placeholder="Scan Barcode">
                </div>
                <ul class="nav nav-pills flex-column flex-sm-row">
                    <li class="nav-item">
                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#scanModal">
                            Scan
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="modal fade" id="scanModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

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

                    <div class="modal-body text-center">
                        <p>Employee Name: <span id="scanEmployeeName">N/A</span></p>
                        <p>Employee Code: <span id="scanEmployeeCode">N/A</span></p>
                        <p>Employee Status: <span id="scanEmployeeStatus">N/A</span></p>

                        <p>Select attendance type</p>

                        <button class="btn btn-success me-2 attendance-action" data-type="in">
                            IN
                        </button>

                        <button class="btn btn-danger attendance-action" data-type="out">
                            OUT
                        </button>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade" id="responseModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header" id="responseModalHeader">
                        <h5 class="modal-title" id="responseModalTitle">Message</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body" id="responseModalBody">
                        <!-- Message injected by JS -->
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                            OK
                        </button>
                    </div>

                </div>
            </div>
        </div>
    @endcan

    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Attendance</h5>
        </div>
        <div class="card-body">

            <form method="GET" class="row g-3 mb-4">
                <div class="col-md-6">
                    <input type="text" name="employee_id_no" value="{{ $filters['employee_id_no'] ?? '' }}"
                        class="form-control" placeholder="Employee ID or Barcode">
                </div>
                {{-- <div class="col-md-3">
                    <select name="site_id" class="form-select">
                        <option value="">All Sites</option>
                        @foreach ($sites as $site)
                            <option value="{{ $site->id }}"
                                {{ isset($filters['site_id']) && $filters['site_id'] == $site->id ? 'selected' : '' }}>
                                {{ $site->name }}
                            </option>
                        @endforeach
                    </select>
                </div> --}}
                <div class="col-md-2">
                    <input type="date" name="from_date" value="{{ $filters['from_date'] ?? '' }}"
                        class="form-control">
                </div>
                <div class="col-md-2">
                    <input type="date" name="to_date" value="{{ $filters['to_date'] ?? '' }}"
                        class="form-control">
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="in"
                            {{ isset($filters['status']) && $filters['status'] == 'in' ? 'selected' : '' }}>IN
                        </option>
                        <option value="out"
                            {{ isset($filters['status']) && $filters['status'] == 'out' ? 'selected' : '' }}>OUT
                        </option>
                    </select>
                </div>
                <div class="col-md-12 text-end">
                    <button class="btn btn-primary" type="submit">Filter</button>
                    <a href="{{ route('attendance') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>

            <div class="table-responsive text-wrap">
                <table class="table table-striped table-borderless">
                    <thead class="table-dark">
                        <tr>
                            <th>No</th>
                            <th>Employee Name</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Hours</th>
                            <th>Created By</th>
                            <th>Updated By</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody id="attendance-table-body">
                        @include('attendance.partials.table')
                        <div class="modal fade" id="editAttendanceModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Edit Attendance</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <form id="editAttendanceForm" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label">Employee Name</label>
                                                <input type="text" class="form-control" id="edit_employee_name"
                                                    readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">In Time <span
                                                        class="text-danger">*</span></label>
                                                <input type="datetime-local" class="form-control" name="in_at"
                                                    id="edit_in_at" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Out Time</label>
                                                <input type="datetime-local" class="form-control" name="out_at"
                                                    id="edit_out_at">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary">Update Attendance</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
    <script>
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
    <script>
        $('input[name="employee_id_no"]').on('change', function() {
            let employeeId = $(this).val();

            if (!employeeId) {
                $('#scanEmployeeName').text('N/A');
                $('#scanEmployeeCode').text('N/A');
                $('#scanEmployeeStatus').text('N/A');
                return;
            }

            $.ajax({
                url: `/employees/get-by-id/${employeeId}`, // create a route to fetch employee info
                method: 'GET',
                success: function(res) {
                    $('#scanEmployeeName').text(res.full_name ?? 'N/A');
                    $("#scanEmployeeCode").text(res.employee_id_no ?? 'N/A');
                    $("#scanEmployeeStatus").text(res.employee_status ?? 'N/A');

                },
                error: function() {
                    $('#scanEmployeeName').text('Not found');
                    $("#scanEmployeeCode").text('Not found');
                    $("#scanEmployeeStatus").text('Not found');
                }
            });
        });

        $('.attendance-action').on('click', function() {
            let type = $(this).data('type');
            let employeeId = $('input[name="employee_id_no"]').val();

            if (!employeeId) {
                alert('Please scan employee barcode');
                return;
            }

            $.ajax({
                url: "{{ route('attendance.store') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    employee_id: employeeId,
                    type: type
                },
                success: function(res) {
                    $('#scanModal').modal('hide');

                    loadAttendanceTable();

                    showResponseModal('Info', res.message);
                },
                error: function(xhr) {
                    let msg = 'Something went wrong';

                    if (xhr.status === 422) {
                        msg = Object.values(xhr.responseJSON.errors)[0][0];
                    } else if (xhr.responseJSON?.message) {
                        msg = xhr.responseJSON.message;
                    }

                    showResponseModal('error', msg);
                }
            });
        });

        function loadAttendanceTable() {
            $.get("{{ route('attendance.table') }}", function(html) {
                $('#attendance-table-body').html(html);
            });
        }

        function showResponseModal(type, message) {
            const modalEl = document.getElementById('responseModal');
            const header = document.getElementById('responseModalHeader');
            const title = document.getElementById('responseModalTitle');
            const body = document.getElementById('responseModalBody');

            header.className = 'modal-header'; // reset

            if (type === 'success') {
                title.innerText = 'Success';
            } else if (type === 'error') {
                title.innerText = 'Error';
            } else {
                title.innerText = 'Info';
            }

            body.innerHTML = `<p class="mb-0">${message}</p>`;

            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        }
        document.addEventListener('DOMContentLoaded', function() {
            const editButtons = document.querySelectorAll('.edit-attendance-btn');
            const editForm = document.getElementById('editAttendanceForm');

            editButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const attendanceId = this.getAttribute('data-id');

                    // Fetch attendance data
                    fetch(`/attendance/edit/${attendanceId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                document.getElementById('edit_employee_name').value = data
                                    .attendance.employee_name;
                                document.getElementById('edit_in_at').value = data.attendance
                                    .in_at;
                                document.getElementById('edit_out_at').value = data.attendance
                                    .out_at;

                                // Update form action
                                editForm.action = `/attendance/update/${attendanceId}`;
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Failed to load attendance data');
                        });
                });
            });
        });
    </script>
</x-app-layout>