@extends('admin.settings.sidebar')
@section('title', __('discordgift::messages.modulename'))
@section('scripts')
    <script src="{{ Vite::asset('resources/global/js/flatpickr.js') }}" type="module"></script>
    <script src="{{ Vite::asset('resources/global/js/admin/customcanvas.js')  }}" type="module"></script>

@endsection
@section('setting')
    <div class="card mb-2">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
            {{ __('discordgift::messages.admin.graph.title') }}
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
            {{ __('discordgift::messages.admin.graph.description') }}
        </p>
        @if ($graph_data === '[]')
            <p class="text-red-500 dark:text-red-400">
                {{ __('global.no_results') }}
            </p>
        @else
        <canvas height="140" is="custom-canvas" data-titles='[["{{ __('giftcard::messages.usage') }}"]]' data-labels='{!! $graph_labels !!}' data-backgrounds='["#00a65a"]' data-set='{!! $graph_data !!}' data-type="line" data-suffix="" title="{{ __('discordgift::messages.admin.graph.title') }}" data-hide-x-labels="true"></canvas>
        @endif
    </div>
    <div class="card">
        <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">
            {{ __('admin.settings.title') }}
        </h4>
        <p class="mb-2 font-semibold text-gray-600 dark:text-gray-400">
            {{ __('discordgift::messages.admin.settings.description') }}
        </p>

        <form action="{{ route('admin.discordgift.settings') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <!-- Webhook URL -->
                    <div>
                        @include('admin/shared/input', [
                            'label' => __('discordgift::messages.admin.settings.fields.webhook_url'),
                            'name' => 'discordgift_webhook_url',
                            'value' => setting('discordgift_webhook_url')
                        ])
                    </div>

                    <!-- Minimum Amount -->
                    <div>
                        @include('admin/shared/input', [
                            'label' => __('discordgift::messages.admin.settings.fields.minimum_amount'),
                            'name' => 'discordgift_minimum_amount',
                            'value' => setting('discordgift_minimum_amount')
                        ])
                    </div>

                    <!-- Maximum Amount -->
                    <div>
                        @include('admin/shared/input', [
                            'label' => __('discordgift::messages.admin.settings.fields.maximum_amount'),
                            'name' => 'discordgift_maximum_amount',
                            'value' => setting('discordgift_maximum_amount')
                        ])
                    </div>

                    <!-- Hours Between Gifts -->
                    <div>
                        @include('admin/shared/input', [
                            'label' => __('discordgift::messages.admin.settings.fields.hours_between_gifts'),
                            'name' => 'discordgift_hours_between_gifts',
                            'value' => setting('discordgift_hours_between_gifts')
                        ])
                    </div>

                <!-- Expiration -->
                <div>
                    @include('admin/shared/input', [
                        'label' => __('discordgift::messages.admin.settings.fields.expiration'),
                        'name' => 'discordgift_expiration',
                        'value' => setting('discordgift_expiration')
                    ])
                </div>

                <!-- Max Uses -->
                <div>
                    @include('admin/shared/input', [
                        'label' => __('discordgift::messages.admin.settings.fields.max_uses'),
                        'name' => 'discordgift_max_uses',
                        'value' => setting('discordgift_max_uses')
                    ])
                </div>

                <div>
                    @include('admin/shared/flatpickr', [
                        'label' => __('discordgift::messages.admin.settings.fields.next_gift'),
                        'name' => 'discordgift_next_gift',
                        'value' => setting('discordgift_next_gift'),
                    ])
                </div>

                    <!-- Show Timer -->
                    <div>
                        @include('admin/shared/checkbox', [
                            'label' => __('discordgift::messages.admin.settings.fields.show_timer'),
                            'name' => 'discordgift_show_timer',
                            'checked' => setting('discordgift_show_timer')
                        ])
                    </div>
                <div class="col-span-3">
                    <!-- Trigger On Used -->
                    <div>
                        @include('admin/shared/checkbox', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_used'),
                            'name' => 'discordgift_trigger_on_used',
                            'checked' => setting('discordgift_trigger_on_used')
                        ])
                    </div>

                    <!-- Trigger On Used Message -->
                    <div id="trigger-on-used-message" class="hidden">
                        @include('admin/shared/textarea', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_used_message'),
                            'name' => 'discordgift_trigger_on_used_message',
                            'value' => setting('discordgift_trigger_on_used_message'),
                            'rows' => 10,

                        ])
                    </div>

                    <!-- Trigger On Start -->
                    <div>
                        @include('admin/shared/checkbox', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_start'),
                            'name' => 'discordgift_trigger_on_start',
                            'checked' => setting('discordgift_trigger_on_start')
                        ])
                    </div>

                    <!-- Trigger On Start Message -->
                    <div id="trigger-on-start-message" class="hidden">
                        @include('admin/shared/textarea', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_start_message'),
                            'name' => 'discordgift_trigger_on_start_message',
                            'value' => setting('discordgift_trigger_on_start_message'),
                            'rows' => 10,

                        ])
                    </div>

                    <!-- Trigger On End -->
                    <div>
                        @include('admin/shared/checkbox', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_end'),
                            'name' => 'discordgift_trigger_on_end',
                            'checked' => setting('discordgift_trigger_on_end')
                        ])
                    </div>

                    <!-- Trigger On End Message -->
                    <div id="trigger-on-end-message" class="hidden">
                        @include('admin/shared/textarea', [
                            'label' => __('discordgift::messages.admin.settings.fields.trigger_on_end_message'),
                            'name' => 'discordgift_trigger_on_end_message',
                            'value' => setting('discordgift_trigger_on_end_message'),
                            'rows' => 10,
                        ])
                    </div>

                </div>
                </div>
                @method('PUT')
            <button type="submit" class="btn btn-primary mt-3 ">{{ __('global.save') }}</button>
        </form>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggleFields = [
            { checkbox: '[name="discordgift_trigger_on_used"]', field: '#trigger-on-used-message' },
            { checkbox: '[name="discordgift_trigger_on_start"]', field: '#trigger-on-start-message' },
            { checkbox: '[name="discordgift_trigger_on_end"]', field: '#trigger-on-end-message' },
        ];

        toggleFields.forEach(({ checkbox, field }) => {
            const checkboxElement = document.querySelector(checkbox);
            const fieldElement = document.querySelector(field);

            function toggleField() {
                fieldElement.style.display = checkboxElement.checked ? 'block' : 'none';
            }

            // Initial toggle on page load
            toggleField();

            // Add event listener for changes
            checkboxElement.addEventListener('change', toggleField);
        });
    });
</script>
@endsection