@props([
    'stripes' => []
])

@php
    $stripesArray = json_decode(html_entity_decode($stripes), true);

@endphp

<div x-data="{ open: false, loading: false }">
    <!-- Botón para abrir el modal -->
    <x-button @click="open = true" label="Set Percentages"/>

    <!-- Modal -->
    <div x-show="open" class="fixed inset-0 flex items-center justify-center bg-black/75">
        <div class="bg-neutral-900 p-6 rounded-lg shadow-lg">
            <table class="w-full">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Percentage</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($stripesArray as $index => $stripe)
                        <tr class="stripe-percentage-controller mt-4 bg-neutral-900 transition-colors *:p-4 hover:bg-neutral-800">
                            <td>{{ $stripe['name'] }}</td>
                            <td>
                                <x-input
                                    type="number"
                                    name="percentage"
                                    value="{{ $stripe['percentage'] }}"
                                    class="w-full"
                                />
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Botones dentro del modal -->
            <div class="flex justify-between mt-4">
                <x-button @click="open = false" variant="danger" label="Cerrar"/>

                <x-button
                    @click="updatePercentages(); open = false"
                    label="Aceptar"
                    variant="success"
                />
            </div>
        </div>
    </div>

    <script>
        function updatePercentages() {

            let stripePercentage = document.querySelectorAll('.stripe-percentage-controller');
            let stripePercentageArray = Array.from(stripePercentage).map((element) => {
                return {
                    name: element.children[0].innerText,
                    percentage: parseInt(element.children[1].children[0].children[1].value)
                }
            });

            // check if the sum of the percentages is 100
            let sum = stripePercentageArray.reduce((acc, current) => acc + current.percentage, 0);
            if (sum !== 100) {
                alert('The sum of the percentages must be 100');
                return;
            }

            this.loading = true;
            //let dataJson = ;

            // Aquí creas la solicitud POST
            axios.post(`{{env('PAYMENTS_URL')}}` + '/api/set-percentages', {
                pass: '-i!r%pLIS',
                data: stripePercentageArray
            })
            .then((response) => {
                window.location.href = '/config';
            })
            .catch((error) => {
                console.error(error);
                this.loading = false; // Desactiva el estado de carga en caso de error
            });
        }
    </script>
</div>