@extends('layouts.app') {{-- Ajusta si usas otro layout --}}

@section('title', 'Mi Planner de Matrimonio')

@section('content')
@php
    // ✅ AJUSTA ESTA LÍNEA a tu lógica real de pago:
    // Ejemplo 1: columna en users -> planner_paid (boolean)
    $plannerPaid = (bool) (auth()->user()->planner_paid ?? false);

    // Ejemplo 2 (si tienes relación):
    // $plannerPaid = auth()->user()->payments()->where('status','paid')->exists();
@endphp

<div class="container py-4">

    @if(session('success'))
        <div class="alert alert-success mb-3">
            {{ session('success') }}
        </div>
    @endif

    {{-- Aviso si no ha pagado --}}
    @unless($plannerPaid)
        <div class="alert alert-warning mb-3">
            <strong>Tu planner está bloqueado.</strong> Realiza el pago para desbloquear checklist, presupuesto, invitados, proveedores, timeline y exportación a PDF.
        </div>
    @endunless

    {{-- Título + botones de acción --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Mi Planner de Matrimonio</h1>
            <p class="text-muted mb-0">
                Hola {{ auth()->user()->name }}, este es el resumen general de tu matrimonio.
            </p>
        </div>

        <div class="d-flex flex-wrap gap-2 justify-content-end">

            @if($plannerPaid)
                <a href="{{ route('planner.tareas.index') }}" class="btn btn-outline-primary">
                    Ver checklist
                </a>
                <a href="{{ route('planner.presupuesto.index') }}" class="btn btn-outline-primary">
                    Presupuesto
                </a>
                <a href="{{ route('planner.invitados.index') }}" class="btn btn-outline-primary">
                    Invitados
                </a>
                <a href="{{ route('planner.proveedores.index') }}" class="btn btn-outline-primary">
                    Proveedores
                </a>
                <a href="{{ route('planner.timeline.index') }}" class="btn btn-outline-primary">
                    Timeline día D
                </a>
                <a href="{{ route('planner.matrimonio.edit') }}" class="btn btn-outline-secondary">
                    Editar datos
                </a>
                <a href="{{ route('planner.export.pdf') }}" class="btn btn-primary">
                    Descargar planner PDF
                </a>
            @else
                {{-- ✅ SOLO CTA --}}
                <a href="{{ route('planner.checkout') }}" class="btn btn-primary">
                    Desbloquear planner (pagar)
                </a>

                {{-- Opcional: dejar editar datos gratis --}}
                <a href="{{ route('planner.matrimonio.edit') }}" class="btn btn-outline-secondary">
                    Completar datos (gratis)
                </a>
            @endif

        </div>
    </div>

    <div class="row g-3">

        {{-- Card: Información general --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Información general</h5>

                    {{-- Si quieres que esta card sea visible incluso sin pagar, déjalo tal cual --}}
                    <p class="mb-1">
                        <strong>Pareja:</strong>
                        {{ $matrimonio->nombre_pareja ?? 'Sin nombre aún' }}
                    </p>
                    <p class="mb-1">
                        <strong>Fecha:</strong>
                        {{ $matrimonio->fecha_matrimonio?->format('d/m/Y') ?? 'Por definir' }}
                    </p>
                    <p class="mb-1">
                        <strong>Ciudad:</strong>
                        {{ $matrimonio->ciudad ?? 'Por definir' }}
                    </p>
                    <p class="mb-1">
                        <strong>Lugar:</strong>
                        {{ $matrimonio->lugar ?? 'Por definir' }}
                    </p>
                    <p class="mb-1">
                        <strong>Estilo:</strong>
                        {{ $matrimonio->estilo ?? 'Por definir' }}
                    </p>
                    <p class="mb-1">
                        <strong>Invitados estimados:</strong>
                        {{ $matrimonio->invitados_estimados ?? '—' }}
                    </p>
                    <p class="mb-0">
                        <strong>Estado:</strong>
                        @php
                            $estados = [
                                'planificando' => 'Planificando',
                                'pausado' => 'Pausado',
                                'realizado' => 'Realizado',
                            ];
                        @endphp
                        {{ $estados[$matrimonio->estado] ?? 'Planificando' }}
                    </p>

                    {{--
                    // ✅ OPCIONAL: si prefieres ocultar datos hasta que paguen:
                    @unless($plannerPaid)
                        <div class="mt-3 alert alert-light small mb-0">
                            Desbloquea el planner para ver y editar todos los detalles.
                        </div>
                    @endunless
                    --}}
                </div>
            </div>
        </div>

        {{-- Card: Presupuesto --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Presupuesto</h5>

                    @if($plannerPaid)
                        <p class="mb-1">
                            <strong>Total estimado (planner):</strong>
                            ${{ number_format($totalEstimado ?: ($matrimonio->presupuesto_total ?? 0), 0, ',', '.') }}
                        </p>
                        <p class="mb-1">
                            <strong>Costo real (suma categorías):</strong>
                            ${{ number_format($totalReal, 0, ',', '.') }}
                        </p>
                        <p class="mb-1">
                            <strong>Pagado:</strong>
                            ${{ number_format($totalPagado, 0, ',', '.') }}
                        </p>

                        @if($totalEstimado > 0 && $totalReal > 0)
                            <div class="mt-2 mb-1">
                                <small class="text-muted d-block mb-1">
                                    Porcentaje del presupuesto utilizado
                                </small>
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 me-2">
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar"
                                                 role="progressbar"
                                                 style="width: {{ $porcentajePresupuestoUsado }}%;"
                                                 aria-valuenow="{{ $porcentajePresupuestoUsado }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                            </div>
                                        </div>
                                    </div>
                                    <span class="fw-semibold small">
                                        {{ $porcentajePresupuestoUsado }}%
                                    </span>
                                </div>
                            </div>
                        @endif

                        <div class="mt-2">
                            <a href="{{ route('planner.presupuesto.index') }}" class="small">
                                Ver y editar presupuesto →
                            </a>
                        </div>
                    @else
                        <p class="text-muted mb-2">
                            Desbloquea el planner para administrar tu presupuesto.
                        </p>
                        <a href="{{ route('planner.checkout') }}" class="btn btn-sm btn-primary">
                            Desbloquear presupuesto
                        </a>
                    @endif

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

        {{-- Card: Progreso del checklist --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Progreso del checklist</h5>

                    @if($plannerPaid)
                        <div class="mb-2">
                            <small class="text-muted d-block mb-1">
                                Progreso general
                            </small>
                            <div class="d-flex align-items-center mb-1">
                                <div class="flex-grow-1 me-2">
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar"
                                             role="progressbar"
                                             style="width: {{ $progreso }}%;"
                                             aria-valuenow="{{ $progreso }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>
                                <span class="fw-semibold small">
                                    {{ $progreso }}%
                                </span>
                            </div>
                            <small class="text-muted">
                                {{ $completedTasks }} de {{ $totalTasks }} tareas completadas.
                            </small>
                        </div>

                        @if($proximasTareas->count() > 0)
                            <hr>
                            <small class="text-muted d-block mb-2">
                                Próximas tareas pendientes:
                            </small>
                            <ul class="list-unstyled mb-0 small">
                                @foreach($proximasTareas as $tarea)
                                    <li class="mb-1">
                                        <span class="fw-semibold">{{ $tarea->titulo }}</span>
                                        @if($tarea->meses_antes !== null)
                                            <span class="text-muted">
                                                —
                                                @if($tarea->meses_antes === 0)
                                                    semana del matrimonio
                                                @elseif($tarea->meses_antes === 1)
                                                    1 mes antes
                                                @else
                                                    {{ $tarea->meses_antes }} meses antes
                                                @endif
                                            </span>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                            <div class="mt-2">
                                <a href="{{ route('planner.tareas.index') }}" class="small">
                                    Ir al checklist completo →
                                </a>
                            </div>
                        @else
                            <p class="text-muted small mb-0 mt-2">
                                ✨ ¡Felicidades! No tienes tareas pendientes en tu checklist.
                            </p>
                        @endif
                    @else
                        <p class="text-muted mb-2">
                            Desbloquea el planner para acceder al checklist y tu progreso.
                        </p>
                        <a href="{{ route('planner.checkout') }}" class="btn btn-sm btn-primary">
                            Desbloquear checklist
                        </a>
                    @endif

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

    </div>{{-- row --}}

</div>
@endsection