@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.tag-input {
    min-height: 80px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.5rem;
    background: #fff;
}

.tag {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.tag .remove-tag {
    margin-left: 0.5rem;
    cursor: pointer;
    color: #fff;
    opacity: 0.8;
}

.tag .remove-tag:hover {
    opacity: 1;
}
</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">Crear Zona de Envío</h4>
            <div class="page-title-right">
                <a href="{{ route('shipping-zones.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="shippingZoneForm" name="shippingZoneForm">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="zoneTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic-info" 
                                    type="button" role="tab" aria-controls="basic-info" aria-selected="true">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location-config" 
                                    type="button" role="tab" aria-controls="location-config" aria-selected="false">
                                <i class="ri-map-pin-line-alt tab-icon"></i>
                                Ubicación Geográfica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="delivery-tab" data-bs-toggle="tab" data-bs-target="#delivery-config" 
                                    type="button" role="tab" aria-controls="delivery-config" aria-selected="false">
                                <i class="ri-time-line tab-icon"></i>
                                Tiempos de Entrega
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="zoneTabContent">
                        
                        <!-- Tab 1: Información Básica -->
                        <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-map-pin-line text-primary"></i>
                                Información Básica de la Zona de Envío
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name">Nombre de la Zona *</label>
                                        <input type="text" name="name" id="name" class="form-control" placeholder="Ej: CABA, GBA, Interior Buenos Aires">
                                        <p class="error"></p>
                                        <small class="help-text">Nombre identificatorio de la zona de envío</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="is_active">Estado de la Zona</label>
                                        <select name="is_active" id="is_active" class="form-select">
                                            <option value="1">Activa</option>
                                            <option value="0">Inactiva</option>
                                        </select>
                                        <p class="error"></p>
                                        <small class="help-text">Estado de disponibilidad de la zona</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="description">Descripción</label>
                                        <textarea class="form-control" name="description" id="description" cols="30" rows="4" placeholder="Descripción detallada de la zona de envío"></textarea>
                                        <p class="error"></p>
                                        <small class="help-text">Descripción detallada de la zona y qué áreas incluye</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Ubicación Geográfica -->
                        <div class="tab-pane fade" id="location-config" role="tabpanel" aria-labelledby="location-tab">
                            <h5 class="form-section-title">
                                <i class="ri-map-pin-line-alt text-success"></i>
                                Configuración Geográfica
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="provinces_input">Provincias</label>
                                        <input type="text" id="provinces_input" class="form-control" placeholder="Escriba una provincia y presione Enter">
                                        <div id="provinces_tags" class="tag-input mt-2"></div>
                                        <input type="hidden" name="provinces" id="provinces">
                                        <p class="error"></p>
                                        <small class="help-text">
                                            Escriba el nombre de una provincia y presione Enter para agregarla.<br>
                                            Ejemplos: Buenos Aires, CABA, Córdoba, Santa Fe
                                        </small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="postal_codes_input">Códigos Postales</label>
                                        <input type="text" id="postal_codes_input" class="form-control" placeholder="Escriba un código postal y presione Enter">
                                        <div id="postal_codes_tags" class="tag-input mt-2"></div>
                                        <input type="hidden" name="postal_codes" id="postal_codes">
                                        <p class="error"></p>
                                        <small class="help-text">
                                            Escriba códigos postales individuales o rangos y presione Enter.<br>
                                            Ejemplos: 1000, 1001-1499, C1000-C1499
                                        </small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Información:</strong> 
                                Puede dejar vacíos los códigos postales y provincias si esta zona aplica a criterios específicos.
                                Los códigos postales tienen prioridad sobre las provincias en la determinación de envíos.
                            </div>
                        </div>

                        <!-- Tab 3: Tiempos de Entrega -->
                        <div class="tab-pane fade" id="delivery-config" role="tabpanel" aria-labelledby="delivery-tab">
                            <h5 class="form-section-title">
                                <i class="ri-time-line text-info"></i>
                                Configuración de Tiempos de Entrega
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="delivery_days_min">Días Mínimos de Entrega *</label>
                                        <input type="number" name="delivery_days_min" id="delivery_days_min" class="form-control" min="1" max="30" placeholder="1">
                                        <p class="error"></p>
                                        <small class="help-text">Tiempo mínimo estimado para la entrega en días hábiles</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="delivery_days_max">Días Máximos de Entrega *</label>
                                        <input type="number" name="delivery_days_max" id="delivery_days_max" class="form-control" min="1" max="30" placeholder="3">
                                        <p class="error"></p>
                                        <small class="help-text">Tiempo máximo estimado para la entrega en días hábiles</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-warning">
                                        <i class="ri-error-warning-line"></i>
                                        <strong>Importante:</strong> 
                                        Los tiempos de entrega se muestran al cliente durante el checkout.
                                        Asegúrese de que sean realistas y cumplibles para mantener la satisfacción del cliente.
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Preview -->
                            <div class="row" id="delivery-preview" style="display: none;">
                                <div class="col-md-12">
                                    <div class="card bg-light">
                                        <div class="card-header">
                                            <h6 class="card-title mb-0">
                                                <i class="ri-eye-line"></i> Vista Previa para el Cliente
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <p class="mb-0">
                                                <strong>Tiempo estimado de entrega:</strong> 
                                                <span id="preview-text"></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line"></i> Crear Zona de Envío
                        </button>
                        <a href="{{ route('shipping-zones.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line"></i> Cancelar
                        </a>
                    </div>
                </div>
            </div>

        </form>


@endsection

@section('customJs')
<script>
let provinces = [];
let postalCodes = [];

$(document).ready(function(){
    // Initialize tag inputs
    initializeTagInput('provinces_input', 'provinces_tags', provinces, 'provinces');
    initializeTagInput('postal_codes_input', 'postal_codes_tags', postalCodes, 'postal_codes');
    
    // Update delivery preview
    $('#delivery_days_min, #delivery_days_max').on('input', updateDeliveryPreview);
});

function initializeTagInput(inputId, containerId, array, hiddenInputId) {
    $('#' + inputId).keypress(function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            const value = $(this).val().trim();
            if (value && !array.includes(value)) {
                array.push(value);
                updateTags(containerId, array, hiddenInputId);
                $(this).val('');
            }
        }
    });
}

function updateTags(containerId, array, hiddenInputId) {
    const container = $('#' + containerId);
    container.empty();
    
    array.forEach((item, index) => {
        const tag = $(`
            <span class="tag">
                ${item}
                <span class="remove-tag" onclick="removeTag('${containerId}', ${index}, '${hiddenInputId}')">&times;</span>
            </span>
        `);
        container.append(tag);
    });
    
    // Update hidden input
    $('#' + hiddenInputId).val(array.join(','));
}

function removeTag(containerId, index, hiddenInputId) {
    if (hiddenInputId === 'provinces') {
        provinces.splice(index, 1);
        updateTags(containerId, provinces, hiddenInputId);
    } else {
        postalCodes.splice(index, 1);
        updateTags(containerId, postalCodes, hiddenInputId);
    }
}

function updateDeliveryPreview() {
    const minDays = parseInt($('#delivery_days_min').val());
    const maxDays = parseInt($('#delivery_days_max').val());
    
    if (minDays && maxDays) {
        $('#delivery-preview').show();
        if (minDays === maxDays) {
            $('#preview-text').text(minDays + ' días hábiles');
        } else {
            $('#preview-text').text(minDays + ' a ' + maxDays + ' días hábiles');
        }
    } else {
        $('#delivery-preview').hide();
    }
}

$("#shippingZoneForm").submit(function(event){
    event.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("shipping-zones.store") }}',
        type: 'post',
        data: element.serializeArray(),
        dataType: 'json',
        success: function(response){
            $("button[type=submit]").prop('disabled', false);
            
            if (response["status"] == true) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: response.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = "{{ route('shipping-zones.index')}}";
                });
            } else {
                // Clear previous errors
                $('.error').removeClass('invalid-feedback').html('');
                $('input, select, textarea').removeClass('is-invalid');
                
                // Show new errors
                var errors = response['errors'];
                $.each(errors, function(key, value){
                    $(`#${key}`).addClass('is-invalid')
                        .siblings('p.error')
                        .addClass('invalid-feedback')
                        .html(value);
                });
                
                Swal.fire('Error', 'Por favor corrige los errores en el formulario', 'error');
            }
        }, 
        error: function(jqXHR, exception){
            $("button[type=submit]").prop('disabled', false);
            Swal.fire('Error', 'Ocurrió un error al crear la zona de envío', 'error');
        }
    });
});
</script>
@endsection