@extends('layouts.admin_dashboard')

@section('content')

<style>
.card{
    border:none;
    border-radius:15px;
    overflow:hidden;
}

.card-header{
    background:#16a34a !important;
    padding:15px 20px;
}

.card-header h4{
    margin:0;
    color:#fff;
    font-weight:600;
}

.table{
    margin-bottom:0;
}

.table th{
    background:#f3f4f6;
    color:#14532d;
    font-weight:600;
    white-space:nowrap;
}

.table td{
    vertical-align:middle;
}

.badge-role{
    background:#16a34a;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
}

/* Mobile Responsive */
@media (max-width:768px){

    .container-fluid{
        padding-left:10px;
        padding-right:10px;
    }

    .card-header h4{
        font-size:16px;
        text-align:center;
    }

    .table{
        font-size:13px;
    }

    .table th,
    .table td{
        white-space:nowrap;
        padding:10px 8px;
    }
}

@media (max-width:576px){

    .card-header{
        padding:12px;
    }

    .card-header h4{
        font-size:15px;
    }

    .table{
        font-size:12px;
    }
}


@media (max-width:768px){

    .table-responsive{
        overflow-x: hidden;
    }

    .table thead{
        display:none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td{
        display:block;
        width:100%;
    }

    .table tr{
        margin-bottom:15px;
        border:1px solid #ddd;
        border-radius:10px;
        padding:10px;
        background:#fff;
        box-shadow:0 2px 8px rgba(0,0,0,0.08);
    }

    .table td{
        text-align:right;
        padding:10px;
        position:relative;
        border:none;
        border-bottom:1px solid #eee;
    }

    .table td:last-child{
        border-bottom:none;
    }

    .table td::before{
        content:attr(data-label);
        position:absolute;
        left:10px;
        font-weight:600;
        color:#14532d;
        text-align:left;
    }
}

</style>

<div class="container-fluid">

    <div class="card shadow-sm">

        <div class="card-header">
            <h4>All Organizations</h4>
        </div>

        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-bordered table-striped table-hover">

                 <thead>
<tr>
    <th>S.No.</th>
    <th>Organization</th>
    <th>Created Date</th>
    <th>Total Employees</th>
    <th>Surveys Completed</th>
    <th>In Progress</th>
    <th>Partially Filled</th>
</tr>
</thead>

                   <tbody>

@forelse($organizations as $key => $org)

<tr>

<td>{{ $key + 1 }}</td>

<td>{{ $org->organization_name }}</td>

<td>{{ date('d-m-Y', strtotime($org->created_at)) }}</td>

<td>{{ $org->total_employees }}</td>

<td>{{ $org->surveys_completed }}</td>

<td>{{ $org->surveys_in_progress }}</td>

<td>{{ $org->partially_filled }}</td>
</tr>

@empty

<tr>
    <td colspan="7" class="text-center">
        No Organization Found
    </td>
</tr>

@endforelse

</tbody>
                </table>

            </div>

        </div>

    </div>

</div>

@endsection