@extends('layouts.app')

@section('title', 'Gestionar Licencias')

@section('content')
<div class="page-header">
    <h1 class="page-title">Gestión de Licencias</h1>
    <a href="{{ route('licencias.create') }}" class="btn btn-primary"><i class="fa-solid fa-key"></i> Generar Licencia</a>
</div>

@if(session('success'))
    <div style="background: rgba(35, 134, 54, 0.1); border-left: 4px solid #3fb950; padding: 20px; border-radius: 8px; margin-bottom: 25px;">
        <h4 style="color: #3fb950; margin-top: 0; margin-bottom: 10px; font-size: 1.1rem;"><i class="fa-solid fa-check-circle"></i> {{ session('success') }}</h4>
        @if(session('token_generado'))
            <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px;">Envíe la siguiente Clave Maestra al cliente para la activación:</p>
            <div style="display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; border: 1px dashed rgba(255,255,255,0.2);">
                <code id="new-token-val" style="color: #58a6ff; font-size: 0.85rem; word-break: break-all; flex: 1; user-select: all;">{{ session('token_generado') }}</code>
                <button onclick="copyToClipboard('{{ session('token_generado') }}')" class="btn btn-primary" style="padding: 8px 15px; flex-shrink: 0;">
                    <i class="fa-solid fa-copy"></i> Copiar Clave
                </button>
            </div>
        @endif
    </div>
@endif

<div class="card">
    <table class="table">
        <thead>
            <tr>
                <th>Hash / ID</th>
                <th>Empresa (RUC)</th>
                <th>Tipo Periodo</th>
                <th>Vencimiento</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($licencias as $licencia)
            <tr>
                <td>
                    <div style="font-family: monospace; font-size: 0.8rem; background: var(--bg-body); padding: 4px; border-radius: 4px; border: 1px solid #30363d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;" title="{{ $licencia->clave_licencia }}">
                        {{ substr($licencia->clave_licencia, 0, 15) }}...
                    </div>
                </td>
                <td>
                    <strong>{{ $licencia->empresa->razon_social }}</strong><br>
                    <small style="color: var(--text-muted);">{{ $licencia->empresa->ruc }}</small>
                </td>
                <td>
                    <span class="badge badge-info">{{ $licencia->tipo }}</span>
                </td>
                <td>
                    {{ \Carbon\Carbon::parse($licencia->fecha_vencimiento)->format('d/m/Y') }}
                    @if(\Carbon\Carbon::parse($licencia->fecha_vencimiento)->isPast())
                        <br><small style="color: var(--danger);"><i class="fa-solid fa-triangle-exclamation"></i> Vencida</small>
                    @endif
                </td>
                <td>
                    @if($licencia->estado == 'ACTIVA')
                        <span class="badge badge-success">ACTIVA</span>
                    @elseif($licencia->estado == 'VENCIDA')
                        <span class="badge badge-danger">VENCIDA</span>
                    @else
                        <span class="badge" style="background: rgba(210, 153, 34, 0.2); color: var(--warning);">SUSPENDIDA</span>
                    @endif
                </td>
                <td>
                    <div style="display:flex; gap: 5px;">
                        <a href="{{ route('licencias.show', $licencia->id) }}" class="btn badge-info" style="padding: 6px 10px; font-size: 0.8rem; border-radius:4px; text-decoration:none;"><i class="fa-solid fa-eye"></i></a>
                        <button class="btn btn-primary" onclick="copyToClipboard('{{ $licencia->clave_licencia }}')" style="padding: 6px 10px; font-size: 0.8rem; background: transparent; border: 1px solid var(--border-color); color: var(--text-main); border-radius:4px;" title="Copiar Token">
                            <i class="fa-solid fa-copy"></i>
                        </button>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
                    <i class="fa-solid fa-certificate" style="font-size: 2rem; margin-bottom: 10px;"></i>
                    <p>No se han emitido licencias.</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Hash duplicado al portapapeles!');
    }, function(err) {
        console.error('Error al copiar: ', err);
    });
}
</script>
<style>
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .table th { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; background: rgba(0,0,0,0.1); }
    .table tr:hover { background: rgba(255,255,255,0.02); }
    .table tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-success { background: rgba(35, 134, 54, 0.2); color: #3fb950; }
    .badge-danger { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
    .badge-info { background: rgba(88, 166, 255, 0.2); color: var(--primary); }
</style>
@endsection