@extends('layouts.app')
@section('title', 'Users')
@section('breadcrumb', 'Users')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-0" style="color:#0f3d23;">
        <i class="bi bi-people me-2" style="color:#c9a94d;"></i>System Users
    </h4>
    <button class="btn" style="background:#1a6b3c; color:#fff; border-radius:8px;"
            data-bs-toggle="modal" data-bs-target="#createUserModal">
        <i class="bi bi-person-plus me-1"></i>Add User
    </button>
</div>

{{-- Filters --}}
<div class="card table-card mb-4">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Name or email…" value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select name="school_id" class="form-select">
                    <option value="">All Schools</option>
                    @foreach($schools as $s)
                    <option value="{{ $s->id }}" {{ request('school_id')==$s->id ? 'selected':'' }}>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="role" class="form-select">
                    <option value="">All Roles</option>
                    @foreach(['super_admin','school_admin','registrar','teacher','student','parent'] as $r)
                    <option {{ request('role')==$r ? 'selected':'' }}>{{ $r }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn w-100" style="background:#1a6b3c; color:#fff; border-radius:8px;">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card table-card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle" style="font-size:.85rem;">
            <thead>
                <tr><th>Name</th><th>Email</th><th>Role</th><th>School</th><th>Last Login</th><th>Status</th></tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td class="fw-semibold">{{ $user->name }}</td>
                    <td class="text-muted">{{ $user->email }}</td>
                    <td>
                        <span class="badge bg-secondary text-capitalize" style="font-size:.72rem;">
                            {{ str_replace('_', ' ', $user->role) }}
                        </span>
                    </td>
                    <td>{{ optional($user->school)->code ?? '<span class="text-muted">MCSS</span>' }}</td>
                    <td class="text-muted" style="font-size:.78rem;">
                        {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                    </td>
                    <td>
                        <span class="badge {{ $user->is_active ? 'badge-status-active' : 'bg-secondary' }}">
                            {{ $user->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center py-4 text-muted">No users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
    <div class="card-footer bg-white py-2">{{ $users->withQueryString()->links('pagination::bootstrap-5') }}</div>
    @endif
</div>

{{-- Create User Modal --}}
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f3d23; color:#fff;">
                <h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Add New User</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.users.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Email Address <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Role <span class="text-danger">*</span></label>
                    <select name="role" class="form-select" required>
                        <option value="">— Select Role —</option>
                        @foreach(['super_admin'=>'Super Admin (MCSS)','school_admin'=>'School Admin','registrar'=>'Registrar','teacher'=>'Teacher'] as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">School</label>
                    <select name="school_id" class="form-select">
                        <option value="">None (MCSS Super Admin)</option>
                        @foreach($schools as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Password <span class="text-danger">*</span></label>
                    <input type="password" name="password" class="form-control" required minlength="8">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn" style="background:#1a6b3c; color:#fff;">Create User</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection