@extends('layouts.app')

@section('title', 'Teams')

@section('content')
<style>
    .teams-page .team-stat,.teams-page .team-panel{border:1px solid #e7ebf2;border-radius:15px;background:#fff;box-shadow:none}
    .teams-page .team-stat{height:100%;padding:18px}.teams-page .team-stat-icon{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px}
    .teams-page .team-table thead th{padding:13px 16px;background:#f7f9fc;color:#475467;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #e7ebf2}
    .teams-page .team-table tbody td{padding:14px 16px;vertical-align:middle}.teams-page .team-name{color:#253047;font-weight:700}.teams-page .team-code{font-family:monospace;font-size:11px}
</style>
<div class="page-header">
    <div class="page-header-left d-flex align-items-center"><div class="page-header-title"><h5 class="mb-1">Teams</h5></div><ul class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li><li class="breadcrumb-item">Teams</li></ul></div>
    <div class="page-header-right ms-auto">@can('create_teams')<a href="{{ route('teams.create') }}" class="btn btn-primary"><i class="feather-plus me-1"></i>Create Team</a>@endcan</div>
</div>
<div class="main-content teams-page" data-testid="teams-professional-ui">
    <div class="row g-3 mb-4">
        <div class="col-md-4"><div class="team-stat d-flex align-items-center gap-3"><span class="team-stat-icon bg-soft-primary text-primary"><i class="feather-users"></i></span><div><div class="fs-4 fw-bold">{{ $summary['total'] }}</div><small class="text-muted">Total Teams</small></div></div></div>
        <div class="col-md-4"><div class="team-stat d-flex align-items-center gap-3"><span class="team-stat-icon bg-soft-success text-success"><i class="feather-check-circle"></i></span><div><div class="fs-4 fw-bold">{{ $summary['active'] }}</div><small class="text-muted">Active Teams</small></div></div></div>
        <div class="col-md-4"><div class="team-stat d-flex align-items-center gap-3"><span class="team-stat-icon bg-soft-warning text-warning"><i class="feather-user-check"></i></span><div><div class="fs-4 fw-bold">{{ $summary['members'] }}</div><small class="text-muted">Assigned Employees</small></div></div></div>
    </div>
    <section class="team-panel overflow-hidden">
        <div class="p-3 border-bottom">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-lg-5"><label class="form-label small fw-semibold">Search</label><div class="input-group"><span class="input-group-text"><i class="feather-search"></i></span><input type="search" name="q" maxlength="100" class="form-control" value="{{ request('q') }}" placeholder="Search team name or code"></div></div>
                <div class="col-lg-2 col-md-4"><label class="form-label small fw-semibold">Status</label><select name="status" class="form-select"><option value="">All statuses</option><option value="active" @selected(request('status')==='active')>Active</option><option value="inactive" @selected(request('status')==='inactive')>Inactive</option></select></div>
                <div class="col-lg-3 col-md-4"><label class="form-label small fw-semibold">Manager</label><select name="manager_id" class="form-select"><option value="">All managers</option>@foreach($managers as $manager)<option value="{{ $manager->id }}" @selected((int)request('manager_id')===$manager->id)>{{ $manager->name }}</option>@endforeach</select></div>
                <div class="col-lg-2 col-md-4 d-flex gap-2"><button class="btn btn-primary flex-grow-1" title="Apply filters"><i class="feather-filter"></i></button><a href="{{ route('teams.index') }}" class="btn btn-light flex-grow-1" title="Reset filters"><i class="feather-refresh-cw"></i></a></div>
            </form>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 team-table">
                <thead><tr><th>Team</th><th>Manager</th><th>Members</th><th>Status</th><th>Updated</th><th class="text-end">Actions</th></tr></thead>
                <tbody>
                    @forelse($teams as $team)
                        <tr>
                            <td><div class="team-name">{{ $team->name }}</div><span class="badge bg-soft-secondary text-secondary team-code">{{ $team->code ?: 'NO CODE' }}</span>@if($team->description)<small class="d-block text-muted mt-1 text-truncate" style="max-width:300px">{{ $team->description }}</small>@endif</td>
                            <td>@if($team->manager)<span class="d-flex align-items-center gap-2"><span class="avatar-text avatar-sm bg-soft-primary text-primary">{{ strtoupper(substr($team->manager->name,0,1)) }}</span><span>{{ $team->manager->name }}</span></span>@else<span class="text-muted">Not assigned</span>@endif</td>
                            <td><span class="badge bg-soft-info text-info"><i class="feather-users me-1"></i>{{ $team->members_count }}</span></td>
                            <td><span class="badge {{ $team->status==='active'?'bg-soft-success text-success':'bg-soft-secondary text-secondary' }}">{{ ucfirst($team->status) }}</span></td>
                            <td><small class="text-muted">{{ $team->updated_at->diffForHumans() }}</small></td>
                            <td><div class="hstack gap-2 justify-content-end"><a href="{{ route('teams.activity',$team) }}" class="avatar-text avatar-md bg-soft-primary text-primary" title="Team Activity"><i class="feather-activity"></i></a>@can('update_teams')<a href="{{ route('teams.edit',$team) }}" class="avatar-text avatar-md bg-soft-warning text-warning" title="Edit Team"><i class="feather-edit-3"></i></a>@endcan @can('delete_teams')<form action="{{ route('teams.destroy',$team) }}" method="POST" onsubmit="return confirm('Delete this Team?');">@csrf @method('DELETE')<button class="avatar-text avatar-md border-0 bg-soft-danger text-danger" title="Delete Team"><i class="feather-trash-2"></i></button></form>@endcan</div></td>
                        </tr>
                    @empty<tr><td colspan="6"><div class="text-center py-5 text-muted"><i class="feather-users fs-2 d-block mb-2"></i>No Teams found.</div></td></tr>@endforelse
                </tbody>
            </table>
        </div>
        <div class="p-3 border-top d-flex justify-content-between align-items-center"><small class="text-muted">Showing {{ $teams->firstItem() ?? 0 }}–{{ $teams->lastItem() ?? 0 }} of {{ $teams->total() }} Teams</small>{{ $teams->links() }}</div>
    </section>
</div>
@endsection
