@extends('layouts.app-layout')

@section('title','Postulaciones a programas')

@section('content')
    <div class="container pt-2 pb-4">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route(isset($isFuncionario) && $isFuncionario ? 'funcionario.dashboard' : 'contacto.dashboard') }}"
                   class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                   style="width:36px;height:36px;"
                   title="Volver">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <div>
                    <p class="text-muted small mb-1 text-uppercase" style="letter-spacing:0.08em;">Panel de
                        programas</p>
                    <h1 class="h4 fw-bold mb-3">Postulaciones a programas</h1>
                </div>
            </div>
            <div class="d-flex flex-column align-items-end gap-1">
                @if(!empty($isFuncionario))
                    <a href="{{ route('programas.create') }}"
                       class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center text-white"
                       style="width:36px;height:36px;background:#0d6efd;border-color:#0d6efd;">
                        <i class="bi bi-plus-lg"></i>
                    </a>
                @endif
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form method="GET" action="{{ route('programas.index') }}" class="d-flex flex-column gap-3 mb-4">
            <div class="row justify-content-center g-2">
                <div class="col-12 col-lg-8 col-xl-7">
                    <div class="input-group rounded-pill overflow-hidden border bg-white shadow-sm"
                         style="border-color:rgba(13,110,253,.35)!important;box-shadow:0 .35rem 1rem rgba(13,110,253,.14)!important;">
                        <input
                            type="search"
                            name="q"
                            value="{{ $q ?? '' }}"
                            class="form-control border-0 ps-4"
                            placeholder="Buscar por nombre o descripción del programa"
                            autocomplete="off"
                            aria-label="Buscar programas"
                        >
                        <span class="input-group-text bg-white border-0 px-3">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                    </div>
                </div>
            </div>
        </form>

        <div class="row g-3">
            @forelse ($programas as $programa)
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden position-relative">
                        <div class="card-body p-4 d-flex flex-column">
                            <a href="{{ route('programas.show', $programa) }}"
                               class="stretched-link"
                               aria-label="Ver programa"></a>

                            @php
                                $estado = $programa->estado === \App\Enums\ProgramaEstadoEnum::CERRADO
                                    ? ['label' => 'Cerrado', 'class' => 'secondary']
                                    : ['label' => 'Abierto', 'class' => 'success'];
                                $inicio = $programa->fecha_inicio_postulacion;
                                $cierre = $programa->fecha_cierre_postulacion;
                            @endphp

                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3 me-2">
                                    <div class="min-w-0">
                                        <h5 class="mb-0 fw-semibold"
                                            title="{{ $programa->nombre }}">{{ $programa->nombre }}</h5>
                                    </div>
                                </div>

                                @if(!empty($isFuncionario))
                                    <span class="badge bg-{{ $estado['class'] }} fw-normal px-3 py-2">
                                        {{ $estado['label'] }}
                                    </span>
                                @endif
                            </div>

                            <p class="text-muted mb-3">
                                {{ $programa->breve_descripcion }}
                            </p>

                            <div class="mt-auto">
                                <div class="small text-muted mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            <i class="bi bi-calendar3 me-1 opacity-75"></i>
                                            Inicio:
                                            {{ $inicio ? $inicio->format('d/m/Y') : '—' }}
                                        </div>
                                        <div>
                                            <i class="bi bi-calendar-check me-1 opacity-75"></i>
                                            Cierre:
                                            {{ $cierre ? $cierre->format('d/m/Y') : '—' }}
                                        </div>
                                    </div>
                                </div>

                                <a href="{{ route('programas.show', $programa) }}"
                                   class="btn btn-primary btn-sm rounded-pill px-3 align-self-start position-relative z-1">
                                    Ver detalle
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body p-4 text-center text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            @if(!empty($isFuncionario))
                                No existen programas cargados.
                            @else
                                No existen programas abiertos en este momento.
                            @endif
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
        @if($programas instanceof \Illuminate\Pagination\LengthAwarePaginator && $programas->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="small text-muted">
                    Mostrando {{ $programas->firstItem() }}–{{ $programas->lastItem() }} de {{ $programas->total() }}
                    resultados
                </div>
                {{ $programas->withQueryString()->links('pagination::simple-bootstrap-5') }}
            </div>
        @endif
    </div>
@endsection