@php
    $id_usuario = session('id_usuario');
@endphp
<style>
    #envio_masivo_contrato_prefactura_modal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }

    #step_1_envio_masivo .four.fields {
        flex-direction: column !important;
        margin-bottom: 10px;
    }

    #step_1_envio_masivo .four.fields .field {
        width: 100% !important;
    }

    #step_2_envio_masivo .ui.table {
        margin-bottom: 8px;
    }

    #envio_masivo_paginado {
        width: 100%;
        display: block !important;
        margin-top: 10px;
        margin-bottom: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 6px;
    }

    .envio-masivo-pagination {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 4px;
        margin-top: 5px;
        min-width: max-content;
    }

    .envio-masivo-pagination .envio-masivo-page,
    .envio-masivo-pagination .item-disabled {
        display: inline-block;
        padding: 7px 11px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        cursor: pointer;
        text-decoration: none;
        border-radius: 3px;
    }

    .envio-masivo-pagination .envio-masivo-page.active {
        background: #2185d0;
        color: #fff;
        border-color: #2185d0;
    }

    .envio-masivo-pagination .envio-masivo-page.disabled,
    .envio-masivo-pagination .item-disabled {
        color: #aaa;
        cursor: not-allowed;
        background: #f5f5f5;
    }

    .envio-masivo-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        clear: both;
        margin-top: 10px;
    }
</style>
<div class="modal fade" id="envio_masivo_contrato_prefactura_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <form id="form_envio_masivo"
                  action="{{ url('send_mail_servicio_cliente_masivo') }}"
                  method="POST"
                  enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" name="usar_correo_contenido_modal" value="0">

                <div class="modal-header">
                    <h5 class="modal-title">
                        <strong>Envío masivo de Contrato / Prefactura</strong>
                    </h5>
                    <button type="button" class="close reset" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="ui ordered steps fluid" id="steps_envio_masivo">
                        <div class="active step" data-step="1">
                            <div class="content">
                                <div class="title">Filtros</div>
                            </div>
                        </div>
                        <div class="disabled step" data-step="2">
                            <div class="content">
                                <div class="title">Selección</div>
                            </div>
                        </div>
                        <div class="disabled step" data-step="3">
                            <div class="content">
                                <div class="title">Confirmación</div>
                            </div>
                        </div>
                    </div>

                    <div id="step_1_envio_masivo" class="step_envio_masivo">
                        <div class="ui form">
                            <div class="four fields">

                                <div class="field">
                                    <label>Cliente factura</label>
                                    <select id="cliente_factura" name="cliente_factura" class="selectpicker form-control" data-live-search="true" data-dropup-auto="false" required>
                                        <option value="">Todos</option>
                                    </select>
                                </div>

                                <div class="field">
                                    <label>Cliente informe</label>
                                    <select id="cliente_informe" name="cliente_informe[]" class="selectpicker form-control" data-live-search="true" data-actions-box="true" multiple title="Todos">
                                    </select>
                                </div>

                                <div class="field">
                                    <label>Año</label>
                                    <select id="anio_envio" name="anio_envio" class="selectpicker form-control" data-live-search="true" title="Todos">
                                        <option value="">Todos</option>
                                    </select>
                                </div>

                                <div class="field">
                                    <label>Tipo de envío</label>
                                    <select class="form-control" id="tipo_envio" name="tipo_envio" required>
                                        <option value="">Seleccione</option>
                                        <option value="contrato">Contrato</option>
                                        <option value="prefactura">Prefactura</option>
                                        <option value="ambos">Ambos</option>
                                    </select>
                                </div>
                            </div>

                            <button type="button" class="ui button blue fluid" id="buscar_envio_masivo">
                                <i class="search icon"></i> Buscar
                            </button>
                        </div>
                    </div>

                    <div id="step_2_envio_masivo" class="step_envio_masivo" style="display:none">
                        <table class="ui celled table small">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="ui checkbox">
                                            <input type="checkbox" id="select_all_envio">
                                            <label></label>
                                        </div>
                                    </th>
                                    <th>Informe</th>
                                    <th>Cliente factura</th>
                                    <th>Cliente informe</th>
                                    <th>Contrato</th>
                                    <th>Prefactura</th>
                                </tr>
                            </thead>
                            <tbody id="tbody_envio_masivo"></tbody>
                        </table>
                        <div id="envio_masivo_paginado" class="d-flex justify-content-between align-items-center flex-wrap"></div>

                        <div class="envio-masivo-actions">
                            <button type="button" class="ui button grey" id="volver_step_1">
                                Regresar
                            </button>

                            <button type="button" class="ui button blue" id="continuar_step_3">
                                Continuar
                            </button>
                        </div>
                    </div>

                    <div id="step_3_envio_masivo" class="step_envio_masivo" style="display:none">
                        <div class="ui message info">
                            Se enviarán los formatos seleccionados.
                        </div>

                        <p>
                            <strong>Total seleccionados:</strong>
                            <span id="total_seleccionados_envio">0</span>
                        </p>

                        <div class="ui segment">
                            <h5 class="ui dividing header">
                                <i class="send icon"></i> Correo remitente
                            </h5>

                            <div class="field">
                                <select id="envio_masivo_id_email_remitente"
                                        name="id_email_remitente"
                                        class="selectpicker form-control"
                                        data-live-search="true"
                                        data-dropup-auto="false"
                                        required>
                                    <option value="">-- Seleccione --</option>
                                    @foreach ($cuentas_correo_activas as $dato_correo)
                                        <option value="{{ $dato_correo->id_cuenta_correo_electronico }}">
                                            {{ $dato_correo->correo }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="ui segment">
                            <h5 class="ui dividing header">
                                <i class="mail icon"></i> C.C.
                            </h5>

                            <select id="envio_masivo_cc_json" name="cc_json[]" class="form-control" multiple></select>
                            <small>Selecciona usuarios, cuentas de correo o captura correos manuales.</small>
                        </div>

                        <div class="ui segment">
                            <h5 class="ui dividing header">
                                <i class="mail icon"></i> Destinatarios
                            </h5>

                            <div id="contenedor_correos_envio" class="ui relaxed list">
                                <div class="item text-muted">
                                    <i class="spinner loading icon"></i> Cargando correos...
                                </div>
                            </div>
                        </div>

                        <div class="ui segment correo-section">
                            <h5 class="ui dividing header correo-section-title">
                                <i class="mail icon"></i> Mensaje
                            </h5>

                            <div class="form-group">
                                <label for="envio_masivo_id_correo_contenido">Plantilla activa</label>
                                <select id="envio_masivo_id_correo_contenido" name="id_correo_contenido" class="form-control correo-template-native">
                                    <option value="default">Default del módulo</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="envio_masivo_asunto_correo">Asunto</label>
                                <input type="text" id="envio_masivo_asunto_correo" name="asunto_correo" class="form-control" maxlength="255">
                            </div>

                            <div class="alert alert-warning text-left" role="alert">
                                <strong>TODO LO EDITADO EN EL CONTENIDO SERÁ SOLO PARA ESTE ENVÍO.</strong><br>
                                POR FAVOR, AL MOMENTO DE EDITAR NO ELIMINAR LAS VARIABLES. EJEMPLO: &lt;NO. DE INFORME&gt;. NO SE PUEDEN AGREGAR DESDE ESTA VISTA.
                            </div>

                            <textarea id="envio_masivo_contenido_html" name="contenido_html" class="form-control" rows="8"></textarea>
                        </div>

                        <button type="button" class="ui button grey" id="volver_step_2">
                            Regresar
                        </button>

                        <button type="button" class="ui button green right floated" id="confirmar_envio_masivo">
                            <i class="paper plane icon"></i> Enviar correos
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@include('Mail.partials.correo_modal_dinamico')
<script>
    (function() {
        window.envioMasivoCorreoModal = SeatsaCorreoModal.init({
            modalSelector: '#envio_masivo_contrato_prefactura_modal',
            formSelector: '#form_envio_masivo',
            modulo: 'Contrato y prefactura',
            tipoCorreo: 'Envío masivo',
            templateSelector: '#envio_masivo_id_correo_contenido',
            senderSelector: '#envio_masivo_id_email_remitente',
            ccSelector: '#envio_masivo_cc_json',
            subjectSelector: '#envio_masivo_asunto_correo',
            contentSelector: '#envio_masivo_contenido_html',
            useFlagSelector: '[name="usar_correo_contenido_modal"]',
            buildPayload: function() {
                return {
                    id_cuenta_correo_electronico_fallback: $('#envio_masivo_id_email_remitente').val() || ''
                };
            }
        });
    })();
</script>