@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="file-text"></i>
                                </div>
                                Danh sách bảng lương
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content -->
        <div class="container-xl px-4 mt-4">
            <div class="row">

                <div class="col-xl-12">
                    <!-- Account details card-->
                    <div class="card mb-4">
                        <div class="card-header">Danh sách bảng lương</div>
                        <div class="card-body">

                            @if (session('success'))
                                <div class="alert alert-success" style="white-space: pre-line;">{{ session('success') }}</div>
                            @endif

                            <div class="mb-4">
                                <!-- Action Buttons -->
                                <div class="d-flex gap-2 mb-3 flex-wrap">
                                    @if (auth()->user()->hasRole('admin') || auth()->user()->hasRole('hr'))
                                        <a href="{{ route('payrolls.create', request()->query()) }}" class="btn btn-primary">
                                            <i data-feather="plus" class="me-1"></i> Quy trình tính lương
                                        </a>
                                        
                                        <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#calculateAllModal">
                                            <i data-feather="zap" class="me-1"></i> Tính lương toàn bộ
                                        </button>
                                    @endif

                                    <!-- Column Visibility Toggle -->
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="columnToggle" data-bs-toggle="dropdown">
                                            <i data-feather="columns" class="me-1"></i> Ẩn/Hiện cột
                                        </button>
                                        <ul class="dropdown-menu p-3" style="min-width: 250px;">
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="allowances" checked> Phụ cấp</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="other_income" checked> Thu nhập khác</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="ot_amount" checked> Tiền OT</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="penalty_amount" checked> Tiền phạt</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="deductions" checked> Khấu trừ</label></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="intern_days"> Ngày thực tập</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="probation_days"> Ngày thử việc</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="official_days"> Ngày chính thức</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="present_days" checked> Ngày đi làm</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="absent_days" checked> Ngày nghỉ</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="paid_leave_days" checked> Nghỉ có phép (Được lương)</label></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="intern_salary"> Lương thực tập</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="probation_salary"> Lương thử việc</label></li>
                                            <li><label class="dropdown-item"><input type="checkbox" class="column-toggle me-2" data-column="official_salary"> Lương chính thức</label></li>
                                            <li><hr class="dropdown-divider"></li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- Filters -->
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <form method="GET" action="{{ route(auth()->user()->hasRole(['admin', 'hr']) ? 'payrolls.index' : 'payrolls_data') }}" id="filterForm">
                                            <div class="row g-3">
                                                <div class="col-md-3">
                                                    <label class="form-label">Tháng</label>
                                                    <input type="month" name="month" class="form-control" value="{{ request('month', now()->format('Y-m')) }}" onchange="this.form.submit()">
                                                </div>
                                                
                                                @if (auth()->user()->hasRole('admin') || auth()->user()->hasRole('hr'))
                                                    <div class="col-md-3">
                                                        <label class="form-label">Nhân viên</label>
                                                        <select name="employee_id" class="form-select">
                                                            <option value="">-- Tất cả nhân viên --</option>
                                                            @foreach($employees as $emp)
                                                                <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                                                    {{ $emp->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endif
                                                
                                                <div class="col-md-3 d-flex align-items-end gap-2">
                                                    <button type="submit" class="btn btn-primary">
                                                        <i data-feather="filter" class="me-1"></i> Lọc
                                                    </button>
                                                    <a href="{{ route(auth()->user()->hasRole(['admin', 'hr']) ? 'payrolls.index' : 'payrolls_data') }}" class="btn btn-secondary">
                                                        <i data-feather="x" class="me-1"></i> Xóa
                                                    </a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Table Wrapper for Horizontal Scroll -->
                            <div class="table-responsive">
                                <table id="payrollTable" class="table table-striped table-hover table-bordered">
                                <thead class="table-light">
                                        <tr>
                                            <th>Nhân viên</th>
                                            <th>Lương cơ bản</th>
                                            <th data-column="allowances">Phụ cấp</th>
                                            <th data-column="other_income">Thu nhập khác</th>
                                            <th data-column="ot_amount">Tiền OT</th>
                                            <th data-column="penalty_amount">Tiền phạt</th>
                                            <th data-column="deductions">Các khoản khấu trừ</th>
                                            <th data-column="intern_days" style="display: none;">Ngày thực tập</th>
                                            <th data-column="probation_days" style="display: none;">Ngày thử việc</th>
                                            <th data-column="official_days" style="display: none;" class="text-center">Ngày chính thức</th>
                                            <th data-column="present_days" class="text-center">Ngày đi làm</th>
                                               <th data-column="absent_days" class="text-center">Ngày nghỉ</th>
                                            <th data-column="paid_leave_days" class="text-center">Nghỉ có phép (Được lương)</th>
                                            <th data-column="intern_salary" style="display: none;">Lương thực tập</th>
                                            <th data-column="probation_salary" style="display: none;">Lương thử việc</th>
                                            <th data-column="official_salary" style="display: none;">Lương chính thức</th>
                                         
                                            <th>Lương nhận được</th>
                                        <!-- <th>Trạng thái</th> -->
                                        <!-- <th data-column="processor" style="display: none;">Được xử lý bởi</th>
                                        <th data-column="created_at" style="display: none;">Ngày tạo</th> -->
                                        <th>Thao tác</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($payrolls as $payroll)
                                        <tr>
                                            <td>{{ $payroll->employee->name }}</td>
                                            <td class="text-end">{{ number_format($payroll->basic_salary, 0) }}</td>
                                            <td data-column="allowances" class="text-end">{{ number_format($payroll->allowances, 0) }}</td>
                                            <td data-column="other_income" class="text-end">{{ number_format($payroll->other_income, 0) }}</td>
                                            <td data-column="ot_amount" class="text-end">{{ number_format($payroll->ot_amount, 0) }}</td>
                                            <td data-column="penalty_amount" class="text-end">{{ number_format($payroll->penalty_amount, 0) }}</td>
                                            <td data-column="deductions" class="text-end">{{ number_format($payroll->deductions, 0) }}</td>
                                            <td data-column="intern_days" style="display: none;" class="text-center">{{ $payroll->intern_days }}</td>
                                            <td data-column="probation_days" style="display: none;" class="text-center">{{ $payroll->probation_days }}</td>
                                            <td data-column="official_days" style="display: none;" class="text-center">{{ (float)$payroll->official_days }}</td>
                                            <td data-column="present_days" class="text-center">{{ (float)$payroll->present_days }}</td>
                                                  <td data-column="absent_days" class="text-center">{{ (float)$payroll->absent_days }}</td>
                                            <td data-column="paid_leave_days" class="text-center">{{ (float)($payroll->approved_leave_days ?? 0) }}</td>
                                            <td data-column="intern_salary" style="display: none;" class="text-end">{{ number_format($payroll->intern_salary, 0) }}</td>
                                            <td data-column="probation_salary" style="display: none;" class="text-end">{{ number_format($payroll->probation_salary, 0) }}</td>
                                            <td data-column="official_salary" style="display: none;" class="text-end">{{ number_format($payroll->official_salary, 0) }}</td>
                                      
                                            <td class="text-end"><strong>{{ number_format($payroll->net_salary, 0) }}</strong></td>
                                            <!-- <td>
                                                <span class="badge bg-{{ $payroll->status == 'paid' ? 'success' : ($payroll->status == 'approved' ? 'info' : 'warning') }}">
                                                    {{ ucfirst($payroll->status) }}
                                                </span>
                                            </td> -->
                                            <!-- <td data-column="processor" style="display: none;">{{ $payroll->processor->name ?? 'N/A' }}</td>
                                            <td data-column="created_at" style="display: none;">{{ $payroll->created_at->format('d M Y') }}</td> -->

                                            <td>
                                                <button type="button" class="btn btn-datatable btn-icon btn-transparent-dark me-2" 
                                                        onclick="viewPayrollDetail({{ $payroll->id }})" 
                                                        title="Xem chi tiết">
                                                    <i data-feather="eye"></i>
                                                </button>
                                                <a href="{{ route('payrolls.payslip' . (auth()->user()->hasRole(['admin', 'hr']) ? '' : '_data'), $payroll->id) }}"
                                                    class="btn btn-datatable btn-icon btn-transparent-dark me-2"
                                                    onclick="return confirm('Bạn có chắc chắn muốn tạo phiếu lương không?');">
                                                    <i data-feather="printer"></i>
                                                </a>
                                            </td>

                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="20" class="text-center py-4">
                                                <i data-feather="inbox" class="mb-2"></i>
                                                <p class="text-muted">Không có dữ liệu bảng lương</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            </div>
                            <!-- End Table Wrapper -->

                            <!-- Pagination -->
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="text-muted">
                                    Hiển thị {{ $payrolls->firstItem() ?? 0 }} đến {{ $payrolls->lastItem() ?? 0 }} 
                                    trong tổng số {{ $payrolls->total() }} bản ghi
                                </div>
                                <div>
                                    {{ $payrolls->links() }}
                                </div>
                            </div>

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

            </div>
        </div>

    </main>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; align-items: center; justify-content: center; flex-direction: column;">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="mt-3 fw-bold text-primary">Đang tính lương, vui lòng đợi...</div>
    </div>

    <!-- Sync Attendance Modal -->
    <div class="modal fade" id="syncAttendanceModal" tabindex="-1" aria-labelledby="syncAttendanceModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="syncAttendanceModalLabel">
                        <i data-feather="download" class="me-2"></i>Lấy dữ liệu từ máy chấm công
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i data-feather="info" class="me-2"></i>
                        Hệ thống sẽ kết nối tới máy chấm công và đồng bộ dữ liệu chấm công mới nhất.
                    </div>
                    
                    <div class="mb-3">
                        <label for="syncDateRange" class="form-label">Chọn khoảng thời gian đồng bộ:</label>
                        <select id="syncDateRange" class="form-select">
                            <option value="today">Hôm nay</option>
                            <option value="yesterday">Hôm qua</option>
                            <option value="week">7 ngày qua</option>
                            <option value="month">30 ngày qua</option>
                            <option value="custom" selected>Tùy chọn ngày...</option>
                        </select>
                    </div>

                    <div id="customDateRange">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="startDate" class="form-label">Từ ngày:</label>
                                <input type="date" id="startDate" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label for="endDate" class="form-label">Đến ngày:</label>
                                <input type="date" id="endDate" class="form-control" required>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">
                                <i data-feather="info" class="me-1" style="width: 14px; height: 14px;"></i>
                                Chọn khoảng thời gian để lấy dữ liệu chấm công từ máy
                            </small>
                        </div>
                    </div>

                    <div id="syncProgress" style="display: none;">
                        <div class="d-flex align-items-center">
                            <div class="spinner-border spinner-border-sm me-3" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <span id="syncStatus">Đang kết nối tới máy chấm công...</span>
                        </div>
                        <div class="progress mt-3">
                            <div id="syncProgressBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>

                    <div id="syncResult" style="display: none;">
                        <div class="alert" id="syncResultAlert">
                            <div id="syncResultContent"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
                    <button type="button" class="btn btn-success" id="startSyncBtn" onclick="startSync()">
                        <i data-feather="download" class="me-1"></i> Bắt đầu đồng bộ
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Calculate All Salaries Modal -->
    <div class="modal fade" id="calculateAllModal" tabindex="-1" aria-labelledby="calculateAllModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="calculateAllModalLabel">
                        <i data-feather="zap" class="me-2"></i>Tính lương toàn bộ nhân viên
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('payrolls.calculate_all') }}" method="POST" id="calculateAllForm" onsubmit="return confirmCalculateAll();">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <i data-feather="alert-triangle" class="me-2"></i>
                            Hệ thống sẽ tính lương cho <strong>TOÀN BỘ</strong> nhân viên đang hoạt động trong tháng được chọn.
                        </div>
                        
                        <div class="mb-3">
                            <label for="calculateMonth" class="form-label fw-semibold">Chọn tháng tính lương: <span class="text-danger">*</span></label>
                            <input type="month" name="month" id="calculateMonth" class="form-control form-control-lg" 
                                   value="{{ request('month', now()->format('Y-m')) }}" required>
                            <small class="text-muted">
                                <i data-feather="info" class="me-1" style="width: 14px; height: 14px;"></i>
                                Chọn tháng cần tính lương cho toàn bộ nhân viên
                            </small>
                        </div>

                        <div class="alert alert-info mb-0">
                            <i data-feather="info" class="me-2"></i>
                            <strong>Lưu ý:</strong> Quá trình này có thể mất vài phút tùy thuộc vào số lượng nhân viên.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Hủy</button>
                        <button type="submit" class="btn btn-warning">
                            <i data-feather="zap" class="me-1"></i> Bắt đầu tính lương
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Payroll Detail Modal -->
    <div class="modal fade" id="payrollDetailModal" tabindex="-1" aria-labelledby="payrollDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="payrollDetailModalLabel">
                        <i data-feather="file-text" class="me-2"></i>Chi tiết bảng lương
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="payrollDetailContent">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Đang tải...</span>
                            </div>
                            <p class="mt-2">Đang tải dữ liệu...</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function confirmCalculateAll() {
            const month = document.getElementById('calculateMonth').value;
            const monthDate = new Date(month + '-01');
            const monthName = monthDate.toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' });
            
            if (confirm(`Bạn có chắc chắn muốn tính lương cho TOÀN BỘ nhân viên trong ${monthName} không?\n\nQuá trình này có thể mất vài phút.`)) {
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('calculateAllModal'));
                if (modal) {
                    modal.hide();
                }
                
                // Show loading overlay
                document.getElementById('loadingOverlay').style.display = 'flex';
                return true;
            }
            return false;
        }

        function showLoading() {
            if (confirm('Bạn có chắc chắn muốn tính lương cho TOÀN BỘ nhân viên trong tháng này không? Quá trình này có thể mất vài phút.')) {
                document.getElementById('loadingOverlay').style.display = 'flex';
                return true;
            }
            return false;
        }

        // Re-render feather icons when modal is shown
        document.addEventListener('DOMContentLoaded', function() {
            const calculateAllModal = document.getElementById('calculateAllModal');
            if (calculateAllModal) {
                calculateAllModal.addEventListener('shown.bs.modal', function () {
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                });
            }
        });

        function syncAttendanceData() {
            // Hiển thị modal
            const modal = new bootstrap.Modal(document.getElementById('syncAttendanceModal'));
            modal.show();
            
            // Reset modal state
            document.getElementById('syncProgress').style.display = 'none';
            document.getElementById('syncResult').style.display = 'none';
            document.getElementById('startSyncBtn').style.display = 'inline-block';
            
            // Set default dates (7 days ago to today)
            const today = new Date();
            const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
            document.getElementById('endDate').value = today.toISOString().split('T')[0];
            document.getElementById('startDate').value = weekAgo.toISOString().split('T')[0];
            
            // Set focus to start date
            setTimeout(() => {
                document.getElementById('startDate').focus();
            }, 500);
        }

        // Xử lý thay đổi date range
        document.addEventListener('DOMContentLoaded', function() {
            const syncDateRange = document.getElementById('syncDateRange');
            const customDateRange = document.getElementById('customDateRange');
            
            syncDateRange.addEventListener('change', function() {
                const today = new Date();
                let startDate, endDate;
                
                switch(this.value) {
                    case 'today':
                        startDate = endDate = today;
                        customDateRange.style.display = 'none';
                        break;
                    case 'yesterday':
                        startDate = endDate = new Date(today.getTime() - 24 * 60 * 60 * 1000);
                        customDateRange.style.display = 'none';
                        break;
                    case 'week':
                        startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
                        endDate = today;
                        customDateRange.style.display = 'none';
                        break;
                    case 'month':
                        startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
                        endDate = today;
                        customDateRange.style.display = 'none';
                        break;
                    case 'custom':
                        customDateRange.style.display = 'block';
                        // Set default dates for custom
                        startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
                        endDate = today;
                        setTimeout(() => {
                            document.getElementById('startDate').focus();
                        }, 100);
                        break;
                }
                
                // Update date inputs if not custom
                if (this.value !== 'custom') {
                    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
                    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
                } else {
                    // For custom, set default values
                    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
                    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
                }
            });
            
            // Trigger change event to set initial state
            syncDateRange.dispatchEvent(new Event('change'));
        });

        function startSync() {
            const syncProgress = document.getElementById('syncProgress');
            const syncResult = document.getElementById('syncResult');
            const startSyncBtn = document.getElementById('startSyncBtn');
            const syncStatus = document.getElementById('syncStatus');
            const syncProgressBar = document.getElementById('syncProgressBar');
            
            // Ẩn nút, hiện progress
            startSyncBtn.style.display = 'none';
            syncProgress.style.display = 'block';
            syncResult.style.display = 'none';
            
            // Lấy thông tin date range
            const dateRange = document.getElementById('syncDateRange').value;
            let startDate = null;
            let endDate = null;
            
            if (dateRange === 'custom') {
                startDate = document.getElementById('startDate').value;
                endDate = document.getElementById('endDate').value;
                
                if (!startDate || !endDate) {
                    alert('Vui lòng chọn ngày bắt đầu và kết thúc');
                    startSyncBtn.style.display = 'inline-block';
                    syncProgress.style.display = 'none';
                    return;
                }
            }
            
            // Prepare data
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('date_range', dateRange);
            if (startDate) formData.append('start_date', startDate);
            if (endDate) formData.append('end_date', endDate);
            
            // Update progress
            syncStatus.textContent = 'Đang kết nối tới máy chấm công...';
            syncProgressBar.style.width = '10%';
            
            // Call API
            fetch('{{ route("payrolls.sync_attendance") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                syncProgressBar.style.width = '50%';
                syncStatus.textContent = 'Đang xử lý dữ liệu...';
                return response.json();
            })
            .then(data => {
                syncProgressBar.style.width = '100%';
                syncStatus.textContent = 'Hoàn thành!';
                
                setTimeout(() => {
                    syncProgress.style.display = 'none';
                    syncResult.style.display = 'block';
                    
                    const resultAlert = document.getElementById('syncResultAlert');
                    const resultContent = document.getElementById('syncResultContent');
                    
                    if (data.success) {
                        resultAlert.className = 'alert alert-success';
                        resultContent.innerHTML = `
                            <h6><i data-feather="check-circle" class="me-2"></i>Đồng bộ thành công!</h6>
                            <ul class="mb-0">
                                <li>Tổng bản ghi: ${data.data.total_records}</li>
                                <li>Đã xử lý: ${data.data.processed_records}</li>
                                <li>Nhân viên được cập nhật: ${data.data.employees_updated}</li>
                                <li>Khoảng thời gian: ${data.data.date_range.start} - ${data.data.date_range.end}</li>
                            </ul>
                        `;
                        
                        // Auto refresh page after 3 seconds
                        setTimeout(() => {
                            location.reload();
                        }, 3000);
                    } else {
                        resultAlert.className = 'alert alert-danger';
                        resultContent.innerHTML = `
                            <h6><i data-feather="x-circle" class="me-2"></i>Đồng bộ thất bại!</h6>
                            <p class="mb-2">${data.message}</p>
                            <p class="mb-0">Vui lòng kiểm tra:</p>
                            <ul class="mb-0">
                                <li>Kết nối mạng LAN</li>
                                <li>IP máy chấm công: {{ env('ZKTECO_IP', '192.168.1.201') }}</li>
                                <li>Máy chấm công có đang hoạt động không</li>
                            </ul>
                        `;
                    }
                    
                    // Re-render feather icons
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                    
                    // Show start button again
                    startSyncBtn.style.display = 'inline-block';
                    startSyncBtn.innerHTML = '<i data-feather="refresh-cw" class="me-1"></i> Thử lại';
                }, 1000);
            })
            .catch(error => {
                console.error('Sync error:', error);
                
                syncProgressBar.style.width = '100%';
                syncStatus.textContent = 'Có lỗi xảy ra!';
                
                setTimeout(() => {
                    syncProgress.style.display = 'none';
                    syncResult.style.display = 'block';
                    
                    const resultAlert = document.getElementById('syncResultAlert');
                    const resultContent = document.getElementById('syncResultContent');
                    
                    resultAlert.className = 'alert alert-danger';
                    resultContent.innerHTML = `
                        <h6><i data-feather="x-circle" class="me-2"></i>Lỗi kết nối!</h6>
                        <p class="mb-0">Không thể kết nối tới server. Vui lòng thử lại sau.</p>
                    `;
                    
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                    
                    startSyncBtn.style.display = 'inline-block';
                    startSyncBtn.innerHTML = '<i data-feather="refresh-cw" class="me-1"></i> Thử lại';
                }, 1000);
            });
        }

        // View Payroll Detail Function
        function viewPayrollDetail(payrollId) {
            const modal = new bootstrap.Modal(document.getElementById('payrollDetailModal'));
            const contentDiv = document.getElementById('payrollDetailContent');
            
            // Show loading
            contentDiv.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Đang tải...</span>
                    </div>
                    <p class="mt-2">Đang tải dữ liệu...</p>
                </div>
            `;
            
            modal.show();
            
            // Fetch data
            fetch(`/salary/payrolls/${payrollId}/detail`)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        renderPayrollDetail(result.data);
                    } else {
                        contentDiv.innerHTML = `
                            <div class="alert alert-danger">
                                <i data-feather="alert-circle" class="me-2"></i>
                                ${result.message || 'Không thể tải dữ liệu'}
                            </div>
                        `;
                        if (typeof feather !== 'undefined') feather.replace();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    contentDiv.innerHTML = `
                        <div class="alert alert-danger">
                            <i data-feather="alert-circle" class="me-2"></i>
                            Có lỗi xảy ra khi tải dữ liệu
                        </div>
                    `;
                    if (typeof feather !== 'undefined') feather.replace();
                });
        }
        
        function renderPayrollDetail(data) {
            const contentDiv = document.getElementById('payrollDetailContent');
            const { payroll, summary, attendances, penalties } = data;
            
            let html = `
                <!-- Employee Info -->
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0"><i data-feather="user" class="me-2"></i>Thông tin nhân viên</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Nhân viên:</strong> ${payroll.employee_name}</p>
                                <p><strong>Tháng:</strong> ${payroll.month_vi}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Tổng ngày làm việc:</strong> ${summary.total_working_days} ngày</p>
                                <p><strong>Ngày đi làm:</strong> <span class="badge bg-success">${parseFloat(summary.present_days).toLocaleString('vi-VN', {maximumFractionDigits: 1})}</span> | 
                                   <strong>Vắng mặt (Tổng):</strong> <span class="badge bg-danger">${parseFloat(summary.absent_days).toLocaleString('vi-VN', {maximumFractionDigits: 1})}</span> |
                                                                       <strong>Được hưởng phép:</strong> <span class="badge bg-info">${parseFloat(summary.approved_leave_days).toLocaleString('vi-VN', {maximumFractionDigits: 1})}</span></p>

                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Salary Summary -->
                <div class="card mb-3">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0"><i data-feather="dollar-sign" class="me-2"></i>Tổng kết lương</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Lương cơ bản:</strong></td>
                                <td class="text-end">${formatCurrency(payroll.basic_salary)}</td>
                            </tr>
                            ${payroll.intern_salary > 0 ? `
                            <tr>
                                <td class="ps-4"><small>• Trong đó Lương thực tập:</small></td>
                                <td class="text-end"><small>${formatCurrency(payroll.intern_salary)}</small></td>
                            </tr>
                            ` : ''}
                            ${payroll.probation_salary > 0 ? `
                            <tr>
                                <td class="ps-4"><small>• Trong đó Lương thử việc:</small></td>
                                <td class="text-end"><small>${formatCurrency(payroll.probation_salary)}</small></td>
                            </tr>
                            ` : ''}
                            ${payroll.official_salary > 0 && (payroll.probation_salary > 0 || payroll.intern_salary > 0) ? `
                            <tr>
                                <td class="ps-4"><small>• Trong đó Lương chính thức:</small></td>
                                <td class="text-end"><small>${formatCurrency(payroll.official_salary)}</small></td>
                            </tr>
                            ` : ''}
                            <tr>
                                <td><strong>Phụ cấp:</strong></td>
                                <td class="text-end">${formatCurrency(payroll.allowances)}</td>
                            </tr>
                            <tr>
                                <td><strong>Tiền OT:</strong></td>
                                <td class="text-end text-success">+${formatCurrency(payroll.ot_amount)}</td>
                            </tr>
                            <tr>
                                <td><strong>Thu nhập khác:</strong></td>
                                <td class="text-end text-success">+${formatCurrency(payroll.other_income)}</td>
                            </tr>
                            <tr class="table-warning">
                                <td><strong>Khấu trừ:</strong></td>
                                <td class="text-end text-danger">-${formatCurrency(payroll.deductions)}</td>
                            </tr>
                            <tr class="table-warning">
                                <td>
                                    <strong>Trừ lương ngày vắng:</strong>
                                    <br>
                                    <small class="text-muted">
                                        (${(parseFloat(summary.absent_days) - parseFloat(summary.approved_leave_days)).toLocaleString('vi-VN', {maximumFractionDigits: 1})} công tính phí × ${formatCurrency(summary.per_day_rate)})
                                    </small>
                                </td>
                                <td class="text-end text-danger">-${formatCurrency(payroll.absence_deductions || payroll.absent_deduction)}</td>
                            </tr>
                            <tr class="table-warning">
                                <td>
                                    <strong>Tiền phạt:</strong>
                                    <br><small class="text-muted">(Đi muộn, về sớm, quên chấm công)</small>
                                </td>
                                <td class="text-end text-danger">-${formatCurrency(payroll.penalty_amount)}</td>
                            </tr>
                            <tr class="table-success fw-bold">
                                <td><strong>Lương thực nhận:</strong></td>
                                <td class="text-end">${formatCurrency(payroll.net_salary)}</td>
                            </tr>
                        </table>
                        <small class="text-muted">* Lương 1 ngày: ${formatCurrency(summary.per_day_rate)}</small>
                    </div>
                </div>
                
                <!-- Tabs for Attendance and Penalties -->
                <ul class="nav nav-tabs" id="detailTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="attendance-tab" data-bs-toggle="tab" data-bs-target="#attendance" type="button">
                            <i data-feather="calendar" class="me-1"></i>Chấm công (${attendances.length})
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="penalties-tab" data-bs-toggle="tab" data-bs-target="#penalties" type="button">
                            <i data-feather="alert-triangle" class="me-1"></i>Vi phạm/Phạt (${penalties.length})
                        </button>
                    </li>
                </ul>
                
                <div class="tab-content border border-top-0 p-3" id="detailTabsContent">
                    <!-- Attendance Tab -->
                    <div class="tab-pane fade show active" id="attendance" role="tabpanel">
                        ${attendances.length > 0 ? `
                            <div class="table-responsive">
                                <table class="table table-sm table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Ngày</th>
                                            <th>Thứ</th>
                                            <th>Giờ vào</th>
                                            <th>Giờ ra</th>
                                            <th>Giờ làm</th>
                                            <th>Trạng thái</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${attendances.map(att => {
                                            const dayLeaves = att.approved_leaves || [];
                                            let leaveIndicator = '';
                                            if (dayLeaves.length > 0) {
                                                const hasPending = dayLeaves.some(l => l.status === 'Pending');
                                                const hasApproved = dayLeaves.some(l => l.status === 'Approved');
                                                
                                                let iconClass = 'text-danger';
                                                let statusPrefix = 'Đơn bị từ chối';
                                                
                                                if (hasPending) {
                                                    iconClass = 'text-warning';
                                                    statusPrefix = 'Có đơn đang chờ';
                                                } else if (hasApproved) {
                                                    iconClass = 'text-primary';
                                                    statusPrefix = 'Đã có đơn duyệt';
                                                }
                                                
                                                leaveIndicator = `
                                                   <div class="d-inline-block ms-1" data-bs-toggle="tooltip" data-bs-html="true" 
                                                        title="<b>${statusPrefix}:</b><br/>${dayLeaves.map(dl => `• ${dl.type_name} (${dl.status === 'Approved' ? 'Đã duyệt' : (dl.status === 'Pending' ? 'Chờ duyệt' : 'Từ chối')})`).join('<br/>')}">
                                                       <i data-feather="file-text" class="${iconClass}" style="width: 14px; height: 14px; cursor: help;"></i>
                                                   </div>`;
                                            }
                                            
                                            return `
                                            <tr>
                                                <td>${att.date}${leaveIndicator}</td>
                                                <td>${att.day_name}</td>
                                                <td>${att.check_in || '-'}</td>
                                                <td>${att.check_out || '-'}</td>
                                                <td>${att.working_hours || 0}h</td>
                                                <td>
                                                    <span class="badge bg-${att.status === 'Present' ? 'success' : (att.status === 'Late' ? 'warning' : 'secondary')}">
                                                        ${att.status === 'Present' ? 'Có mặt' : (att.status === 'Late' ? 'Đi muộn' : (att.status === 'MissingPunch' ? 'Quên CC' : att.status))}
                                                    </span>
                                                </td>
                                            </tr>
                                            `;
                                        }).join('')}
                                    </tbody>
                                </table>
                            </div>
                        ` : '<p class="text-muted">Không có dữ liệu chấm công</p>'}
                    </div>
                    
                    <!-- Penalties Tab -->
                    <div class="tab-pane fade" id="penalties" role="tabpanel">
                        ${penalties.length > 0 ? `
                            <div class="alert alert-light border mb-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted d-block">Tổng số lần vi phạm:</small>
                                        <strong>${data.penalty_logic.total_violations} lần</strong>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted d-block">Quy định miễn phạt:</small>
                                        <span>${data.penalty_logic.max_free} lần đầu</span>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Ngày</th>
                                            <th>Loại</th>
                                            <th>Phút</th>
                                            <th>Số tiền</th>
                                            <th>Ghi chú</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${penalties.map(p => {
                                            const isWaived = p.is_waived;
                                            const rowClass = isWaived ? 'text-muted fst-italic' : '';
                                            const amountDisplay = isWaived 
                                                ? `<span class="text-decoration-line-through me-2">${formatCurrency(p.amount)}</span><span class="badge bg-secondary">Miễn phạt</span>`
                                                : `<span class="text-danger fw-bold">${formatCurrency(p.amount)}</span>`;
                                            
                                            return `
                                            <tr class="${rowClass}">
                                                <td>${p.date}</td>
                                                <td>
                                                    <span class="badge bg-warning text-dark">${p.type_label}</span>
                                                    ${isWaived ? '<small class="ms-1">(Lần ' + p.index + ')</small>' : ''}
                                                </td>
                                                <td>${p.minutes || '-'}</td>
                                                <td>${amountDisplay}</td>
                                                <td>${p.note || ''}</td>
                                            </tr>
                                            `;
                                        }).join('')}
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-light fw-bold">
                                            <td colspan="3" class="text-end">Tiền phạt lẻ (đã trừ miễn phí):</td>
                                            <td colspan="2" class="text-danger">${formatCurrency(payroll.total_penalty)}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            
                            ${data.penalty_logic.excessive_violations > 0 ? `
                                <div class="alert alert-danger mt-3">
                                    <div class="d-flex align-items-center mb-2">
                                        <i data-feather="alert-triangle" class="me-2"></i>
                                        <strong>CẢNH BÁO PHẠT NGÀY CÔNG</strong>
                                    </div>
                                    <p class="mb-1">
                                        Bạn có <strong>${data.penalty_logic.excessive_violations} lần</strong> vi phạm vượt quá giới hạn 
                                        (${data.penalty_logic.day_penalty_threshold} lần/tháng).
                                    </p>
                                    <p class="mb-0">
                                        Phạt thêm: ${data.penalty_logic.excessive_violations} x 01 ngày công 
                                        = <strong>${formatCurrency(data.penalty_logic.day_penalty_amount)}</strong>
                                    </p>
                                </div>
                            ` : ''}

                        ` : '<p class="text-muted text-center py-3">Không có vi phạm nào</p>'}
                    </div>
                </div>
            `;
            
            contentDiv.innerHTML = html;
            
            // Re-render feather icons
            if (typeof feather !== 'undefined') {
                feather.replace();
            }

            // Initialize tooltips in modal
            var tooltipTriggerList = [].slice.call(contentDiv.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        }
        
        function formatCurrency(amount) {
            return new Intl.NumberFormat('vi-VN', { 
                style: 'currency', 
                currency: 'VND' 
            }).format(amount || 0);
        }
    </script>


@endsection

@push('styles')
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<style>
    /* Fix CSS cho dropdown ẩn/hiện cột */
    .dt-button-collection {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        padding: 10px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }
    
    .dt-button-collection .dt-button {
        background: transparent !important;
        border: none !important;
        padding: 8px 12px !important;
        text-align: left !important;
        width: 100% !important;
        color: #333 !important;
        font-size: 14px !important;
    }
    
    .dt-button-collection .dt-button:hover {
        background: #f0f0f0 !important;
    }
    
    .dt-button-collection .dt-button.active {
        background: #e3f2fd !important;
        color: #1976d2 !important;
    }
    
    /* Payroll Table Improvements */
    #payrollTable {
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    #payrollTable th,
    #payrollTable td {
        padding: 0.5rem;
        vertical-align: middle;
    }
    
    #payrollTable thead th {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 10;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
    }
    
    .table-responsive {
        max-height: 600px;
        overflow-y: auto;
    }
    
    #payrollTable td:nth-child(2),
    #payrollTable td:nth-child(3),
    #payrollTable td:nth-child(4),
    #payrollTable td:nth-child(5),
    #payrollTable td:nth-child(6),
    #payrollTable td:nth-child(7),
    #payrollTable td:nth-child(13) {
        text-align: right;
    }
</style>
@endpush

@push('scripts')
<script>
    // Prevent DataTables auto-initialization on payrollTable
    $(document).ready(function() {
        // Remove payrollTable from DataTables auto-init
        if ($.fn.DataTable.isDataTable('#payrollTable')) {
            $('#payrollTable').DataTable().destroy();
        }
    });
    
    // Column Visibility Toggle
    document.addEventListener('DOMContentLoaded', function() {
        const columnToggles = document.querySelectorAll('.column-toggle');
        
        columnToggles.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const columnName = this.dataset.column;
                const isVisible = this.checked;
                
                // Toggle header cells
                document.querySelectorAll(`th[data-column="${columnName}"]`).forEach(function(th) {
                    th.style.display = isVisible ? '' : 'none';
                });
                
                // Toggle body cells
                document.querySelectorAll(`td[data-column="${columnName}"]`).forEach(function(td) {
                    td.style.display = isVisible ? '' : 'none';
                });
                
                // Save preference to localStorage
                localStorage.setItem(`payroll_column_${columnName}`, isVisible);
            });
            
            // Load saved preferences from localStorage
            const columnName = checkbox.dataset.column;
            const savedState = localStorage.getItem(`payroll_column_${columnName}`);
            if (savedState !== null) {
                const isVisible = savedState === 'true';
                checkbox.checked = isVisible;
                
                // Apply saved state
                document.querySelectorAll(`th[data-column="${columnName}"]`).forEach(function(th) {
                    th.style.display = isVisible ? '' : 'none';
                });
                document.querySelectorAll(`td[data-column="${columnName}"]`).forEach(function(td) {
                    td.style.display = isVisible ? '' : 'none';
                });
            }
        });
    });
</script>
@endpush