@extends('layouts.admin.theme')
@section('title', env('APP_NAME') . ' :: ' . __('Linhas do Tempo'))
@push('scripts')
    <link rel="stylesheet" href="{{ asset('pmar/css/linhas-do-tempo.css') }}">
@endpush
@section('content')

<div class="card shadow-sm border-0">

    @php $headLine = "<i class='fa-solid fa-timeline'></i> " . e(__('Linhas do Tempo')); @endphp

    @include('components.buttons._headLineButtonsBackAdd', [
        'headLine' => $headLine,
        'routeBack' => 'admin.contaAngra.index',
        'routeBackParams' => [],
        'nameBack' => __('Voltar'),
        'routeAdd' => 'admin.contaAngra.linhasDoTempo.create',
        'routeAddParams' => [],
        'nameAdd' => __('Nova linha do tempo'),
        'permission' => 'GERENCIADOR_DE_LINHAS_DO_TEMPO',
    ])

    <div class="card-body">
        @include('errors.messageFlash')

        <form method="get" action="{{ route('admin.contaAngra.linhasDoTempo.index') }}" class="row g-2 mb-3" role="search">
            <div class="col-md-3">
                <label class="form-label visually-hidden" for="flt_q">{{ __('Buscar por nome') }}</label>
                <input type="search" name="q" id="flt_q" class="form-control" value="{{ request('q') }}" placeholder="{{ __('Buscar por nome') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label visually-hidden" for="flt_status">{{ __('Status') }}</label>
                <select name="status" id="flt_status" class="form-select">
                    <option value="">{{ __('Todos os status') }}</option>
                    <option value="active" @selected(request('status') === 'active')>{{ __('Ativa') }}</option>
                    <option value="archived" @selected(request('status') === 'archived')>{{ __('Arquivada') }}</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label visually-hidden" for="flt_from">{{ __('Data início (de)') }}</label>
                <input type="date" name="date_from" id="flt_from" class="form-control" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label visually-hidden" for="flt_to">{{ __('Data início (até)') }}</label>
                <input type="date" name="date_to" id="flt_to" class="form-control" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label visually-hidden" for="flt_tag">{{ __('Tag') }}</label>
                <input type="text" name="tag" id="flt_tag" class="form-control" value="{{ request('tag') }}" placeholder="{{ __('Tag') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label visually-hidden" for="flt_sort">{{ __('Ordenar') }}</label>
                <select name="sort" id="flt_sort" class="form-select">
                    <option value="event_date" @selected(request('sort', 'event_date') === 'event_date')>{{ __('Data de acontecimento (marco zero)') }}</option>
                    <option value="created_at" @selected(request('sort') === 'created_at')>{{ __('Data de registro') }}</option>
                    <option value="updated_at" @selected(request('sort') === 'updated_at')>{{ __('Última atualização') }}</option>
                    <option value="name" @selected(request('sort') === 'name')>{{ __('Nome') }}</option>
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label visually-hidden" for="flt_dir">{{ __('Direção') }}</label>
                <select name="dir" id="flt_dir" class="form-select">
                    <option value="desc" @selected(request('dir', 'desc') === 'desc')>{{ __('Desc') }}</option>
                    <option value="asc" @selected(request('dir') === 'asc')>{{ __('Asc') }}</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end gap-2">
                <input type="hidden" name="view" value="{{ $viewMode }}">
                <button type="submit" class="btn btn-primary">{{ __('Filtrar') }}</button>
                <a class="btn btn-outline-secondary" href="{{ route('admin.contaAngra.linhasDoTempo.index') }}">{{ __('Limpar') }}</a>
            </div>
        </form>

        <ul class="nav nav-pills mb-3" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link @if($viewMode === 'timeline') active @endif" href="{{ route('admin.contaAngra.linhasDoTempo.index', array_merge(request()->except('view'), ['view' => 'timeline'])) }}">{{ __('Visão em linha') }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link @if($viewMode === 'cards') active @endif" href="{{ route('admin.contaAngra.linhasDoTempo.index', array_merge(request()->except('view'), ['view' => 'cards'])) }}">{{ __('Visão em cards') }}</a>
            </li>
        </ul>

        @if($viewMode === 'timeline')
            <div class="lt-dashboard-rail border rounded p-3 mb-3" role="region" aria-label="{{ __('Linha do tempo das linhas cadastradas') }}">
                <div class="d-flex flex-nowrap gap-3 overflow-auto lt-horizontal-scroll pb-2">
                    @forelse($timelines as $t)
                        <div class="card flex-shrink-0 lt-dashboard-card">
                            <div class="card-body">
                                <h3 class="h6 card-title">{{ $t->name }}</h3>
                                <p class="small text-muted mb-1">{{ __('Marco zero') }}: {{ $t->event_date?->format('d/m/Y') }}</p>
                                <p class="small mb-2">{{ __('Pontos') }}: {{ (int) ($t->points_count ?? 0) }}</p>
                                <p class="small text-muted mb-2">{{ __('Último ponto') }}: {{ $t->last_point_date ? \Carbon\Carbon::parse($t->last_point_date)->format('d/m/Y') : '—' }}</p>
                                <div class="d-flex flex-wrap gap-1">
                                    <a class="btn btn-sm btn-primary" href="{{ route('admin.contaAngra.linhasDoTempo.show', $t) }}">{{ __('Abrir') }}</a>
                                    @if (auth()->user()->getPermissaoDetalhes('GERENCIADOR_DE_LINHAS_DO_TEMPO')['editar'])
                                        <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.contaAngra.linhasDoTempo.edit', $t) }}">{{ __('Editar') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="mb-0">{{ __('Nenhuma linha do tempo encontrada.') }}</p>
                    @endforelse
                </div>
            </div>
        @endif

        @if($viewMode === 'cards')
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                @forelse($timelines as $t)
                    <div class="col">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body d-flex flex-column">
                                <h3 class="h5">{{ $t->name }}</h3>
                                <p class="small text-muted">{{ __('Marco zero') }}: {{ $t->event_date?->format('d/m/Y') }}</p>
                                <p class="small">{{ __('Pontos') }}: {{ (int) ($t->points_count ?? 0) }}</p>
                                <div class="mt-auto d-flex gap-2">
                                    <a class="btn btn-sm btn-primary" href="{{ route('admin.contaAngra.linhasDoTempo.show', $t) }}">{{ __('Abrir') }}</a>
                                    @if (auth()->user()->getPermissaoDetalhes('GERENCIADOR_DE_LINHAS_DO_TEMPO')['editar'])
                                        <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.contaAngra.linhasDoTempo.edit', $t) }}">{{ __('Editar') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>{{ __('Nenhuma linha do tempo encontrada.') }}</p>
                @endforelse
            </div>
        @endif

        <div class="d-flex justify-content-center mt-3">
            {{ $timelines->links() }}
        </div>
    </div>
</div>
@endsection