@extends(theme_view('layouts.app'))

@section('title', 'Carrito de Compras')
@section('robots', 'noindex, nofollow')

@section('content')

<!-- Breadcrumbs -->
<div class="breadcrumbs">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <ul>
                    <li class="home"><a href="{{ route('front.home') }}" title="Ir a Inicio">Inicio</a><span>&raquo;</span></li>
                    <li class="category13"><strong>Carrito de Compras</strong></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Page Heading -->
<div class="page-heading">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="page-title">
                    <h2>Carrito de Compras</h2>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Container -->
<div class="main-container col1-layout wow bounceInUp animated">
    <div class="main">
        <div class="cart wow bounceInUp animated">
            <div class="container">
                

                @if (Cart::count() > 0)
                <div class="table-responsive shopping-cart-tbl">
                    <form action="" method="post">
                        @csrf
                        <fieldset>
                            <table id="shopping-cart-table" class="data-table cart-table table-striped">
                                <thead>
                                    <tr class="first last">
                                        <th rowspan="1">&nbsp;</th>
                                        <th rowspan="1"><span class="nobr">Nombre del Producto</span></th>
                                        <th class="a-center" colspan="1"><span class="nobr">Precio Unitario</span></th>
                                        <th rowspan="1" class="a-center">Cantidad</th>
                                        <th class="a-center" colspan="1">Subtotal</th>
                                        <th rowspan="1" class="a-center">&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cartContent as $item)
                                    @php
                                        // Obtener el producto usando CO_ARTI
                                        $product = \App\Models\Stock::where('CO_ARTI', $item->id)->first();
                                    @endphp
                                    <tr class="first last odd" data-rowid="{{ $item->rowId }}">
                                        <td class="image">
                                            <a href="{{ route('front.product', $product ? encodeSlashForUrl($product->CO_ARTI) : '#') }}" title="{{ $item->name }}" class="product-image">
                                                @php
                                                    $hasValidImage = false;
                                                    if($item->options->productImage && $item->options->productImage->image) {
                                                        $imagePath = public_path('uploads/product/small/' . $item->options->productImage->image);
                                                        if(file_exists($imagePath)) {
                                                            $hasValidImage = true;
                                                        }
                                                    }
                                                @endphp
                                                @if($hasValidImage)
                                                    <img src="{{ asset('uploads/product/small/'.$item->options->productImage->image) }}" width="75" alt="{{ $item->name }}">
                                                @else
                                                    <img src="{{ asset('uploads/product/no_image.png') }}" width="75" alt="{{ $item->name }}">
                                                @endif
                                            </a>
                                        </td>
                                        <td>
                                            <h2 class="product-name">
                                                <a href="{{ route('front.product', $product ? encodeSlashForUrl($product->CO_ARTI) : '#') }}">{{ $item->name }}</a>
                                            </h2>
                                        </td>
                                        <td class="a-right">
                                            <span class="cart-price">
                                                <span class="price">${{ number_format($item->price, 2) }}</span>
                                            </span>
                                        </td>
                                        <td class="a-center movewishlist">
                                            <div class="input-group quantity" style="width: 120px; margin: 0 auto;">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default btn-minus sub" data-id="{{ $item->rowId }}">
                                                        <i class="fa fa-minus"></i>
                                                    </button>
                                                </div>
                                                <input type="text" class="input-text qty" value="{{ $item->qty }}" style="text-align: center; width: 50px; border: 1px solid #ddd; margin: 0 5px;" readonly>
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default btn-plus add" data-id="{{ $item->rowId }}">
                                                        <i class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="a-right">
                                            <span class="cart-price">
                                                <span class="price">${{ number_format($item->price * $item->qty, 2) }}</span>
                                            </span>
                                        </td>
                                        <td class="a-center last">
                                            <a href="javascript:void(0)" onclick="deleteItem('{{ $item->rowId }}')" title="Eliminar producto" class="button remove-item">
                                                <span><span>Eliminar</span></span>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="first last">
                                        <td colspan="6" class="a-right last">
                                            <button type="button" title="Continuar Comprando" class="button btn-continue" onclick="continueShopping()">
                                                <span><span>Continuar Comprando</span></span>
                                            </button>
                                            <button type="button" title="Borrar Carrito" class="button btn-empty" onclick="clearCart()">
                                                <span><span>Borrar Carrito</span></span>
                                            </button>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </fieldset>
                    </form>
                </div>

                <!-- Cart Collaterals -->
                <div class="cart-collaterals container">
                    <div class="row">
                        @if(showShippingCalculator())
                        <div class="col-sm-4">
                            <div class="shipping">
                                <h3>Envío y Entrega</h3>
                                <div class="shipping-form">
                                    <p>Ingrese su destino para obtener una estimación de envío.</p>
                                    <form id="shipping-estimate-form">
                                        <div class="form-group">
                                            <label>Código Postal</label>
                                            <input type="text" id="estimate_zip" class="form-control" placeholder="Ej: 1425">
                                        </div>
                                        <div class="form-group">
                                            <label>Provincia</label>
                                            <select id="estimate_state" class="form-control">
                                                <option value="">Seleccione provincia</option>
                                                @php
                                                    $provinces = \App\Services\ShippingCalculator::getArgentinaProvinces();
                                                @endphp
                                                @foreach($provinces as $key => $province)
                                                    <option value="{{ $key }}">{{ $province }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <button type="button" class="button" id="calculate-shipping-btn">
                                            <span>Calcular Envío</span>
                                        </button>
                                    </form>

                                    <div id="shipping-results" style="margin-top: 20px; display: none;">
                                        <h4>Opciones de Envío:</h4>
                                        <div id="shipping-options-list"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="col-sm-4">
                            <div class="discount">
                                <h3>Código de Descuento</h3>
                                <div class="discount-form">
                                    <p>Si tiene un código de descuento, ingréselo aquí.</p>
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Código de cupón">
                                        <span class="input-group-btn">
                                            <button class="button" type="button">Aplicar Cupón</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="totals">
                                <h3>Total del Carrito</h3>
                                <div class="inner">
                                    <table id="shopping-cart-totals-table" class="table shopping-cart-table-total">
                                        <tbody>
                                            <tr>
                                                <td class="a-left" colspan="1">Subtotal</td>
                                                <td class="a-right">
                                                    <span class="price cart-subtotal">${{ Cart::subtotal() }}</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td class="a-left" colspan="1">
                                                    <strong>Total General</strong>
                                                </td>
                                                <td class="a-right">
                                                    <strong><span class="price cart-total">${{ Cart::subtotal() }}</span></strong>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <ul class="checkout">
                                        <li>
                                            <button type="button" title="Proceder al Pago" class="button btn-proceed-checkout" onclick="window.location='{{ route('front.checkout') }}'">
                                                <span>Proceder al Pago</span>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @else
                <div class="row">
                    <div class="col-md-12">
                        <div class="cart-empty" style="padding: 100px 0; text-align: center;">
                            <i class="fa fa-shopping-cart" style="font-size: 80px; color: #ddd; margin-bottom: 30px;"></i>
                            <h3 style="color: #666; margin-bottom: 20px;">Su carrito está vacío</h3>
                            <p style="color: #999; font-size: 16px; margin-bottom: 30px;">No ha agregado ningún producto a su carrito de compras.</p>
                            <button type="button" class="button btn-continue" onclick="window.location='{{ route('front.shop') }}'">
                                <span><span>Comenzar a Comprar</span></span>
                            </button>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
jQuery(document).ready(function($) {
    // Set CSRF token for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });
    
    console.log('Cart JS loaded');
    
    // Show flash messages as toast
    @if(Session::has('success'))
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'success',
            title: '{!! Session::get("success") !!}',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
        });
    @endif
    
    @if(Session::has('error'))
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'error',
            title: '{{ Session::get("error") }}',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
        });
    @endif
    
    // Handle quantity increase
    $('.add').click(function(){
        console.log('Add button clicked');
        var qtyElement = $(this).parent().prev(); // Get the input element
        var qtyValue = parseInt(qtyElement.val());
        console.log('Current quantity:', qtyValue);
        
        if (qtyValue < 100) {
            qtyElement.val(qtyValue + 1);
            var rowId = $(this).data('id');
            var newQty = qtyElement.val();
            console.log('Updating cart with rowId:', rowId, 'newQty:', newQty);
            updateCart(rowId, newQty);
        }
    });

    // Handle quantity decrease
    $('.sub').click(function(){
        console.log('Sub button clicked');
        var qtyElement = $(this).parent().next(); // Get the input element
        var qtyValue = parseInt(qtyElement.val());
        console.log('Current quantity:', qtyValue);
        
        if (qtyValue > 1) {
            qtyElement.val(qtyValue - 1);
            var rowId = $(this).data('id');
            var newQty = qtyElement.val();
            console.log('Updating cart with rowId:', rowId, 'newQty:', newQty);
            updateCart(rowId, newQty);
        }
    });
    
    // Calculate shipping estimate
    $('#calculate-shipping-btn').click(function() {
        console.log('Calculate shipping clicked');
        var postalCode = $('#estimate_zip').val();
        var province = $('#estimate_state').val();
        
        console.log('Postal code:', postalCode, 'Province:', province);
        
        if (!postalCode && !province) {
            Swal.fire('Atención', 'Por favor ingrese código postal o seleccione una provincia', 'warning');
            return;
        }
        
        var $btn = $(this);
        $btn.prop('disabled', true).html('<span><i class="fa fa-spinner fa-spin"></i> Calculando...</span>');
        
        $.ajax({
            url: '{{ route("front.calculateShipping") }}',
            type: 'post',
            data: {
                postal_code: postalCode,
                province: province
            },
            dataType: 'json',
            success: function(response) {
                console.log('Shipping response:', response);
                $btn.prop('disabled', false).html('<span>Calcular Envío</span>');
                
                if (response.status == true && response.options) {
                    var html = '<div class="shipping-options-container">';
                    
                    // Add pickup option first
                    html += '<div class="shipping-option-item" style="padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px;">';
                    html += '<strong><i class="fa fa-store"></i> Retiro en Local</strong>';
                    html += '<span style="float: right; color: #28a745; font-weight: bold;">GRATIS</span>';
                    html += '<div style="font-size: 12px; color: #666; margin-top: 5px;">';
                    html += 'Combatientes de Malvinas 3207<br>';
                    html += 'Esperar número de factura por email';
                    html += '</div>';
                    html += '</div>';
                    
                    // Add calculated shipping options
                    $.each(response.options, function(key, option) {
                        if (option.service !== 'Retiro en Local') {
                            html += '<div class="shipping-option-item" style="padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px;">';
                            html += '<strong><i class="fa fa-truck"></i> ' + option.service + '</strong>';
                            html += '<span style="float: right; color: #f77b71; font-weight: bold;">$' + option.cost + '</span>';
                            html += '<div style="font-size: 12px; color: #666; margin-top: 5px;">';
                            html += 'Tiempo estimado: ' + option.estimated_days;
                            if (option.is_cheapest && option.cost > 0) {
                                html += ' <span class="badge" style="background: #28a745; color: white; padding: 2px 5px; border-radius: 3px;">Más económico</span>';
                            }
                            html += '</div>';
                            html += '</div>';
                        }
                    });
                    
                    html += '</div>';
                    html += '<div style="margin-top: 15px; padding: 10px; background: #f0f0f0; border-radius: 5px;">';
                    html += '<i class="fa fa-info-circle"></i> Los costos de envío son estimados y pueden variar según el peso y volumen del pedido.';
                    html += '</div>';
                    
                    $('#shipping-options-list').html(html);
                    $('#shipping-results').fadeIn();
                } else {
                    $('#shipping-results').hide();
                    Swal.fire('Sin cobertura', 'No hay opciones de envío disponibles para la zona ingresada', 'info');
                }
            },
            error: function(xhr, status, error) {
                console.error('Shipping calculation error:', error);
                $btn.prop('disabled', false).html('<span>Calcular Envío</span>');
                Swal.fire('Error', 'No se pudo calcular el envío. Por favor intente nuevamente.', 'error');
            }
        });
    });
    
    // Auto-calculate when province changes
    $('#estimate_state').change(function() {
        if ($(this).val()) {
            $('#calculate-shipping-btn').click();
        }
    });
});

// Funciones globales que necesitan estar fuera del document.ready
window.updateCart = function(rowId, qty) {
    console.log('updateCart called with rowId:', rowId, 'qty:', qty);
    jQuery.ajax({
        url: '{{ route("front.updateCart") }}',
        type: 'post',
        data: {rowId: rowId, qty: qty},
        dataType: 'json',
        success: function(response){
            console.log('Update success:', response);
            // Mostrar toast de éxito y recargar
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Carrito actualizado exitosamente',
                showConfirmButton: false,
                timer: 1500,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            }).then(() => {
                window.location.href = '{{ route("front.cart") }}';
            });
        },
        error: function(xhr, status, error) {
            console.error('Update error:', error);
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: 'No se pudo actualizar el carrito',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        }
    });
}

window.deleteItem = function(rowId) {
    Swal.fire({
        title: '¿Está seguro?',
        text: "¿Desea eliminar este producto del carrito?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            jQuery.ajax({
                url: '{{ route("front.deleteItem.cart") }}',
                type: 'post',
                data: {rowId: rowId},
                dataType: 'json',
                success: function(response) {
                    // Mostrar toast de éxito y recargar
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: 'Producto eliminado del carrito',
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true
                    }).then(() => {
                        window.location.href = '{{ route("front.cart") }}';
                    });
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        title: 'No se pudo eliminar el producto',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true
                    });
                }
            });
        }
    });
}

window.continueShopping = function() {
    // Check if there's a last visited category in session/localStorage
    var lastCategory = localStorage.getItem('lastVisitedCategory');
    
    if (lastCategory) {
        // If we have a last visited category, go there
        window.location.href = lastCategory;
    } else {
        // Otherwise, go to general shop
        window.location.href = '{{ route("front.shop") }}';
    }
}

window.clearCart = function() {
    Swal.fire({
        title: '¿Está seguro?',
        text: "Se eliminarán todos los productos del carrito",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, borrar todo',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Borrando carrito...',
                text: 'Por favor espere',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });
            
            jQuery.ajax({
                url: '{{ route("front.clearCart") }}',
                type: 'post',
                data: {},
                dataType: 'json',
                success: function(response) {
                    Swal.fire({
                        title: 'Carrito borrado',
                        text: 'Todos los productos han sido eliminados',
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = '{{ route("front.cart") }}';
                    });
                },
                error: function(xhr, status, error) {
                    Swal.fire(
                        'Error',
                        'No se pudo borrar el carrito. Por favor intente nuevamente.',
                        'error'
                    );
                }
            });
        }
    });
}
</script>
@endpush