<?php
    $isLight = Auth('admin')->user()->dashboard_style === 'light';
    $text = $isLight ? 'dark' : 'light';
?>



<?php $__env->startSection('content'); ?>

<style>
    .email-service-page {
        --em-bg: #eef3fb;
        --em-card: rgba(255, 255, 255, 0.96);
        --em-border: rgba(148, 163, 184, 0.24);
        --em-text: #0f172a;
        --em-muted: #64748b;
        --em-blue: #2563eb;
        --em-indigo: #4f46e5;
        --em-orange: #f97316;
        --em-yellow: #facc15;
        --em-green: #059669;
        --em-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --em-shadow-soft: 0 8px 25px rgba(15, 23, 42, 0.06);

        margin: -0.5rem -1rem 0;
        padding: 1.5rem 1.25rem 2rem;
        min-height: calc(100vh - 8rem);
        color: var(--em-text);
        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .15), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .18), transparent 30%),
            radial-gradient(circle at 50% 100%, rgba(5, 150, 105, .10), transparent 35%),
            linear-gradient(135deg, #f8fbff 0%, var(--em-bg) 100%);
        position: relative;
        overflow-x: hidden;
    }

    .email-service-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 78%);
        pointer-events: none;
    }

    .email-service-page > * {
        position: relative;
        z-index: 2;
    }

    .email-hero {
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.92)),
            radial-gradient(circle at 88% 10%, rgba(250, 204, 21, .28), transparent 28%);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 26px;
        padding: 1.75rem;
        box-shadow: var(--em-shadow);
        color: #fff;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .email-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -90px;
        top: -110px;
        background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
        pointer-events: none;
    }

    .email-hero-content,
    .email-hero-actions {
        position: relative;
        z-index: 2;
    }

    .email-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #bfdbfe;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        padding: .42rem .8rem;
        margin-bottom: .85rem;
    }

    .email-hero h1 {
        color: #fff;
        font-size: clamp(1.5rem, 2vw, 2.1rem);
        font-weight: 900;
        letter-spacing: -.04em;
        margin-bottom: .4rem;
    }

    .email-hero p {
        color: rgba(226, 232, 240, .92);
        max-width: 48rem;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .email-hero-actions {
        display: flex;
        justify-content: flex-end;
        gap: .7rem;
        flex-wrap: wrap;
    }

    .email-theme-toggle,
    .email-support-btn {
        border-radius: 14px;
        font-weight: 900;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        transition: all .18s ease;
    }

    .email-theme-toggle {
        width: 44px;
        background: rgba(255,255,255,.14);
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.20);
    }

    .email-theme-toggle:hover {
        background: rgba(255,255,255,.22);
        color: #fff !important;
    }

    .email-support-btn {
        background: linear-gradient(135deg, #facc15, #f97316);
        color: #111827 !important;
        border: none;
        padding: .72rem 1.1rem;
        box-shadow: 0 14px 28px rgba(249, 115, 22, .24);
    }

    .email-support-btn:hover {
        color: #111827 !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(249, 115, 22, .32);
    }

    .email-form-card {
        background: var(--em-card);
        border: 1px solid var(--em-border);
        border-radius: 24px;
        box-shadow: var(--em-shadow-soft);
        backdrop-filter: blur(14px);
        overflow: hidden;
        color: var(--em-text);
    }

    .email-form-card .card-body {
        padding: 1.5rem;
    }

    .email-section-title {
        display: flex;
        align-items: center;
        gap: .75rem;
        background: linear-gradient(135deg, #f8fafc, #ffffff);
        border: 1px solid rgba(148, 163, 184, .18);
        border-radius: 18px;
        padding: 1rem 1.1rem;
        margin-bottom: 1.25rem;
        color: var(--em-text);
        font-weight: 900;
    }

    .email-section-title .section-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: #eff6ff;
        color: var(--em-blue);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .email-field {
        margin-bottom: 1.05rem;
    }

    .email-field label {
        color: var(--em-text);
        font-size: .82rem;
        font-weight: 900;
        margin-bottom: .45rem;
        letter-spacing: -.01em;
    }

    .email-field .form-control {
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, .28);
        background: #ffffff;
        color: var(--em-text);
        font-weight: 700;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .email-field .form-control:focus {
        border-color: rgba(37, 99, 235, .55);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
        background: #ffffff;
        color: var(--em-text);
    }

    #select-user-view {
        background: #f8fafc;
        border: 1px dashed rgba(37, 99, 235, .25);
        border-radius: 18px;
        padding: 1rem;
    }

    .selected-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        min-height: 28px;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 900;
        padding: .15rem .55rem;
    }

    .email-editor-wrap {
        border: 1px solid rgba(148, 163, 184, .28);
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
    }

    .email-editor-wrap .ql-toolbar.ql-snow {
        border: none;
        border-bottom: 1px solid rgba(148, 163, 184, .20);
        background: #f8fafc;
    }

    .email-editor-wrap .ql-container.ql-snow {
        border: none;
        min-height: 220px;
        font-weight: 600;
    }

    .send-email-btn {
        width: 100%;
        border-radius: 16px;
        min-height: 50px;
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #fff !important;
        border: none;
        font-weight: 900;
        box-shadow: 0 14px 28px rgba(37, 99, 235, .24);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
    }

    .send-email-btn:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(37, 99, 235, .32);
    }

    .alert {
        border-radius: 16px;
        border: none;
    }

    body.dark-mode {
        background: #020617;
        color: #e2e8f0;
    }

    body.dark-mode .email-service-page {
        --em-bg: #020617;
        --em-card: rgba(15, 23, 42, 0.94);
        --em-border: rgba(71, 85, 105, 0.62);
        --em-text: #f8fafc;
        --em-muted: #94a3b8;

        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .18), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .12), transparent 30%),
            linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    body.dark-mode .email-form-card {
        background: rgba(15, 23, 42, .94);
        border-color: rgba(71, 85, 105, .70);
    }

    body.dark-mode .email-section-title,
    body.dark-mode #select-user-view,
    body.dark-mode .email-editor-wrap,
    body.dark-mode .email-editor-wrap .ql-toolbar.ql-snow {
        background: rgba(30, 41, 59, .72);
        border-color: rgba(71, 85, 105, .62);
    }

    body.dark-mode .email-field .form-control {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(71, 85, 105, .78);
    }

    body.dark-mode .email-field .form-control:focus {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(96, 165, 250, .75);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, .12);
    }

    body.dark-mode .email-editor-wrap .ql-container.ql-snow {
        background: #0f172a;
        color: #f8fafc;
    }

    body.dark-mode .ql-editor.ql-blank::before {
        color: #94a3b8;
    }

    body.dark-mode .text-muted {
        color: #94a3b8 !important;
    }

    @media (max-width: 768px) {
        .email-service-page {
            padding: 1rem .85rem 1.5rem;
            margin-left: -.75rem;
            margin-right: -.75rem;
        }

        .email-hero {
            padding: 1.35rem;
        }

        .email-hero-actions {
            justify-content: stretch;
            margin-top: 1rem;
        }

        .email-support-btn {
            flex: 1;
        }

        .email-form-card .card-body {
            padding: 1rem;
        }
    }
</style>

<div class="email-service-page">
    <div class="email-hero">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="email-hero-content">
                    <span class="email-badge">
                        <i class="fas fa-envelope-open-text"></i>
                        Email Broadcast
                    </span>

                    <h1>Send Email to Users</h1>

                    <p>
                        Compose and send professional email updates to all users or selected users with a clean message editor.
                    </p>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="email-hero-actions">
                    <button id="darkToggle" type="button" class="btn email-theme-toggle" title="Toggle dark mode">
                        <i class="fa fa-moon"></i>
                    </button>

                    <a class="btn email-support-btn" href="https://t.me/+9H-f6d0GgGgwMDM0" target="_blank">
                        <i class="#"></i>
                        Contact Support
                    </a>
                </div>
            </div>
        </div>
    </div>

    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.danger-alert','data' => []]); ?>
<?php $component->withName('danger-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.success-alert','data' => []]); ?>
<?php $component->withName('success-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>

    <div class="email-form-card">
        <div class="card-body">
            <div class="email-section-title">
                <span class="section-icon">
                    <i class="fas fa-paper-plane"></i>
                </span>
                <span>Email Message Details</span>
            </div>

            <form method="POST" action="<?php echo e(route('sendmailtoall')); ?>">
                <?php echo csrf_field(); ?>

                
                <div class="mb-3 email-field">
                    <label class="form-label">Category</label>
                    <select id="category" name="category" class="form-control">
                        <option value="All">All Users</option>
                        <option value="Select Users">Choose Users</option>
                    </select>
                </div>

                
                <div id="select-user-view" class="mb-3 d-none">
                    <label class="form-label">
                        Select Users <span id="numofusers" class="selected-count">0</span>
                    </label>
                    <select id="showusers" name="users[]" multiple class="form-control select2"></select>
                </div>

                
                <div class="mb-3 email-field">
                    <label class="form-label">Greeting</label>
                    <div class="row g-2">
                        <div class="col-md-6 mb-2 mb-md-0">
                            <input type="text" name="greet" value="Hello" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="title" placeholder="Customer Name" class="form-control">
                        </div>
                    </div>
                </div>

                
                <div class="mb-3 email-field">
                    <label class="form-label">Subject</label>
                    <input type="text" name="subject" class="form-control" required>
                </div>

                
                <div class="mb-4 email-field">
                    <label class="form-label">Message</label>
                    <div class="email-editor-wrap">
                        <div id="editor" style="height: 220px;"></div>
                    </div>
                    <input type="hidden" name="message" id="message">
                </div>

                <button type="submit" class="btn send-email-btn">
                    <i class="fas fa-paper-plane"></i>
                    Send Email
                </button>
            </form>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<?php echo \Illuminate\View\Factory::parentPlaceholder('scripts'); ?>


<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const darkToggle = document.getElementById('darkToggle');

        function setDarkIcon() {
            if (!darkToggle) return;
            const isDark = document.body.classList.contains('dark-mode');
            darkToggle.innerHTML = isDark ? '<i class="fa fa-sun"></i>' : '<i class="fa fa-moon"></i>';
        }

        const savedTheme = localStorage.getItem('admin_theme_mode') || localStorage.getItem('theme') || 'light';
        if (window.applyGlobalAdminTheme) {
            window.applyGlobalAdminTheme(savedTheme === 'dark' ? 'dark' : 'light');
        } else {
            document.documentElement.classList.toggle('admin-dark-mode', savedTheme === 'dark');
            document.body.classList.toggle('dark-mode', savedTheme === 'dark');
            document.body.setAttribute('data-admin-theme', savedTheme === 'dark' ? 'dark' : 'light');
        }

        setDarkIcon();

        if (darkToggle) {
            darkToggle.addEventListener('click', function () {
                const isDark = !document.body.classList.contains('dark-mode');
                const mode = isDark ? 'dark' : 'light';
                localStorage.setItem('admin_theme_mode', mode);
                localStorage.setItem('theme', mode);
                if (window.applyGlobalAdminTheme) {
                    window.applyGlobalAdminTheme(mode);
                } else {
                    document.documentElement.classList.toggle('admin-dark-mode', isDark);
                    document.body.classList.toggle('dark-mode', isDark);
                    document.body.setAttribute('data-admin-theme', mode);
                }
                setDarkIcon();
            });
        }

        const category = document.getElementById('category');
        const userView = document.getElementById('select-user-view');
        const userSelect = document.getElementById('showusers');
        const countEl = document.getElementById('numofusers');

        const quill = new Quill('#editor', {
            theme: 'snow',
            placeholder: 'Type your message here...'
        });

        document.querySelector('form').addEventListener('submit', function () {
            document.getElementById('message').value = quill.root.innerHTML;
        });

        category.addEventListener('change', async () => {
            if (category.value === "Select Users") {
                userView.classList.remove('d-none');

                if (!userSelect.options.length) {
                    const res = await fetch("<?php echo e(route('fetchusers')); ?>");
                    const data = await res.json();

                    data.data.forEach(u => {
                        const opt = new Option(u.name, u.id);
                        userSelect.add(opt);
                    });
                }
            } else {
                userView.classList.add('d-none');
            }
        });

        userSelect.addEventListener('change', () => {
            countEl.textContent = [...userSelect.selectedOptions].length;
        });

        if (window.$ && $('.select2').length) {
            $('.select2').select2({
                width: '100%',
                placeholder: 'Choose users'
            });
        }
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/kdcwrbdi/public_html/resources/views/admin/email/index.blade.php ENDPATH**/ ?>