@extends('layouts.app')
@section('title')
Timeline Penulis
@endsection
@section('content')
<div class="subnavbar pt-3">
    <form method="POST" action="{{ route('guest.queue') }}" enctype="multipart/form-data">
        @csrf
        <div class="input-group mb-3">
            <input style="font-size: 1.5rem; padding: 1rem;" class="form-control shadow-lg bg-white rounded" type="text" name="title" placeholder="Judul Buku">
            <div class="input-group-append" style="font-size: 1.5rem;">
                <button class="btn btn-info" type="submit"><i class="fa fa-search"></i> Cari</button>
            </div>
        </div>
    </form>
</div>

<div class="pt-3 pb-1 d-flex align-items-center justify-content-between">
    <h1 class="mb-0">Timeline Penulis</h1>
    <small class="text-muted">{{ $yearRange[0] }} – {{ $yearRange[1] }}</small>
</div>

<div class="timeline">
    @foreach ($years as $y)
        <div class="timeline-year" data-year="{{ $y['year'] }}">
            <div class="timeline-content">
                <div class="d-flex align-items-center mb-2">
                    <h3 class="mb-0 mr-3">
                        <a href="{{ route('guest.timeline.year', $y['year']) }}" class="text-dark">{{ $y['year'] }}</a>
                    </h3>
                    <button type="button" class="btn btn-sm btn-outline-info timeline-expand" data-year="{{ $y['year'] }}">
                        <i class="fa fa-search-plus"></i> Zoom
                    </button>
                    <span class="badge badge-info ml-2">{{ count($y['events']) }} event(s)</span>
                </div>

                @if ($y['living']->isNotEmpty())
                    <div class="author-labels">
                        @foreach ($y['living'] as $a)
                            @php
                                $birthYear = (int) $a->birth_date->year;
                                $deathYear = $a->death_date ? (int) $a->death_date->year : null;
                                $yearBornHere = $birthYear === $y['year'];
                                $yearDiedHere = $deathYear === $y['year'];
                                $alive = ! $a->death_date;
                            @endphp
                            <span class="author-label" title="{{ $a->name }} ({{ $birthYear }}{{ $deathYear ? '–' . $deathYear : '–Sekarang' }})">
                                @if ($yearBornHere)
                                    <i class="fa fa-star text-success" title="Lahir di tahun ini"></i>
                                @elseif ($yearDiedHere)
                                    <i class="fa fa-remove text-danger" title="Wafat di tahun ini"></i>
                                @elseif ($alive)
                                    <i class="fa fa-clock-o text-warning" title="Masih hidup di tahun ini"></i>
                                @else
                                    <i class="fa fa-user text-muted" title="Hidup melewati tahun ini"></i>
                                @endif
                                <a href="{{ route('guest.author', $a->slug) }}">{{ $a->name }}</a>
                                <small class="text-muted">{{ $birthYear }}{{ $deathYear ? '–' . $deathYear : '–Sekarang' }}</small>
                            </span>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted mb-0">Tidak ada penulis dengan peristiwa di tahun ini.</p>
                @endif

                <div class="timeline-year-detail" id="year-detail-{{ $y['year'] }}" style="display:none;"></div>
            </div>
        </div>
    @endforeach
</div>
@endsection

@section('styles')
<style>
    .timeline-year { margin-bottom: 1rem; }
    .timeline-year:last-child { margin-bottom: 0; }
    .author-labels { display: flex; flex-wrap: wrap; gap: 4px 6px; }
    .author-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        font-size: 0.85rem;
        line-height: 1.2;
        background: #f1f3f5;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        white-space: nowrap;
    }
    .author-label small { font-size: 0.7rem; }
    .author-label a { color: #212529; text-decoration: none; }
    .author-label a:hover { color: #17a2b8; }
    .month-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 6px;
    }
    .month-name {
        flex: 0 0 36px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        padding-top: 4px;
    }
</style>
@endsection

@section('scripts')
<script>
    $('.timeline-expand').on('click', function () {
        const year = $(this).data('year');
        const $detail = $('#year-detail-' + year);
        const $btn = $(this);

        if ($detail.is(':visible')) {
            $detail.slideUp();
            $btn.html('<i class="fa fa-search-plus"></i> Zoom');
            return;
        }

        if ($detail.data('loaded')) {
            $detail.slideDown();
            $btn.html('<i class="fa fa-search-minus"></i> Tutup');
            return;
        }

        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');

        $.get('{{ route('guest.timeline') }}', { year: year }, function (response) {
            $detail.html(response.html).slideDown();
            $detail.data('loaded', true);
            $btn.html('<i class="fa fa-search-minus"></i> Tutup').prop('disabled', false);
        }).fail(function () {
            $btn.html('<i class="fa fa-search-plus"></i> Zoom').prop('disabled', false);
        });
    });
</script>
@endsection