@extends('admin.layouts.app')

@push('css')
<style>
.stats-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.stats-card .card-body {
    padding: 1rem;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.stats-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    opacity: 0.8;
}

.stats-icon {
    font-size: 2rem;
    opacity: 0.6;
}

.shipping-feature-card {
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.shipping-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.shipping-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.25rem 0;
    color: #6c757d;
}

.feature-list li i {
    margin-right: 0.5rem;
}

.system-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.75rem;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $pageTitle }}</h4>
            <div class="page-title-right">
                <a href="{{ route('shipping-zones.index') }}" class="btn btn-primary">
                <i class="ri-settings-3-line"></i> Configurar Zonas
                </a>
            </div>
        </div>
    </div>
</div>
        
        <!-- Cards de Estadísticas -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stats-card bg-primary text-white" onclick="window.location.href='{{ route('shipping-zones.index') }}'">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="stats-label mb-1">Zonas de Envío</p>
                                <h3 class="stats-number">{{ \App\Models\ShippingZone::count() }}</h3>
                            </div>
                            <div>
                                <i class="ri-map-pin-line stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stats-card bg-success text-white" onclick="window.location.href='{{ route('shipping-zones.index') }}'">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="stats-label mb-1">Tarifas Configuradas</p>
                                <h3 class="stats-number">{{ \App\Models\ShippingRate::count() }}</h3>
                            </div>
                            <div>
                                <i class="ri-money-dollar-circle-line stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stats-card bg-warning text-white" onclick="window.location.href='{{ route('shipping.create') }}'">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="stats-label mb-1">Países (Tradicional)</p>
                                <h3 class="stats-number">{{ \App\Models\ShippingCharge::count() }}</h3>
                            </div>
                            <div>
                                <i class="ri-global-line stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stats-card bg-info text-white" onclick="window.location.href='{{ route('orders.index') }}'">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="stats-label mb-1">Órdenes con Envío</p>
                                <h3 class="stats-number">{{ \App\Models\Order::whereNotNull('shipping')->count() }}</h3>
                            </div>
                            <div>
                                <i class="ri-truck-line stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card Principal -->
        <div class="card">
            <div class="card-body">
                
                <!-- Sistemas de Envío -->
                <div class="row">
                    <!-- Sistema Moderno - Zonas de Envío -->
                    <div class="col-md-6 mb-4">
                        <div class="card shipping-feature-card h-100">
                            <span class="badge bg-success system-badge">Recomendado</span>
                    <div class="card-body text-center p-4">
                        <div class="shipping-icon text-primary">
                            <i class="ri-map-pin-line"></i>
                        </div>
                        <h4 class="card-title">Zonas de Envío</h4>
                        <p class="text-muted mb-3">Sistema moderno y flexible basado en zonas geográficas</p>
                        
                        <ul class="feature-list text-start">
                            <li><i class="ri-check-line text-success"></i> Configuración por provincias y códigos postales</li>
                            <li><i class="ri-check-line text-success"></i> Múltiples transportistas por zona</li>
                            <li><i class="ri-check-line text-success"></i> Tarifas por peso y volumen</li>
                            <li><i class="ri-check-line text-success"></i> Envío gratis por monto mínimo</li>
                            <li><i class="ri-check-line text-success"></i> Tiempos de entrega estimados</li>
                        </ul>
                        
                        <div class="mt-4">
                            <a href="{{ route('shipping-zones.index') }}" class="btn btn-primary btn-lg">
                                <i class="ri-settings-3-line"></i> Configurar Zonas
                            </a>
                        </div>
                        
                        @if(\App\Models\ShippingZone::count() > 0)
                            <div class="mt-3">
                                <small class="text-success">
                                    <i class="ri-checkbox-circle-line"></i> 
                                    {{ \App\Models\ShippingZone::count() }} zonas configuradas
                                </small>
                            </div>
                        @else
                            <div class="mt-3">
                                <small class="text-warning">
                                    <i class="ri-error-warning-line"></i> 
                                    No hay zonas configuradas
                                </small>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Sistema Tradicional - Por País -->
            <div class="col-md-6 mb-4">
                <div class="card shipping-feature-card h-100">
                    <span class="badge bg-secondary system-badge">Tradicional</span>
                    <div class="card-body text-center p-4">
                        <div class="shipping-icon text-warning">
                            <i class="ri-global-line"></i>
                        </div>
                        <h4 class="card-title">Envío por País</h4>
                        <p class="text-muted mb-3">Sistema tradicional basado en países</p>
                        
                        <ul class="feature-list text-start">
                            <li><i class="ri-check-line text-success"></i> Configuración simple por país</li>
                            <li><i class="ri-check-line text-success"></i> Tarifa fija por cantidad de productos</li>
                            <li><i class="ri-close-line text-danger"></i> Menos flexible</li>
                            <li><i class="ri-close-line text-danger"></i> No considera peso específico</li>
                            <li><i class="ri-close-line text-danger"></i> Sin múltiples transportistas</li>
                        </ul>
                        
                        <div class="mt-4">
                            <a href="{{ route('shipping.create') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="ri-pencil-line"></i> Gestionar Países
                            </a>
                        </div>
                        
                        @if(\App\Models\ShippingCharge::count() > 0)
                            <div class="mt-3">
                                <small class="text-info">
                                    <i class="ri-information-line"></i> 
                                    {{ \App\Models\ShippingCharge::count() }} países configurados
                                </small>
                            </div>
                        @else
                            <div class="mt-3">
                                <small class="text-muted">
                                    <i class="ri-information-line"></i> 
                                    No hay países configurados
                                </small>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Guía Rápida -->
        <div class="row px-4 pb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-lightbulb-line text-warning"></i>
                            Guía de Configuración
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h5><i class="ri-skip-forward-line text-primary"></i> Paso 1: Crear Zonas</h5>
                                <p class="text-muted">Define las zonas geográficas donde realizas envíos (CABA, GBA, Interior).</p>
                            </div>
                            <div class="col-md-4">
                                <h5><i class="ri-skip-forward-line text-primary"></i> Paso 2: Configurar Tarifas</h5>
                                <p class="text-muted">Establece precios por zona según peso, transportista y opciones.</p>
                            </div>
                            <div class="col-md-4">
                                <h5><i class="ri-skip-forward-line text-primary"></i> Paso 3: Probar</h5>
                                <p class="text-muted">Realiza pedidos de prueba para verificar que todo funcione correctamente.</p>
                            </div>
                        </div>
                        
                        <div class="text-center mt-3">
                            <a href="{{ route('shipping-zones.create') }}" class="btn btn-success">
                                <i class="ri-add-line"></i> Crear Mi Primera Zona de Envío
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

@endsection