@extends('layouts.app')

@section('content')
<div class="sca-page">
    <div class="sca-shell sca-page-stack">
        <section class="sca-page-hero sca-page-hero-black">
            <div class="sca-hero-grid">
                <div class="sca-stack-md">
                    <div class="sca-kicker">Listening Records</div>
                    <h1 class="sca-page-title">Playlog History</h1>
                    <div class="sca-page-meta">
                        Review recorded playback activity by artist, album, side, date, turntable, tonearm and cartridge.
                    </div>
                </div>

                <div class="sca-hero-actions" style="justify-content:flex-end; align-self:start;">
                    <a href="{{ route('play-log.index') }}" class="sca-btn sca-btn-secondary">New Play Log Entry</a>
                </div>
            </div>
        </section>

        <section class="sca-card sca-card-accent playlog-history-toolbar">
            <div>
                <h2 class="sca-section-title">History view</h2>
                <div class="sca-section-copy">
                    Showing {{ $view === 'all' ? 'all recorded plays' : 'the last 20 records played' }}.
                    Total logged plays: {{ $totalPlayCount }}.
                </div>
            </div>

            <div class="playlog-history-actions">
                <a href="{{ route('play-logs.index') }}" class="sca-filter-chip {{ $view === 'recent' ? 'sca-filter-chip-active' : '' }}">
                    Last 20
                </a>
                <a href="{{ route('play-logs.index', ['view' => 'all']) }}" class="sca-filter-chip {{ $view === 'all' ? 'sca-filter-chip-active' : '' }}">
                    All records played
                </a>
            </div>
        </section>

        <section class="sca-table-wrap">
            <div style="display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 18px; background:var(--sca-black); color:var(--sca-white); flex-wrap:wrap;">
                <div style="font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;">
                    {{ $view === 'all' ? 'Complete playlog' : 'Recent playlog' }}
                </div>
                <div style="font-size:12px; letter-spacing:0.08em; text-transform:uppercase;">
                    Ordered newest first
                </div>
            </div>

            <div class="sca-table-scroll">
                <table class="sca-table playlog-history-table" style="min-width:1080px;">
                    <thead>
                        <tr>
                            <th>Artist</th>
                            <th>Title</th>
                            <th>Side played</th>
                            <th>Date played</th>
                            <th>Turntable</th>
                            <th>Tonearm</th>
                            <th>Cartridge</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($playLogs as $playLog)
                            <tr>
                                <td>{{ $playLog->album?->artist?->name ?? '—' }}</td>
                                <td>
                                    <div class="sca-row-title">{{ $playLog->album?->title ?? 'Unknown Album' }}</div>
                                </td>
                                <td>{{ $playLog->side_number ? 'Side ' . $playLog->side_number : '—' }}</td>
                                <td>{{ optional($playLog->played_at)->format('Y-m-d H:i') ?? '—' }}</td>
                                <td>
                                    @php
                                        $turntableName = trim(collect([
                                            $playLog->turntable?->manufacturer,
                                            $playLog->turntable?->model,
                                            $playLog->turntable?->name,
                                        ])->filter()->join(' • '));
                                    @endphp
                                    {{ $turntableName !== '' ? $turntableName : '—' }}
                                </td>
                                <td>{{ $playLog->tonearm?->name ?? '—' }}</td>
                                <td>
                                    <div class="sca-row-title">{{ $playLog->cartridge?->name ?? '—' }}</div>
                                    @if($playLog->cartridge?->cartridge_type)
                                        <div class="sca-row-meta">{{ $playLog->cartridge->cartridge_type }}</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="sca-muted" style="padding:28px 16px; text-align:center;">
                                    No play history has been recorded yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        @if($view === 'all' && method_exists($playLogs, 'links'))
            <div>
                {{ $playLogs->links() }}
            </div>
        @endif
    </div>
</div>

<style>
.playlog-history-toolbar {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:18px;
    align-items:center;
}

.playlog-history-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.playlog-history-table th,
.playlog-history-table td {
    white-space:nowrap;
}

.playlog-history-table td:nth-child(2) {
    white-space:normal;
    min-width:220px;
}

@media (max-width: 860px) {
    .playlog-history-toolbar {
        grid-template-columns:1fr;
    }

    .playlog-history-actions {
        justify-content:flex-start;
    }
}
</style>
@endsection