@extends('adminlte::page')

@section('title', 'Gestión de Licencia')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-key text-primary"></i> Licencia del Sistema</h1>
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Inicio</a></li>
            <li class="breadcrumb-item active">Licencia</li>
        </ol>
    </div>
@stop

@section('content')
    <div class="row" x-data="licenseManager()" x-init="initData()">
        <div class="col-md-6 mb-3">
            <div class="card kpi-card border-0 text-white overflow-hidden"
                 :class="{
                    'bg-gradient-success': licenseStatus.status === true,
                    'bg-gradient-warning': !licenseStatus.status && licenseStatus.type === 'TRIAL',
                    'bg-gradient-danger': !licenseStatus.status && licenseStatus.type !== 'TRIAL'
                 }">
                <div class="card-body text-center py-5">
                    
                    <div x-show="loading" class="text-white">
                        <i class="fas fa-spinner fa-spin fa-3x mb-3"></i>
                        <h5>Cargando estado...</h5>
                    </div>

                    <div x-show="!loading" style="display: none;">
                        <template x-if="licenseStatus.type === 'PRO'">
                            <div>
                                <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white mb-3" style="width: 80px; height: 80px;">
                                    <i class="fas fa-check-circle text-success fa-3x"></i>
                                </div>
                                <h3 class="text-white font-weight-bold">Licencia Activa</h3>
                            </div>
                        </template>

                        <template x-if="licenseStatus.type === 'TRIAL'">
                            <div>
                                <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white mb-3" style="width: 80px; height: 80px;">
                                    <i class="fas fa-hourglass-half text-warning fa-3x"></i>
                                </div>
                                <h3 class="text-white font-weight-bold">Periodo de Prueba</h3>
                            </div>
                        </template>

                        <template x-if="licenseStatus.type !== 'PRO' && licenseStatus.type !== 'TRIAL'">
                            <div>
                                <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white mb-3" style="width: 80px; height: 80px;">
                                    <i class="fas fa-times-circle text-danger fa-3x"></i>
                                </div>
                                <h3 class="text-white font-weight-bold">Sin Activación</h3>
                            </div>
                        </template>

                        <p class="mt-2 text-white" style="opacity: 0.85; font-size: 1.05rem;" x-text="licenseStatus.message"></p>

                        <template x-if="licenseStatus.days_left !== undefined && licenseStatus.days_left !== null">
                            <div class="alert mb-0 mx-4 mt-4 font-weight-bold" :class="licenseStatus.days_left > 7 ? 'alert-light' : 'alert-warning'">
                                <i class="fas fa-info-circle mr-1"></i>
                                <strong><span x-text="licenseStatus.days_left"></span> Días Restantes</strong><br>
                                <small class="font-weight-normal">Vence el: <span x-text="licenseStatus.expiration || 'N/A'"></span></small>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-key text-primary mr-2"></i> Actualizar Llave de Licencia</h5>
                </div>
                <div class="card-body">
                    <form @submit.prevent="updateLicense()">
                        <div class="form-group">
                            <label for="license_key">Nueva Llave de Activación</label>
                            <textarea id="license_key" class="form-control" :class="{'is-invalid': errors.license_key}"
                                      rows="5" placeholder="Pega aquí la nueva llave de activación..."
                                      style="font-family: monospace; font-size: 12px;" 
                                      title="Ingresa la llave de licencia para activar el sistema"
                                      x-model="form.license_key"
                                      :disabled="isSaving"></textarea>
                            <template x-if="errors.license_key">
                                <span class="invalid-feedback" role="alert"><strong x-text="errors.license_key[0]"></strong></span>
                            </template>
                            <small class="text-muted"><i class="fas fa-info-circle mr-1"></i> La llave es proporcionada al adquirir o renovar la licencia del sistema.</small>
                        </div>

                        <button type="submit" class="btn btn-primary" :disabled="isSaving">
                            <span x-show="!isSaving"><i class="fas fa-sync-alt mr-1"></i> Actualizar Licencia</span>
                            <span x-show="isSaving"><i class="fas fa-spinner fa-spin mr-1"></i> Actualizando...</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('licenseManager', () => ({
            licenseStatus: {},
            loading: true,
            isSaving: false,
            form: {
                license_key: ''
            },
            errors: {},

            async initData() {
                try {
                    const response = await axios.get('/api/v1/company/license');
                    this.licenseStatus = response.data;
                } catch (error) {
                    console.error("Error al cargar estado de licencia:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo cargar el estado de la licencia.'
                    });
                } finally {
                    this.loading = false;
                }
            },

            async updateLicense() {
                this.isSaving = true;
                this.errors = {};
                
                try {
                    const response = await axios.put('/api/v1/company/license', this.form);
                    
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.data.message || 'Licencia actualizada correctamente',
                    });
                    
                    this.form.license_key = '';
                    await this.initData();
                    
                    // Dispatch an event to update any global navbars or elements listening for license updates
                    window.dispatchEvent(new CustomEvent('license-updated'));
                    
                } catch (error) {
                    if (error.response && error.response.status === 422) {
                        this.errors = error.response.data.errors;
                        Swal.fire({
                            icon: 'error',
                            title: 'Error de validación',
                            text: 'Por favor, revisa el formato de la llave.'
                        });
                    } else if (error.response && error.response.data && error.response.data.message) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.response.data.message
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error inesperado',
                            text: 'Ha ocurrido un error al actualizar la licencia.'
                        });
                    }
                } finally {
                    this.isSaving = false;
                }
            }
        }));
    });
</script>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
    <style>
        .bg-gradient-success { background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important; }
        .bg-gradient-warning { background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important; }
        .bg-gradient-danger { background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important; }
    </style>
@stop