@extends('admin.layouts.app')

@section('titulo', 'Ticket de suscripción')
@section('subtitulo', $empresa->nombre)

@php $sim = $empresa->simbolo ?? 'S/'; @endphp

@section('contenido')
<div class="flex items-center justify-between mb-5 no-print">
    <a href="{{ route('admin.empresas.suscripcion', $empresa) }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        Volver a suscripción
    </a>
    <button onclick="window.print()" class="inline-flex items-center gap-2 rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-semibold px-4 py-2.5 text-sm shadow-lg transition">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2m-12 0v4h12v-4H6z"/></svg>
        Imprimir
    </button>
</div>

<div class="max-w-md mx-auto bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden" id="ticket">
    <div class="h-2" style="background: linear-gradient(90deg, {{ $empresa->color_primario ?: '#2f6bff' }}, {{ ($empresa->color_primario ?: '#2f6bff') }}99);"></div>
    <div class="p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="h-9 w-9 rounded-lg bg-brand-500 text-white flex items-center justify-center font-extrabold text-sm">SE</div>
                <div>
                    <p class="font-bold text-slate-800 leading-tight">Suite Educativa</p>
                    <p class="text-[11px] text-slate-400">Plataforma SaaS</p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-[11px] uppercase tracking-wider text-slate-400">Ticket</p>
                <p class="font-mono font-bold text-slate-700">SUS-{{ str_pad($suscripcion->id, 5, '0', STR_PAD_LEFT) }}</p>
            </div>
        </div>

        <div class="mt-5 pt-5 border-t border-dashed border-slate-200 text-sm space-y-2">
            <div class="flex justify-between"><span class="text-slate-400">Empresa</span><span class="font-medium text-slate-700 text-right">{{ $empresa->nombre }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">RUC / ID</span><span class="font-medium text-slate-700">{{ $empresa->ruc ?? '—' }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Plan</span><span class="font-medium text-slate-700">{{ $suscripcion->plan?->nombre ?? '—' }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Ciclo</span><span class="font-medium text-slate-700 capitalize">{{ $suscripcion->ciclo }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Emitido</span><span class="font-medium text-slate-700">{{ $suscripcion->fecha_inicio?->format('d/m/Y') }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Vigencia</span><span class="font-medium text-slate-700">{{ $suscripcion->fecha_inicio?->format('d/m/Y') }} → {{ $suscripcion->fecha_fin?->format('d/m/Y') }}</span></div>
        </div>

        <div class="mt-5 pt-5 border-t border-dashed border-slate-200">
            <div class="flex justify-between items-center">
                <span class="font-bold text-slate-800">Total pagado</span>
                <span class="text-2xl font-extrabold text-brand-600">{{ $sim }} {{ number_format($suscripcion->precio, 2) }}</span>
            </div>
            <div class="mt-2 flex justify-between text-sm">
                <span class="text-slate-400">Estado</span>
                <span class="text-xs font-medium px-2 py-1 rounded-lg capitalize {{ $suscripcion->estado === 'activa' ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500' }}">{{ $suscripcion->estado }}</span>
            </div>
        </div>

        <p class="mt-5 pt-4 border-t border-dashed border-slate-200 text-center text-[11px] text-slate-400">Gracias. Documento generado automáticamente por la plataforma.</p>
    </div>
</div>

@push('head')
<style>
    @media print {
        .no-print { display: none !important; }
        body { background: #fff !important; }
        aside, header { display: none !important; }
        main { padding: 0 !important; }
    }
</style>
@endpush
@endsection