@extends('layouts.app')
@section('title','Pairings | PairingPal')
@section('content')
    <section class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Pairings</h1>
            <p class="text-muted mb-0">Manage active and upcoming pairings from one place.</p>
        </div>
        <a href="{{ route('pairings.create') }}" class="btn btn-primary px-4">Create Pairing</a>
    </section>

    <div class="page-panel overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                <tr>
                    <th>Code</th>
                    <th>Title</th>
                    <th>Route</th>
                    <th>Report</th>
                    <th>Release</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($pairings as $pairing)
                    <tr>
                        <td class="fw-semibold">{{ $pairing->pairing_code }}</td>
                        <td>{{ $pairing->title }}</td>
                        <td>{{ $pairing->origin }} → {{ $pairing->destination }}</td>
                        <td>{{ $pairing->report_at->format('Y-m-d H:i') }}</td>
                        <td>{{ $pairing->release_at->format('Y-m-d H:i') }}</td>
                        <td><span class="badge text-bg-secondary">{{ $pairing->status }}</span></td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm" role="group" aria-label="Pairing actions">
                                <a href="{{ route('pairings.show', $pairing) }}" class="btn btn-outline-primary">View</a>
                                <a href="{{ route('pairings.edit', $pairing) }}" class="btn btn-outline-warning">Edit</a>
                            </div>
                            <form action="{{ route('pairings.destroy', $pairing) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this pairing?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            No pairings yet. Click <strong>Create Pairing</strong> to add your first one.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-3">
        {{ $pairings->links() }}
    </div>
@endsection