@extends('layouts.admin')

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h2 class="mb-1 text-primary">Submitted Reports</h2>
        <div class="text-info">Detailed view of all operator submissions</div>
    </div>
    <div>
        <button class="btn btn-outline-success btn-sm" onclick="window.print()">
            <i class="bi bi-printer"></i> Print Report
        </button>
    </div>
</div>

<div class="card shadow-sm overflow-hidden">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-dark text-white opacity-75">
                    <tr>
                        <th class="px-3">ID</th>
                        <th>Date</th>
                        <th>Operator</th>
                        <th>Machine</th>
                        <th>Classification</th>
                        <th>Detail</th>
                        <th>Reporting To</th>
                        <th>Start</th>
                        <th>End</th>
                        <th class="text-center">Duration</th>
                        <th>Comments</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($reports as $report)
                    <tr>
                        <td class="px-3 text-muted small">#{{ $report->id }}</td>
                        <td class="text-nowrap">{{ $report->report_date }}</td>
                        <td class="fw-bold">{{ $report->operator_name }}</td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                {{ $report->machine->number }}
                            </span>
                        </td>
                        <td>{{ $report->classification->name }}</td>
                        <td>{{ $report->detail->name ?? 'N/A' }}</td>
                        <td class="text-nowrap">
                            <div class="d-flex align-items-center gap-1">
                                <i class="bi bi-person-check text-success"></i>
                                {{ $report->reportingTo->name }}
                            </div>
                        </td>
                        <td class="text-muted small">{{ \Carbon\Carbon::parse($report->start_time)->format('H:i') }}</td>
                        <td class="text-muted small">{{ \Carbon\Carbon::parse($report->end_time)->format('H:i') }}</td>
                        <td class="text-center">
                            <span class="badge {{ $report->duration_minutes > 60 ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info' }}">
                                {{ $report->duration_minutes }} min
                            </span>
                        </td>
                        <td>
                            <div class="text-truncate dropdown-comments" style="max-width: 200px;" title="{{ $report->comments }}">
                                {{ $report->comments ?? '-' }}
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="text-center py-5 text-muted italic">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            No reports submitted yet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($reports->hasPages())
    <div class="card-footer bg-transparent border-top border-secondary border-opacity-10 py-3">
        {{ $reports->links() }}
    </div>
    @endif
</div>

<style>
/* Custom table styling for glassmorphism look */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05);
    font-size: 0.9rem;
}

thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: none !important;
}

tbody td {
    border-bottom-color: rgba(var(--bs-border-color-rgb), 0.1);
}

.metric-icon {
    width: 40px;
    height: 40px;
}

.dropdown-comments:hover {
    overflow: visible;
    white-space: normal;
    background: var(--bs-body-bg);
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 5px;
    border-radius: 4px;
}

@media print {
    .sidebar, .navbar, .btn-sm { display: none !important; }
    .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    .table td, .table th { color: black !important; }
}
</style>
@endsection