@extends('layouts.app')

@section('title', 'Generar Licencia')

@section('content')
<div class="page-header">
    <div style="display: flex; align-items: center; gap: 15px;">
        <a href="{{ route('licencias.index') }}" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Volver</a>
        <h1 class="page-title" style="margin-bottom: 0;">Generar Nueva Licencia</h1>
    </div>
</div>

<div class="card" style="max-width: 600px; margin: 0 auto;">
    
    <div style="background: rgba(88, 166, 255, 0.1); border-left: 4px solid var(--primary); padding: 15px; border-radius: 4px; margin-bottom: 25px; font-size: 0.9rem;">
        <i class="fa-solid fa-shield-halved"></i> <strong>Modo Offline Activo:</strong> El sistema calculará una firma criptográfica única usando el RUC del cliente y la fecha de vencimiento combinados con la Secret Key global.
    </div>

    @if ($errors->any())
        <div style="background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.4); color: var(--danger); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
            <ul style="margin-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('licencias.store') }}" method="POST">
        @csrf
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Empresa / Cliente *</label>
            <select name="empresa_id" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
                <option value="">-- Seleccionar Empresa --</option>
                @foreach($empresas as $empresa)
                    <option value="{{ $empresa->id }}">{{ $empresa->ruc }} - {{ $empresa->razon_social }}</option>
                @endforeach
            </select>
        </div>

        <div style="display: flex; gap: 15px; margin-bottom: 20px;">
            <div style="flex: 2;">
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Tipo de Plazo *</label>
                <select id="tipo" name="tipo" style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
                    <option value="DIAS">Días</option>
                    <option value="MESES" selected>Meses</option>
                    <option value="TRIMESTRES">Trimestres (3 Meses)</option>
                    <option value="SEMESTRES">Semestres (6 Meses)</option>
                    <option value="ANOS">Años</option>
                </select>
            </div>
            <div style="flex: 1;">
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Cantidad *</label>
                <input type="number" id="cantidad" name="cantidad" value="1" min="1" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>
        </div>

        <div style="display: flex; gap: 15px; margin-bottom: 25px;">
            <div style="flex: 1;">
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Fecha de Inicio *</label>
                <input type="date" id="fecha_inicio" name="fecha_inicio" value="{{ date('Y-m-d') }}" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); color-scheme: dark;">
            </div>
            <div style="flex: 1;">
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Fecha Fin Calculada *</label>
                <input type="date" id="fecha_vencimiento" name="fecha_vencimiento" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); color-scheme: dark;">
            </div>
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; font-size: 1rem; padding: 14px;">
            <i class="fa-solid fa-lock" style="margin-right: 5px;"></i> Firmar y Generar Hash
        </button>
    </form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const cant = document.getElementById('cantidad');
        const tipo = document.getElementById('tipo');
        const inicio = document.getElementById('fecha_inicio');
        const fin = document.getElementById('fecha_vencimiento');

        function calc() {
            let d = new Date(inicio.value);
            if(isNaN(d)) return;
            let c = parseInt(cant.value) || 1;
            let t = tipo.value;
            
            if(t==='DIAS') d.setDate(d.getDate() + c);
            if(t==='MESES') d.setMonth(d.getMonth() + c);
            if(t==='TRIMESTRES') d.setMonth(d.getMonth() + (c*3));
            if(t==='SEMESTRES') d.setMonth(d.getMonth() + (c*6));
            if(t==='ANOS') d.setFullYear(d.getFullYear() + c);
            
            fin.value = d.toISOString().split('T')[0];
        }

        calc();
        cant.addEventListener('input', calc);
        tipo.addEventListener('change', calc);
        inicio.addEventListener('change', calc);
    });
</script>
@endsection