<style>
    .product-image-overlay {
        position: fixed;
        top: 15%;
        left: 40%;
        /* text-align: center; */
        width: 30%;
        height: 50%;
        background: rgba(4, 0, 0, 0.38);
        z-index: 9999;
        border-radius: 45px;
        display: none;
    }

    .product-image-overlay .product-image-overlay-close {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 20px;
        color: #eee;
        text-align: center;
        cursor: pointer;
        z-index: 1;
    }

    .product-image-overlay img {
        width: auto;
        max-width: 80%;
        height: auto;
        max-height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">اداره الموظفين</a></li>
            <li><a href="#">تقارير</a></li>
            <li class="active">حضور موظف</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <h3 class="panel-title">حضور موظف</h3>
                <a href="{$youtubes[175]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>
            </div>
            <div class="panel-body">



                <form class="form-inline hidden-print" method="post" action="?do=attendanceReport">
                    <div class="form-group">
                        <label class="sr-only"> الموظف</label>
                        <select class="select2" name="empid" id="empid">
                            <option value="-1"> -- اختر موظف -- </option>
                            {foreach $employees as $e}
                            <option value="{$e->employeeId}">{$e->employeeName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="sr-only">من التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off" data-date-format="yyyy-mm-dd" name="from" id="from" readonly>
                    </div>
                    <div class="form-group">
                        <label class="sr-only">إلى التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off" data-date-format="yyyy-mm-dd" name="to" id="to" readonly>
                    </div>

                    <label for="txtSearch"></label>

                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>
                <hr/>

                {if isset($employeeAttendanceData)}
                <br/>
                <table class="table table-black dataTableClass">
                    <thead>
                        <tr bgcolor="">
                            <th>#</th>
                            <th>الموظف</th>
                            <th>التارريخ</th>
                            <th>الصورة</th>
                        </tr>
                    </thead>
                    <tbody>
                        {assign var=i value=1}
                        {foreach $employeeAttendanceData as $emp}
                        <tr>
                            <td>{$i}</td>
                            <td>{$emp->employeeName}</td>
                            <td>{$emp->sysdate}</td>
                            <td><img class="empimage" src="../upload/employeeAttendance/{$emp->theImage}" width="50" height="30" />
                        </tr>
                        {assign var=i value=$i+1}
                        {/foreach}

                </table>
                {/if}

            </div>
        </div>
    </div>
</div>
{literal}
<script>
    $('body').on('click', '.empimage', function () {

        $('body').append('<div class="product-image-overlay"><span class="product-image-overlay-close">x</span><img src="" /></div>');
        var productImage = $('img');
        var productOverlay = $('.product-image-overlay');
        var productOverlayImage = $('.product-image-overlay img');
        productImage.click(function () {
            var productImageSource = $(this).attr('src');
            productOverlayImage.attr('src', productImageSource);
            productOverlay.fadeIn(100);
            $('body').css('overflow', 'hidden');
            $('.product-image-overlay-close').click(function () {
                productOverlay.fadeOut(100);
                $('body').css('overflow', 'auto');
            });
        });
    });
</script>
{/literal}