@extends('layouts.panel')
@section('content')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url('css/correos.css') }}">

    <div class="correos-container">
        <!-- Header -->
        <div class="correos-header">
            <h2 class="correos-titulo">
                Enviar Correos a Clientes
            </h2>
        </div>

        <!-- Formulario -->
        <div class="correos-form">
            <form action="{{ url('enviar_correos_masivos') }}" method="POST">
                @csrf

                <!-- Campo Asunto -->
                <div class="form-group-correos">
                    <label for="asunto" class="form-label-correos">Asunto del Correo</label>
                    <input type="text" name="asunto" class="form-input-correos" id="asunto"
                        placeholder="Ej: Novedades de nuestra Rifa" required>
                    <div class="invalid-feedback">Por favor proporcione un asunto.</div>
                </div>

                <!-- Campo Descripción con Editor Quill -->
                <div class="form-group-correos">
                    <label for="editor" class="form-label-correos">Contenido del Correo</label>
                    <div class="editor-container">
                        <div id="editor" style="height: 300px;"></div>
                        <input type="hidden" id="descripcion" name="descripcion" value="" required>
                    </div>
                    <div class="invalid-feedback">Por favor escriba el contenido del correo.</div>
                </div>

                <hr class="correos-separator">

                <!-- Botones de Acción -->
                <div class="correos-actions">
                    <button type="submit" class="btn-correo-enviar">
                        <i class="material-icons">send</i>
                        Enviar Correo Masivo
                    </button>

                    <a href="{{ url('clientes') }}" class="btn-correo-volver">
                        <i class="material-icons">arrow_back</i>
                        Volver a Clientes
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="{{ url('js/correos.js') }}"></script>
@endsection