@extends('layouts.layout')

@section('title', 'Crear Cotización')

@section('content')

@include('components.js.confirm-action')
@include('components.js.cancel-action')

<x-ui.title text="{{ $title }}" />

<div 
    x-data="pedidoUpdate(
        @js($pedidoDetalle),
        {{ $pedidoEncabezado->id }},
        {{ $pedidoEncabezado->idCli }}
    )"
    x-init="init()"
    @update-items.window="items = $event.detail"
>

    {{-- FORMULARIO PRINCIPAL --}}
    <x-ui.card class="mt-4 mb-4">   
        <x-ui.form 
            action="{{ route($link.'.update', $pedidoEncabezado->id ) }}"
            method="POST"
            formMethod="PUT"
            x-ref="formPedido"
            class="space-y-4"
        >
            <x-ui.row gap="6">

                <x-ui.col xs="12" md="12" lg="4">
                    <x-ui.label value="Cliente" />
                    <x-ui.select
                        name="idCli"
                        :options="$clientes"
                        value="{{ $pedidoEncabezado->idCli }}"
                        x-model="clienteId"
                        @change="onClienteChange($event.target.value)"
                    />
                </x-ui-col>

                <x-ui.col xs="12" md="12" lg="4">
                    <x-ui.label value="Forma de pago" />
                    <x-ui.select
                        name="idFor"
                        :options="$formasPago"
                        value="{{ $pedidoEncabezado->idFor }}"
                    />
                </x-ui-col>

                <x-ui.col xs="12" md="12" lg="4">
                    <x-ui.label value="Centro de costos" />
                    <x-ui.select
                        name="idCcos"
                        :options="$centrosCosto"
                        value="{{ $pedidoEncabezado->idCcos }}"
                    />
                </x-ui-col>

            </x-ui.row>
            
            <x-comercial::pedidos.cliente-info />
            
            <x-ui.row>
                <x-ui.col xs="12" md="12" lg="12">
                    <x-ui.label for="notas" value="Comentario" />
                    <x-ui.textarea
                        name="comen"
                        rows="4"
                        placeholder="Escriba una observación..."
                        value="{{ $pedidoEncabezado->comen}}"
                    />
                </x-ui-col>
            </x-ui.row>
        </x-ui-form>

    </x-ui.card>

    {{-- TABLA DE ITEMS --}}
    <x-ui.card class="mt-4 mb-4">
   @php
        $columns = [
            [
                'id_field' => 'id',
                'label'=>'Articulo',
                'field'=> 'articulo', 
                'searchable' => true, 
                'width' => 'w-[28rem]',
                'map' => [
                    'id' => 'id',
                    'nombre' => 'articulo',
                    'precio1' => 'precio1',
                    'idIva' => 'idIva',
                    'iva' => 'iva',
                    'idPres' => 'idPres',
                ],
                   'render_under' => [  // 👈 NUEVO
        [
            'label' => 'Presentación',
            'field' => 'idPres',
            'type'  => 'select',
            'options' => $presentaciones,
                'disabled' => true, // <-- Esto lo bloquea
        ],
        [
            'label' => 'Impuesto',
            'field' => 'iva',
            'type'  => 'select',
            'options' => $tarifas,
                'disabled' => true, // <-- Esto lo bloquea
        ],
    ]
            ],
          
            [
                'label'=>'Precio', 
                'field'=>'precio1', 
                'type' => 'number',
                'format_prefix'=>'$',
                'width' => 'w-38',
            ],
            [
                'label'=>'Cantidad',
                'field'=>'cantidad', 
                'type' => 'number',
                'width' => 'w-[8rem]',
            ],
            [
                'label'=>'Desc',
                'field'=>'descuCom', 
                'type' => 'number', 
                'format_prefix'=>'%',
                'width' => 'w-[8rem]',
            ],
        
            [
                'label'=>'Total',
                'field'=>'subtotal_neto',
                'formula'=> '(precio1 * cantidad) 
        - ((precio1 * cantidad) * (descuCom / 100)) 
        + (((precio1 * cantidad) - ((precio1 * cantidad) * (descuCom / 100))) * (iva / 100))',
                'format_prefix'=>'$',
                'width' => 'w-38',
            ],
        ];
        @endphp

       
        <x-ui.data-table-dynamic 
            :rows="$pedidoDetalle"
            :columns="$columns" 
            type="basic" 
            x-model="items"
            event-name="update-items"
            :search-url="url('comercial/pedidos/items/search')"
            extra-search-params="extraSearchParams" 
        />

        {{-- O con Alpine.js --}}
        <div x-data="{ showTotales: {{ count(old('items', [])) > 0 ? 'true' : 'false' }} }"
            @update-items.window="showTotales = $event.detail.length > 0">
    
            <template x-if="showTotales">

                <x-ui.total-detail
                    :data="[
                        'subtotal' => $pedidoEncabezado->vlrBruto,
                        'descuento' => $pedidoEncabezado->vlrDescuento ,
                        'iva' => $pedidoEncabezado->vlrIva ,
                        'total' => $pedidoEncabezado->vlrTotal,
                    ]"
                    :config="[
                        'precio' => 'precio1',
                        'cantidad' => 'cantidad',
                        'descuento' => 'descuCom',
                        'iva' => 'iva'
                    ]"
                />
                
                <x-ui.button-save-doc   
                    icon="lucide-save" 
                    label="Guardar pedido"
                    @click="submitPedido($refs.formPedido)" 
                />
                
            </template>

        </div>

    </div>

    </x-ui.card>

    {{-- BOTÓN ATRÁS --}}
    <x-ui.button-back
        color="Atrás"
        href="{{ url('comercial/pedidos') }}"
    />

</div>

<script>
function pedidoUpdate(
        itemsIniciales = [],
        pedidoId,  
        idCli
    ) {

    return {
        pedidoId:pedidoId,

        items: itemsIniciales.map(item => ({
            ...item,
            item_id: item.item_id ?? null,
        })),

        clienteId: idCli ?? null,
        clienteInfo: null,
        pedido: {
            orden_compra: '',
            dias_plazo: 0,
        },
        loadingCliente: false,

        async init() {
            if (this.clienteId) {
                await this.onClienteChange(this.clienteId, pedidoId);
            }
        },


        async submitPedido(formElement) {

            // Primero validamos que haya items
            if (this.items.length === 0) {
            Swal.fire({
                title: '¡Atención!',
                text: 'Debes agregar al menos un producto',
                icon: 'warning',
                confirmButtonColor: '#7c3aed',
                confirmButtonText: 'Entendido'
            });
            return;
        }

        // Mostrar confirmación con SweetAlert
        const result = await Swal.fire({
        title: '¿Guardar pedido?',
        text: '¿Estás seguro de que deseas guardar este pedido?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#ea580c', // orange-600
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Sí, guardar',
        cancelButtonText: 'Cancelar',
        showLoaderOnConfirm: true,
        preConfirm: async () => {
            try {
                // ✅ LIMPIEZA: Enviamos solo los datos necesarios
                const itemsLimpios = this.items.map(row => {
                    const { results, loading, showSearch, ...datos } = row;
                    return datos;
                });

                const formData = new FormData(formElement);
                {{-- formData.append('items', JSON.stringify(itemsLimpios)); --}}

                if (this.clienteInfo?.cliente) {
                    formData.append('idLista', this.clienteInfo.cliente.idLista ?? '');
                    formData.append('idVen', this.clienteInfo.cliente.idVen ?? '');
                    formData.append('idSitio', this.clienteInfo.cliente.idSitio ?? '');
                }

                formData.append('numOrd', this.pedido.orden_compra ?? '');
                formData.append('diasPlazo', this.pedido.dias_plazo ?? 0);

                 // FORMA CORRECTA
                itemsLimpios.forEach((item, index) => {
                    Object.keys(item).forEach(key => {
                        formData.append(`items[${index}][${key}]`, item[key]);
                    });
                });

                const res = await fetch(formElement.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: formData
                });

                const json = await res.json();
                
                if (!res.ok) {
                    // Si hay errores de validación de Laravel (422)
                    if (json.errors) {
                        const errores = Object.values(json.errors).flat().join('\n');
                        throw new Error('Error de validación:\n' + errores);
                    }
                    throw new Error(json.message || 'Error del servidor');
                }
                
                return json; // Retornar respuesta para procesar después
                
            } catch (error) {
                Swal.showValidationMessage(
                    `Error: ${error.message}`
                );
                return null;
            }
        },
        allowOutsideClick: () => !Swal.isLoading()
    });

    // Si se confirmó y todo salió bien
    if (result.isConfirmed && result.value) {
        Swal.fire({
            title: '¡Éxito!',
            text: 'Cotización guardada correctamente',
            icon: 'success',
            confirmButtonColor: '#10b981',
            confirmButtonText: 'Aceptar'
        }).then(() => {
            // Redirigir después de guardar
            window.location.href = '{{ route("comercial.pedidos.index") }}';
        });

    }

    },
    async onClienteChange(id, pedidoId = null) {
            if (!id) {
                this.clienteInfo = null;
                return;
            }

            this.loadingCliente = true;

            try {

                   // Construimos la URL base
        let url = `{{ route('comercial.pedidos.info-cliente', ':id') }}`
            .replace(':id', id);

        // 👇 Si existe pedidoId lo agregamos como query string
        if (pedidoId) {
            url += `?pedido_id=${pedidoId}`;
        }

                const res = await fetch(url, {
            method: 'GET',
            headers: { 'Accept': 'application/json' }
        });

                if (!res.ok) {
                    throw new Error('No se pudo cargar el cliente');
                }

                this.clienteInfo = await res.json();

            } catch (e) {
                console.error(e);
                this.clienteInfo = null;
            } finally {
                this.loadingCliente = false;
            }
        },
          extraSearchParams(row) {

    if (!this.clienteInfo?.cliente?.idLista) {
        return {
            error: 'El cliente no tiene lista de precios configurada.'
        };
    }

    return {
        idCli: this.clienteId,
        idLista: this.clienteInfo.cliente.idLista,
    };
},
    }

}
</script>

@endsection