@extends('layouts.app')
@section('title', 'Detalle de Licencia')
@section('content')
<div class="page-header" style="margin-bottom: 25px;">
    <div style="display: flex; align-items: center; gap: 15px;">
        <a href="{{ route('licencias.index') }}" style="padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); text-decoration: none; font-size: 0.9rem; background: var(--bg-card);"><i class="fa-solid fa-arrow-left"></i> Volver a Licencias</a>
    </div>
</div>
@if(session('success'))
    <div style="background: rgba(35,134,54,0.2); color: #3fb950; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(35,134,54,0.4);">
        <i class="fa-solid fa-check-circle"></i> {{ session('success') }}
    </div>
@endif
<div style="display: flex; gap: 25px; flex-wrap: wrap;">
    <div style="flex: 1; min-width: 400px; display: flex; flex-direction: column; gap: 20px;">
        <div class="card" style="padding: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card);">
            <div style="background: var(--primary); padding: 15px 20px; color: #fff;">
                <h3 style="margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;">
                    <i class="fa-solid fa-certificate"></i> Detalles de la Licencia
                </h3>
            </div>
            <div style="padding: 20px;">
                <table style="width: 100%; font-size: 0.95rem; border-collapse: separate; border-spacing: 0 10px;">
                    <tr><td style="font-weight: bold; width: 40%;">Empresa:</td><td>{{ $licencia->empresa->razon_social }}</td></tr>
                    <tr><td style="font-weight: bold;">RUC:</td><td style="color: var(--danger); font-family: monospace;">{{ $licencia->empresa->ruc }}</td></tr>
                    <tr><td style="font-weight: bold;">Período:</td><td>{{ $licencia->tipo }}</td></tr>
                    <tr><td style="font-weight: bold;">Inicio:</td><td>{{ \Carbon\Carbon::parse($licencia->fecha_inicio)->format('d/m/Y') }}</td></tr>
                    <tr><td style="font-weight: bold;">Vencimiento:</td><td>{{ \Carbon\Carbon::parse($licencia->fecha_vencimiento)->format('d/m/Y') }}</td></tr>
                    <tr>
                        <td style="font-weight: bold;">Estado:</td>
                        <td>
                            @if($licencia->estado == 'ACTIVA') <span class="badge badge-success">ACTIVA</span>
                            @elseif($licencia->estado == 'VENCIDA') <span class="badge badge-danger">VENCIDA</span>
                            @elseif($licencia->estado == 'REVOCADA') <span class="badge badge-danger">REVOCADA</span>
                            @else <span class="badge" style="background: rgba(210,153,34,0.2); color: var(--warning);">{{ $licencia->estado }}</span>
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card" style="padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card);">
            <h4 style="margin-top: 0; margin-bottom: 15px; font-size: 1rem;">Clave de Licencia:</h4>
            <div style="background: rgba(35, 134, 54, 0.1); border: 1px solid rgba(35, 134, 54, 0.3); padding: 15px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; color: #3fb950; word-wrap: break-word; line-height: 1.5; margin-bottom: 20px;">
                {{ $licencia->clave_licencia }}
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button onclick="copiarClave()" style="padding: 8px 15px; background: transparent; border: 1px solid #58a6ff; color: #58a6ff; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px;">
                    <i class="fa-solid fa-copy"></i> Copiar Clave
                </button>
                @if($licencia->estado != 'REVOCADA')
                    <form action="{{ route('licencias.estado', [$licencia->id, 'REVOCADA']) }}" method="POST">
                        @csrf <button type="submit" onclick="return confirm('¿REVOCAR licencia definitivamente?')" style="padding: 8px 15px; background: transparent; border: 1px solid #f85149; color: #f85149; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px;"><i class="fa-solid fa-ban"></i> Revocar</button>
                    </form>
                @endif
                @if($licencia->estado == 'ACTIVA')
                    <form action="{{ route('licencias.estado', [$licencia->id, 'PAUSADA']) }}" method="POST">
                        @csrf <button type="submit" style="padding: 8px 15px; background: transparent; border: 1px solid #d29922; color: #d29922; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px;"><i class="fa-solid fa-pause"></i> Pausar</button>
                    </form>
                @elseif($licencia->estado == 'PAUSADA')
                    <form action="{{ route('licencias.estado', [$licencia->id, 'ACTIVA']) }}" method="POST">
                        @csrf <button type="submit" style="padding: 8px 15px; background: transparent; border: 1px solid #3fb950; color: #3fb950; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px;"><i class="fa-solid fa-play"></i> Reactivar</button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
<script>
    function copiarClave() {
        navigator.clipboard.writeText(`{{ $licencia->clave_licencia }}`);
        alert('¡Clave copiada al portapapeles!');
    }
</script>
<style>
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
    .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); }
    form button:hover { opacity: 0.8; }
</style>
@endsection