@extends('layouts.app')

@section('title', 'Workers Inventory')

@section('content')
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0 fw-bold">Workers Inventory</h4>
    </div>

    <!-- Summary Cards -->
    <div class="row g-2 mb-4">
        <div class="col-md-3 col-sm-6">
            <div class="card bg-primary text-white h-100 border-0 shadow-sm">
                <div class="card-body text-center p-2">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Total Staff</h6>
                    <h2 class="mb-0 fw-bold fs-4">{{ $totalWorkers }}</h2>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-sm-6">
            <div class="card bg-success text-white h-100 border-0 shadow-sm">
                <div class="card-body text-center p-2">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Men : Women Ratio</h6>
                    <h2 class="mb-0 fw-bold fs-4">{{ $men }} : {{ $women }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Workers Table -->
    <div class="card border-0 shadow-sm" style="border-radius: 8px;">
        <!-- Removed card header -->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="workersTable">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email / Contact</th>
                            <th>Assigned Role / Work</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($workers as $worker)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="fw-bold">{{ $worker->name }}</td>
                            <td>{{ $worker->email }}</td>
                            <td>
                                @php
                                    $roleColor = match(strtolower($worker->role)) {
                                        'super_admin', 'admin' => 'danger',
                                        'academic', 'teacher' => 'primary',
                                        'driver_manager', 'driver' => 'warning text-dark',
                                        default => 'info text-dark'
                                    };
                                @endphp
                                <span class="badge bg-{{ $roleColor }} text-uppercase">
                                    {{ str_replace('_', ' ', $worker->role) }}
                                </span>
                            </td>
                            <td><span class="badge bg-success">Active</span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        if (!$.fn.DataTable.isDataTable('#workersTable')) {
            $('#workersTable').DataTable({
                "pageLength": 25
            });
        }
    });
</script>
@endpush