@extends('adminlte::page')

@section('title', 'Panel de Control')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-tachometer-alt text-primary"></i> Panel de Control</h1>
        <small class="text-muted">{{ now()->format('d/m/Y') }}</small>
    </div>
@stop

@section('content')
    <div class="row" x-data="dashboardKpi()" x-init="loadKpis()">
        <div class="col-lg-3 col-6 mb-3">
            <x-data.info-box label="Usuarios" alpine-value="usersCount" icon="fas fa-users" color="primary" url="{{ route('users.index') }}" />
        </div>

        <div class="col-lg-3 col-6 mb-3">
            <x-data.info-box label="Roles" alpine-value="rolesCount" icon="fas fa-user-shield" color="info" url="{{ route('roles.index') }}" />
        </div>

        <div class="col-lg-3 col-6 mb-3">
            <x-data.info-box label="Empresa" alpine-value="companyActive ? 'Activa' : 'Pendiente'" icon="fas fa-building" color="success" url="{{ route('company.edit') }}" />
        </div>

        <div class="col-lg-3 col-6 mb-3">
            <div class="info-box bg-warning">
                <span class="info-box-icon text-white"><i class="fas fa-file-export"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text text-white">Exportar</span>
                    <span class="info-box-number text-white mt-1">
                        <a href="{{ route('export.excel') }}" class="text-white font-weight-bold mr-2" title="Exportar a Excel"><i class="fas fa-file-excel fa-lg"></i></a>
                        <a href="{{ route('export.pdf') }}" class="text-white font-weight-bold" title="Exportar a PDF"><i class="fas fa-file-pdf fa-lg"></i></a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    @push('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('dashboardKpi', () => ({
                usersCount: '...',
                rolesCount: '...',
                companyActive: false,

                async loadKpis() {
                    try {
                        const response = await axios.get('/api/v1/dashboard/kpi');
                        const data = response.data.data;
                        
                        this.usersCount = data.users_count;
                        this.rolesCount = data.roles_count;
                        this.companyActive = data.company_active;
                    } catch (error) {
                        console.error("Error loading KPIs", error);
                    }
                }
            }));
        });
    </script>
    @endpush

    <div class="row mt-3">
        <div class="col-md-6 mb-3">
            <x-ui.card shadow="shadow-sm">
                <x-slot:header>
                    <x-ui.card-header title="Exportar Usuarios" icon="fas fa-download text-primary" />
                </x-slot:header>
                <p class="text-muted">Genera reportes de la lista actual de usuarios en formato Excel o PDF.</p>
                <div class="d-flex gap-2">
                    <a href="{{ route('export.excel') }}" class="btn btn-success" title="Exportar lista de usuarios a Excel">
                        <i class="fas fa-file-excel mr-1"></i> Exportar a Excel
                    </a>
                    <a href="{{ route('export.pdf') }}" class="btn btn-danger ml-2" title="Exportar lista de usuarios a PDF">
                        <i class="fas fa-file-pdf mr-1"></i> Exportar a PDF
                    </a>
                </div>
            </x-ui.card>
        </div>

        <div class="col-md-6 mb-3">
            <x-ui.card shadow="shadow-sm">
                <x-slot:header>
                    <x-ui.card-header title="Monitoreo del Sistema" icon="fas fa-chart-line text-info" />
                </x-slot:header>
                <p class="text-muted">Monitorea el rendimiento del sistema con Laravel Pulse.</p>
                <a href="/pulse" class="btn btn-info" target="_blank" title="Abrir panel de Laravel Pulse">
                    <i class="fas fa-chart-line mr-1"></i> Ver Panel de Pulse
                </a>
            </x-ui.card>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
@stop