@extends('app')

@section('title', 'Pengurusan Kehadiran')

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Attendance Management</h1>
            <p class="mt-1 text-sm text-gray-600">Jejak dan urus rekod kehadiran pekerja</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Kehadiran
        </button>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="space-y-2">
                <label class="label">Cari Pekerja</label>
                <input type="text" id="search" class="input" placeholder="Search by name or email...">
            </div>
            <div class="space-y-2">
                <label class="label">Tarikh</label>
                <input type="date" id="date_filter" class="input">
            </div>
            <div class="space-y-2">
                <label class="label">Status</label>
                <select id="status_filter" class="select select2-basic">
                    <option value="">Semua Status</option>
                    <option value="present">Hadir</option>
                    <option value="approved_by_admin">Diluluskan oleh Admin</option>
                </select>
            </div>
            <div class="flex items-end">
                <button onclick="loadAttendances()" class="btn btn-secondary w-full">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Search
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Nama Pekerja</th>
                        <th>Tarikh</th>
                        <th>Daftar Masuk</th>
                        <th>Daftar Keluar</th>
                        <th>Status</th>
                        <th>Lokasi Masuk</th>
                        <th>Lokasi Keluar</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="attendance-table">
                    <tr>
                        <td colspan="8" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200">
            <div id="pagination" class="flex items-center justify-between"></div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="attendance-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Kehadiran</h3>
            <form id="attendance-form">
                <input type="hidden" id="attendance-id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="employee_id" class="label">Employee <span class="text-red-500">*</span></label>
                        <select id="employee_id" class="select w-full select2-modal" required>
                            <option value="">Pilih Pekerja</option>
                        </select>
                        <span id="error-id_employee" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="date" class="label">Tarikh <span class="text-red-500">*</span></label>
                        <input type="date" id="date" class="input w-full" required>
                        <span id="error-date" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="check_in" class="label">Daftar Masuk Time</label>
                        <input type="time" id="check_in" class="input w-full">
                        <span id="error-check_in" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="check_out" class="label">Daftar Keluar Time</label>
                        <input type="time" id="check_out" class="input w-full">
                        <span id="error-check_out" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="location_in" class="label">Lokasi Masuk (lat,lng)</label>
                        <input type="text" id="location_in" class="input w-full" placeholder="-6.1234,106.5678">
                        <span id="error-location_in" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="location_out" class="label">Lokasi Keluar (lat,lng)</label>
                        <input type="text" id="location_out" class="input w-full" placeholder="-6.1234,106.5678">
                        <span id="error-location_out" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="status" class="label">Status</label>
                    <select id="status" class="select w-full select2-modal">
                        <option value="present">Hadir</option>
                        <option value="approved_by_admin">Diluluskan oleh Admin</option>
                    </select>
                    <span id="error-status" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Details Modal -->
    <dialog id="view-modal" class="modal">
        <div class="modal-box max-w-3xl">
            <h3 class="font-bold text-lg mb-4">Attendance Details</h3>
            <div id="attendance-details">
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>
            <div class="modal-action">
                <button onclick="closeViewModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentAttendanceId = null;
        let employeesList = [];

        $(document).ready(function() {
            loadEmployees();
            loadAttendances();
            initializeSelect2();

            // Search on enter
            $('#search').on('keypress', function(e) {
                if (e.which === 13) {
                    loadAttendances();
                }
            });

            // Filter on change
            $('#date_filter, #status_filter').on('change', function() {
                loadAttendances();
            });

            // Form submit
            $('#attendance-form').on('submit', function(e) {
                e.preventDefault();
                saveAttendance();
            });

            // Refresh icons when modals close
            $('#attendance-modal, #view-modal').on('close', function() {
                setTimeout(function() {
                    if (window.lucide && typeof window.lucide.createIcons === 'function') {
                        window.lucide.createIcons();
                    }
                }, 100);
            });
        });

        function initializeSelect2() {
            // Initialize Select2 for filter status
            $('#status_filter').select2({
                allowClear: true,
                placeholder: 'Select Status',
                containerCssClass: 'w-full',
                dropdownCssClass: 'bg-white'
            });

            // Initialize Select2 for modal selects
            $('.select2-modal').select2({
                dropdownParent: $('#attendance-modal'),
                allowClear: true,
                placeholder: 'Select an option',
                containerCssClass: 'w-full'
            });
        }

        function loadEmployees() {
            window.authHelper.apiRequest('/api/employees?per_page=1000', {
                    method: 'GET'
                })
                .then(function(response) {
                    const data = response.data.data;
                    employeesList = data.data || data;

                    let options = '<option value="">Pilih Pekerja</option>';
                    employeesList.forEach(function(emp) {
                        options += `<option value="${emp.id}">${emp.name} (${emp.email})</option>`;
                    });

                    $('#employee_id').html(options);

                    // Reinitialize Select2 after data loaded
                    $('#employee_id').select2('destroy');
                    $('#employee_id').select2({
                        dropdownParent: $('#attendance-modal'),
                        allowClear: true,
                        placeholder: 'Pilih Pekerja',
                        containerCssClass: 'w-full'
                    });
                })
                .catch(function(error) {
                    console.error('Error loading employees:', error);
                });
        }

        function loadAttendances(page = 1) {
            currentPage = page;
            const search = $('#search').val();
            const date = $('#date_filter').val();
            const status = $('#status_filter').val();

            let url = `/api/attendance?page=${page}&per_page=10`;
            if (search) url += `&search=${search}`;
            if (date) url += `&date=${date}`;
            if (status) url += `&status=${status}`;

            $('#attendance-table').html(`
                <tr>
                    <td colspan="8" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.authHelper.apiRequest(url, {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data.data;
                    renderAttendances(paginationData.data || paginationData);
                    renderPagination(paginationData);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#attendance-table').html(`
                        <tr>
                            <td colspan="8" class="text-center py-8 text-red-500">
                                Failed to load attendance records
                            </td>
                        </tr>
                    `);
                });
        }

        function renderAttendances(data) {
            // Handle both array and pagination object
            const attendances = Array.isArray(data) ? data : (data.data || []);

            if (attendances.length === 0) {
                $('#attendance-table').html(`
                    <tr>
                        <td colspan="8" class="text-center py-8 text-gray-500">
                            Tiada rekod kehadiran dijumpai
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            attendances.forEach(function(att) {
                const date = att.date ? new Date(att.date).toLocaleDateString() : '-';
                const checkIn = att.check_in || '-';
                const checkOut = att.check_out || '-';
                const statusBadge = att.status === 'approved_by_admin' ? 'badge-success' : 'badge-info';
                const statusLabel = att.status === 'approved_by_admin' ? 'Diluluskan' : 'Hadir';
                const employeeName = att.employee ? att.employee.name : '-';
                const locIn = att.location_in ? att.location_in.substring(0, 15) + '...' : '-';
                const locOut = att.location_out ? att.location_out.substring(0, 15) + '...' : '-';

                html += `
                    <tr>
                        <td class="font-medium">${employeeName}</td>
                        <td>${date}</td>
                        <td class="text-sm">${checkIn}</td>
                        <td class="text-sm">${checkOut}</td>
                        <td>
                            <span class="badge ${statusBadge}">${statusLabel}</span>
                        </td>
                        <td class="text-xs font-mono">${locIn}</td>
                        <td class="text-xs font-mono">${locOut}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewAttendance(${att.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editAttendance(${att.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteAttendance(${att.id})" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#attendance-table').html(html);

            // Refresh Lucide icons
            setTimeout(function() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }, 50);
        }

        function renderPagination(data) {
            if (data.last_page <= 1) {
                $('#pagination').html('');
                return;
            }

            let html = `
                <div class="text-sm text-gray-600">
                    Showing ${data.from} to ${data.to} daripada ${data.total} rekod
                </div>
                <div class="btn-group">
            `;

            html += `
                <button onclick="loadAttendances(${data.current_page - 1})"
                    class="btn btn-sm" ${data.current_page === 1 ? 'disabled' : ''}>
                    Sebelum
                </button>
            `;

            for (let i = 1; i <= data.last_page; i++) {
                if (i === data.current_page) {
                    html += `<button class="btn btn-sm btn-active">${i}</button>`;
                } else {
                    html += `<button onclick="loadAttendances(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

            html += `
                <button onclick="loadAttendances(${data.current_page + 1})"
                    class="btn btn-sm" ${data.current_page === data.last_page ? 'disabled' : ''}>
                    Seterusnya
                </button>
            `;

            html += '</div>';
            $('#pagination').html(html);
        }

        function openCreateModal() {
            currentAttendanceId = null;
            $('#modal-title').text('Tambah Kehadiran');
            $('#attendance-form')[0].reset();
            $('#attendance-id').val('');
            $('.text-red-500').addClass('hidden').text('');

            // Set today's date
            const today = new Date().toISOString().split('T')[0];
            $('#date').val(today);

            document.getElementById('attendance-modal').showModal();

            // Reinitialize Select2 after modal opened
            setTimeout(function() {
                initializeSelect2();
            }, 100);
        }

        function viewAttendance(id) {
            $('#attendance-details').html(`
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            `);
            document.getElementById('view-modal').showModal();

            window.authHelper.apiRequest(`/api/attendance/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const att = response.data.data;
                    const date = att.date ? new Date(att.date).toLocaleDateString('id-ID') : '-';
                    const employeeName = att.employee ? att.employee.name : '-';
                    const employeeEmail = att.employee ? att.employee.email : '-';

                    let html = `
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Employee</p>
                                    <p class="font-medium">${employeeName}</p>
                                    <p class="text-sm text-gray-600">${employeeEmail}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Tarikh</p>
                                    <p class="font-medium">${date}</p>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Daftar Masuk</p>
                                    <p class="font-medium">${att.check_in || '-'}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Daftar Keluar</p>
                                    <p class="font-medium">${att.check_out || '-'}</p>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Status</p>
                                    <p class="font-medium">
                                        <span class="badge ${att.status === 'approved_by_admin' ? 'badge-success' : 'badge-info'}">
                                            ${att.status === 'approved_by_admin' ? 'Diluluskan' : 'Hadir'}
                                        </span>
                                    </p>
                                </div>
                            </div>

                            <div>
                                <p class="text-sm text-gray-600">Lokasi Masuk</p>
                                <p class="font-medium font-mono text-sm">${att.location_in || '-'}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-600">Lokasi Keluar</p>
                                <p class="font-medium font-mono text-sm">${att.location_out || '-'}</p>
                            </div>
                        </div>
                    `;

                    $('#attendance-details').html(html);
                })
                .catch(function(error) {
                    $('#attendance-details').html(
                        '<p class="text-center text-red-500">Failed to load attendance details</p>');
                });
        }

        function editAttendance(id) {
            currentAttendanceId = id;
            $('#modal-title').text('Edit Attendance');
            $('.text-red-500').addClass('hidden').text('');

            window.authHelper.apiRequest(`/api/attendance/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const att = response.data.data;
                    $('#attendance-id').val(att.id);
                    $('#employee_id').val(att.id_employee).trigger('change');
                    $('#date').val(att.date);
                    $('#check_in').val(att.check_in);
                    $('#check_out').val(att.check_out);
                    $('#location_in').val(att.location_in);
                    $('#location_out').val(att.location_out);
                    $('#status').val(att.status).trigger('change');

                    document.getElementById('attendance-modal').showModal();

                    // Reinitialize Select2 after modal opened
                    setTimeout(function() {
                        initializeSelect2();
                    }, 100);
                })
                .catch(function(error) {
                    alert('Failed to load attendance data');
                });
        }

        function saveAttendance() {
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const formData = {
                id_employee: $('#employee_id').val(),
                date: $('#date').val(),
                check_in: $('#check_in').val() || null,
                check_out: $('#check_out').val() || null,
                location_in: $('#location_in').val() || null,
                location_out: $('#location_out').val() || null,
                status: $('#status').val()
            };

            const url = currentAttendanceId ?
                `/api/attendance/${currentAttendanceId}` :
                '/api/attendance';

            const method = currentAttendanceId ? 'PUT' : 'POST';

            $.ajax({
                url: url,
                type: method,
                data: JSON.stringify(formData),
                contentType: 'application/json',
                headers: {
                    'Authorization': `Bearer ${window.authHelper.getToken()}`,
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    closeModal();
                    loadAttendances(currentPage);
                    alert(response.message || 'Attendance saved successfully');
                },
                error: function(xhr) {
                    if (xhr.status === 400) {
                        const errors = xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert(xhr.responseJSON?.message || 'Failed to save attendance');
                    }
                },
                complete: function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                }
            });
        }

        function deleteAttendance(id) {
            if (!confirm('Are you sure you want to delete this attendance record?')) {
                return;
            }

            window.authHelper.apiRequest(`/api/attendance/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    loadAttendances(currentPage);
                    alert(response.data.message || 'Attendance deleted successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        alert(error.xhr.responseJSON.message);
                    } else {
                        alert('Failed to delete attendance');
                    }
                });
        }

        function closeModal() {
            document.getElementById('attendance-modal').close();
        }

        function closeViewModal() {
            document.getElementById('view-modal').close();
        }
    </script>
@endpush