@extends('layouts.page')


@section('head')
@include('elements.seo', [
'title'=>'Carrito de compras',
'description'=> 'Carrito de compras'
])
@endsection



@section('content')


@if($set_user)
<div class="grid grid-cols-1 w-full gap-y-5 gap-x-5 xl:px-72" x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">


    <div class="border rounded p-5 mt-5">
        <div>
            {{ Aire::open()->route('seller.setclient')}}
            
                <div class='grid grid-cols-1 gap-5'>
            
                    {{ Aire::input('document', 'Documento Cliente: Escribe el NIT sin dígito de verificación')->groupClass('mb-0') }} 
                    {{ Aire::input('zone', 'Zona Sucursal: Diligencia este campo si tu cliente cuenta con varias sucursales')->helpText('*En el siguiente paso verás las direcciones asociadas')->groupClass('mb-0') }} 
                </div>

            <div class="flex items-center  mt-4">
                <x-primary-button>
                    Ingresar
                </x-primary-button>
            </div>
            {{ Aire::close() }}





        </div>
    </div>



</div>
@else

<div class="grid grid-cols-1 w-full gap-y-5 gap-x-5 xl:px-60" x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">


    @if($client)
    {{ Aire::open()->route('seller.removeclient')}}
    <div class="border rounded p-5">
        <div class="flex justify-between">
            <strong>{{$client->name}}</strong>

            <button class="text-slate-500 hover:text-red-500">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                </svg>
            </button>
        </div>
    </div>
    {{ Aire::close() }}
    @endif

    <div class="">

        @if($alertVendors)
        <div class="space-y-2 mb-5">
            @foreach ($alertVendors as $alert)
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                El vendor <strong>{{$alert->name}}</strong> requiere una compra mínima de <strong>${{currency($alert->minimum_purchase)}}</strong> para realizar el pedido compra <strong>${{currency($alert->minimum_purchase - $alert->current)}}</strong> completar esta compra.
            </div>
            @endforeach
        </div>
        @endif

        @if($vendorDiscountAlerts)
        <div class="space-y-2 mb-5">
            @foreach ($vendorDiscountAlerts as $alert)
            <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative" role="alert">
                Agrega <strong>${{currency($alert['needed_amount'])}}</strong> en productos <strong>{{$alert['vendor']->name}}</strong> para recibir un descuento de <strong>{{$alert['discount_percentage']}}%</strong>.
            </div>
            @endforeach
        </div>
        @endif

        <div class="">

            @if($alertVendors)
                <div class="space-y-2 mb-5">
                    @foreach ($alertVendors as $alert)
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                            El vendor <strong>{{$alert->name}}</strong> requiere una compra mínima de <strong>${{currency($alert->minimum_purchase)}}</strong> para realizar el pedido compra <strong>${{currency($alert->minimum_purchase - $alert->current)}}</strong> completar esta compra.
                        </div>
                    @endforeach  
                </div> 
            @endif   
    
            @if($alertTotal)
                <div class="space-y-2 mb-5">
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                            El valor de compra mínima es de <strong>${{currency($min_amount)}}.
                        </div>
                </div> 
            @endif  

        <div class="border rounded p-5">
            <div>
                {{ Aire::open()->route('cart.update')}}

                <h3 class="mb-4">Productos</h3>
                <div class="xl:text-base text-sm space-y-5">
                    @foreach ($products as $key => $product)
                    <div class="grid grid-cols-12 items-top gap-x-2">
                        <a href="{{route('product', $product->slug)}}" class="col-span-2 xl:flex hidden">
                            <img src="{{asset('storage/'.$product->image)}}" alt="">
                        </a>
                        <div class="col-span-4 xl:px-3 px-0 flex flex-col">
                            <a href='{{route('product', $product->slug)}}'>{{$product->name}} </a>
                            <div>
                                <small class="text-slate-700">${{currency($product->calculatedFinalPrice['old'])}}</small>
                                @if($product->variation)
                                <small class="text-slate-700">{{$product->variation->name}} {{$product->item->name}}</small>
                                @endif
                            </div>
                        </div>
                        <div class="xl:col-span-3 col-span-5 px-3 flex flex-col">
                            {{-- <input type="text" value="{{$product->quantity}}" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-primary-500 focus:border-primary-500 block w-full p-2 text-center rounded-sm"> --}}
                            <div class=" py-1 flex items-center border border-qgray-border">
                                <div class="flex justify-between items-center w-full">
                                    <button data-step="{{$product->step}}" type="button" class="increment text-blue1 text-3xl text-qgray w-10">-</button>
                                    <input type="numeric" readonly name='items[]' class="quantity w-10 text-center bg-transparent border-0 text-sm focus:ring-0 focus:outline-none" value="{{$product->quantity}}">
                                    <button data-step="{{$product->step}}" type="button" class="decrement text-blue1 text-3xl  w-10">+</button>
                                </div>
                            </div>

                        </div>
                        <div class="col-span-2 text-right">
                            @if($has_orders)
                            <strong class="">${{currency($product->calculatedFinalPrice['old'] * $product->quantity)}}</strong>
                            @else
                            <strong class="">${{currency($product->calculatedFinalPrice['price'] * $product->quantity)}}</strong>
                            @endif
                            @if($product->calculatedFinalPrice['has_discount'] && !$has_orders)
                            <small class="line-through">${{currency($product->calculatedFinalPrice['old'] * $product->quantity)}}</small>
                            @endif
                        </div>
                        <div class="items-start justify-center flex">
                            <a href={{route('cart.remove', $key)}} class='hover:text-red-500 text-slate-400 mt-1'>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                </svg>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="flex justify-end my-5">
                    <button type="submit" class="bg-orange-600  text-white rounded py-1.5 px-3 text-sm block text-center hover:bg-orange-900">Actualizar</button>
                </div>

                {{ Aire::close() }}

                <!-- Coupon Section -->
                <div class="border-t pt-4 mt-4">
                    @if($appliedCoupon)
                        <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-green-800 font-medium">Cupón aplicado: {{$appliedCoupon['coupon_code']}}</span>
                                    <div class="text-sm text-green-600">
                                        Descuento: ${{currency($appliedCoupon['discount_amount'])}}
                                    </div>
                                </div>
                                <form action="{{route('cart.coupon.remove')}}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-sm">
                                        Remover
                                    </button>
                                </form>
                            </div>
                        </div>
                    @else
                        <div class="mb-4">
                            <form action="{{route('cart.coupon.apply')}}" method="POST">
                                @csrf
                                <div class="flex gap-2">
                                    <input type="text" name="coupon_code" placeholder="Código de cupón" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">
                                    <button type="submit" 
                                            class="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
                                        Aplicar
                                    </button>
                                </div>
                            </form>
                        </div>
                    @endif
                </div>

                <div class="text-sm">
                    <hr class="my-4">

                    @php
                    // Calculate subtotal using the original prices
                    $subtotal = $products->sum(function($product){
                        return $product->calculatedFinalPrice['old'] * $product->quantity;
                    });

                    // Calculate the total after all discounts are applied
                    // (this is what the user will actually pay)
                    $totalAfterDiscounts = $products->sum(function($product){
                        return $product->calculatedFinalPrice['price'] * $product->quantity;
                    });

                    // For display purposes:
                    // - If no coupon: show all discounts in the "Descuento" line
                    // - If coupon: the coupon is shown separately, so "Descuento" shows non-coupon discounts
                    // But since calculatedFinalPrice already includes all discounts (including coupon),
                    // we just calculate the total discount as the difference
                    if(!$has_orders)
                    {
                        // If there's a coupon, we want to show it separately
                        // So we calculate: discount = (subtotal - totalAfterDiscounts) - couponDiscount
                        // This way "Descuento" shows regular discounts, and coupon shows separately
                        $totalDiscount = $subtotal - $totalAfterDiscounts;
                        $couponDiscountAmount = $appliedCoupon ? ($appliedCoupon['discount_amount'] ?? 0) : 0;
                        
                        // If there's a coupon, subtract it from total discount to avoid double-counting
                        // since we'll show it on a separate line
                        $discount = $appliedCoupon ? ($totalDiscount - $couponDiscountAmount) : $totalDiscount;
                    }
                    else{
                        $discount = 0;
                    }
                    @endphp

                    <div class="flex justify-between">
                        <span>Subtotal</span>
                        <strong>
                            ${{currency($subtotal)}}
                        </strong>
                    </div>
                    @if($discount)
                    <div class="flex justify-between">
                        <span>Descuento</span>
                        <strong>
                            -${{currency($discount)}}
                        </strong>
                    </div>
                    @endif
                    @if($appliedCoupon && $appliedCoupon['discount_amount'] > 0)
                    <div class="flex justify-between text-green-600">
                        <span>Descuento cupón ({{$appliedCoupon['coupon_code']}})</span>
                        <strong>
                            -${{currency($appliedCoupon['discount_amount'])}}
                        </strong>
                    </div>
                    @endif
                    <hr class="my-4">
                    @php
                        // The final total is already calculated with all discounts applied
                        $finalTotal = $totalAfterDiscounts;
                    @endphp
                    <div class="flex justify-between">
                        <strong>Total</strong>
                        <strong>${{currency($finalTotal)}}</strong>
                    </div>


                    @if($alertVendors || $alertTotal)
                        <div id="submit-order-button">
                            <submit-order-button :disabled="true"></submit-order-button>
                        </div>
                    @else 
                        {{ Aire::open()->route('cart.process')}}

                            <div class="pt-5 space-y-4">
                                {{ Aire::select($zones, 'zone_id', 'Dirección')->id('states')->value(session('zone_id'))}}

                                <!-- Delivery Method Selection -->
                                {{ Aire::select([
                                    'express' => 'Envío Express',
                                    'tronex' => 'Envío Tronex'
                                ], 'delivery_method', 'Método de Envío')
                                    ->id('delivery_method')
                                    ->value('tronex')
                                }}

                                <!-- Delivery Date Preview -->
                                <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                                    <div class="text-sm text-gray-700">
                                        <strong id="delivery-method-name">Envío Tronex</strong>
                                        <p id="delivery-method-description" class="text-gray-600 mt-1">
                                            Entrega en la próxima ruta asignada (<span id="delivery-date">Calculando...</span>)
                                        </p>
                                    </div>
                                </div>

                                {{Aire::textarea('observations', 'Observaciones')->placeholder('Información adicional')->rows(3)}}
                            </div>

                            <div id="submit-order-button">
                                <submit-order-button></submit-order-button>
                            </div>
                        {{ Aire::close() }}
                        
                    @endif

                </div>



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


</div>
@endif






@endsection


@section('scripts')

<script>
    $(function() {



        const step = 1;

        $('.increment').on('click', function() {
            const step = $(this).data('step')
            const form = $(this).parent()
            const quantityInput = form.find('.quantity')

            let quantity = parseInt(quantityInput.val())
            quantity = quantity - step
            if (quantity < step) {
                quantity = step
            }
            quantityInput.val(quantity)
        })

        $('.decrement').on('click', function() {
            const step = $(this).data('step')
            const form = $(this).parent()
            const quantityInput = form.find('.quantity')

            let quantity = parseInt(quantityInput.val())
            console.log(quantity)
            quantity = quantity + step
            quantityInput.val(quantity)
        })

        // Delivery method change handler
        const deliveryMethodSelect = document.getElementById('delivery_method');
        
        function updateDeliveryInfo() {
            const method = deliveryMethodSelect ? deliveryMethodSelect.value : 'tronex';
            const deliveryMethodName = document.getElementById('delivery-method-name');
            const deliveryMethodDescription = document.getElementById('delivery-method-description');
            
            if (!deliveryMethodName || !deliveryMethodDescription) return;
            
            // Update method name and description
            if (method === 'express') {
                deliveryMethodName.textContent = 'Envío Express';
                deliveryMethodDescription.innerHTML = '2 días hábiles desde la fecha de pedido (<span id="delivery-date">Calculando...</span>)';
            } else {
                deliveryMethodName.textContent = 'Envío Tronex';
                deliveryMethodDescription.innerHTML = 'Entrega en la próxima ruta asignada (<span id="delivery-date">Calculando...</span>)';
            }
            
            // Fetch calculated delivery date from server
            fetch(`/api/delivery-date/${method}`)
                .then(response => response.json())
                .then(data => {
                    const dateSpan = document.getElementById('delivery-date');
                    if (dateSpan && data.date) {
                        dateSpan.textContent = data.date;
                    }
                })
                .catch(error => {
                    console.error('Error fetching delivery date:', error);
                    const dateSpan = document.getElementById('delivery-date');
                    if (dateSpan) {
                        dateSpan.textContent = 'Error al calcular fecha';
                    }
                });
        }

        // Initialize delivery info on page load
        if (deliveryMethodSelect) {
            updateDeliveryInfo();
            deliveryMethodSelect.addEventListener('change', updateDeliveryInfo);
        }
    })
</script>


@endsection