@extends('layouts.app')

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

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.sls-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

.sls-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.sls-title-group { display: flex; align-items: center; gap: 14px; }
.sls-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sls-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.sls-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.sls-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: #414662;
    color: #fff; font-size: 12px; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-decoration: none; transition: all .2s;
}
.sls-add-btn:hover {
    box-shadow: 0 6px 20px rgba(65,70,98,.3);
    transform: translateY(-2px);
}

.sls-alert {
    /* max-width: 1400px; */
    margin: 0 auto 1.4rem;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sls-alert-success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #15803d;
}

.sls-filter-bar {
    /* max-width: 1400px; */
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    padding: 1.2rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sls-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #414662;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sls-filter-input, .sls-filter-select {
    padding: 9px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #fff;
    color: #2d2f45;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    min-width: 200px;
}

.sls-card {
    /* max-width: 1400px; */
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.sls-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
}
.sls-body { padding: 2rem 2.2rem; }

.sls-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; }
.sls-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; }
.sls-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.sls-count { margin-left: auto; font-size: 13px; font-weight: 700; color: #f5a623; background: #fffbeb; padding: 6px 12px; border-radius: 20px; }

.sls-table-wrap { overflow-x: auto; }
.sls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sls-table thead {
    background: #f7f8fc;
    border-bottom: 1.5px solid #eceef6;
}
.sls-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    color: #414662;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sls-table td {
    padding: 14px 16px;
    border-bottom: 1.5px solid #f0f1f7;
    color: #6b7194;
}
.sls-table tbody tr:hover {
    background-color: #f7f8fc;
}

.sls-student-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sls-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #414662;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}
.sls-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sls-name {
    font-weight: 700;
    color: #2d2f45;
}

.sls-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sls-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border: 1.5px solid #eceef6;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: #414662;
    transition: all .2s;
    font-family: 'Poppins', sans-serif;
}
.sls-action-btn:hover {
    border-color: #414662;
    background: #414662;
    color: #fff;
}
.sls-danger-btn {
    border: 1.5px solid #f7a5a5;
    color: #dc2626;
}
.sls-danger-btn:hover {
    border: 1.5px solid #f7a5a5;
    background: #dc2626;
}

.sls-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #9099b8;
}
.sls-empty svg {    margin: 1rem auto; opacity: .5; }

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1.5px solid #eceef6;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    color: #414662;
    transition: all .2s;
}
.pagination a:hover {
    border-color: #414662;
    background: #414662;
    color: #fff;
}
.pagination .active span {
    background: #414662;
    color: #fff;
    border-color: #414662;
}

@media (max-width: 768px) {
    .sls-filter-bar { flex-direction: column; align-items: flex-start; }
}
</style>

<div class="sls-wrap">
    <div class="sls-top-row">
        <div class="sls-title-group">
            <div class="sls-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div>
                <p class="sls-title">Students</p>
                <p class="sls-sub">Manage all students in the system</p>
            </div>
        </div>
        <a href="{{ route('student.create') }}" class="sls-add-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            Add New Student
        </a>
    </div>

    {{-- Messages --}}
    @if (session('success'))
        <div class="sls-alert sls-alert-success">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            {{ session('success') }}
        </div>
    @endif

    {{-- Filter Bar --}}
    <div class="sls-filter-bar">
        <form method="GET" action="{{ route('student.list') }}" style="display: flex; gap: 14px; width: 100%; flex-wrap: wrap; align-items: center;">
            <label class="sls-filter-label">
                Search by Name/CITS No:
            </label>
            <input type="text" name="search" placeholder="Search..." class="sls-filter-input" value="{{ $search }}">

            <label class="sls-filter-label">
                Filter by Trade:
            </label>
            <select name="trade" class="sls-filter-select">
                <option value="">All Trades</option>
                @foreach ($trades as $trade)
                    <option value="{{ $trade->trade_name }}" @selected($tradeFilter == $trade->trade_name)>
                        {{ $trade->trade_name }}
                    </option>
                @endforeach
            </select>

            <button type="submit" class="sls-add-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                Search
            </button>
        </form>
    </div>

    {{-- Card --}}
    <div class="sls-card">
        <div class="sls-bar"></div>
        <div class="sls-body">
            <div style="display: flex; align-items: center; margin-bottom: 1.6rem;">
                <div class="sls-sh">
                    <div class="sls-dot"></div>
                    <span class="sls-stitle">📚 Student Records</span>
                </div>
                <div class="sls-count">{{ $stats['total_students'] }} Students</div>
            </div>

            @if ($students->count() > 0)
                <div class="sls-table-wrap">
                    <table class="sls-table">
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>Roll No</th>
                                <th>Trade</th>

                                <th>Shift</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($students as $student)
                                <tr>
                                    <td>
                                        <div class="sls-student-row">
                                            <div class="sls-avatar">
                                                @if ($student->photo)
                                                    <img src="{{ asset('storage/' . $student->photo) }}" alt="{{ $student->user->name }}">
                                                @else
                                                    {{ strtoupper(substr($student->user->name, 0, 1)) }}
                                                @endif
                                            </div>
                                            <div>
                                                <div class="sls-name">{{ $student->user->name }}</div>
                                                <div style="font-size: 11px; color: #9099b8;">{{ $student->gender }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $student->roll_no }}</td>
                                    <td>{{ $student->trade }}</td>
                                    
                                    <td>
                                        <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;">
                                            {{ ucfirst($student->shift) }}
                                        </span>
                                    </td>
                                    <td>{{ $student->user->mobile }}</td>
                                    <td>{{ $student->user->email }}</td>
                                    <td>
                                        <div class="sls-actions">
                                            <a href="{{ route('student.edit', $student) }}" class="sls-action-btn" title="Edit">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
                                                Edit
                                            </a>
                                            <form action="{{ route('student.delete', $student) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="sls-action-btn sls-danger-btn" title="Delete">
                                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                                                    Delete
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="pagination">
                    {{ $students->links() }}
                </div>
            @else
                <div class="sls-empty">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
                    <p>No students found</p>
                </div>
            @endif
        </div>
    </div>
</div>

@endsection