@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, relaxed status and last restoration.
                    </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-filter-card">
            <div>
                <h2 class="sca-section-title">Filters</h2>
                <div class="sca-section-copy">
                    Filter playback history by title, turntable, or relaxed status.@if($view === 'all') Total logged plays: {{ $totalPlayCount }}.@endif
                </div>
            </div>

            <form method="GET" action="{{ route('play-logs.index') }}" class="playlog-filter-form">
                <label>
                    <span class="sca-field-label">History</span>
                    <select name="view">
                        <option value="recent" @selected($view === 'recent')>Last 20 records</option>
                        <option value="all" @selected($view === 'all')>All records</option>
                    </select>
                </label>

                <label>
                    <span class="sca-field-label">Title</span>
                    <input type="text" name="title" value="{{ $filters['title'] ?? '' }}" placeholder="Search album title">
                </label>

                <label>
                    <span class="sca-field-label">Turntable</span>
                    <select name="turntable_id">
                        <option value="">All turntables</option>
                        @foreach($turntables as $turntable)
                            @php
                                $turntableLabel = trim(collect([$turntable->manufacturer, $turntable->model])->filter()->join(' • '));
                            @endphp
                            <option value="{{ $turntable->id }}" @selected((string) ($filters['turntable_id'] ?? '') === (string) $turntable->id)>
                                {{ $turntableLabel !== '' ? $turntableLabel : $turntable->name }}
                            </option>
                        @endforeach
                    </select>
                </label>

                <label>
                    <span class="sca-field-label">Relaxed</span>
                    <select name="relaxed">
                        <option value="">All</option>
                        <option value="yes" @selected(($filters['relaxed'] ?? '') === 'yes')>Yes</option>
                        <option value="no" @selected(($filters['relaxed'] ?? '') === 'no')>No</option>
                    </select>
                </label>

                <div class="playlog-filter-actions">
                    <button type="submit" class="sca-btn sca-btn-primary">Apply filters</button>
                    <a href="{{ route('play-logs.index') }}" class="sca-btn">Reset</a>
                </div>
            </form>
        </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:980px;">
                    <thead>
                        <tr>
                            <th>Artist</th>
                            <th>Title</th>
                            <th>Side played</th>
                            <th>Date played</th>
                            <th>Turntable</th>
                            <th>Relaxed</th>
                            <th>Last Restored</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') ?? '—' }}</td>
                                <td>
                                    @php
                                        $turntableName = trim(collect([
                                            $playLog->turntable?->manufacturer,
                                            $playLog->turntable?->model,
                                        ])->filter()->join(' • '));

                                        $lastRestoredDate = optional(
                                            $playLog->album?->treatments
                                                ?->filter(fn ($treatment) => strcasecmp((string) $treatment->treatment_type, 'Record Restore') === 0)
                                                ->sortByDesc('treated_on')
                                                ->first()
                                                ?->treated_on
                                        )->format('Y-m-d');
                                    @endphp
                                    {{ $turntableName !== '' ? $turntableName : '—' }}
                                </td>
                                <td>{{ $playLog->album?->relaxed_date ? 'Yes' : 'No' }}</td>
                                <td>{{ $lastRestoredDate ?: '—' }}</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-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;
    }
}
.playlog-filter-card {
    display:grid;
    gap:16px;
}

.playlog-filter-form {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr)) auto;
    gap:14px;
    align-items:end;
}

.playlog-filter-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    align-items:center;
    white-space:nowrap;
}

@media (max-width: 980px) {
    .playlog-filter-form {
        grid-template-columns:1fr;
    }

    .playlog-filter-actions {
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}

</style>
@endsection