@extends('layouts.admin')

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

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Coaches Management</h1>
    </div>
    <a href="{{ route('admin.coaches.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Coach
    </a>
</div>

<div class="admin-card">
    <div class="admin-card-body" style="padding:0;">
        @if($coaches->count())
        <div class="table-responsive">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($coaches as $c)
                    <tr>
                        <td>{{ $c->id }}</td>
                        <td>
                            <div style="display:flex; align-items:center; gap:10px;">
                                @if($c->photo)
                                <img src="{{ asset($c->photo) }}" alt="{{ $c->name }}"
                                     style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color);">
                                @else
                                <div style="width:36px;height:36px;border-radius:50%;background:rgba(30,58,138,.1);display:flex;align-items:center;justify-content:center;">
                                    <i class="fas fa-chalkboard-teacher" style="color:var(--primary);font-size:0.9rem;"></i>
                                </div>
                                @endif
                                <span style="font-weight:600; color:var(--primary);">{{ $c->name }}</span>
                            </div>
                        </td>
                        <td>{{ $c->email }}</td>
                        <td style="text-align:right;">
                            <a href="{{ route('admin.coaches.edit', $c->id) }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <form action="{{ route('admin.coaches.destroy', $c->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Delete this coach?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline btn-sm" style="color:var(--red); border-color:var(--red);">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div style="padding: 20px;">
            {{ $coaches->links() }}
        </div>
        @else
        <div style="padding: 40px; text-align: center; color: var(--text-muted);">
            <i class="fas fa-chalkboard-teacher" style="font-size: 3rem; opacity: 0.5; margin-bottom: 16px;"></i>
            <p>No coaches found.</p>
        </div>
        @endif
    </div>
</div>
@endsection
