<?php $__env->startSection('content'); ?>
<div class="row justify-content-center">
    <div class="col-12 col-md-10 col-lg-8">

        <!-- Tabla de Referencia -->
        <div class="card shadow border-0 mb-4 reference-card">
            <div class="card-body p-3">
                <h6 class="text-center mb-3 fw-semibold">Tabla de Referencia Numerológica</h6>
                <div class="reference-table-grid">
                    <!-- Row 1: Numbers -->
                    <div class="ref-table-row">
                        <div class="ref-table-cell ref-number">1</div>
                        <div class="ref-table-cell ref-number">2</div>
                        <div class="ref-table-cell ref-number">3</div>
                        <div class="ref-table-cell ref-number">4</div>
                        <div class="ref-table-cell ref-number">5</div>
                        <div class="ref-table-cell ref-number">6</div>
                        <div class="ref-table-cell ref-number">7</div>
                        <div class="ref-table-cell ref-number">8</div>
                        <div class="ref-table-cell ref-number">9</div>
                    </div>
                    <!-- Row 2: A-I -->
                    <div class="ref-table-row">
                        <div class="ref-table-cell ref-letter">A</div>
                        <div class="ref-table-cell ref-letter">B</div>
                        <div class="ref-table-cell ref-letter">C</div>
                        <div class="ref-table-cell ref-letter">D</div>
                        <div class="ref-table-cell ref-letter">E</div>
                        <div class="ref-table-cell ref-letter">F</div>
                        <div class="ref-table-cell ref-letter">G</div>
                        <div class="ref-table-cell ref-letter">H</div>
                        <div class="ref-table-cell ref-letter">I</div>
                    </div>
                    <!-- Row 3: J-R -->
                    <div class="ref-table-row">
                        <div class="ref-table-cell ref-letter">J</div>
                        <div class="ref-table-cell ref-letter">K</div>
                        <div class="ref-table-cell ref-letter">L</div>
                        <div class="ref-table-cell ref-letter">M</div>
                        <div class="ref-table-cell ref-letter ref-special">N<br><small>Ñ</small></div>
                        <div class="ref-table-cell ref-letter">O</div>
                        <div class="ref-table-cell ref-letter">P</div>
                        <div class="ref-table-cell ref-letter">Q</div>
                        <div class="ref-table-cell ref-letter">R</div>
                    </div>
                    <!-- Row 4: S-Z -->
                    <div class="ref-table-row">
                        <div class="ref-table-cell ref-letter">S</div>
                        <div class="ref-table-cell ref-letter">T</div>
                        <div class="ref-table-cell ref-letter">U</div>
                        <div class="ref-table-cell ref-letter">V</div>
                        <div class="ref-table-cell ref-letter">W</div>
                        <div class="ref-table-cell ref-letter">X</div>
                        <div class="ref-table-cell ref-letter">Y</div>
                        <div class="ref-table-cell ref-letter">Z</div>
                        <div class="ref-table-cell ref-empty"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input Card -->
        <div class="card shadow-lg border-0 mb-4 input-card">
            <div class="card-body p-4">
                <form id="numerologyForm">
                    <div class="mb-3">
                        <label for="nameInput" class="form-label fw-semibold">Ingresa tu nombre completo</label>
                        <input
                            type="text"
                            class="form-control form-control-lg"
                            id="nameInput"
                            placeholder="Ejemplo: Sebastian Gonzalez"
                            autocomplete="off"
                            maxlength="255"
                        >
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg w-100" id="analyzeBtn">
                        <span class="btn-text">Analizar Nombre</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </form>
            </div>
        </div>

        <!-- Results Section -->
        <div id="resultsSection" class="d-none">

            <!-- Original Name Display -->
            <div class="card shadow border-0 mb-4 result-card">
                <div class="card-body text-center p-4">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h5 class="text-muted mb-0">Nombre Analizado</h5>
                        <button type="button" class="btn btn-sm btn-outline-danger" id="clearBtn" title="Limpiar resultados">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                            </svg>
                        </button>
                    </div>
                    <h3 class="display-6 fw-bold" id="analyzedName"></h3>
                </div>
            </div>

            <!-- Numerology Table -->
            <div class="card shadow-lg border-0 result-card">
                <div class="card-body p-4">
                    <h4 class="text-center mb-4">Tabla Numerológica</h4>

                    <!-- Aligned Numerology Grid -->
                    <div class="numerology-grid-container">

                        <!-- Row Labels -->
                        <div class="mb-2 d-flex justify-content-between">
                            <span class="badge bg-primary">V "VOCALES"</span>
                            <span class="badge bg-success">C "CONSONANTES"</span>
                        </div>

                        <!-- The 3-row table structure -->
                        <div class="numerology-table">
                            <div id="numerologyGrid">
                                <!-- Dynamically populated as grid -->
                            </div>
                        </div>

                        <!-- Totals Section -->
                        <div id="numerologyTotals" class="mt-4">
                            <!-- Dynamically populated -->
                        </div>

                    </div>

                    <!-- Ver Casa Button -->
                    <div class="text-center mt-4">
                        <button type="button" id="verCasasBtn" class="btn btn-lg btn-outline-primary ver-casa-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                            </svg>
                            <span id="verCasasText">Ver Casas</span>
                        </button>
                    </div>

                    <!-- Casas Section (Hidden by default) -->
                    <div id="casasSection" class="mt-4 d-none">
                        <div class="card shadow-lg border-0">
                            <div class="card-header casas-header">
                                <h4 class="mb-0 text-center">Cuadro de Numerología - Casas</h4>
                            </div>
                            <div class="card-body p-4">
                                <div class="table-responsive">
                                    <table class="table table-bordered casas-table" id="casasTable">
                                        <thead>
                                            <tr>
                                                <th class="row-label-cell">CASAS</th>
                                                <th>1</th>
                                                <th>2</th>
                                                <th>3</th>
                                                <th>4</th>
                                                <th>5</th>
                                                <th>6</th>
                                                <th>7</th>
                                                <th>8</th>
                                                <th>9</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="row-label-cell">HABITANTES DE BASE</td>
                                                <td id="hab-1"></td>
                                                <td id="hab-2"></td>
                                                <td id="hab-3"></td>
                                                <td id="hab-4"></td>
                                                <td id="hab-5"></td>
                                                <td id="hab-6"></td>
                                                <td id="hab-7"></td>
                                                <td id="hab-8"></td>
                                                <td id="hab-9"></td>
                                            </tr>
                                            <tr>
                                                <td class="row-label-cell">INDUCCIÓN</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td class="row-label-cell">PUENTES</td>
                                                <td id="pue-1"></td>
                                                <td id="pue-2"></td>
                                                <td id="pue-3"></td>
                                                <td id="pue-4"></td>
                                                <td id="pue-5"></td>
                                                <td id="pue-6"></td>
                                                <td id="pue-7"></td>
                                                <td id="pue-8"></td>
                                                <td id="pue-9"></td>
                                            </tr>
                                            <tr>
                                                <td class="row-label-cell">EVOLUCIÓN</td>
                                                <td id="evo-1"></td>
                                                <td id="evo-2"></td>
                                                <td id="evo-3"></td>
                                                <td id="evo-4"></td>
                                                <td id="evo-5"></td>
                                                <td id="evo-6"></td>
                                                <td id="evo-7"></td>
                                                <td id="evo-8"></td>
                                                <td id="evo-9"></td>
                                            </tr>
                                            <tr>
                                                <td class="row-label-cell">INCONSCIENTE</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Agregar Fecha de Nacimiento -->
                                <div class="text-center mt-4">
                                    <button type="button" id="agregarFechaBtn" class="btn btn-lg btn-outline-primary ver-casa-btn">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                                        </svg>
                                        <span id="agregarFechaText">Agregar Fecha de Nacimiento</span>
                                    </button>
                                </div>

                                <!-- Fecha de Nacimiento Input (Hidden by default) -->
                                <div id="fechaNacimientoSection" class="mt-3 d-none">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body p-3">
                                            <label for="fechaNacimientoInput" class="form-label fw-semibold text-center w-100">
                                                Fecha de Nacimiento
                                            </label>
                                            <input
                                                type="date"
                                                class="form-control form-control-lg text-center"
                                                id="fechaNacimientoInput"
                                            >
                                        </div>
                                    </div>
                                </div>

                                <!-- Árbol Numerológico -->
                                <div id="arbolNumerologicoSection" class="mt-4 d-none">
                                    <h4 class="text-center fw-bold mb-2">Árbol Numerológico</h4>
                                    <div class="text-center mb-3 d-md-none">
                                        <button id="expandArbolBtn" class="btn btn-sm btn-outline-primary">
                                            Ampliar imagen
                                        </button>
                                    </div>
                                    <div id="arbolSVGContainer" style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
                                        <svg id="arbolSVG" viewBox="0 100 800 825" style="min-width:340px;width:100%;display:block;">

                                            <!-- ===== LÍNEAS ===== -->
                                            <g stroke="#444" stroke-width="1.5" fill="none">
                                                <!-- Fila horizontal A-B-C-D -->
                                                <line x1="50"  y1="455" x2="750" y2="455"/>
                                                <!-- Triángulo A-E-B -->
                                                <line x1="101" y1="455" x2="211" y2="350"/><!-- A-E -->
                                                <line x1="321" y1="455" x2="211" y2="350"/><!-- B-E -->
                                                <!-- Triángulo B-F-C -->
                                                <line x1="321" y1="455" x2="411" y2="350"/><!-- B-F -->
                                                <line x1="501" y1="455" x2="411" y2="350"/><!-- C-F -->
                                                <!-- G conecta con E y F -->
                                                <line x1="211" y1="350" x2="311" y2="230"/><!-- E-G -->
                                                <line x1="411" y1="350" x2="311" y2="230"/><!-- F-G -->
                                                <!-- H en la cima: diagonales largas a A y C (sin línea a G) -->
                                                <line x1="311" y1="140" x2="101" y2="455"/><!-- H-A diagonal -->
                                                <line x1="311" y1="140" x2="501" y2="455"/><!-- H-C diagonal -->
                                                <!-- J = D + H -->
                                                <line x1="311" y1="140" x2="501" y2="350"/><!-- H-J -->
                                                <line x1="681" y1="455" x2="501" y2="350"/><!-- D-J -->
                                                <!-- Triángulo A-K-B (hacia abajo) -->
                                                <line x1="101" y1="455" x2="211" y2="560"/><!-- A-K -->
                                                <line x1="321" y1="455" x2="211" y2="560"/><!-- B-K -->
                                                <!-- Triángulo B-L-C (hacia abajo) -->
                                                <line x1="321" y1="455" x2="411" y2="560"/><!-- B-L -->
                                                <line x1="501" y1="455" x2="411" y2="560"/><!-- C-L -->
                                                <!-- M = K + L (espejo de G hacia abajo) -->
                                                <line x1="211" y1="560" x2="311" y2="670"/><!-- K-M -->
                                                <line x1="411" y1="560" x2="311" y2="670"/><!-- L-M -->
                                                <!-- N = A + C (espejo de H hacia abajo) -->
                                                <line x1="101" y1="455" x2="311" y2="770"/><!-- A-N diagonal -->
                                                <line x1="501" y1="455" x2="311" y2="770"/><!-- C-N diagonal -->
                                            </g>

                                            <!-- ===== CAJAS ===== -->
                                            <g stroke="#333" stroke-width="1.5" fill="white">
                                                <rect x="285" y="120" width="52" height="40" rx="2"/><!-- H  cx=311 cy=140 -->
                                                <rect x="285" y="210" width="52" height="40" rx="2"/><!-- G  cx=311 -->
                                                <rect x="185" y="330" width="52" height="40" rx="2"/><!-- E  cx=211 -->
                                                <rect x="295" y="330" width="52" height="40" rx="2"/><!-- I  cx=321 -->
                                                <rect x="385" y="330" width="52" height="40" rx="2"/><!-- F  cx=411 -->
                                                <rect x="475" y="330" width="52" height="40" rx="2"/><!-- J  cx=501 -->
                                                <rect x="75"  y="210" width="52" height="40" rx="2"/><!-- V  cx=101 cy=230 -->
                                                <rect x="655" y="210" width="52" height="40" rx="2"/><!-- U  cx=681 cy=230 -->
                                                <rect x="655" y="330" width="52" height="40" rx="2"/><!-- T  cx=681 cy=350 -->
                                                <rect x="75"  y="650" width="52" height="40" rx="2"/><!-- W  cx=101 cy=670 -->
                                                <rect x="75"  y="750" width="52" height="40" rx="2"/><!-- P  cx=101 cy=770 -->
                                                <rect x="285" y="750" width="52" height="40" rx="2"/><!-- N  cx=311 cy=770 -->
                                                <rect x="185" y="860" width="52" height="40" rx="2"/><!-- Q  cx=211 cy=880 -->
                                                <rect x="295" y="860" width="52" height="40" rx="2"/><!-- R  cx=321 cy=880 -->
                                                <rect x="385" y="860" width="52" height="40" rx="2"/><!-- S  cx=411 cy=880 -->
                                                <rect x="285" y="650" width="52" height="40" rx="2"/><!-- M  cx=311 cy=670 -->
                                                <rect x="185" y="540" width="52" height="40" rx="2"/><!-- K  cx=211 -->
                                                <rect x="295" y="540" width="52" height="40" rx="2"/><!-- O  cx=321 -->
                                                <rect x="385" y="540" width="52" height="40" rx="2"/><!-- L  cx=411 -->
                                                <rect x="75"  y="435" width="52" height="40" rx="2" stroke="#250647" stroke-width="3" fill="#ede7f6"/><!-- A  cx=101 -->
                                                <rect x="295" y="435" width="52" height="40" rx="2" stroke="#250647" stroke-width="3" fill="#ede7f6"/><!-- B  cx=321 -->
                                                <rect x="475" y="435" width="52" height="40" rx="2" stroke="#250647" stroke-width="3" fill="#ede7f6"/><!-- C  cx=501 -->
                                                <rect x="655" y="435" width="52" height="40" rx="2" stroke="#250647" stroke-width="3" fill="#ede7f6"/><!-- D  cx=681 -->
                                            </g>

                                            <!-- ===== VALORES CALCULADOS ===== -->
                                            <g id="nodeValues" font-family="sans-serif" font-size="12" fill="#250647" text-anchor="middle" font-weight="bold">
                                                <text id="node-A-val" x="101" y="459"></text>
                                                <text id="node-B-val" x="321" y="459"></text>
                                                <text id="node-C-val" x="501" y="459"></text>
                                                <text id="node-D-val" x="681" y="459"></text>
                                                <text id="node-E-val" x="211" y="354"></text>
                                                <text id="node-F-val" x="411" y="354"></text>
                                                <text id="node-G-val" x="311" y="234"></text>
                                                <text id="node-H-val" x="311" y="144"></text>
                                                <text id="node-I-val" x="321" y="354"></text>
                                                <text id="node-J-val" x="501" y="354"></text>
                                                <text id="node-V-val" x="101" y="234"></text>
                                                <text id="node-T-val" x="681" y="354"></text>
                                                <text id="node-U-val" x="681" y="234"></text>
                                                <text id="node-K-val" x="211" y="564"></text>
                                                <text id="node-L-val" x="411" y="564"></text>
                                                <text id="node-M-val" x="311" y="674"></text>
                                                <text id="node-O-val" x="321" y="564"></text>
                                                <text id="node-N-val" x="311" y="774"></text>
                                                <text id="node-P-val" x="101" y="774"></text>
                                                <text id="node-Q-val" x="211" y="884"></text>
                                                <text id="node-R-val" x="321" y="884"></text>
                                                <text id="node-S-val" x="411" y="884"></text>
                                            </g>

                                            <!-- ===== LETRAS ===== -->
                                            <g id="arbolLetras" font-family="sans-serif" font-size="13" fill="#333" text-anchor="middle" font-weight="bold">
                                                <text x="311" y="175">H</text>
                                                <text x="311" y="265">G</text>
                                                <text x="211" y="385">E</text>
                                                <text x="321" y="385">I</text>
                                                <text x="411" y="385">F</text>
                                                <text x="501" y="385">J</text>
                                                <text x="101" y="265">V</text>
                                                <text x="681" y="265">U</text>
                                                <text x="681" y="385">T</text>
                                                <text x="101" y="705">W</text>
                                                <text x="101" y="805">P</text>
                                                <text x="311" y="805">N</text>
                                                <text x="211" y="915">Q</text>
                                                <text x="321" y="915">R</text>
                                                <text x="411" y="915">S</text>
                                                <text x="311" y="705">M</text>
                                                <text x="211" y="595">K</text>
                                                <text x="321" y="595">O</text>
                                                <text x="411" y="595">L</text>
                                                <text x="101" y="490">A</text>
                                                <text x="321" y="490">B</text>
                                                <text x="501" y="490">C</text>
                                                <text x="681" y="490">D</text>
                                            </g>

                                        </svg>
                                    </div>

                                    <!-- Botón Descargar PDF -->
                                    <div class="text-center mt-4">
                                        <button type="button" id="downloadPdfBtn" class="btn btn-lg btn-outline-primary ver-casa-btn">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                            </svg>
                                            Descargar PDF
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<!-- Modal Árbol Numerológico (móvil) -->
<div class="modal fade" id="arbolModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen-sm-down modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2 px-3">
                <h5 class="modal-title fw-bold">Árbol Numerológico</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body p-2" id="modalArbolBody" style="overflow:auto;-webkit-overflow-scrolling:touch;">
                
            </div>
        </div>
    </div>
</div>

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

<?php $__env->startPush('scripts'); ?>
<script src="<?php echo e(asset('js/numerology.js')); ?>"></script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\numerologia\resources\views/numerology/index.blade.php ENDPATH**/ ?>