@extends('admin.layouts.master')

@section('title', 'Student Management')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        /* Shared SaaS Design System */
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --secondary: #64748b;
            --bg-light: #f8fafc;
            --border-color: #e2e8f0;
            --text-main: #1e293b;
            --text-muted: #64748b;
        }

        .saas-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .card-toolbar {
            padding: 1.5rem;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
        }

        /* Search Input */
        .search-container {
            position: relative;
            width: 100%;
            max-width: 320px;
        }

        .search-container input {
            padding: 0.75rem 1rem 0.75rem 2.8rem;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-light);
            width: 100%;
            transition: 0.2s;
        }

        .search-container input:focus {
            background: #fff;
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
        }

        .search-container i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        /* Table Styles */
        .saas-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .saas-table th {
            background: var(--bg-light);
            padding: 1rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            border-bottom: 1px solid var(--border-color);
        }

        .saas-table td {
            padding: 1.25rem 1.5rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
            transition: 0.2s;
        }

        .saas-table tbody tr:hover td {
            background-color: #f8fafc;
        }

        /* Student Specific Styles */
        .student-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            /* Circular for people */
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .student-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Status Badges */
        .status-badge {
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-active::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #22c55e;
            border-radius: 50%;
        }

        .status-inactive {
            background: #f1f5f9;
            color: #475569;
        }

        .status-inactive::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #94a3b8;
            border-radius: 50%;
        }

        /* Action Buttons */
        .action-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: 0.2s;
            cursor: pointer;
            text-decoration: none;
        }

        .action-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: #f5f3ff;
        }

        .action-btn.delete:hover {
            border-color: #ef4444;
            color: #ef4444;
            background: #fef2f2;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">
        <div class="d-flex align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="#" class="text-muted text-decoration-none">Academic</a></li>
                        <li class="breadcrumb-item active fw-medium text-primary">Students</li>
                    </ol>
                </nav>
                <h2 class="fw-bold text-dark m-0">Student Management</h2>
            </div>
            {{-- Assuming you have a create route, otherwise remove this link --}}
            <a href="{{ route('admin.students.create') }}" class="btn btn-primary px-4 py-2 d-flex align-items-center gap-2"
                style="border-radius: 12px;">
                <i class="ri-user-add-line fs-18"></i> Add Student
            </a>
        </div>

        @livewire('admin.student.student-list')
    </div>
@endsection