<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Additional CSS Files -->
    <link rel="stylesheet" type="text/css" href="{$path}/assets/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="{$path}/assets/css/font-awesome.css">

    <link rel="stylesheet" href="{$path}/assets/css/custom.css">

    <link rel="stylesheet" href="{$path}/assets/css/bootstrap-rtl.min.css">

    <link rel="stylesheet" href="{$path}/assets/css/custom-rtl.css">

</head>

<body>
<input type="hidden" id="hosturl" value="{$hosturl}"/>
<input type="hidden" id="path" value="{$path}"/>


<!-- ***** Main Banner Area Start ***** -->
<div id="top">
    <div class="container-fluid">
        <div class="row">

            <div class="left-content" style="height:745px;">
                <h5 class="white-head">عيادات يَهَب للخصوبة</h5>

                <div class="col-lg-5 col-md-5 col-sm-12" id="operation_container">
                    <div class="inner-content">
                        <!--<img src="{$path}/assets/images/logo.png" width="100" class="logo">-->
                        <div class="card">
                            <h5 class="text-center">الكشف الحالي /</h5>
                            <hr>
                            <h6 class="name-p red">{$last_entered->patient_name}</h6>
                        </div>
                        <div class="card">

                            <ul>
                                <h5 class="text-center">الكشف التالي /</h5>
                                <hr>
                                {assign var=itr value=1}
                                {foreach $result as $single}
                                    <li class="name-p {if $itr eq 1}green{/if}">
                                        {$single->patient_name}
                                    </li>
                                    {capture assign=itr}{$itr+1}{/capture}
                                {/foreach}

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-12">
                    <div class="main-banner header-text">

                        <video style="width: 100%;height: 500px;border-radius: 20px;" id="Player" onclick="this.paused ? this.play() : this.pause();" autoplay controls muted>
                            {assign var=itr value=1}
                            {foreach $screen_sliders as $slider}
                                {if $itr eq 1}
                                    <source src="{$hosturl}/../upload/screen_slider/{$slider->image}" type="video/mp4">
                                {/if}
                            {capture assign=itr}{$itr+1}{/capture}
                            {/foreach}
                            Your browser does not support the video tag.</video>

                        {*<div class="Modern-Slider">
                            {foreach $screen_sliders as $slider}
                                &lt;!&ndash; Item &ndash;&gt;
                                <div class="item">
                                    <div class="img-fill">
                                        <img src="{$hosturl}/../upload/screen_slider/{$slider->image}" alt="">
                                    </div>
                                </div>
                                &lt;!&ndash; // Item &ndash;&gt;
                            {/foreach}

                        </div>*}
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<!-- ***** Main Banner Area End ***** -->

<!-- jQuery -->
<script src="{$path}/assets/js/jquery-2.1.0.min.js"></script>

<!-- Bootstrap -->
<script src="{$path}/assets/js/popper.js"></script>
<script src="{$path}/assets/js/bootstrap.min.js"></script>

<!-- Plugins -->
<script src="{$path}/assets/js/slick.js"></script>

<!-- Global Init -->
<script src="{$path}/assets/js/custom.js"></script>
<script>
    let videos_scr = [];
    {foreach $screen_sliders as $slider}
        videos_scr.push("{$hosturl}/../upload/screen_slider/{$slider->image}");
    {/foreach}
    let elm = 0; let Player = document.getElementById('Player');
    Player.onended = function(){
        if(++elm < videos_scr.length){
            Player.src = videos_scr[elm]; Player.play();
            if (elm === videos_scr.length - 1) {
                elm = -1 ;
            }
        }
    }
</script>
{literal}

    <script>
        $(document).ready(function () {
            var host_url = $('#hosturl').val();

            setInterval(function () {
                $.post(host_url + '/controllers/index.php?ac=loadInfo', function (result) {
                    //console.log(result);
                    $('#operation_container').html(result);
                });
            }, 30000); //120000
        });

    </script>
{/literal}

</body>
</html>