@extends('admin.layouts.app')

@section('titulo', 'Suscripción de la empresa')
@section('subtitulo', 'Genera o renueva la suscripción y emite su ticket')

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

@section('contenido')
<div class="flex items-center justify-between mb-5">
    <p class="text-sm text-slate-500">Empresa <span class="font-semibold text-slate-700">{{ $empresa->nombre }}</span> · Vence actual: <span class="font-semibold text-slate-700">{{ $sub?->fecha_fin?->format('d/m/Y') ?? '—' }}</span></p>
    <a href="{{ route('admin.empresas.edit', $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 la empresa
    </a>
</div>

@if ($errors->any())
    <div class="mb-5 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600 max-w-2xl">
        <ul class="list-disc list-inside space-y-1">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    </div>
@endif

@php $in = 'w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100 transition'; @endphp

<div class="max-w-2xl">
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7">
        <h3 class="font-bold text-slate-800 mb-5">Nueva suscripción</h3>
        <form method="POST" action="{{ route('admin.empresas.suscripcion.store', $empresa) }}" class="space-y-4" id="formSub">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Plan <span class="text-red-500">*</span></label>
                <select name="plan_id" id="plan" required class="{{ $in }}">
                    @foreach ($planes as $plan)
                        <option value="{{ $plan->id }}"
                                data-mensual="{{ $plan->precio_mensual }}"
                                data-anual="{{ $plan->precio_anual }}"
                                @selected($empresa->plan_id == $plan->id)>
                            {{ $plan->nombre }} — {{ $sim }} {{ number_format($plan->precio_mensual, 2) }} / mensual
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Duración <span class="text-red-500">*</span></label>
                    <input type="number" name="duracion" id="duracion" value="1" min="1" max="120" required class="{{ $in }}">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Unidad <span class="text-red-500">*</span></label>
                    <select name="unidad" id="unidad" class="{{ $in }}">
                        <option value="meses">Meses</option>
                        <option value="anios">Años</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Descuento</label>
                    <input type="number" name="descuento" id="descuento" value="0" min="0" step="0.01" class="{{ $in }}">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Tipo de descuento</label>
                    <select name="tipo_descuento" id="tipoDescuento" class="{{ $in }}">
                        <option value="monto">Monto ({{ $sim }})</option>
                        <option value="porcentaje">Porcentaje (%)</option>
                    </select>
                </div>
            </div>

            {{-- Resumen calculado --}}
            <div class="rounded-xl bg-brand-50/60 border border-brand-100 p-4 space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-slate-500">Subtotal</span><span class="font-semibold text-slate-700" id="subtotal">{{ $sim }} 0.00</span></div>
                <div class="flex justify-between"><span class="text-slate-500">Descuento</span><span class="font-semibold text-slate-700" id="descLbl">- {{ $sim }} 0.00</span></div>
                <div class="flex justify-between pt-2 border-t border-brand-100 text-base"><span class="font-semibold text-slate-700">Total a pagar</span><span class="font-extrabold text-brand-600" id="total">{{ $sim }} 0.00</span></div>
                <div class="flex justify-between"><span class="text-slate-500">Vence el</span><span class="font-semibold text-brand-600" id="vence">—</span></div>
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Método (referencial)</label>
                    <select name="metodo" class="{{ $in }}">
                        <option value="ticket">Ticket / manual</option>
                        <option value="transferencia">Transferencia</option>
                        <option value="tarjeta">Tarjeta</option>
                        <option value="yape_plin">Yape / Plin</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Nota</label>
                    <input type="text" name="nota" placeholder="Referencia..." class="{{ $in }}">
                </div>
            </div>

            <p class="text-xs text-slate-400">El monto y la fecha de vencimiento se calculan automáticamente según el plan y la duración. Se registra la suscripción y se genera un <span class="font-medium text-slate-500">ticket</span>.</p>

            <div class="flex items-center justify-end gap-3 pt-2">
                <a href="{{ route('admin.empresas.edit', $empresa) }}" class="px-5 py-2.5 rounded-xl text-slate-600 font-medium hover:bg-slate-100 transition">Cancelar</a>
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold shadow-lg shadow-brand-500/30 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 2h12v20l-3-2-3 2-3-2-3 2V2z"/></svg>
                    Generar suscripción y ticket
                </button>
            </div>
        </form>
    </div>

    {{-- Historial --}}
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden mt-5">
        <div class="px-6 py-4 border-b border-slate-100"><h3 class="font-bold text-slate-800">Historial de suscripciones</h3></div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-slate-400 bg-slate-50/60">
                        <th class="px-6 py-3 font-semibold">Plan</th>
                        <th class="px-6 py-3 font-semibold">Compra</th>
                        <th class="px-6 py-3 font-semibold">Vigencia</th>
                        <th class="px-6 py-3 font-semibold text-center">Estado</th>
                        <th class="px-6 py-3 font-semibold text-right">Costo</th>
                        <th class="px-6 py-3 font-semibold text-right"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($historial as $h)
                        <tr class="hover:bg-slate-50/60 transition">
                            <td class="px-6 py-3 font-medium text-slate-700">{{ $h->plan?->nombre ?? '—' }}</td>
                            <td class="px-6 py-3 text-slate-500">{{ $h->fecha_inicio?->format('d/m/Y') ?? '—' }}</td>
                            <td class="px-6 py-3 text-slate-500">{{ $h->fecha_inicio?->format('d/m/y') }} → {{ $h->fecha_fin?->format('d/m/y') }}</td>
                            <td class="px-6 py-3 text-center"><span class="text-xs font-medium px-2 py-1 rounded-lg capitalize {{ $h->estado === 'activa' ? 'bg-emerald-50 text-emerald-600' : ($h->estado === 'prueba' ? 'bg-amber-50 text-amber-600' : 'bg-slate-100 text-slate-500') }}">{{ $h->estado }}</span></td>
                            <td class="px-6 py-3 text-right font-semibold text-slate-700">{{ $sim }} {{ number_format($h->precio, 2) }}</td>
                            <td class="px-6 py-3 text-right"><a href="{{ route('admin.empresas.suscripcion.ticket', [$empresa, $h]) }}" class="text-xs font-semibold text-white bg-ink-800 hover:bg-ink-900 px-3 py-1.5 rounded-lg transition">Ticket</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-6 py-10 text-center text-slate-400">Sin suscripciones registradas.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const SIM = @json($sim);
    const venceActualISO = @json($sub?->fecha_fin?->toDateString());
    const money = n => SIM + ' ' + (Math.round(n * 100) / 100).toFixed(2);

    function calc() {
        const opt = document.getElementById('plan').selectedOptions[0];
        const unidad = document.getElementById('unidad').value;
        const dur = Math.max(1, parseInt(document.getElementById('duracion').value || '1'));
        const precio = unidad === 'anios' ? parseFloat(opt.dataset.anual) : parseFloat(opt.dataset.mensual);
        const subtotal = precio * dur;

        const desc = parseFloat(document.getElementById('descuento').value || '0');
        const tipo = document.getElementById('tipoDescuento').value;
        let descAplicado = tipo === 'porcentaje' ? subtotal * Math.min(desc, 100) / 100 : Math.min(desc, subtotal);
        const total = Math.max(0, subtotal - descAplicado);

        // Vigencia
        let base = new Date();
        if (venceActualISO) {
            const v = new Date(venceActualISO + 'T00:00:00');
            if (v > base) base = v;
        }
        const fin = new Date(base);
        if (unidad === 'anios') fin.setFullYear(fin.getFullYear() + dur);
        else fin.setMonth(fin.getMonth() + dur);

        document.getElementById('subtotal').textContent = money(subtotal);
        document.getElementById('descLbl').textContent = '- ' + money(descAplicado);
        document.getElementById('total').textContent = money(total);
        document.getElementById('vence').textContent = fin.toLocaleDateString('es-PE');
    }

    ['plan', 'unidad', 'duracion', 'descuento', 'tipoDescuento'].forEach(id => {
        document.getElementById(id).addEventListener('input', calc);
        document.getElementById(id).addEventListener('change', calc);
    });
    calc();
</script>
@endpush
@endsection