<style>

    ::-webkit-scrollbar {

        display: none;

    }

</style>

<?php

include('../../path.php');
require_once(ROOT_CONFIG);

$Id_Subramo_Fianza=!empty($_REQUEST['Id_Subramo_Fianza'])?$_REQUEST['Id_Subramo_Fianza']:'';

$Odbj_conexion = new odbconexion;
$conexion=$Odbj_conexion->openconection();
$consulta="SELECT * FROM subramos_fianzas WHERE Id_Subramo_Fianza='$Id_Subramo_Fianza'";
$Array_adapter=$conexion->query($consulta);
$conexion->close();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalles de subramos fianzas</title>
    <link rel="stylesheet" href="../../../dist/css/styles_datos.css">
</head>
<body>
    <div class="container-dato">
    <?php

    // Verificar si se encontró registros

    if ($Array_adapter->num_rows > 0) {

        while ($Field_subramos_fianzas=$Array_adapter->fetch_assoc())

        {


                if($Field_subramos_fianzas['Subramo']!=''){

                    echo "<p><b>Subramo: </b>".$Field_subramos_fianzas['Subramo']."</p>";

                }


        }
    } else {
         echo "<h1 style='text-align:center;'>No se han encontrado los datos del registro seleccionado!.</h1>";
    }

    ?>
    </div>

    <!-- Modal para contenido multimedia -->
    <div id="modal-media-dato" class="modal-media-dato" style="flex-direction: column;">
        <span class="close-modal-dato">&times;</span>
        <div class="modal-content-dato">
            <!-- Aquí se cargará el contenido multimedia -->
        </div>
        <div class="modal-actions-dato">
            <button id="btn-download">Descargar</button>
            <button id="btn-share">Compartir</button>
        </div>
    </div>

    <!-- Modal para ver los datos -->
    <div id="modal-data-dato" class="modal-data-dato">
        <div class="modal-data-dato-content">
            <!-- Aquí puedes mostrar los datos -->
            <p>Contenido del Modal de Datos</p>
        </div>
    </div>

    <script>
        // Mostrar el modal con la imagen o video en zoom
        document.querySelectorAll('.img-thumbnail-dato, .video-thumbnail-dato').forEach(item => {
            item.addEventListener('click', (e) => {
                const target = e.target.getAttribute('data-target');
                const modalContent = document.querySelector('.modal-content-dato');

                if (target === 'photo') {
                    modalContent.innerHTML = `<img src="${e.target.src}" alt="Foto">`;
                } else if (target === 'video') {
                    modalContent.innerHTML = `<video src="${e.target.src}" autoplay muted loop></video>`;
                }

                document.getElementById('modal-media-dato').style.display = 'flex';
            });
        });

        // Cerrar el modal de medios
        document.querySelector('.close-modal-dato').addEventListener('click', () => {
            document.getElementById('modal-media-dato').style.display = 'none';
        });

        window.addEventListener('click', (e) => {
            if (e.target === document.getElementById('modal-media-dato')) {
                document.getElementById('modal-media-dato').style.display = 'none';
            }
        });
    </script>
    <script>
    let currentMediaUrl = '';
    let currentMediaType = '';

    /*document.querySelectorAll('.img-thumbnail-dato, .video-thumbnail').forEach(item => {
        item.addEventListener('click', (e) => {
            const target = e.target.getAttribute('data-target');
            const modalContent = document.querySelector('.modal-content-dato');

            currentMediaUrl = e.target.src;
            currentMediaType = target;

            if (target === 'photo') {
                modalContent.innerHTML = `<img src="${currentMediaUrl}" alt="Foto">`;
            } else if (target === 'video') {
                modalContent.innerHTML = `<video src="${currentMediaUrl}" controls autoplay></video>`;
            }

            document.getElementById('modal-media-dato').style.display = 'flex';
        });
    });*/

    document.querySelectorAll('.img-thumbnail-dato, .video-thumbnail-dato, .pdf-thumbnail-dato').forEach(item => {

        item.addEventListener('click', (e) => {

            const target = item.getAttribute('data-target');
            const modalContent = document.querySelector('.modal-content-dato');

            // Soporta img, video y pdf
            currentMediaUrl =
                item.getAttribute('data-src') ||
                item.getAttribute('src') ||
                item.getAttribute('data');

            currentMediaType = target;

            modalContent.innerHTML = '';

            if (target === 'photo') {
                modalContent.innerHTML = `
                    <img src="${currentMediaUrl}" alt="Foto" style="max-width:100%;max-height:80vh;">
                `;
            }
            else if (target === 'video') {
                modalContent.innerHTML = `
                    <video src="${currentMediaUrl}" controls autoplay style="max-width:100%;max-height:80vh;"></video>
                `;
            }
            else if (target === 'pdf') {
                modalContent.innerHTML = `
                    <iframe src="${currentMediaUrl}" width="100%" height="600px"></iframe>
                `;
            }

            document.getElementById('modal-media-dato').style.display = 'flex';
        });

    });

    // Descargar
    document.getElementById('btn-download').addEventListener('click', () => {
        const a = document.createElement('a');
        a.href = currentMediaUrl;
        a.download = '';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });

    // Compartir (Web Share API)
    document.getElementById('btn-share').addEventListener('click', async () => {
        if (navigator.share) {
            await navigator.share({
                title: 'Archivo compartido',
                url: currentMediaUrl
            });
        } else {
            alert('Tu navegador no soporta compartir. Copia el enlace:\n' + currentMediaUrl);
        }
    });

    // Cerrar modal
    document.querySelector('.close-modal-dato').addEventListener('click', () => {
        document.getElementById('modal-media-dato').style.display = 'none';
    });

    window.addEventListener('click', (e) => {
        if (e.target === document.getElementById('modal-media-dato')) {
            document.getElementById('modal-media-dato').style.display = 'none';
        }
    });
</script>

</body>
</html>


