@extends('layouts.app-layout')

@section('title', 'Postulaciones')

@section('content')
    <div class="container py-4">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0">Listado de Postulaciones</h3>
            @php
                $dashboardUrl = auth()->user()?->funcionario ? route('funcionario.dashboard') : route('contacto.dashboard');
            @endphp
            <a href="{{ $dashboardUrl }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Volver
            </a>
        </div>

        {{-- FILTROS --}}
        <div class="card mb-4 shadow-sm rounded-3 border-0">
            <div class="card-header bg-light border-0 rounded-top-3">
                <h6 class="mb-0">
                    <i class="bi bi-funnel"></i> Filtros
                </h6>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('postulaciones.index') }}">
                    <div class="row g-3 align-items-end">

                        {{-- Programa --}}
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Programa</label>
                            <select name="programa_id" class="form-select form-select-sm">
                                <option value="">Todos</option>
                                @foreach($programas as $programa)
                                    <option value="{{ $programa->id }}"
                                        {{ $programaId == $programa->id ? 'selected' : '' }}>
                                        {{ $programa->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Estado --}}
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Estado</label>
                            <select name="estado" class="form-select form-select-sm">
                                <option value="">Todos</option>
                                @foreach($estados as $estadoEnum)
                                    <option value="{{ $estadoEnum->value }}" {{ $estado == $estadoEnum->value ? 'selected' : '' }}>
                                        {{ $estadoEnum->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Botones --}}
                        <div class="col-md-5">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-search"></i> Filtrar
                            </button>

                            <a href="{{ route('postulaciones.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-clockwise"></i> Limpiar
                            </a>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        {{-- RESULTADOS --}}
        @forelse($postulaciones as $postulacion)
            <div class="card mb-3 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center">

                    <div>
                        <h5 class="mb-1">
                            Postulación #{{ $postulacion->id }}
                        </h5>

                        <p class="mb-1">
                            <strong>Programa:</strong>
                            {{ $postulacion->programa?->nombre ?? 'No disponible' }}
                        </p>

                        <p class="mb-1">
                            <strong>Postulante:</strong>
                            {{ $postulacion->user?->nombre }} {{ $postulacion->user?->apellido }}
                        </p>

                        <span class="badge
                        @if($postulacion->estado->value === 'Aprobada') bg-success
                        @elseif($postulacion->estado->value === 'No aprobada') bg-danger
                        @else bg-warning text-dark
                        @endif">
                        {{ $postulacion->estado->label() }}
                    </span>
                    </div>

                    <a href="{{ route('postulaciones.show', $postulacion) }}"
                       class="btn btn-outline-primary btn-sm">
                        Ver detalle
                    </a>

                </div>
            </div>
        @empty
            <div class="alert alert-info">
                No hay postulaciones con esos filtros.
            </div>
        @endforelse

        <div class="d-flex justify-content-center mt-4">
            {{ $postulaciones->links('pagination::bootstrap-5') }}

        </div>
    </div>
    <style>
        .pagination + div {
            display: none;
        }

        .pagination ~ div.small {
            display: none;
        }

        .small.text-muted {
            display: none;
        }
    </style>


@endsection