@extends('layouts.admin')
@section('title','Students')
@section('breadcrumb')<li class="breadcrumb-item active">Students</li>@endsection
@section('admin-content')

<style>
.students-table-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.students-table {
    font-size: 14px;
    border-collapse: collapse;
}

.students-table thead {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5280 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.students-table thead th {
    padding: 15px 12px;
    border: none;
    text-align: left;
    vertical-align: middle;
}

.students-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.students-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.students-table tbody tr:hover {
    background-color: #eff6ff !important;
    box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.1);
}

.students-table tbody td {
    padding: 12px;
    vertical-align: middle;
    color: #374151;
}

.students-table .badge {
    font-size: 11px;
    padding: 5px 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.students-table .enrollment-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.students-table .status-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.students-table .status-inactive {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.students-table .fee-amount {
    font-weight: 500;
    color: #1e40af;
}

.students-table .fee-paid {
    color: #059669;
    font-weight: 500;
}

.students-table .action-buttons {
    display: flex;
    gap: 6px;
}

.students-table .action-buttons .btn {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

.students-table .action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.pagination-info {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.pagination {
    margin: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination .page-link {
    border-radius: 4px;
    border: 1px solid #d1d5db;
    color: #1e3a5f;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s;
}

.pagination .page-link:hover {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: white;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5280 100%);
    border-color: #1e3a5f;
    color: white;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.pagination .page-item.disabled .page-link {
    color: #d1d5db;
    cursor: not-allowed;
    background: #f3f4f6;
}

.records-counter {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.filter-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    border: 1px solid #e5e7eb;
}

.filter-card .form-control, 
.filter-card .form-select {
    border-radius: 4px;
    border-color: #d1d5db;
    font-size: 13px;
    transition: all 0.2s;
}

.filter-card .form-control:focus, 
.filter-card .form-select:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#1e3a5f"><i class="fas fa-user-graduate me-2 text-warning"></i>Students Management</h4>
        <small class="text-muted">Total: <strong>{{ $students->total() }}</strong> students</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.students.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Add Student</a>
        <a href="{{ route('admin.students.import.form') }}" class="btn btn-success btn-sm"><i class="fas fa-file-csv me-1"></i>Import CSV</a>
    </div>
</div>

<!-- Filter Section -->
<div class="filter-card mb-3">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('admin.students.index') }}" class="row g-2 align-items-end">
            <div class="col-lg-3">
                <label class="form-label form-label-sm mb-1"><i class="fas fa-search me-1"></i>Search</label>
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Name or Enrollment No..." value="{{ request('search') }}">
            </div>
            <div class="col-lg-2">
                <label class="form-label form-label-sm mb-1"><i class="fas fa-university me-1"></i>Institute</label>
                <select name="institute_id" class="form-select form-select-sm">
                    <option value="">All Institutes</option>
                    @foreach($institutes as $i)
                        <option value="{{ $i->id }}" {{ (string)request('institute_id')===(string)$i->id?'selected':'' }}>
                            {{ $i->code ? $i->code.' - ' : '' }}{{ $i->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2">
                <label class="form-label form-label-sm mb-1"><i class="fas fa-book me-1"></i>Course</label>
                <select name="course_id" class="form-select form-select-sm">
                    <option value="">All Courses</option>
                    @foreach($courses as $c)<option value="{{ $c->id }}" {{ request('course_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-lg-2">
                <label class="form-label form-label-sm mb-1"><i class="fas fa-calendar me-1"></i>Session</label>
                <select name="session_id" class="form-select form-select-sm">
                    <option value="">All Sessions</option>
                    @foreach($sessions as $s)<option value="{{ $s->id }}" {{ request('session_id')==$s->id?'selected':'' }}>{{ $s->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-lg-2">
                <label class="form-label form-label-sm mb-1"><i class="fas fa-toggle-on me-1"></i>Status</label>
                <select name="status" class="form-select form-select-sm">
                    <option value="">All Status</option>
                    <option value="1" {{ request('status')==='1'?'selected':'' }}>Active</option>
                    <option value="0" {{ request('status')==='0'?'selected':'' }}>Inactive</option>
                </select>
            </div>
            <div class="col-lg-1">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="fas fa-filter"></i></button>
            </div>
            <div class="col-lg-1">
                <a href="{{ route('admin.students.index') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="fas fa-redo"></i></a>
            </div>
        </form>
    </div>
</div>

<!-- Table Section -->
<div class="students-table-wrapper">
    <div style="overflow-x: auto;">
        <table class="students-table w-100">
            <thead>
                <tr>
                    <th style="width: 5%">#</th>
                    <th style="width: 12%">Enrollment</th>
                    <th style="width: 15%">Student Name</th>
                    <th style="width: 10%">Institute</th>
                    <th style="width: 12%">Course</th>
                    <th style="width: 10%">Session</th>
                    <th style="width: 10%">Advisor</th>
                    <th style="width: 10%">Total Fee</th>
                    <th style="width: 10%">Paid</th>
                    <th style="width: 8%">Status</th>
                    <th style="width: 12%">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($students as $s)
                <tr>
                    <td><strong>{{ $students->firstItem() + $loop->index }}</strong></td>
                    <td><span class="badge enrollment-badge">{{ $s->enrollment_no }}</span></td>
                    <td><strong>{{ $s->name }}</strong></td>
                    <td><code>{{ optional($s->institute)->code ?? '—' }}</code></td>
                    <td>{{ optional($s->course)->name }}</td>
                    <td>{{ optional($s->academicSession)->name }}</td>
                    <td><small>{{ optional($s->advisor)->name ?? '—' }}</small></td>
                    <td><span class="fee-amount">₹{{ number_format(optional($s->feeStructure)->total_course_fee, 0) }}</span></td>
                    <td><span class="fee-paid">₹{{ number_format($s->paid_amount ?? 0, 0) }}</span></td>
                    <td><span class="badge {{ $s->is_active ? 'status-active' : 'status-inactive' }}">{{ $s->is_active ? 'Active' : 'Inactive' }}</span></td>
                    <td>
                        <div class="action-buttons">
                            <a href="{{ route('admin.students.show', $s) }}" class="btn btn-sm btn-outline-info" title="View"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.students.edit', $s) }}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="fas fa-edit"></i></a>
                            <form action="{{ route('admin.students.destroy', $s) }}" method="POST" class="d-inline">@csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger btn-delete" type="button" title="Delete"><i class="fas fa-trash"></i></button></form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="11" class="text-center py-5">
                        <div style="color: #9ca3af;">
                            <i class="fas fa-inbox" style="font-size: 32px; margin-bottom: 10px; display: block;"></i>
                            <strong>No students found</strong><br>
                            <small>Try adjusting your filters or <a href="{{ route('admin.students.create') }}">add a new student</a></small>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <!-- Pagination Section -->
    @if($students->hasPages())
    <div class="pagination-wrapper">
        <div class="records-counter">
            Showing <strong>{{ $students->firstItem() }}</strong> to <strong>{{ $students->lastItem() }}</strong> of <strong>{{ $students->total() }}</strong> records
        </div>
        {{ $students->withQueryString()->links('pagination::bootstrap-4') }}
    </div>
    @endif
</div>

<script>
// Delete confirmation
document.querySelectorAll('.btn-delete').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        if(confirm('Are you sure you want to delete this student?')) {
            this.closest('form').submit();
        }
    });
});
</script>

@endsection