@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.zone-header {
    background: #f8f9fa;
    border-radius: 0.25rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid #007bff;
}

.rate-card {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.rate-card:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rate-header {
    background: #f8f9fa;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rate-body {
    padding: 1rem;
}

.rate-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.rate-meta-item {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.875rem;
}

.rate-meta-item i {
    margin-right: 0.5rem;
    color: #007bff;
}

.no-rates {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.modal-body .form-row {
    margin-bottom: 1rem;
}
</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">Tarifas de Envío</h4>
            <div class="page-title-right">
                <a href="{{ route('shipping-zones.index') }}" class="btn btn-secondary">
                <i class="ri-arrow-left-line"></i> Volver a Zonas
                </a>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRateModal">
                <i class="ri-add-line"></i> Nueva Tarifa
                </button>
            </div>
        </div>
    </div>
</div>
        
        <!-- Zone Information -->
        <div class="zone-header">
            <div class="row">
                <div class="col-md-8">
                    <h3 class="mb-1">{{ $shippingZone->name }}</h3>
                    <p class="mb-2 text-muted">{{ $shippingZone->description }}</p>
                    <div class="d-flex align-items-center">
                        <span class="badge badge-{{ $shippingZone->is_active ? 'success' : 'secondary' }} me-2">
                            {{ $shippingZone->is_active ? 'Activa' : 'Inactiva' }}
                        </span>
                        <small class="text-muted">
                            <i class="ri-time-line"></i>
                            Entrega: {{ $shippingZone->delivery_days_min }}-{{ $shippingZone->delivery_days_max }} días
                        </small>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="text-muted">
                        <div><i class="ri-map-pin-line-alt"></i> 
                            {{ count($shippingZone->provinces ?? []) }} provincias</div>
                        <div><i class="ri-mail-send-line"></i> 
                            {{ count($shippingZone->postal_codes ?? []) }} códigos postales</div>
                        <div><i class="ri-money-dollar-circle-line"></i> 
                            {{ $shippingZone->shippingRates->count() }} tarifas configuradas</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shipping Rates -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ri-truck-line"></i>
                    Tarifas de Envío Configuradas
                </h3>
            </div>
            <div class="card-body">
                @if($shippingZone->shippingRates->isNotEmpty())
                    @foreach($shippingZone->shippingRates->sortBy('priority') as $rate)
                    <div class="rate-card">
                        <div class="rate-header">
                            <div>
                                <h5 class="mb-0">{{ $rate->name }}</h5>
                                <small class="text-muted">{{ $rate->carrier }}</small>
                            </div>
                            <div>
                                <span class="badge badge-{{ $rate->is_active ? 'success' : 'secondary' }} me-2">
                                    {{ $rate->is_active ? 'Activa' : 'Inactiva' }}
                                </span>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                            onclick="editRate({{ $rate->id }})" title="Editar">
                                        <i class="ri-pencil-line"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="deleteRate({{ $rate->id }})" title="Eliminar">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="rate-body">
                            <div class="rate-meta">
                                <div class="rate-meta-item">
                                    <i class="ri-weight-line"></i>
                                    Peso: {{ $rate->min_weight }}kg - {{ $rate->max_weight ? $rate->max_weight . 'kg' : 'ilimitado' }}
                                </div>
                                <div class="rate-meta-item">
                                    <i class="ri-money-dollar-circle-line"></i>
                                    Tarifa base: ${{ number_format($rate->base_rate, 2) }}
                                </div>
                                <div class="rate-meta-item">
                                    <i class="ri-add-line"></i>
                                    Por kg adicional: ${{ number_format($rate->per_kg_rate, 2) }}
                                </div>
                                <div class="rate-meta-item">
                                    <i class="ri-shield-check-line"></i>
                                    Seguro: {{ $rate->insurance_rate }}% del valor
                                </div>
                                <div class="rate-meta-item">
                                    <i class="ri-gift-line"></i>
                                    Envío gratis desde: ${{ number_format($rate->free_shipping_min_amount, 2) }}
                                </div>
                                <div class="rate-meta-item">
                                    <i class="ri-sort-asc-numeric-up"></i>
                                    Prioridad: {{ $rate->priority }}
                                </div>
                            </div>
                            @if($rate->description)
                                <div class="mt-2">
                                    <small class="text-muted">{{ $rate->description }}</small>
                                </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="no-rates">
                        <i class="ri-truck-line ri-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No hay tarifas configuradas</h5>
                        <p class="text-muted">Esta zona de envío no tiene tarifas configuradas. Agregue al menos una tarifa para que los clientes puedan realizar pedidos a esta zona.</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRateModal">
                            <i class="ri-add-line"></i> Agregar Primera Tarifa
                        </button>
                    </div>
                @endif
            </div>
        </div>


<!-- Add Rate Modal -->
<div class="modal fade" id="addRateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ri-add-line"></i> Agregar Nueva Tarifa
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addRateForm">
                <div class="modal-body">
                    <input type="hidden" name="zone_id" value="{{ $shippingZone->id }}">
                    
                    <div class="form-row">
                        <div class="col-md-6">
                            <label for="name">Nombre de la Tarifa *</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Ej: Express CABA">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="carrier">Transportista</label>
                            <input type="text" name="carrier" id="carrier" class="form-control" placeholder="Ej: OCA, Andreani">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-6">
                            <label for="min_weight">Peso Mínimo (kg) *</label>
                            <input type="number" name="min_weight" id="min_weight" class="form-control" value="0" step="0.01" min="0">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="max_weight">Peso Máximo (kg)</label>
                            <input type="number" name="max_weight" id="max_weight" class="form-control" placeholder="Dejar vacío para ilimitado" step="0.01" min="0">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-6">
                            <label for="base_rate">Tarifa Base ($) *</label>
                            <input type="number" name="base_rate" id="base_rate" class="form-control" step="0.01" min="0">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="per_kg_rate">Por Kg Adicional ($)</label>
                            <input type="number" name="per_kg_rate" id="per_kg_rate" class="form-control" value="0" step="0.01" min="0">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-6">
                            <label for="free_shipping_min_amount">Envío Gratis Desde ($)</label>
                            <input type="number" name="free_shipping_min_amount" id="free_shipping_min_amount" class="form-control" step="0.01" min="0">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="insurance_rate">Tasa de Seguro (%)</label>
                            <input type="number" name="insurance_rate" id="insurance_rate" class="form-control" value="0" step="0.01" min="0" max="100">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-6">
                            <label for="priority">Prioridad</label>
                            <input type="number" name="priority" id="priority" class="form-control" value="1" min="1">
                            <small class="form-text text-muted">Orden de aparición (1 = mayor prioridad)</small>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="is_active">Estado</label>
                            <select name="is_active" id="is_active" class="form-select">
                                <option value="1">Activa</option>
                                <option value="0">Inactiva</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-12">
                            <label for="description">Descripción</label>
                            <textarea name="description" id="description" class="form-control" rows="2" placeholder="Descripción opcional de la tarifa"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line"></i> Guardar Tarifa
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('customJs')
<script>
// Add Rate Form
$('#addRateForm').submit(function(e) {
    e.preventDefault();
    
    var formData = $(this).serializeArray();
    $('button[type="submit"]').prop('disabled', true);
    
    $.ajax({
        url: '{{ route("shipping-rates.store") }}',
        type: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: response.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            } else {
                // Clear previous errors
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').text('');
                
                // Show new errors
                if (response.errors) {
                    Object.keys(response.errors).forEach(function(key) {
                        var input = $(`[name="${key}"]`);
                        input.addClass('is-invalid');
                        input.siblings('.invalid-feedback').text(response.errors[key][0]);
                    });
                }
                
                Swal.fire('Error', response.message || 'Error al guardar la tarifa', 'error');
            }
        },
        error: function() {
            Swal.fire('Error', 'Error al procesar la solicitud', 'error');
        },
        complete: function() {
            $('button[type="submit"]').prop('disabled', false);
        }
    });
});

function editRate(id) {
    // TODO: Implement edit rate functionality
    Swal.fire('Info', 'Funcionalidad de edición en desarrollo', 'info');
}

function deleteRate(id) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: "Esta acción no se puede deshacer",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("shipping-rates.delete", ":id") }}'.replace(':id', id),
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status) {
                        Swal.fire({
                            title: '¡Eliminada!',
                            text: response.message,
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Error al eliminar la tarifa', 'error');
                }
            });
        }
    });
}
</script>
@endsection