@extends('admin.layouts.app')

@push('css')
<style>
.shipping-card {
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.shipping-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 {
    color: #28a745;
    margin-right: 0.5rem;
}

.system-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.75rem;
}

.card-modern {
    position: relative;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
</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"><i class="ri-truck-line text-primary"></i> Gestión de Envíos</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>
        
        @include('admin.message')
        
        <!-- Estadísticas Rápidas -->
        <div class="row mb-4">
            <div class="col-lg-3 col-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Zonas de Envío</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ $stats['zones'] ?? 0 }}</h4>
                                <a href="{{ route('shipping-zones.index') }}" class="text-decoration-underline text-info">Ver zonas</a>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-info-subtle rounded fs-3">
                                    <i class="ri-map-pin-line text-info"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Tarifas Configuradas</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ $stats['rates'] ?? 0 }}</h4>
                                <a href="{{ route('shipping-zones.index') }}" class="text-decoration-underline text-success">Ver tarifas</a>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                    <i class="ri-money-dollar-circle-line text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Países (Sistema Tradicional)</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ $stats['countries'] ?? 0 }}</h4>
                                <a href="{{ route('shipping.create') }}" class="text-decoration-underline text-warning">Gestionar</a>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                    <i class="ri-global-line text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Órdenes con Envío</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ $stats['orders'] ?? 0 }}</h4>
                                <a href="{{ route('orders.index') }}" class="text-decoration-underline text-danger">Ver órdenes</a>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-danger-subtle rounded fs-3">
                                    <i class="ri-truck-line text-danger"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sistemas de Envío -->
        <div class="row">
            <!-- Sistema Moderno - Zonas de Envío -->
            <div class="col-md-6">
                <div class="card card-modern shipping-card">
                    <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"></i> Configuración por provincias y códigos postales</li>
                            <li><i class="ri-check-line"></i> Múltiples transportistas por zona</li>
                            <li><i class="ri-check-line"></i> Tarifas por peso y volumen</li>
                            <li><i class="ri-check-line"></i> Envío gratis por monto mínimo</li>
                            <li><i class="ri-check-line"></i> Tiempos de entrega estimados</li>
                            <li><i class="ri-check-line"></i> Seguros opcionales</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(isset($stats['zones']) && $stats['zones'] > 0)
                            <div class="mt-3">
                                <small class="text-success">
                                    <i class="ri-checkbox-circle-line"></i> 
                                    {{ $stats['zones'] }} 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">
                <div class="card card-modern shipping-card">
                    <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"></i> Configuración simple por país</li>
                            <li><i class="ri-check-line"></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>
                            <li><i class="ri-close-line text-danger"></i> Sin seguros automáticos</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(isset($stats['countries']) && $stats['countries'] > 0)
                            <div class="mt-3">
                                <small class="text-info">
                                    <i class="ri-information-line"></i> 
                                    {{ $stats['countries'] }} 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 mt-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>
        
@endsection