@extends('layouts.layout')

@section('content')

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

@php
use Modules\Comercial\UI\ViewModels\Pedido\PedidoOptionsAprobarViewModel;

$columns = [
    ['label' => 'ID', 'field' => 'id'],
    ['label' => 'Fecha', 'field' => 'fecDoc'],
    ['label' => 'Cliente', 'field' => 'cliente.nombre'],
    ['label' => 'Vendedor', 'field' => 'vendedor.nombre'],
    [
        'label' => 'Total',
        'field' => 'vlrTotal',
        'render' => fn($row) => '$ '.number_format($row->vlrTotal),
    ],
    [
        'label' => 'Estado',
        'field' => 'estado',
        'render' => fn ($row) =>
            view('comercial::components.pedidos.estado', [
                'estado' => $row->estado
            ])->render(),
    ],
    [
        'label' => 'Acciones',
        'field' => 'acciones',
        'render' => fn ($row) =>
            view('components.ui.option-dropdown-list', [
                'label'   => 'Opciones',
                'icon'    => 'lucide-list',
                'options' => PedidoOptionsAprobarViewModel::make($row)
            ])->render(),
    ],
];
@endphp

<div
    x-data="pedidoActions()"
    @pedido-aprobar.window="aprobarPedido($event.detail.id)"
    @pedido-cancelar.window="cancelarPedido($event.detail.id)"
>

<x-ui.data-table
    :rows="$pedidos"
    :columns="$columns"
    :link="'comercial.pedidos'"
    :filters="$filters"
    :showCreate="false"
/>
</div>

<script>
function pedidoActions() {
    return {

        async aprobarPedido(id) {
            const confirm = await Swal.fire({
                title: '¿Aprobar pedido?',
                text: 'El pedido será aprobado',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, aprobar',
                cancelButtonText: 'Cancelar'
            });

            if (!confirm.isConfirmed) return;

            await this.sendRequest(
                '{{ route("comercial.aprobacion-pedidos.approve", ":id") }}'.replace(':id', id),
                'Pedido aprobado correctamente'
            );
        },

        async cancelarPedido(id) {
            const confirm = await Swal.fire({
                title: '¿Cancelar pedido?',
                text: 'El pedido será cancelado',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, cancelar',
                cancelButtonText: 'Cancelar'
            });

            if (!confirm.isConfirmed) return;

            await this.sendRequest(
                '{{ route("comercial.aprobacion-pedidos.cancel", ":id") }}'.replace(':id', id),
                'Pedido cancelado correctamente'
            );
        },

        async sendRequest(url, successMessage) {
            try {
                const csrf = document.querySelector('meta[name="csrf-token"]').content;

                const response = await fetch(url, {
                    method: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.message || 'Error del servidor');
                }

                await Swal.fire('Éxito', successMessage, 'success');
                location.reload();

            } catch (error) {
                Swal.fire('Error', error.message, 'error');
            }
        }
    }
}
</script>

<script>
window.addEventListener('pedido-aprobar', e => {
    console.log('EVENTO aprobar:', e.detail)
})

window.addEventListener('pedido-cancelar', e => {
    console.log('EVENTO cancelar:', e.detail)
})
</script>
@endsection