@extends('layouts.admin', ['title' => 'Nova notificação'])

@section('content')
    <form method="POST" action="{{ route('admin.notifications.store') }}" enctype="multipart/form-data"
          class="space-y-6" novalidate>
        @csrf

        <div class="card space-y-8">
            <div>
                <h2 class="text-xl font-bold text-slate-900">Nova notificação</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Envie uma mensagem para todos os influenciadores ou para um grupo específico.
                </p>
            </div>

            @if($errors->any())
                <div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                    <strong>Revise os campos:</strong>
                    <ul class="mt-2 list-disc pl-5">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="grid gap-6 lg:grid-cols-2">
                <div>
                    <label class="input-label mb-3 block">Tipo</label>

                    <div class="grid gap-3 sm:grid-cols-2">
                        @php
                            $types = [
                                'manual' => [
                                    'label' => 'Manual',
                                    'description' => 'Mensagem enviada pelo admin',
                                    'icon' => 'chat',
                                ],
                                'payment' => [
                                    'label' => 'Pagamento',
                                    'description' => 'Avisos sobre pagamentos',
                                    'icon' => 'money',
                                ],
                                'system' => [
                                    'label' => 'Sistema',
                                    'description' => 'Avisos operacionais',
                                    'icon' => 'bell',
                                ],
                                'campaign' => [
                                    'label' => 'Campanha',
                                    'description' => 'Metas, ações e comunicados',
                                    'icon' => 'sparkles',
                                ],
                            ];

                            $oldType = old('type', 'manual');
                        @endphp

                        @foreach($types as $value => $type)
                            <label class="relative cursor-pointer">
                                <input
                                        type="radio"
                                        name="type"
                                        value="{{ $value }}"
                                        class="peer sr-only"
                                        @checked($oldType === $value)
                                >

                                <div class="flex gap-3 rounded-2xl border border-slate-200 bg-white p-4 transition peer-checked:border-slate-950 peer-checked:ring-2 peer-checked:ring-slate-950/10 hover:border-slate-400">
                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-700 peer-checked:bg-slate-950 peer-checked:text-white">
                                        @if($type['icon'] === 'chat')
                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8.625 12h.008m3.359 0H12m3.375 0h.008M21 12c0 4.142-4.03 7.5-9 7.5a10.5 10.5 0 0 1-3.8-.7L3 20.25l1.45-3.625A6.9 6.9 0 0 1 3 12c0-4.142 4.03-7.5 9-7.5s9 3.358 9 7.5Z"/>
                                            </svg>
                                        @elseif($type['icon'] === 'money')
                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 6v12m-3-2.25c.59.79 1.56 1.25 3 1.25 1.75 0 3-.895 3-2.25 0-1.16-.77-1.825-2.55-2.325l-.9-.25C9.77 11.875 9 11.16 9 10c0-1.355 1.25-2.25 3-2.25 1.25 0 2.125.35 2.75 1M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                                            </svg>
                                        @elseif($type['icon'] === 'bell')
                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M14.857 17.082a23.85 23.85 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a3 3 0 0 1-5.714 0"/>
                                            </svg>
                                        @else
                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.091-3.091L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.091-3.091L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.091 3.091L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.091 3.091ZM18.25 7.5 18 8.25l-.25-.75a2.25 2.25 0 0 0-1.5-1.5L15.5 5.75l.75-.25a2.25 2.25 0 0 0 1.5-1.5L18 3.25l.25.75a2.25 2.25 0 0 0 1.5 1.5l.75.25-.75.25a2.25 2.25 0 0 0-1.5 1.5Z"/>
                                            </svg>
                                        @endif
                                    </div>

                                    <div>
                                        <div class="font-semibold text-slate-900">{{ $type['label'] }}</div>
                                        <div class="text-xs text-slate-500">{{ $type['description'] }}</div>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="input-label mb-3 block">Destinatários</label>

                    <div data-recipient-picker class="relative">
                        <button type="button" data-toggle class="input-field flex min-h-[48px] w-full items-center justify-between text-left">
                            <span data-label class="truncate text-slate-700">Selecionar destinatários</span>
                            <svg class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                            </svg>
                        </button>

                        <div data-panel hidden class="absolute z-30 mt-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-xl">
                            <input
                                    type="search"
                                    data-search
                                    class="input-field mb-3"
                                    placeholder="Buscar por nome ou e-mail..."
                            >

                            <div class="max-h-72 space-y-1 overflow-y-auto">
                                <label class="flex cursor-pointer items-center gap-3 rounded-xl p-3 hover:bg-slate-50">
                                    <input type="checkbox" data-all value="__all__" class="h-4 w-4 rounded border-slate-300">
                                    <div>
                                        <div class="font-semibold text-slate-900">Todos os influenciadores ativos</div>
                                        <div class="text-xs text-slate-500">O sistema cria rastreabilidade individual para cada um.</div>
                                    </div>
                                </label>

                                <div class="my-2 border-t border-slate-100"></div>

                                @foreach($influencers as $influencer)
                                    <label
                                            data-item
                                            data-search-text="{{ mb_strtolower($influencer->name . ' ' . $influencer->email) }}"
                                            class="flex cursor-pointer items-center gap-3 rounded-xl p-3 hover:bg-slate-50"
                                    >
                                        <input type="checkbox" data-influencer value="{{ $influencer->id }}" class="h-4 w-4 rounded border-slate-300">
                                        <div>
                                            <div class="font-semibold text-slate-900">{{ $influencer->name }}</div>
                                            <div class="text-xs text-slate-500">{{ $influencer->email }}</div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <div data-hidden-inputs></div>
                    </div>

                    <p class="mt-2 text-xs text-slate-500">
                        Você pode selecionar todos ou escolher influenciadores específicos.
                    </p>
                </div>
            </div>

            <div>
                <label class="input-label">Título</label>
                <input
                        class="input-field"
                        name="title"
                        value="{{ old('title') }}"
                        maxlength="180"
                        required
                        placeholder="Ex.: Pagamento realizado, campanha nova, aviso importante..."
                >
            </div>

            <div>
                <label class="input-label">Mensagem</label>

                <textarea
                        id="notification-body"
                        name="body"
                        class="input-field min-h-[360px]"

                >{{ old('body') }}</textarea>

                <p class="mt-2 text-xs text-slate-500">
                    Use imagens inline para conteúdo visual. Para documentos e comprovantes, prefira anexos.
                </p>
            </div>

            <div>
                <label class="input-label">Anexos</label>
                <input
                        type="file"
                        name="attachments[]"
                        multiple
                        class="input-field"
                >
                <p class="mt-2 text-xs text-slate-500">
                    Até 5 arquivos, conforme limite configurado em NOTIFICATION_ATTACHMENTS_MAX_KB.
                </p>
            </div>

            <div class="flex justify-end gap-3 border-t border-slate-100 pt-6">
                <a href="{{ route('admin.notifications.index') }}" class="btn-secondary">
                    Cancelar
                </a>

                <button class="btn-primary">
                    Enviar notificação
                </button>
            </div>
        </div>
    </form>

    <script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.api_key', 'no-api-key') }}/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const picker = document.querySelector('[data-recipient-picker]');
            const toggle = picker.querySelector('[data-toggle]');
            const panel = picker.querySelector('[data-panel]');
            const label = picker.querySelector('[data-label]');
            const search = picker.querySelector('[data-search]');
            const allCheckbox = picker.querySelector('[data-all]');
            const influencerCheckboxes = Array.from(picker.querySelectorAll('[data-influencer]'));
            const hiddenInputs = picker.querySelector('[data-hidden-inputs]');
            const items = Array.from(picker.querySelectorAll('[data-item]'));

            function refreshRecipients() {
                hiddenInputs.innerHTML = '';

                const selectedInfluencers = influencerCheckboxes.filter(input => input.checked);

                if (allCheckbox.checked) {
                    influencerCheckboxes.forEach(input => {
                        input.checked = false;
                        input.disabled = true;
                    });

                    label.textContent = 'Todos os influenciadores ativos';

                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'recipient_ids[]';
                    input.value = '__all__';
                    hiddenInputs.appendChild(input);

                    return;
                }

                influencerCheckboxes.forEach(input => input.disabled = false);

                if (selectedInfluencers.length === 0) {
                    label.textContent = 'Selecionar destinatários';
                } else if (selectedInfluencers.length === 1) {
                    const row = selectedInfluencers[0].closest('label');
                    label.textContent = row.querySelector('.font-semibold').textContent.trim();
                } else {
                    label.textContent = selectedInfluencers.length + ' influenciadores selecionados';
                }

                selectedInfluencers.forEach(selected => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'recipient_ids[]';
                    input.value = selected.value;
                    hiddenInputs.appendChild(input);
                });
            }

            toggle.addEventListener('click', () => {
                panel.hidden = !panel.hidden;
            });

            document.addEventListener('click', (event) => {
                if (!picker.contains(event.target)) {
                    panel.hidden = true;
                }
            });

            allCheckbox.addEventListener('change', refreshRecipients);
            influencerCheckboxes.forEach(input => input.addEventListener('change', refreshRecipients));

            search.addEventListener('input', () => {
                const term = search.value.trim().toLowerCase();

                items.forEach(item => {
                    item.hidden = term.length > 0 && !item.dataset.searchText.includes(term);
                });
            });

            refreshRecipients();

            tinymce.init({
                selector: '#notification-body',
                height: 420,
                menubar: false,
                language: 'pt_BR',
                plugins: 'link lists image table code autoresize',
                toolbar: 'undo redo | blocks | bold italic underline | forecolor backcolor | bullist numlist | link image table | removeformat | code',
                branding: false,
                automatic_uploads: true,
                images_upload_url: '{{ route('admin.notifications.editor-image-upload') }}',
                images_upload_credentials: true,
                file_picker_types: 'image',
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                content_style: 'body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.7; }',
                images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
                    const formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());

                    fetch('{{ route('admin.notifications.editor-image-upload') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                        },
                        body: formData,
                        credentials: 'same-origin',
                    })
                        .then(async response => {
                            const json = await response.json();

                            if (!response.ok || !json.location) {
                                reject(json.message || 'Falha ao enviar imagem.');
                                return;
                            }

                            resolve(json.location);
                        })
                        .catch(() => reject('Falha ao enviar imagem.'));
                }),
            });
        });
    </script>
@endsection