@extends('layouts.layout')

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

@section('content')

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

<div 
    x-data="pedidoCreate()" 
    @update-items.window="items = $event.detail"
>

    {{-- FORMULARIO PRINCIPAL --}}
    <x-ui.card class="mt-4 mb-4">   
        <x-ui.form 
            action="{{ route($link.'.store') }}"
            method="POST"
            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="{{ old('idCli') }}"
                        x-model="clienteId"
                        @change="onClienteChange($event.target.value,0)"
                    />
                </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="{{ old('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="{{ old('idCcos') }}"
                    />
                </x-ui-col>

            </x-ui.row>
            
            <x-comercial::pedidos.cliente-info />
            
            <x-ui.row>
                <x-ui.col xs="12" md="12" lg="4">
                    <x-ui.label for="notas" value="Comentario" />
                    <x-ui.textarea
                        name="comen"
                        rows="4"
                        placeholder="Escriba una observación..."
                    />
                </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="[]"
            :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
                    :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 pedidoCreate() {
    return {
        items: [],
        clienteId: null,
        clienteInfo: null,
        listaSeleccionada: null,
        pedido: {
            orden_compra: '',
            dias_plazo: 0,
        },
        loadingCliente: false,

        async submitPedido(formElement) {

                            // Validaciones obligatorias
if (!this.clienteInfo?.cliente?.idSitio) {
    await Swal.fire({
        icon: 'warning',
        title: 'Campo obligatorio',
        text: 'Debe seleccionar un sitio de entrega',
        confirmButtonColor: '#ea580c'
    });
    return;
}

if (!this.clienteInfo?.cliente?.idVen) {
    await Swal.fire({
        icon: 'warning',
        title: 'Campo obligatorio',
        text: 'Debe seleccionar un vendedor',
        confirmButtonColor: '#ea580c'
    });
    return;
}


            // 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 y siempre enviamos el pedidoId
        let url = `{{ route('comercial.pedidos.info-cliente', ':id') }}`.replace(':id', id);
        url += `?pedido_id=${pedidoId}`; // 🔹 siempre lo agregamos

        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();

                this.listaSeleccionada = this.clienteInfo?.cliente?.idLista ?? null;



            } 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