<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <meta name="googlebot" content="noindex">
    <title>DNA</title>
    <!-- BOOTSTRAP CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/watch_dna.css?v=<?php echo filemtime('./assets/css/watch_dna.css'); ?>"/>

</head>
<body>    
<?php error_reporting(0); ?>


<div class="main-block container">
    <div class="row">
        <div class="col-md-12 menu_block bg-top">
            <div class="remark">
                <?= trim($record->Remark) ?? '-'; ?>            
            </div>
        </div>
    </div>
        <?php if (!empty($dataImg) || !empty($dataVideo)): ?>
        <div class="row">  
            <div class="col-md-12">                 
                <div>
                    <div class="images-carousel">
                        <?php if($stillMain): ?> 
                            <div>
                                <div class="magnify-div">
                                    <img id="img_0" src="<?= $stillMain; ?>" onmouseover="magnify(this.id)">
                                </div>
                            </div>
                        <?php endif ?>
                        <?php foreach ($dataVideo as $videoValue): ?> 
                            <div>
                                <div class="magnify-div">
                                    <video autoplay muted loop <?php if($this->agent->is_mobile()) { echo 'controls'; } ?>>
                                      <source src="<?= $videoValue; ?>" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        <?php endforeach ?>
                        <?php $i = 1; foreach ($dataImg as $imgValue): ?> 
                            <div>
                                <div class="magnify-div">
                                    <img id="img_<?= $i++ ?>" src="<?= $imgValue; ?>" onmouseover="magnify(this.id)">
                                </div>
                            </div>
                        <?php endforeach ?>
                    </div>
                    <div class="images-carousel-nav carousel-nav">
                        <?php if($stillMain): ?>   
                            <div class="nav_img">
                                <img src="<?= $stillMain; ?>">
                            </div>
                        <?php endif ?>

                        <?php foreach ($dataVideo as $videoValue): ?>
                            <div class="nav_img text-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"/>
                            </svg>
                            </div> 
                        <?php endforeach ?>                                           

                        <?php foreach ($dataImg as $imgValue): ?>   
                            <div class="nav_img">
                                <img src="<?= $imgValue; ?>">
                            </div>
                        <?php endforeach ?>  
                    </div>   
                </div>
            </div>
        </div>
        <?php endif ?>

        <div class="row">            
            <div class="col-md-12 text-justify top-margin" style="">
                <div class="title-heading" style=""> Details</div>
                <div class="col-md-6"> 
                    <div class="division" id="gdDD">
                        <?php foreach ($varDetail as $detRow): ?>  

                            <div class="Detailcol">
                                <div class="key"><?= $detRow['name']; ?></div>
                                <div class="value"><?= $record->{$detRow['column']}; ?></div>
                            </div>
                        <?php endforeach ?>                        
                    </div>
                </div>
                <div class="col-md-6"> 
                    <div class="division" id="gdDD">
                        <?php foreach ($varDetail_2 as $detRow): ?> 

                            <div class="Detailcol">
                                <div class="key"><?= $detRow['name']; ?></div>
                                <div class="value"><?= $record->{$detRow['column']}; ?></div>
                            </div>
                        <?php endforeach ?>                        
                    </div>
                </div>
                

            </div>
        </div>
        
    <div class="download"> <div class="row"> </div> </div>

    <div class="clearfix"></div>

    
</div>

<script> var base_url = '<?php echo base_url(); ?>'; </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/watch_dna.js?v=<?php echo filemtime('./assets/js/watch_dna.js'); ?>"></script>

</body>
</html>