@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h5>Attendance Import History</h5>
        <a href="{{ route('attendance.import.csv') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-upload"></i> New Import
        </a>
    </div>

    <div class="card-body">
        <table class="table table-bordered yajra-datatable w-100">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Date/Time</th>
                    <th>Settings Profile</th>
                    <th>Branch</th>
                    <th>Source</th>
                    <th>Status</th>
                    <th>Statistics</th>
                    <th>Imported By</th>
                    <th width="80">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Errors</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>Key</th>
                                <th>Error Message</th>
                                <th>Line Numbers</th>
                            </tr>
                        </thead>
                        <tbody id="errorTableBody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(function () {
    let table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('attendance.import.logs') }}",
        order: [[1, 'desc']],
        dom:
            "<'row mb-3 align-items-center'<'col-md-6'l><'col-md-6 d-flex justify-content-end'f>>" +
            "<'table-responsive'tr>" +
            "<'row mt-3 align-items-center'<'col-md-6'i><'col-md-6 d-flex justify-content-end'p>>",
        language: {
            search: "",
            searchPlaceholder: "Search logs...",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_-_END_ of _TOTAL_ logs"
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'setting_name', orderable: false },
            { data: 'branch_name', orderable: false },
            { data: 'source_type', name: 'source_type' },
            { data: 'status', orderable: false, searchable: false },
            { data: 'stats', orderable: false, searchable: false },
            { data: 'imported_by_name', orderable: false },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    // View errors
    $(document).on('click', '.btn-view-errors', function() {
        let errors = $(this).data('errors');

        let html = '';
        if (errors && errors.length > 0) {
            errors.forEach(function(err) {
                html += '<tr>';
                html += '<td>' + (err.key || '-') + '</td>';
                html += '<td>' + (err.message || '-') + '</td>';
                html += '<td>' + (err.line_numbers ? err.line_numbers.join(', ') : '-') + '</td>';
                html += '</tr>';
            });
        } else {
            html = '<tr><td colspan="3" class="text-center">No errors</td></tr>';
        }

        $('#errorTableBody').html(html);
        $('#errorModal').modal('show');
    });
});
</script>
@endsection
