@include('Vendedor.Layouts.header')
@include('Vendedor.Layouts.sidebar')
@include('Vendedor.Layouts.topbar')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
:root {
    --brand-blue: #0C479D;         
    --brand-navy: #001450;         
    --brand-red: #FE000C;          
    --brand-red-hover: #D0000A;    
    --text-muted: #5A5A5A;         
    --border-color: #E5E7EB;       
    --placeholder-color: #B5B5B5;  
}

.modulo-compartir-exacto {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    background-color: #f4f6f9 !important;
}

/* --- TARJETA DEL FORMULARIO --- */
.main-card {
    width: 100%;
    background: white;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}

.card-padding { padding: 2rem !important; }
.text-navy { color: var(--brand-navy); }

/* Ajuste de tamaño y grosor para los iconos Lucide del Header */
.icon-header { 
    width: 24px; 
    height: 24px; 
    color: var(--brand-red); 
    stroke-width: 2; /* Trazo limpio sin relleno */
}

/* --- INPUTS Y SELECTS --- */
.form-label-custom {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

/* Ajuste para que los iconos de las etiquetas mantengan el estilo lineal de Editar Usuario */
.icon-input { 
    width: 16px; 
    height: 16px; 
    color: var(--brand-blue); 
    margin-right: 0.5rem; 
    stroke-width: 2; /* Líneas finas sin relleno corporativas */
}

.input-custom {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: #ffffff;
    outline: none;
}

.input-custom:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(12, 71, 157, 0.08);
}

/* --- VISOR UNIFICADO (TODO EN UNA CARD) --- */
.panel-visor-pdf {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100%;
    min-height: 750px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.barra-herramientas-pdf {
    background: #001e60 !important; 
    color: #ffffff !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}

/* Iconos dentro de la barra superior del PDF */
.barra-herramientas-pdf svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Zona del documento */
.zona-render-documento {
    flex: 1;
    overflow: hidden;
    background-color: #525659; 
    position: relative;
}

.iframe-visor {
    width: 100%;
    height: 100%;
    border: none;
}

/* Pie de la tarjeta con botones integrados */
.pie-herramientas-visor {
    background: #ffffff;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

.btn-accion-visor {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.btn-accion-visor svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.btn-accion-visor:hover { border-color: var(--brand-blue); }
.btn-accion-visor.active {
    border-color: var(--brand-blue) !important;
    background-color: #f0f7ff !important;
    color: var(--brand-blue) !important;
}

.btn-accion-visor h6 { margin: 0; font-size: 0.85rem; font-weight: 700; }

/* --- BOTONES FORMULARIO --- */
.btn-navy-custom, .btn-red-custom {
    color: white; font-weight: 700; border-radius: 0.5rem;
    border: none; padding: 0.65rem; transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-navy-custom { background-color: var(--brand-navy); }
.btn-navy-custom:hover { background-color: var(--brand-blue); box-shadow: 0 4px 12px rgba(12, 71, 157, 0.2); }
.btn-red-custom { background-color: var(--brand-red); }
.btn-red-custom:hover { background-color: var(--brand-red-hover); }

.btn-navy-custom svg, .btn-red-custom svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

/* --- OTROS --- */
.radio-group-container {
    display: flex; gap: 20px; padding: 10px 15px;
    background-color: #fff; border: 1px solid var(--border-color); border-radius: 0.5rem;
}
.radio-option { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.btn-vigencia-dia {
    border: 1px solid var(--border-color); padding: 8px; border-radius: 6px;
    text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff;
}
.btn-vigencia-dia.active { background: #e0f2fe; border-color: var(--brand-blue); color: var(--brand-blue); }
</style>

<div class="contenedor-principal">
    <div class="modulo-compartir-exacto container-fluid py-4">
        
        <div class="mb-3">
            <a href="/vendedor/documentos" class="btn btn-sm btn-light border text-secondary fw-bold px-3" style="border-radius:0.5rem; display: inline-flex; align-items: center;">
                <i data-lucide="chevron-left" class="me-2" style="width: 14px; height: 14px; stroke-width: 2.5;"></i> Volver a la lista de documentos
            </a>
        </div>

        <div class="row g-4 d-flex align-items-stretch">
            
            <div class="col-12 col-lg-6">
                <div class="panel-visor-pdf shadow">
                    <div class="barra-herramientas-pdf">
                        <div class="d-flex align-items-center">
                            <i data-lucide="menu" class="me-3"></i>
                            <span class="fw-bold small">{{ $documento->nombre ?? 'Manual tecnico aceites.pdf' }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <i data-lucide="minus" style="cursor: pointer;"></i>
                            <span class="bg-white text-dark px-2 rounded small fw-bold">1/1</span>
                            <i data-lucide="plus" style="cursor: pointer;"></i>
                        </div>
                    </div>
                    
                    <div class="zona-render-documento">
                        @php $url_pdf = $documento->url_pdf ?? 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'; @endphp
                        <iframe 
                            id="visorPdfIframe" 
                            class="iframe-visor" 
                            src="https://docs.google.com/gview?url={{ urlencode($url_pdf) }}&embedded=true">
                        </iframe>
                    </div>

                    <div class="pie-herramientas-visor">
                        <p class="fw-bold text-navy mb-2" style="font-size:0.8rem; letter-spacing: 0.5px;">OPCIONES DE ACCIÓN</p>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="btn-accion-visor active" id="btnOpcionVer" onclick="controlarVisor('ver', '{{ $url_pdf }}')">
                                    <i data-lucide="eye" class="text-primary"></i>
                                    <h6>Solo visualizar</h6>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="btn-accion-visor" id="btnOpcionDescargar" onclick="controlarVisor('descargar', '{{ $url_pdf }}')">
                                    <i data-lucide="cloud-download" class="text-primary"></i>
                                    <h6>Descargar PDF</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-6">
                <div class="main-card card-padding">
                    <div class="text-center mb-4">
                        <h4 class="fw-bold text-navy mb-1 d-flex align-items-center justify-content-center gap-2">
                            <i data-lucide="mail-open" class="icon-header"></i> Compartir documento
                        </h4>
                        <p class="text-muted small">Configura el envío seguro para tu cliente.</p>
                    </div>
                    
                    <form id="formCompartir">
                        <div class="mb-3">
                            <label class="form-label-custom">
                                <i data-lucide="users" class="icon-input"></i> Tipo de cliente <span class="text-red">*</span>
                            </label>
                            <div class="radio-group-container">
                                <label class="radio-option"><input type="radio" name="tipo_cliente" id="clienteInterno" value="interno" checked onchange="toggleProspecto()"> Cliente interno</label>
                                <label class="radio-option"><input type="radio" name="tipo_cliente" id="clienteProspecto" value="prospecto" onchange="toggleProspecto()"> Prospecto</label>
                            </div>
                        </div>

                        <div class="mb-3" id="groupSelect">
                            <label class="form-label-custom">
                                <i data-lucide="user-check" class="icon-input"></i> 1. Selecciona el cliente <span class="text-red">*</span>
                            </label>
                            <select class="input-custom form-select" id="selectCliente" required>
                                <option value="" selected disabled>Seleccionar...</option>
                                <option value="1">Industrial Mexiquense S.A.</option>
                            </select>
                        </div>

                        <div class="mb-3 d-none" id="groupRazon">
                            <label class="form-label-custom">
                                <i data-lucide="building" class="icon-input"></i> 1. Teclea Razón Cliente <span class="text-red">*</span>
                            </label>
                            <input type="text" class="input-custom" id="inputRazon" placeholder="Nombre comercial del prospecto">
                        </div>

                        <div class="mb-3">
                            <label class="form-label-custom">
                                <i data-lucide="mail" class="icon-input"></i> 2. Correo electrónico <span class="text-red">*</span>
                            </label>
                            <input type="email" class="input-custom" placeholder="cliente@ejemplo.com" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label-custom">
                                <i data-lucide="user" class="icon-input"></i> 3. Dirigido a <span class="text-red">*</span>
                            </label>
                            <input type="text" class="input-custom" placeholder="Nombre del contacto" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label-custom">
                                <i data-lucide="calendar" class="icon-input"></i> 4. Vigencia <span class="text-red">*</span>
                            </label>
                            <div class="row g-2">
                                <div class="col-4"><div class="btn-vigencia-dia active" onclick="setVigencia(this, 3)">3 días</div></div>
                                <div class="col-4"><div class="btn-vigencia-dia" onclick="setVigencia(this, 7)">7 días</div></div>
                                <div class="col-4"><div class="btn-vigencia-dia" onclick="setVigencia(this, 10)">10 días</div></div>
                            </div>
                        </div>

                        <div class="mb-4 pt-1">
                            <p class="text-terms m-0"><span class="text-red fw-bold">*</span> Los campos con asterisco son obligatorios de llenar.</p>
                        </div>

                        <div class="row g-2">
                            <div class="col-7">
                                <button type="submit" class="btn-navy-custom w-100">
                                    <i data-lucide="send"></i> Enviar Correo
                                </button>
                            </div>
                            <div class="col-5">
                                <button type="button" class="btn-red-custom w-100" onclick="resetAll()">
                                    <i data-lucide="trash-2"></i> Limpiar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div> 
        </div> 
    </div> 
</div> 

<script>
// Inicialización obligatoria al cargar el DOM para renderizar los iconos de lucide.min.js
document.addEventListener("DOMContentLoaded", function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});

function controlarVisor(accion, url) {
    document.getElementById('btnOpcionVer').classList.toggle('active', accion === 'ver');
    document.getElementById('btnOpcionDescargar').classList.toggle('active', accion === 'descargar');

    if (accion === 'descargar') {
        Swal.fire({
            title: '¿Descargar PDF?',
            text: 'Se descargará el archivo en tu dispositivo.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0C479D',
            confirmButtonText: 'Sí, descargar'
        }).then((result) => {
            if (result.isConfirmed) window.open(url, '_blank');
            else controlarVisor('ver', url);
        });
    }
}

function toggleProspecto() {
    const isP = document.getElementById('clienteProspecto').checked;
    document.getElementById('groupSelect').classList.toggle('d-none', isP);
    document.getElementById('groupRazon').classList.toggle('d-none', !isP);
}

function setVigencia(btn, dias) {
    document.querySelectorAll('.btn-vigencia-dia').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
}

function resetAll() {
    document.getElementById('formCompartir').reset();
    toggleProspecto();
}

function simularEnvioDemo(event) {
    // 1. Evita que la página se recargue (ya que no hay backend real ahorita)
    event.preventDefault(); 

    // 2. Obtener los valores para simular la personalización
    const tipoCliente = document.getElementById('clienteInterno').checked ? 'interno' : 'prospecto';
    let clienteNombre = "";

    if (tipoCliente === 'interno') {
        const select = document.getElementById('selectCliente');
        clienteNombre = select.options[select.selectedIndex].text;
        if (!select.value) {
            Swal.fire({ icon: 'warning', title: 'Campos incompletos', text: 'Por favor, selecciona un cliente.', confirmButtonColor: '#0C479D' });
            return;
        }
    } else {
        clienteNombre = document.getElementById('inputRazon').value.trim();
        if (!clienteNombre) {
            Swal.fire({ icon: 'warning', title: 'Campos incompletos', text: 'Por favor, teclea la razón del cliente.', confirmButtonColor: '#0C479D' });
            return;
        }
    }

    // 3. Lanzar la alerta estética de SweetAlert2 simulando el éxito
    Swal.fire({
        title: '¡Envío Exitoso!',
        text: `El documento ha sido compartido correctamente con la empresa "${clienteNombre}".`,
        icon: 'success',
        confirmButtonColor: '#0C479D', // El azul de tu marca
        confirmButtonText: 'Aceptar'
    }).then((result) => {
        if (result.isConfirmed) {
            // Limpia el formulario automáticamente después de cerrar la alerta
            resetAll(); 
        }
    });
}

</script>

@include('Vendedor.Layouts.footer')