@extends('backend.layout.master-tailwind')
@section('title', __('Email to All Users'))

@section('admin_styles')
    <x-summernote.summernote-css />
    <style>
        /* Summernote dark-mode skin */
        .note-editor.note-frame,
        .note-editor.note-airframe {
            border: 1px solid var(--border) !important;
            border-radius: 0 0 var(--radius) var(--radius) !important;
            background: var(--surface-2) !important;
        }

        .note-toolbar {
            background: var(--surface) !important;
            border-bottom: 1px solid var(--border) !important;
            border-radius: var(--radius) var(--radius) 0 0 !important;
            padding: 6px 8px !important;
        }

        .note-toolbar .note-btn {
            background: transparent !important;
            border: 1px solid transparent !important;
            color: var(--text-2) !important;
            border-radius: 5px !important;
            padding: 3px 6px !important;
        }

        .note-toolbar .note-btn:hover {
            background: var(--hover) !important;
            border-color: var(--border) !important;
            color: var(--text) !important;
        }

        .note-toolbar .note-btn-group {
            gap: 2px;
        }

        .note-editable {
            background: var(--surface-2) !important;
            color: var(--text) !important;
            min-height: 240px !important;
            font-size: 13.5px !important;
            line-height: 1.65 !important;
        }

        .note-statusbar {
            background: var(--surface) !important;
            border-top: 1px solid var(--border) !important;
            border-radius: 0 0 var(--radius) var(--radius) !important;
        }

        .note-statusbar .note-resizebar {
            opacity: .4;
        }

        .note-placeholder {
            color: var(--text-3) !important;
        }

        .note-dropdown-menu {
            background: var(--bg-elev) !important;
            border: 1px solid var(--border-strong) !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .4) !important;
        }

        .note-dropdown-item {
            color: var(--text) !important;
        }

        .note-dropdown-item:hover {
            background: var(--hover) !important;
        }

        .note-color-palette .note-color-btn {
            border: 1px solid var(--border) !important;
            border-radius: 3px !important;
        }
    </style>
@endsection

@section('content')

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Email to All Users') }}</h1>
                <p class="page-sub">{{ __('Send a message to every verified user on the platform.') }}</p>
            </div>
        </div>

        @if ($errors->any())
            <div
                style="background:var(--danger-soft);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--danger);line-height:1.7">
                <div style="display:flex;gap:8px;align-items:flex-start">
                    <svg style="flex:none;margin-top:1px" class="icon" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 3l9 16H3z" />
                        <path d="M12 10v4" />
                        <circle cx="12" cy="17" r="0.6" fill="currentColor" />
                    </svg>
                    <ul style="margin:0;padding-left:16px">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <div style="display:flex;flex-direction:column;gap:12px">

            <div
                style="background:var(--warn-soft);border:1px solid color-mix(in oklch,var(--warn) 30%,transparent);border-radius:10px;padding:12px 16px;font-size:12px;color:var(--text-2);line-height:1.7">
                <div style="display:flex;gap:8px;align-items:flex-start">
                    <svg style="flex:none;margin-top:2px;color:var(--warn)" class="icon" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 3l9 16H3z" />
                        <path d="M12 10v4" />
                        <circle cx="12" cy="17" r="0.6" fill="currentColor" />
                    </svg>
                    <div>{{ __('This will send an email to all verified users. This action cannot be undone.') }}</div>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.email.send.to.all.users') }}" enctype="multipart/form-data"
                id="email-broadcast-form">
                @csrf

                <div class="card">
                    <div class="card-head">
                        <div class="card-title">{{ __('Compose Message') }}</div>
                    </div>
                    <div>

                        <div class="setting-row">
                            <div class="info">
                                <div class="ttl">{{ __('Subject') }}</div>
                                <div class="desc">{{ __('Shown in the email subject line.') }}</div>
                            </div>
                            <div style="width:340px">
                                <input type="text" name="subject" id="subject" class="input wide"
                                    placeholder="{{ __('Enter subject') }}" value="{{ old('subject') }}" maxlength="150">
                            </div>
                        </div>

                        <div style="padding:14px 16px;border-bottom:1px solid var(--border)">
                            <div style="font-size:13px;font-weight:500;margin-bottom:10px">{{ __('Message') }}</div>
                            <textarea name="message" id="message" class="summernote" placeholder="{{ __('Write your message here…') }}">{{ old('message') }}</textarea>
                        </div>

                    </div>
                </div>

                <div style="display:flex;justify-content:flex-end;gap:8px;padding-bottom:40px">
                    <button type="submit" class="btn primary" id="send-btn">
                        <svg class="icon" id="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22 2 11 13" />
                            <path d="M22 2 15 22l-4-9-9-4z" />
                        </svg>
                        <svg class="icon" id="send-spinner" style="display:none;animation:spin 1s linear infinite"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round">
                            <path
                                d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
                        </svg>
                        <span id="send-label">{{ __('Send Email') }}</span>
                    </button>
                </div>

            </form>

        </div>

    </div>

@endsection

@section('script')
    <style>
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <x-summernote.summernote-js />
    <script>
        (function($) {
            $('#email-broadcast-form').on('submit', function() {
                var subject = $('#subject').val().trim();
                var message = $('#message').summernote('isEmpty') ? '' : $('#message').summernote('code');

                if (!subject || !message) return false;

                $('#send-icon').hide();
                $('#send-spinner').show();
                $('#send-label').text('{{ __('Sending…') }}');
                $('#send-btn').prop('disabled', true);
            });
        }(jQuery));
    </script>
@endsection