<!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="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
    body{font-family:'Open Sans',sans-serif;font-size:13px;line-height:21px;font-weight:300;color:#666}b,strong{font-weight:600}.row{margin-right:0;margin-left:0}.btn-small{padding:5px 15px}.Detailcol div{border:1px solid;border-collapse:collapse;border-right:0}.Detailcol div:last-child{border-right:1px solid}.odds{padding-left:0;padding-right:0}.btn-system{font-size:13px;width:auto}.keydiv{color:#494949;line-height:20px;text-align:left;margin-top:-1px;padding-left:5px;padding-right:0;font-weight:700}.keyvalue{line-height:20px;margin-top:-1px;padding-left:5px;padding-right:0;background:#fff}.main-block{box-shadow:0 0 6px 3px #c2c0c0;border:1px solid #bababa;background:#fff!important;padding:0;margin:10px auto;font-family:'Open Sans',sans-serif;font-size:13px}.ShowImages img{width:200px;height:200px;margin-bottom:10px;border:1px solid #ccc}.commonbtn{margin-top:-5px}.ShowImages{text-align:center;margin:15px}.divleft{float:left;padding-right:5px}.ChageImgBtn{border:0;background:0;width:48px;height:39px;background-repeat-y:no-repeat}.DivMargin{margin:0 -8px 0 5px}.DivMarginKeyRep{margin:0 -6px 0 5px}.SubDivMargin{margin-right:-10px}@media(max-width:769px){.DivMargin{margin:0 -7px 0 5px}.DivMarginKeyRep{margin:0 -5px 0 5px}}@media(max-width:640px){.Arrow,.Asset .view-d-options,.Heart,.Real{width:100%!important}.DivMargin{margin:0 -3px 0 5px}.DivMarginKeyRep{margin:0 -5px 0 5px}.download-design button{margin-top:10px}.keyvalue{border-right:1px solid!important}.loadingVidC{position:absolute;left:20%;top:10%;padding:25px;background:#fff;width:50%}#loadingVid1{position:absolute;left:11%;top:39%;padding:25px;background:#fff;width:76%}iframe{height:338px!important}#video1{height:449px!important}}.division{display:inline-block;background:#f5f5f5;width:100%;margin-bottom:10px}.title-heading{background:#c7c7c7;color:#2d2d2d;font-size:14px;padding:3px 14px;width:100%;text-align:center;border-bottom:2px solid #034d7f}.download{display:inline-block;width:100%;padding:10px 5px;background:#e8e8e8;margin:10px 0;text-align:center}.floating-button{position:relative;float:left;margin-left:15px;margin-right:15px}.menu_block.floating-button.heading h3{font-size:16px;line-height:32px;margin:0}.top-margin{margin-top:43px}.bg-color{background:#333;padding:10px 0;margin-bottom:13px;text-align:center;color:#fff;font-size:16px}.bg-top{background:#014878;padding:10px 0;margin-bottom:13px;color:#fff;font-size:16px;font-weight:600;border:1px solid #fff}.red{background-color:#e74c3c;box-shadow:0 5px 0 0 #ce3323}.red:hover{background-color:#ff6656}.btn-system{display:inline-block;color:#fff;margin-right:5px;font-weight:300;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border:0;text-transform:uppercase;font-weight:400;opacity:1!important} .btn-system.btn-gray{background-color:#034d7f;box-shadow:0 0 3px 2px #a7a7a7;border:1px solid #034d7f;transition:all .2s} .btn-system.btn-gray:hover{background-color:#fbfbfb;border:1px solid #034d7f;color:#034d7f;box-shadow:0 0 3px 2px #a7a7a7} .btn-system.btn-gray .btn-small{padding:7px 18px}.ChageImgBtn{padding:1px}.loadingVidC{position:absolute;left:20%;top:32%;padding:25px;background:#fff}#liMarquee li img{padding:2px;border:1px solid #ccc}.prodduct-data a{color:#333}#Notavailable{width:100%;height:100%;top:0;left:0;position:fixed;opacity:.7;background-color:#000;z-index:2000;text-align:center}#Notavailable #loading-image{position:absolute;top:34%;left:0;right:0;bottom:0;margin:auto;width:auto;height:auto}#myVideo{right:0;bottom:0;min-width:100%;min-height:100%}#loading{width:100%;height:100%;top:0;left:0;position:fixed;opacity:.7;background-color:#000;z-index:2000;text-align:center}.LoderImage{max-width:100px;height:auto}#loading-image{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:97px;height:97px}
    .btn-system.btn-selected{
            background-color: #ffffff;
            box-shadow: 0 0 3px 2px #d6e9f5;
            border: 1px solid #034d7f;
            color: #014878;
        }.btn-system.btn-selected:hover{background-color: #ffffff;box-shadow: 0 0 3px 2px #d6e9f5;}
    .dna-files{
        padding-top: 15px;
        padding-bottom: 10px;
        margin-top: 5px;
        border:1px solid #d7d7d7;text-align:center}#video360{display:block}.dna-files img{width:100%;height:603px;object-fit:contain}.dna-files iframe{width:100%;border:1px solid #fff;height:698px}  
    #video_div{ display: block; }
    .bt-b2b { margin: 2px;
        border: 1px solid #3769c8;
        box-shadow: 0px 0px 3px #d9e0fd;
        border-radius: 3px;  outline: none !important;}
    .view-d-options.col-md-12 {
        margin-bottom: 5px;
    }
    .dna-files.in{
        padding-top: 0px !important;
        margin-top: 0px !important;
        border: none;
    }
    .dna-up { top: -3000px;position: absolute; }    
    .dna-down { top: unset;position: unset; } 
    video { border-radius: 10px; max-height: 90vh;}
    .Detailcol {
        display: flex;
        flex-wrap: wrap;
    }
  </style>
</head>
<body>    
<?php error_reporting(0); 
$row = $record[0]; ?> 
<?php if(empty($record)){ ?>
<div id="Notavailable"><div id="loading-image"><img src="<?php echo base_url(); ?>assets/images/dna/BelgiumNY_Soldout.png" style="max-width:300px;" class="LoderImage" /></div></div>
<?php } ?>
<div class="main-block container">
    <div class="row">
        <div class="col-md-12 menu_block bg-top">
            <div class="col-md-4"><b>Diamond View</b></div>
            <div class="col-md-8" id="dvSrtDetail">
                <?php 
                    echo ($row->PACKET_NO) ? $row->PACKET_NO.' ' : '';
                    echo ($row->SHAPE_SEQ) ? $row->SHAPE_SEQ.' ' : '';
                    echo ($row->CTS) ? $row->CTS.' ' : '';
                    echo ($row->COLOR_SEQ) ? $row->COLOR_SEQ.' ' : '';
                    echo ($row->PURITY_SEQ) ? $row->PURITY_SEQ.' ' : '';
                    echo ($row->CUT_SEQ) ? $row->CUT_SEQ.' ' : '';
                    echo ($row->POLISH_SEQ) ? $row->POLISH_SEQ.' ' : '';
                    echo ($row->SYMM_SEQ) ? $row->SYMM_SEQ.' ' : '';
                    echo ($row->FLS_SEQ) ? $row->FLS_SEQ.' ' : '';
                ?>                                
            </div>
        </div>
    </div>
        <div class="row">            
            <div class="view-d-options col-md-12">
                <?php if($data_video360 || $data_mp4){ ?>
                <div class="divleft">
                    <input type="button" onclick="toggleView('video360')" class="ChageImgBtn" style="background-image:url('<?php echo base_url(); ?>assets/images/dna/v.png');" title="V-360 Video" data-toggle="tooltip">
                </div>
                <?php } ?>
                <?php //if($data_still){ ?>
                <div class="divleft">
                    <input type="button" onclick="toggleView('stillImage');" class="ChageImgBtn" style="background-image:url('<?php echo base_url(); ?>assets/images/dna/360Dbig.png');" title="V-360 Image" data-toggle="tooltip">
                </div>
                <?php //} ?>

                <?php foreach ($dataImg as $imgValue): ?>                        
                    <?php if($imgValue['isAvail']){ ?>
                    <div class="divleft">
                        <input type="button" onclick="toggleView('<?= $imgValue['id']; ?>');" class="ChageImgBtn"  title="<?= $imgValue['tooltip']; ?>" data-toggle="tooltip"
                        style="background-image:url('<?php echo base_url(); ?>assets/images/dna/<?= $imgValue['image']; ?>');">
                    </div>
                    <?php } ?>
                <?php endforeach ?>

                <?php foreach ($dataVideo as $vidValue): ?>                        
                    <?php if($vidValue['isAvail']){ ?>
                    <div class="divleft">
                        <input type="button" onclick="toggleView('<?= $vidValue['id']; ?>');" class="ChageImgBtn" 
                        style="background-image:url('<?php echo base_url(); ?>assets/images/dna/<?= $vidValue['image']; ?>');" title="<?= $vidValue['tooltip']; ?>" data-toggle="tooltip">
                    </div>
                    <?php } ?>
                <?php endforeach ?>

                <?php foreach ($dataB2cVideo as $vidValue): ?>                        
                    <?php if($vidValue['isAvail']){ ?>
                    <div class="divleft">
                        <button type="button" onclick="toggleView('<?= $vidValue['id']; ?>');" 
                            class="btn btn-default bt-b2b" title="<?= $vidValue['tooltip']; ?>" data-toggle="tooltip">
                        <?= $vidValue['tooltip']; ?> </button>
                    </div>
                    <?php } ?>
                <?php endforeach ?>
            </div>

            <div class="view-d-options col-md-12" >
                <?php /* if ($isB2b): ?>                        
                    <div class="divleft" style="font-size: 16px;font-weight: 600;vertical-align: middle;padding: 10px 0;"> B2B images: </div>
                    <?php foreach ($dataB2B as $B2BValue): ?>                        
                        <?php if($B2BValue['isAvail']){ ?>
                        <div class="divleft">
                            <button type="button" onclick="toggleView('<?= $B2BValue['id']; ?>');" class="btn btn-default bt-b2b"  
                            title="<?= $B2BValue['tooltip']; ?>" data-toggle="tooltip"><?= $B2BValue['title']; ?> </button>
                        </div>
                        <?php } ?>
                    <?php endforeach ?>
                <?php endif */ ?>                
            </div>

            <div class="view-d-options col-md-12" >
                <?php if ($isB2bVideo): ?>                        
                    <div class="divleft" style="font-size: 16px;font-weight: 600;vertical-align: middle;padding: 10px 0;"> B2B Video: </div>
                    <?php foreach ($dataB2bVideo as $B2BValue): ?>                        
                        <?php if($B2BValue['isAvail']){ ?>
                        <div class="divleft">
                            <button type="button" onclick="toggleView('<?= $B2BValue['id']; ?>');" 
                                class="btn btn-default bt-b2b" title="<?= $B2BValue['tooltip']; ?>" data-toggle="tooltip">
                            <?= $B2BValue['tooltip']; ?> </button>
                        </div>
                        <?php } ?>
                    <?php endforeach ?>
                <?php endif  ?>                
            </div>

            <div class="col-md-12">
                
                <div id="video_div" class="dna-files in dna-up">
                    <div class="divleft" style="margin-bottom: 8px;width: 100%;text-align: left;">
                        <?php if($data_video360 || $data_mp4){ ?>
                        <button style="margin:5px;" onclick="toggleView('video360')" id="btn_video360" class="btn-system btn-small btn-selected">Video 1</button>
                        <?php } ?>
                        <?php if($data_video_2 || $data_mp4_2){ ?>
                        <button style="margin:5px;" onclick="toggleView('video_2')" id="btn_video_2" class="btn-system btn-small btn-gray">Video 2</button>
                        <?php } ?>
                    </div>                    
                    <?php if($data_video360){ ?>
                    <div id="video360" class="dna-files dna-up">
                        <iframe id="video" class="Video Cls" src="<?php echo $data_video360; ?>"></iframe>
                    </div>
                    <?php } else if($data_mp4){ ?>
                    <div id="video360" class="dna-files dna-up">
                        <video id="video" autoplay="" loop="" muted="" width="auto" >
                        <source src="<?php echo $data_mp4; ?>" type="video/mp4"></video>
                    </div>
                    <?php } ?>
                    <?php if($data_video_2){ ?>
                    <div id="video_2" class="dna-files dna-up">
                        <iframe class="Video Cls" src="<?php echo $data_video_2; ?>"></iframe> 
                    </div>
                    <?php } else if($data_mp4_2){ ?>
                    <div id="video_2" class="dna-files dna-up">
                        <video id="video_2" autoplay="" loop="" muted="" width="auto" >
                        <source src="<?php echo $data_mp4_2; ?>" type="video/mp4"></video>
                    </div>
                    <?php } ?>
                </div>         
                
                <div id="image_div" class="dna-files in dna-up">
                    <div class="divleft" style="margin-bottom: 8px;width: 100%;text-align: left;">
                        <?php if($data_still){ ?>
                        <button style="margin:5px;" onclick="toggleView('stillImage')" id="btn_stillImage" class="btn-system btn-small btn-gray">Image 1</button>
                        <?php } ?>
                        <?php if($data_still_2){ ?>
                        <button style="margin:5px;" onclick="toggleView('stillImage_2')" id="btn_stillImage_2" class="btn-system btn-small btn-gray">Image 2</button>
                        <?php } ?>
                    </div>                    
                    <?php if($data_still){ ?>
                    <div id="stillImage" class="dna-files dna-up">
                        <a id="AReal" target="_blank" href="<?php echo $data_still; ?>" class="jzoom">
                            <img src="<?php echo $data_still; ?>" >
                        </a>
                    </div>
                    <?php } ?>
                    <?php if($data_still_2){ ?>
                    <div id="stillImage_2" class="dna-files dna-up">
                        <a target="_blank" href="<?php echo $data_still_2; ?>" class="jzoom">
                            <img src="<?php echo $data_still_2; ?>" >
                        </a>
                    </div>
                    <?php } ?>
                </div>

                <?php foreach ($dataImg as $imgValue): ?>                        
                    <?php if($imgValue['isAvail']){ ?>
                    <div id="<?= $imgValue['id']; ?>" class="dna-files dna-up">
                        <a target="_blank" href="<?= $imgValue['path']; ?>" class="jzoom">
                            <img src="<?= $imgValue['path']; ?>" >
                        </a>
                    </div>
                    <?php } ?>
                <?php endforeach ?>
                <?php foreach ($dataVideo as $vidValue): ?>                        
                    <?php if($vidValue['isAvail']){ ?>
                    <div id="<?= $vidValue['id']; ?>" class="dna-files dna-up">
                        <iframe class="Video2 Cls" src="<?= $vidValue['path']; ?>"></iframe>
                    </div>
                    <?php } ?>
                <?php endforeach ?>

                <?php foreach ($dataB2cVideo as $B2BValue): ?>                        
                    <?php if($B2BValue['isAvail']){ ?>                        
                    <div id="<?= $B2BValue['id']; ?>" class="dna-files dna-up">
                        <video autoplay="" loop="" muted="" width="auto" >
                        <source src="<?= $B2BValue['path']; ?>" type="video/mp4"></video>
                    </div>
                    <?php } ?>
                <?php endforeach ?>
                <?php /* if ($isB2b): ?>
                    <?php foreach ($dataB2B as $B2BValue): ?>                        
                        <?php if($B2BValue['isAvail']){ ?>
                        <div id="<?= $B2BValue['id']; ?>" class="dna-files dna-up">
                            <a target="_blank" href="<?= $B2BValue['path']; ?>" class="jzoom">
                                <img src="<?= $B2BValue['path']; ?>" >
                            </a>
                        </div>
                        <?php } ?>
                    <?php endforeach ?>
                <?php endif */ ?>
                <?php if ($isB2bVideo): ?>
                    <?php foreach ($dataB2bVideo as $B2BValue): ?>                        
                        <?php if($B2BValue['isAvail']){ ?>                        
                        <div id="<?= $B2BValue['id']; ?>" class="dna-files dna-up">
                            <video autoplay="" loop="" muted="" width="auto" >
                            <source src="<?= $B2BValue['path']; ?>" type="video/mp4"></video>
                        </div>
                        <?php } ?>
                    <?php endforeach ?>
                <?php endif ?>
                
            </div>
        </div>
        <div class="row">            
            <div class="col-md-12 text-justify top-margin" style="font-size:13px;padding: 0;">
                <div class="col-md-6"> 
                    <div class="division" id="gdDD">
                        <div class="title-heading" style=""> <b>Diamond Details</b></div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Stock #</b></div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->PACKET_NO)) ? $row->PACKET_NO : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>REPORT NO</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->REPORT_NO)) ? $row->REPORT_NO : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Lab</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->LAB_SEQ)) ? $row->LAB_SEQ : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Rap $</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->RATE)) ? $row->RATE : '-'; ?></b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="division" id="gdDG">
                        <div class="title-heading" style=""> <b>Diamond Grading</b></div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Shape</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->SHAPE_SEQ)) ? $row->SHAPE_SEQ : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Cut</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CUT_SEQ)) ? $row->CUT_SEQ : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Carat</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CTS)) ? $row->CTS : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Polish</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->POLISH_SEQ)) ? $row->POLISH_SEQ : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Clarity</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->PURITY_SEQ)) ? $row->PURITY_SEQ : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Symmetry</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->SYMM_SEQ)) ? $row->SYMM_SEQ : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Color</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->COLOR_SEQ)) ? $row->COLOR_SEQ : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Fluorescence</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->FLS_SEQ)) ? $row->FLS_SEQ : '-'; ?></b>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="division" id="gdMM">
                        <div class="title-heading" style=""> <b>Measurements</b></div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Shade</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->SHADE)) ? $row->SHADE : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Crown Angle</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CROWN_ANGLE)) ? $row->CROWN_ANGLE.'°' : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Depth %</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->DEPTH_PER)) ? $row->DEPTH_PER.'%' : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Crown Height</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CROWN_HEIGHT)) ? $row->CROWN_HEIGHT : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Table %</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->TABLE_PER)) ? $row->TABLE_PER.'%' : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Pav Angle</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->PAVILLION_ANGLE)) ? $row->PAVILLION_ANGLE.'°' : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Length</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->LENGTH_1)) ? $row->LENGTH_1 : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Pav Height</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->PAVILLION_HEIGHT)) ? $row->PAVILLION_HEIGHT : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Width</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->WIDTH)) ? $row->WIDTH : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Girdle</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->GIRDLE)) ? $row->GIRDLE : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Depth</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->DEPTH)) ? $row->DEPTH : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Culet</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CULET)) ? $row->CULET : '-'; ?></b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="division" id="ID">
                        <div class="title-heading" style=""> <b>Inclusion Details</b></div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Center Black</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CN)) ? $row->CN : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Side Black</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->SN)) ? $row->SN : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Center White</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->CW)) ? $row->CW : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Side White</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->SW)) ? $row->SW : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Laser Ins.</b>
                            </div>
                            <div class="col-xs-6 col-sm-9 keyvalue"><b><?php echo (trim($row->INSCRIPTION)) ? $row->INSCRIPTION : '-'; ?></b>
                            </div>                            
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b><?= ($row->DIA == 'Lab Grown') ? 'Growth Type' : 'Brand' ; ?> </b></div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->HA)) ? $row->HA : '-'; ?></b></div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Table Open</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->TABLE_OPEN)) ? $row->TABLE_OPEN : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Eye Clean</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->EYE_CLEAN)) ? $row->EYE_CLEAN : '-'; ?></b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Milky</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->MILKY)) ? $row->MILKY : '-'; ?></b>
                            </div>
                        </div>
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv"><b>Ratio</b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b><?php echo (trim($row->Ratio)) ? $row->Ratio : '-'; ?></b>
                            </div>
                        <!-- </div>
                        <div class="Detailcol"> -->
                            <div class="col-xs-6 col-sm-3 keydiv"><b> </b>
                            </div>
                            <div class="col-xs-6 col-sm-3 keyvalue"><b> </b>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">                
                    <div class="division">
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv odds" >Key To Symbols</div>
                            <div class="col-xs-6 col-sm-9 keyvalue odds"><b><span id="kts"><?php echo (trim($row->KEY_TO_SYMBOLS)) ? $row->KEY_TO_SYMBOLS : '-'; ?></span></b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">                
                    <div class="division">
                        <div class="Detailcol">
                            <div class="col-xs-6 col-sm-3 keydiv evens" style="border-right:1px solid;">Report Comments</div>
                            <div class="col-xs-6 col-sm-9 keyvalue evens" style="word-wrap:break-word;"><b><span id="rc"><?php echo (trim($row->REPORT_COMMENTS)) ? $row->REPORT_COMMENTS : '-'; ?></span></b>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    <div class="download">
        <div class="row">
            <div class="download-design">
                <button onclick="download('excel','<?php echo $row->PACKET_NO; ?>')" class="btn-system btn-small btn-gray"><span class="button-icon glyphicon glyphicon-download-alt"></span> Stock</button>
                <button onclick="download('image','<?php echo $row->PACKET_NO; ?>')" class="btn-system btn-small btn-gray"><span class="button-icon glyphicon glyphicon-download-alt"></span> Image</button>
                <button onclick="download('video','<?php echo $row->PACKET_NO; ?>')" class="btn-system btn-small btn-gray"><span class="button-icon glyphicon glyphicon-download-alt"></span> Video</button>
                <button onclick="download('cert','<?php echo $row->REPORT_NO; ?>')" class="btn-system btn-small btn-gray"><span class="button-icon glyphicon glyphicon-download-alt"></span> Certificate</button>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-md-12 menu_block bg-color" style="display:none">
        <div class="row ">
            <div class=""><b> Similar Diamond</b>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /*$(window).load(function () {
                        $("marquee").hover(function () {
                            this.stop();
                        }, function () {
                            this.start();
                        });
                    });*/
    </script>
    <style type="text/css">
        #liMarquee li {
            display: inline-block;
            margin-left: 20px;
        }        
        #liMarquee li img {
            height: 60px;
            width: 60px;
            margin-right: 10px;
        }
    </style>
    <div style="display:none">
        <marquee direction="left" id="liMarquee" scrolldelay="1" scrollamount="5" behavior="scroll"></marquee>
    </div>
    <div class="clearfix"></div>
    <div class="col-md-12 menu_block">
        <div class="row">
            <div class="spacing title-heading"><b>Diamond Certificate</b>
            </div>
        </div>
    </div>
    <div class="row" style="margin: 0;padding-bottom: 15px;">
        <?php if($data_cert){ ?>
            <iframe class="col-lg-12 col-md-12 col-sm-12 iframe" id="Iframecerti" src="<?php echo $data_cert; ?>" style="width:100%; height:750px;border: 0px solid black;"></iframe>
        <?php } ?>
    </div>
</div>
<form action="<?php echo base_url(); ?>dna-download-file" id="form_1" method="post" style="display: none;">
    <input type="hidden" name="type" id="form_1_type">
    <input type="hidden" name="stock" id="form_1_stock">
</form>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var base_url = '<?php echo base_url(); ?>';
</script>
<script>
   $(document).ready(function(){ 
        $("#video_div,#video360").addClass('dna-down').removeClass('dna-up');  
    });
    function download(type,stock) {
        $("#form_1_type").val(type);
        $("#form_1_stock").val(stock);
        document.getElementById("form_1").submit();
    } 
</script>
<script>
     function toggleView(type) {   
        $(".dna-files").addClass('dna-up').removeClass('dna-down');
        if(type=='video360' || type=='video_2') {   
            $("#video_div").addClass('dna-down').removeClass('dna-up');
            if(type=='video360') {   
                $("#btn_video360").removeClass('btn-gray').addClass('btn-selected');
                $("#btn_video_2").addClass('btn-gray').removeClass('btn-selected');
            } else if(type=='video_2') {   
                $("#btn_video_2").removeClass('btn-gray').addClass('btn-selected');
                $("#btn_video360").addClass('btn-gray').removeClass('btn-selected');
            }
        } else if(type=='stillImage' || type=='stillImage_2') {  
            $("#image_div").addClass('dna-down').removeClass('dna-up');
            if(type=='stillImage') {   
                $("#btn_stillImage").removeClass('btn-gray').addClass('btn-selected');
                $("#btn_stillImage_2").addClass('btn-gray').removeClass('btn-selected');
            } else if(type=='stillImage_2') {   
                $("#btn_stillImage_2").removeClass('btn-gray').addClass('btn-selected');
                $("#btn_stillImage").addClass('btn-gray').removeClass('btn-selected');
            }
        }
        $("#"+type).addClass('dna-down').removeClass('dna-up');
     }
</script>
</body>
</html>