@extends('layouts.base')

@section('title', 'Panel - Config')

@section('content')
    <main class="p-4">
        <div class="mb-8">
            <h1 class="font-bold text-4xl">Config</h1>

            <p class="text-neutral-400">
                Stripe configuration
            </p>
        </div>

        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-8">
            <div class="*:w-full w-full sm:w-auto sm:*:w-auto">
                <x-a label="Go to Stats" href="{{ route('stats.index') }}" />
            </div>
            <div class="*:w-full flex  gap-2 w-full sm:w-auto sm:*:w-auto">
                <x-new-stripe />
                <x-set-percentage stripes={{$stripes}} />
            </div>
        </div>

        <div class="mt-12 overflow-x-auto">
            <table class="min-w-full border-separate border-spacing-y-4 overflow-hidden rounded-xl">
                <thead class="bg-neutral-900">
                    <tr class="text-left capitalize *:p-4 *:font-normal">
                        <th class="rounded-l-xl">ID</th>

                        <th>Name</th>

                        <th>Percentage</th>

                        <th>Counter</th>

                        <th>Active</th>

                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($stripes as $stripe)
                        <tr class="mt-4 bg-neutral-900 transition-colors *:p-4 hover:bg-neutral-800">
                            <td class="rounded-l-xl">
                                {{ $stripe->id }}
                            </td>

                            <td>
                                {{ $stripe->name }}
                            </td>

                            <td>
                                {{ $stripe->percentage }} %
                            </td>

                            <td>
                                {{ $stripe->counter }}
                            </td>

                            <td>
                                {{ $stripe->active ? 'Yes' : 'No' }}
                            </td>

                            <td class="rounded-r-xl w-32">
                                <div class="flex gap-2 whitespace-nowrap">
                                    <x-button
                                            class="toggle-active"
                                            label="Toggle Active"
                                        />
                                        <x-button label="Delete" variant="danger" class="delete-stripe" />
                                </div>
                            </td>

                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if (count($stripes) === 0)
                <div class="text-center p-4 bg-neutral-900 rounded-xl">
                    <p class="text-neutral-400">
                        No stripes found
                    </p>
                </div>
            @endif
        </div>
    </main>


    <script>
        document.querySelectorAll('.toggle-active').forEach((button) => {
            button.addEventListener('click', () => {

                let stripeId = button.closest('tr').querySelector('td').innerText;

                axios.get(`{{env('PAYMENTS_URL')}}` + `/api/toggle-active?id=${stripeId}&pass=-i!r%pLIS`)
                    .then((response) => {
                        window.location.href = '/config';
                    })
                    .catch((error) => {
                        console.error(error);
                    });

            });
        });

        document.querySelectorAll('.delete-stripe').forEach((button) => {
            button.addEventListener('click', () => {

                let stripeId = button.closest('tr').querySelector('td').innerText;

                axios.delete(`{{env('PAYMENTS_URL')}}` + `/api/delete-stripe?id=${stripeId}&pass=-i!r%pLIS`)
                    .then((response) => {
                        window.location.href = '/config';
                    })
                    .catch((error) => {
                        console.error(error);
                    });

            });
        });
    </script>
@endsection