@extends('layouts.app-layout')

@php
    // Determinar URL de retorno según el perfil del usuario
    $backUrl = auth()->user()?->contacto ? route('contacto.dashboard') : route('reuniones.index');

    // Verificar si ya pasó la fecha y hora de inicio de la reunión
    $fechaHoraInicio = \Carbon\Carbon::parse($reunion->fecha_reunion->format('Y-m-d') . ' ' . $reunion->hora_inicio);
    $reunionYaInicio = now()->greaterThanOrEqualTo($fechaHoraInicio);
@endphp

@section('title','Detalle de reunion')

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

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="fw-normal mb-0">Detalle de la reunión</h2>

            <div class="d-flex gap-2">

                @if(auth()->user()->funcionario)
                    @if($reunionYaInicio && $reunion->estado !== 'Realizada')
                        <a href="{{ route('reuniones.edit', $reunion) }}?iniciar=1"
                           class="btn btn-success btn-sm">
                            <i class="bi bi-play-circle"></i> Iniciar reunión
                        </a>
                    @endif

                    <form action="{{ route('reuniones.cancel', $reunion) }}"
                          method="POST"
                          class="d-inline"
                          onsubmit="return confirm('¿Confirmas cancelar esta reunión?');">
                        @csrf
                        @method('PUT')

                        <button type="submit"
                                class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-x-lg"></i> Cancelar
                        </button>
                    </form>

                    <a href="{{ route('reuniones.edit', $reunion) }}"
                       class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-pencil"></i> Editar
                    </a>
                @endif

                <a href="{{ $backUrl }}"
                   class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </div>
        </div>

        <div class="row">
            {{-- Columna Principal: Detalles de la Reunión --}}
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-header bg-transparent border-0 pt-4 px-4">
                        <h5 class="mb-0 text-primary">Información General</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <label class="text-muted small mb-0 me-2">Tipo de reunión:</label>
                                    <span
                                        class="badge bg-light text-dark border px-3 py-2 text-capitalize fw-normal text-start">
                                        <i class="bi bi-tag me-1 text-primary"></i>
                                        {{ $reunion->tipo_reunion }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <label class="text-muted small mb-0 me-2">Estado:</label>
                                    @php
                                        $estadoClass = match($reunion->estado) {
                                            'Agendada' => 'bg-info',
                                            'Realizada' => 'bg-success',
                                            'Cancelada' => 'bg-danger',
                                            'Reprogramada' => 'bg-warning text-dark',
                                            default => 'bg-secondary'
                                        };
                                    @endphp
                                    <span class="badge {{ $estadoClass }} px-3 py-2 fw-normal text-start">
                                        <i class="bi bi-info-circle me-1"></i>
                                        {{ $reunion->estado }}
                                    </span>
                                </div>
                            </div>

                            <div class="col-12">
                                <hr class="opacity-10">
                            </div>

                            <div class="col-md-4">
                                <small class="text-muted d-block">Fecha</small>
                                <div class="fw-semibold">
                                    <i class="bi bi-calendar3 me-1 text-primary"></i>
                                    {{ \Carbon\Carbon::parse($reunion->fecha_reunion)->format('d/m/Y') }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <small class="text-muted d-block">Horario</small>
                                <div class="fw-semibold">
                                    <i class="bi bi-clock me-1 text-primary"></i>
                                    {{ \Carbon\Carbon::parse($reunion->hora_inicio)->format('H:i') }} -
                                    {{ \Carbon\Carbon::parse($reunion->hora_fin)->format('H:i') }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <small class="text-muted d-block">Duración</small>
                                <div class="fw-semibold">
                                    <i class="bi bi-hourglass-split me-1 text-primary"></i>
                                    {{ $reunion->duracion }} min
                                </div>
                            </div>

                            <div class="col-md-4">
                                <small class="text-muted d-block">Modalidad</small>
                                <div class="fw-semibold text-capitalize">
                                    <i class="bi bi-person-video me-1 text-primary"></i>
                                    {{ $reunion->modalidad }}
                                </div>
                            </div>
                            <div class="col-md-8">
                                <small class="text-muted d-block">Lugar / Link</small>
                                <div class="fw-semibold">
                                    <i class="bi bi-geo-alt me-1 text-primary"></i>
                                    {{ $reunion->lugar ?? '—' }}
                                </div>
                            </div>

                            <div class="col-12 mt-4">
                                <small class="text-muted d-block mb-1">Temáticas</small>
                                <div class="p-3 bg-light rounded-3">
                                    @if($reunion->tematicas && count($reunion->tematicas) > 0)
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach($reunion->tematicas as $tematica)
                                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill">
                                                    {{ $tematica }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @else
                                        Sin temáticas definidas
                                    @endif
                                </div>
                            </div>

                            <div class="col-12">
                                <small class="text-muted d-block mb-1">Observaciones</small>
                                <div class="p-3 bg-light rounded-3" style="min-height: 80px;">
                                    {{ $reunion->observaciones ?: 'Sin observaciones' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                {{-- CONTACTO --}}
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h6 class="text-primary mb-3">Contacto Principal</h6>
                        <div class="d-flex align-items-center">
                            <div>
                                <div
                                    class="fw-bold text-dark">{{ $reunion->contacto->user->nombre }} {{ $reunion->contacto->user->apellido }}</div>
                                <div class="small text-muted">
                                    <i class="bi bi-envelope me-1"></i>{{ $reunion->contacto->user->email }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- UNIDADES --}}
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h6 class="text-primary mb-3">Unidades de Atención</h6>
                        <div class="list-group list-group-flush">
                            @forelse($reunion->unidadesAtencion as $unidad)
                                <div class="list-group-item px-0 border-0 d-flex align-items-center">
                                    <i class="bi bi-building me-2 text-muted"></i>
                                    {{ $unidad->nombre_comercial }}
                                </div>
                            @empty
                                <div class="text-muted small">Sin unidades asignadas</div>
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- FUNCIONARIOS --}}
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h6 class="text-primary mb-3">Funcionarios Asignados</h6>
                        <div class="list-group list-group-flush">
                            @forelse($reunion->funcionarios as $funcionario)
                                <div class="list-group-item px-0 border-0 d-flex align-items-center">
                                    <i class="bi bi-person-badge me-2 text-muted"></i>
                                    {{ $funcionario->user->nombre }} {{ $funcionario->user->apellido }}
                                </div>
                            @empty
                                <div class="text-muted small">Sin funcionarios asignados</div>
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- ACCIONES VINCULADAS --}}
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h6 class="text-primary mb-3">Acciones Vinculadas</h6>
                        <div class="list-group list-group-flush">
                            @forelse($reunion->acciones as $accion)
                                <div class="list-group-item px-0 border-0 d-flex align-items-start gap-2">
                                    <i class="bi bi-list-task mt-1 text-muted flex-shrink-0"></i>
                                    <span>{{ $accion->detalle_accion }}</span>
                                </div>
                            @empty
                                <div class="text-muted small">Sin acciones vinculadas</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection