@extends('layouts.app')

@section('title', 'Watch History | TAKEONE')

@section('extra_styles')
<style>
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.history-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.history-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}
.yt-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .yt-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .yt-video-grid { grid-template-columns: 1fr; } }
@media (min-width: 1500px) { .yt-video-grid { grid-template-columns: repeat(4, 1fr); } }
</style>
@endsection

@section('content')
<div class="history-header">
    <h1 class="history-title">
        <i class="bi bi-clock-history" style="color:var(--brand-red);font-size:20px;"></i>
        Watch History
        @if($videos->isNotEmpty())
            <span class="history-count">{{ $videos->count() }} {{ Str::plural('video', $videos->count()) }}</span>
        @endif
    </h1>

    @if($videos->isNotEmpty())
    <form method="POST" action="{{ route('history.clear') }}"
          onsubmit="return showConfirm('Clear your entire watch history? This cannot be undone.', function(){ document.getElementById('clearHistoryForm').submit(); }, 'Clear'), false"
          id="clearHistoryForm">
        @csrf
        @method('DELETE')
        <button type="submit" class="action-btn action-btn-danger">
            <i class="bi bi-trash3"></i>
            <span>Clear History</span>
        </button>
    </form>
    @endif
</div>

@if($videos->isEmpty())
    <div style="text-align:center;padding:80px 20px;color:var(--text-secondary);">
        <i class="bi bi-clock-history" style="font-size:64px;display:block;margin-bottom:16px;opacity:.35;"></i>
        <h2 style="font-size:20px;font-weight:600;margin:0 0 8px;">No watch history</h2>
        <p style="margin:0 0 20px;">Videos you watch will appear here.</p>
        <a href="{{ route('videos.index') }}" class="action-btn action-btn-primary">
            <i class="bi bi-play-btn-fill"></i> <span>Browse Videos</span>
        </a>
    </div>
@else
    <div class="yt-video-grid">
        @foreach($videos as $video)
            @include('components.video-card', ['video' => $video])
        @endforeach
    </div>
@endif
@endsection