@extends('layouts.app')

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

@section('breadcrumbs')
    <li class="breadcrumb-item active">Planes</li>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-layer-group"></i> Gestión de Planes
    </h2>
    <div class="btn-group">
        <a href="{{ route('plans.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Nuevo Plan
        </a>
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" onclick="refreshData()">
                <i class="fas fa-sync-alt"></i> Actualizar
            </a></li>
            <li><a class="dropdown-item" href="#" onclick="exportPlans()">
                <i class="fas fa-download"></i> Exportar
            </a></li>
        </ul>
    </div>
</div>

<!-- Estadísticas de Planes -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stats-card mini">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ count($plans ?? []) }}</h4>
                    <small>Total Planes</small>
                </div>
                <i class="fas fa-layer-group fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stats-card mini success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['active_plans'] ?? 0 }}</h4>
                    <small>Activos</small>
                </div>
                <i class="fas fa-check-circle fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stats-card mini info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['companies_with_plans'] ?? 0 }}</h4>
                    <small>Empresas con Plan</small>
                </div>
                <i class="fas fa-building fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stats-card mini warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>${{ number_format($stats['monthly_revenue'] ?? 0, 0, ',', '.') }}</h4>
                    <small>Ingresos/Mes</small>
                </div>
                <i class="fas fa-dollar-sign fs-3"></i>
            </div>
        </div>
    </div>
</div>

<!-- Lista de Planes -->
@if(isset($plans) && count($plans) > 0)
<div class="row">
    @foreach($plans as $plan)
    @php
        $plan = (object) $plan; // Convertir array a objeto para fácil acceso
    @endphp
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card plan-card h-100 @if(isset($plan->is_popular) && $plan->is_popular) border-primary @endif">
            @if(isset($plan->is_popular) && $plan->is_popular)
            <div class="card-header bg-primary text-white text-center">
                <i class="fas fa-star"></i> Más Popular
            </div>
            @endif
            
            <div class="card-body text-center">
                <div class="plan-icon mb-3">
                    <i class="fas fa-{{ $plan->name === 'PRO' ? 'crown' : 'rocket' }} fa-3x text-{{ $plan->name === 'PRO' ? 'primary' : 'info' }}"></i>
                </div>
                
                <h4 class="plan-name">{{ $plan->name }}</h4>
                <div class="plan-price mb-3">
                    <h2 class="text-{{ $plan->name === 'PRO' ? 'primary' : 'info' }}">${{ number_format($plan->price ?? 0, 0, ',', '.') }}</h2>
                    <small class="text-muted">por mes</small>
                </div>
                
                <div class="plan-description mb-4">
                    <p class="text-muted">{{ $plan->description ?? 'Plan completo para tu empresa' }}</p>
                </div>
                
                <!-- Características del Plan -->
                @if(isset($plan->features) && is_array($plan->features) && count($plan->features) > 0)
                <div class="plan-features mb-4">
                    <ul class="list-unstyled">
                        @foreach($plan->features as $feature)
                        <li class="mb-2">
                            <i class="fas fa-check text-success"></i> {{ $feature }}
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif
                
                <!-- Estadísticas del Plan -->
                <div class="plan-stats mb-4">
                    <div class="row text-center">
                        <div class="col-4">
                            <div class="stat-item">
                                <h6 class="mb-0">{{ $plan->company_count ?? 0 }}</h6>
                                <small class="text-muted">Empresas</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <h6 class="mb-0">{{ $plan->active_subscriptions ?? 0 }}</h6>
                                <small class="text-muted">Activas</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <h6 class="mb-0">${{ number_format($plan->monthly_revenue ?? 0, 0, ',', '.') }}</h6>
                                <small class="text-muted">Ingresos</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="badge bg-{{ (isset($plan->is_active) && $plan->is_active) ? 'success' : 'secondary' }}">
                        {{ (isset($plan->is_active) && $plan->is_active) ? 'Activo' : 'Inactivo' }}
                    </span>
                    <small class="text-muted">
                        Creado: {{ \Carbon\Carbon::parse($plan->created_at ?? now())->format('d/m/Y') }}
                    </small>
                </div>
                
                <div class="btn-group w-100">
                    <a href="{{ route('plans.show', $plan->id) }}" class="btn btn-outline-primary">
                        <i class="fas fa-eye"></i> Ver
                    </a>
                    <a href="{{ route('plans.edit', $plan->id) }}" class="btn btn-outline-warning">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                                data-bs-toggle="dropdown">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" onclick="duplicatePlan('{{ $plan->id }}')">
                                <i class="fas fa-copy"></i> Duplicar
                            </a></li>
                            @php
                                $isActive = (isset($plan->is_active) && $plan->is_active);
                                $statusText = $isActive ? 'Desactivar' : 'Activar';
                                $iconClass = $isActive ? 'off' : 'on';
                                $statusValue = $isActive ? 'true' : 'false';
                            @endphp
                            <li><a class="dropdown-item" href="#" onclick="togglePlanStatus('{{ $plan->id }}', '{{ $statusValue }}')">
                                <i class="fas fa-toggle-{{ $iconClass }}"></i> {{ $statusText }}
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="viewSubscriptions('{{ $plan->id }}')">
                                <i class="fas fa-users"></i> Ver Suscripciones
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="deletePlan('{{ $plan->id }}', '{{ $plan->name }}')">
                                <i class="fas fa-trash"></i> Eliminar
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Comparación de Planes -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-chart-bar"></i> Comparación de Planes
        </h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Característica</th>
                        @foreach($plans as $planData)
                        @php $planObj = (object) $planData; @endphp
                        <th class="text-center">
                            <strong>{{ $planObj->name }}</strong><br>
                            <small class="text-muted">${{ number_format($planObj->price ?? 0, 0, ',', '.') }}/mes</small>
                        </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @php
                        $all_features = [];
                        foreach($plans as $planData) {
                            $planObj = (object) $planData;
                            if(isset($planObj->features) && is_array($planObj->features)) {
                                $all_features = array_merge($all_features, $planObj->features);
                            }
                        }
                        $all_features = array_unique($all_features);
                    @endphp
                    
                    @foreach($all_features as $feature)
                    <tr>
                        <td>{{ $feature }}</td>
                        @foreach($plans as $planData)
                        @php $planObj = (object) $planData; @endphp
                        <td class="text-center">
                            @if(isset($planObj->features) && is_array($planObj->features) && in_array($feature, $planObj->features))
                                <i class="fas fa-check text-success"></i>
                            @else
                                <i class="fas fa-times text-danger"></i>
                            @endif
                        </td>
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@else
<div class="text-center py-5">
    <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
    <h4>No hay planes disponibles</h4>
    <p class="text-muted">Crea el primer plan para tu sistema.</p>
    <a href="{{ route('plans.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Crear Primer Plan
    </a>
</div>
@endif

@endsection

@push('styles')
<style>
    .plan-card {
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
    }
    
    .plan-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .plan-card.border-primary {
        border-width: 2px !important;
    }
    
    .plan-icon {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .plan-price h2 {
        font-weight: 700;
        margin-bottom: 0;
    }
    
    .plan-features ul li {
        text-align: left;
        padding: 5px 0;
    }
    
    .stat-item {
        padding: 10px 5px;
    }
    
    .stat-item h6 {
        font-weight: 600;
        color: #495057;
    }
    
    .stats-card.mini {
        padding: 15px;
        margin-bottom: 0;
    }
    
    .stats-card.mini h4 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
</style>
@endpush

@push('scripts')
<script>
    function duplicatePlan(planId) {
        if (confirm('¿Deseas crear una copia de este plan?')) {
            // En producción sería una llamada AJAX
            alert('Funcionalidad de duplicación en desarrollo para plan: ' + planId);
        }
    }
    
    function togglePlanStatus(planId, currentStatus) {
        const newStatus = currentStatus === '1' || currentStatus === 'true' ? 'false' : 'true';
        const action = newStatus === 'true' ? 'activar' : 'desactivar';
        
        if (confirm(`¿Deseas ${action} este plan?`)) {
            alert('Funcionalidad de cambio de estado en desarrollo');
        }
    }
    
    function viewSubscriptions(planId) {
        // Redireccionar a vista de suscripciones del plan
        window.location.href = `/plans/${planId}/subscriptions`;
    }
    
    function deletePlan(planId, planName) {
        if (confirm(`¿Estás seguro de que deseas eliminar el plan "${planName}"?\n\nEsta acción no se puede deshacer.`)) {
            alert('Funcionalidad de eliminación en desarrollo');
        }
    }
    
    function exportPlans() {
        alert('Funcionalidad de exportación en desarrollo');
    }
    
    function refreshData() {
        location.reload();
    }
    
    // Efectos visuales
    document.addEventListener('DOMContentLoaded', function() {
        // Animación de entrada para las tarjetas
        const cards = document.querySelectorAll('.plan-card');
        cards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            
            setTimeout(() => {
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });
</script>
@endpush