@extends('admin.settings.sidebar')
@section('title', __('discordlink::messages.modulename'))
@section('scripts')
    <script src="{{ Vite::asset('resources/global/js/clipboard.js') }}" type="module"></script>
@endsection
@section('setting')
    <div class="card">
        <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">
            {{ __('discordlink::messages.modulename') }}
        </h4>
        <p class="mb-2 font-semibold text-gray-600 dark:text-gray-400">
            {{ __('discordlink::messages.detectedcustomers') }}
        </p>

        <div class="flex flex-col">
            <div class="-m-1.5 overflow-x-auto">
                <div class="p-1.5 min-w-full inline-block align-middle">
                    <div class="border rounded-lg overflow-hidden dark:border-gray-700">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 mb-2">
                <thead>
                <tr>
                    <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('global.name') }}</th>
                    <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('discordlink::messages.discordid') }}</th>
                </tr>
                </thead>
                <tbody  class="divide-y divide-gray-200 dark:divide-gray-700">
                @foreach($customers as $customer)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
                            <a href="{{ route('admin.customers.show', ['customer' => $customer]) }}">
                                {{ $customer->excerptFullName() }}</span>
                            </a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">{{ $customer->getMetadata('social_discord') }}</td>
                    </tr>
                @endforeach
                @if ($customers->isEmpty())
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" colspan="2">{{ __('discordlink::messages.nocustomers', ['type' => strtolower(__('discordlink::messages.detection_types.' . setting('discordlink_detection_type', 'active_customers')))]) }}</td>
                    </tr>
                @endif
                </tbody>
            </table>
                    </div>
                </div>
                {{ $customers->links('admin.shared.layouts.pagination') }}
            </div>
        </div>
        <div class="mt-2">
            <form method="POST" action="{{ route('admin.discordlink.settings') }}">
                @csrf
                <nav class="relative z-0 flex border rounded-xl overflow-hidden dark:border-slate-700" aria-label="Tabs" role="tablist">
                    <button type="button" class="hs-tab-active:border-b-blue-600 hs-tab-active:text-gray-900 dark:hs-tab-active:text-white relative dark:hs-tab-active:border-b-blue-600 min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-l-neutral-700 dark:border-b-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-400 active" id="bar-with-underline-item-1" data-hs-tab="#bar-with-underline-1" aria-controls="bar-with-underline-1" role="tab">
                        {{ __('discordlink::messages.community.installation') }}
                    </button>
                    <button type="button" class="hs-tab-active:border-b-blue-600 hs-tab-active:text-gray-900 dark:hs-tab-active:text-white relative dark:hs-tab-active:border-b-blue-600 min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-l-neutral-700 dark:border-b-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-400" id="manual-installation" data-hs-tab="#manual-installation-tab" aria-controls="manual-installation" role="tab">
                        {{ __('discordlink::messages.manual.installation') }}
                    </button>
                </nav>

                <div class="mt-3">
                    <div id="bar-with-underline-1" role="tabpanel" aria-labelledby="bar-with-underline-item-1">
                        <ul class="relative flex flex-col md:flex-row gap-2">
                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step1') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {!! __('discordlink::messages.community.step1text') !!}
                                    </p>
                                </div>
                            </li>
                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step2') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {!! __('discordlink::messages.community.step2text') !!}
                                    </p>
                                </div>
                            </li>

                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step3') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {{ __('discordlink::messages.community.step3text') }}
                                    </p>
                                </div>
                            </li>

                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step4') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {{ __('discordlink::messages.community.step4text') }}
                                    </p>
                                </div>
                            </li>
                        </ul>

                        <div class="flex rounded-lg shadow-sm mt-4">
                            <input type="text" readonly class="input-text" id="discordlink_command" value="{{ $command }}">
                            <button type="button" data-clipboard-target="#discordlink_command" data-clipboard-action="copy" data-clipboard-success-text="Copied" class=" js-clipboard w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-blue-600 text-white hover:bg-blue-700  dark:focus:ring-1 dark:focus:ring-gray-600">
                                <svg class="js-clipboard-default w-4 h-4 group-hover:rotate-6 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
                                <svg class="js-clipboard-success hidden w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </button>
                        </div>
                    </div>
                    <div id="manual-installation-tab" class="hidden" role="tabpanel" aria-labelledby="manual-installation">
                        <ul class="relative flex flex-col md:flex-row gap-2">
                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step1') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {!! __('discordlink::messages.manual.step1text') !!}
                                    </p>
                                </div>
                            </li>
                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step2') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {!! __('discordlink::messages.manual.step2text') !!}
                                    </p>
                                </div>
                            </li>

                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step3') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {{ __('discordlink::messages.manual.step3text') }}
                                    </p>
                                </div>
                            </li>

                            <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
                                <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
                                    <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        {{ __('discordlink::messages.step4') }}
      </span>
                                    <p class="text-sm text-gray-500">
                                        {{ __('discordlink::messages.manual.step4text') }}
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="flex rounded-lg shadow-sm mt-4">
                            <input type="text" readonly class="input-text" id="discordlink_command2" value="{{ $token }}">
                            <button type="button" data-clipboard-target="#discordlink_command2" data-clipboard-action="copy" data-clipboard-success-text="Copied" class=" js-clipboard w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-blue-600 text-white hover:bg-blue-700  dark:focus:ring-1 dark:focus:ring-gray-600">
                                <svg class="js-clipboard-default w-4 h-4 group-hover:rotate-6 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
                                <svg class="js-clipboard-success hidden w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-4 mt-4">
                    <div>
                        @include('admin/shared/input', ['name' => 'discordlink_invitation', 'label' => __('discordlink::messages.invitation'), 'value' => setting('discordlink_invitation')])
                    </div>


                    <div>
                        @include('admin/shared/input', ['name' => 'discordlink_guildid', 'label' => __('discordlink::messages.guildid'), 'value' => setting('discordlink_guildid')])
                    </div>

                    <div>
                        @include('admin/shared/select', ['name' => 'discordlink_detection_type', 'label' => __('discordlink::messages.detection_type'), 'value' => setting('discordlink_detection_type', 'active_customers'), 'options' => $detectionTypes])
                    </div>
                </div>

                <div class="flex items-center justify-between mt-3">
                    <button type="submit" class="btn btn-primary">{{ __('global.save') }}</button>
                    <button type="submit" class="btn btn-danger confirmation-popup" name="dropkey">{{ __('discordlink::messages.dropkey') }}</button>
                </div>
            </form>
        </div>

    </div>

@endsection