@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;
}

.status-completed{
    color:#16a34a;
    font-weight:600;
}

.status-progress{
    color:#f59e0b;
    font-weight:600;
}

.status-partial{
    color:#dc2626;
    font-weight:600;
}
/* 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>Name</th>
    <th>Organization</th>
    <th>Email</th>
    <th>Survey Status</th>
    <th>Created Date</th>
    <th>Role</th>
</tr>
</thead>

                   <tbody>

@forelse($employees as $key => $emp)

<tr>

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

    <td>
        {{ $emp->first_name }}
        {{ $emp->last_name }}
    </td>

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

    <td>{{ $emp->email }}</td>

  <td>
    @if($emp->survey_status == 'Completed')
        <span class="status-completed">Completed</span>

    @elseif($emp->survey_status == 'In Progress')
        <span class="status-progress">In Progress</span>

    @else
        <span class="status-partial">Partially Filled</span>
    @endif
</td>

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

    <td>
        User
    </td>

</tr>

@empty

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

@endforelse

</tbody>
                </table>

            </div>

        </div>

    </div>

</div>

@endsection