@extends('layouts.app')

@section('content')
<br>
<div class="container py-5">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">Send Email to Users</h3>
        <a href="{{ route('users.groups') }}" class="btn btn-outline-primary">
            <i class="fa fa-users me-1"></i> Manage User Groups
        </a>
    </div>

    {{-- Success & Error --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- MAIN EMAIL FORM --}}
    <form action="{{ route('mail.send') }}" method="POST" id="emailForm">
        @csrf

        <!-- Recipient Type -->
        <div class="mb-3">
            <label class="form-label">Select Recipient Type</label>
            <select id="recipient_type" name="recipient_type" class="form-select" required>
                <option value="">-- Choose an Option --</option>
                <option value="single">Single User</option>
                <option value="range">Range (From ID → To ID)</option>
                <option value="batch">Batch (Offset + Limit)</option>
                <option value="group">Specific Group</option>
            </select>
        </div>

        <!-- Single User -->
        <div class="mb-3 recipient-field" id="single_field" style="display:none;">
            <label class="form-label">User Email</label>
            <input type="email" class="form-control" name="user_email" placeholder="user@example.com">
        </div>

        <!-- Range IDs -->
        <div class="mb-3 recipient-field" id="range_field" style="display:none; border:1px solid #ddd; padding:15px; border-radius:5px; background-color:#f9f9f9;">
            <label class="form-label fw-bold">Send by Range of User IDs</label>
            <div class="row mb-2">
                <div class="col-md-6"><input type="number" name="from_id" class="form-control" placeholder="From user ID" min="1"></div>
                <div class="col-md-6"><input type="number" name="to_id" class="form-control" placeholder="To user ID" min="1"></div>
            </div>
            <small class="text-muted">Example: From = 1, To = 30 → sends to users with IDs 1–30.</small>
        </div>

        <!-- Batch -->
        <div class="mb-3 recipient-field" id="batch_field" style="display:none; border:1px solid #ddd; padding:15px; border-radius:5px; background-color:#f1f7ff;">
            <label class="form-label fw-bold">Send by Batch</label>
            <div class="row mb-2">
                <div class="col-md-6"><input type="number" name="offset" class="form-control" placeholder="Offset (start)" min="0"></div>
                <div class="col-md-6"><input type="number" name="limit" class="form-control" placeholder="Limit (number of users)" min="1"></div>
            </div>
            <small class="text-muted">Example: Offset = 0, Limit = 30 → sends first 30 users.</small>
        </div>

        <!-- Group -->
        <div class="mb-3 recipient-field" id="group_field" style="display:none; border:1px solid #ddd; padding:15px; border-radius:5px; background-color:#fff3cd;">
            <label class="form-label fw-bold">Select User Group</label>
           
     <select name="user_group" class="form-control">
    <option value="">All Groups</option>

    @if(isset($groups))
        @foreach($groups as $group)
            <option value="{{ $group }}">{{ $group }}</option>
        @endforeach
    @endif

</select>
            <small class="text-muted">Emails will be sent to all users in the selected group.</small>
        </div>

        <!-- Subject & Message -->
        <div class="mb-3">
            <label class="form-label">Subject</label>
            <input type="text" class="form-control" name="subject" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea name="message" id="editor" class="form-control" rows="8" required></textarea>
        </div>

        <!-- Schedule -->
        <div class="mb-3">
            <label class="form-label">Schedule Send (Optional)</label>
            <input type="datetime-local" class="form-control" name="scheduled_at" id="scheduled_at">
            <small class="text-muted">Leave empty to send immediately.</small>
        </div>

        <!-- Buttons -->
        <div class="d-flex gap-2 mb-3">
            <button type="button" class="btn btn-secondary flex-grow-1" id="previewBtnAll">
                <i class="fa fa-eye me-1"></i> Preview Email
            </button>
            <button type="submit" class="btn btn-primary flex-grow-1">
                <i class="fa fa-paper-plane me-1"></i> Send
            </button>
        </div>
    </form>

</div>

<!-- CKEditor & JS -->
<script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    CKEDITOR.replace('editor');

    const recipientSelect = document.getElementById('recipient_type');
    const singleField = document.getElementById('single_field');
    const rangeField = document.getElementById('range_field');
    const batchField = document.getElementById('batch_field');
    const groupField = document.getElementById('group_field');

    function toggleFields() {
        singleField.style.display = recipientSelect.value === 'single' ? 'block' : 'none';
        singleField.querySelector('input').required = recipientSelect.value === 'single';

        rangeField.style.display = recipientSelect.value === 'range' ? 'block' : 'none';
        rangeField.querySelectorAll('input').forEach(i => i.required = recipientSelect.value === 'range');

        batchField.style.display = recipientSelect.value === 'batch' ? 'block' : 'none';
        batchField.querySelectorAll('input').forEach(i => i.required = recipientSelect.value === 'batch');

        groupField.style.display = recipientSelect.value === 'group' ? 'block' : 'none';
        groupField.querySelector('select').required = recipientSelect.value === 'group';
    }

    recipientSelect.addEventListener('change', toggleFields);
    toggleFields();

    // Preview
    document.getElementById('previewBtnAll').addEventListener('click', ()=>{
        const subject = document.querySelector('input[name="subject"]').value;
        const message = CKEDITOR.instances.editor.getData();
        const recipients = recipientSelect.value === 'group' ? document.querySelector('select[name="user_group"]').value : recipientSelect.value;
        alert(`Preview\nSubject: ${subject}\nRecipients: ${recipients}\nMessage: ${message.substring(0,50)}...`);
    });
});
</script>
@endsection