<!DOCTYPE html>
<html dir="rtl">
    <head>
        <title>شاشه عمليات</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Tajawal">
        <link rel="stylesheet" href="{$path}/op/bootstrap.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="{$path}/op/jquery.js"></script>
        <style>

            body {
                font-family: 'Tajawal', sans-serif;

            }

            table th, table td {
                text-align: center;
            }

            .danger {
                color: red
            }

            .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
                border: 1px solid #656565;
            }

            .table-dark td, .table-dark th, .table-dark thead th {
                border-color: transparent;
            }

            .bt {
                border-top: 2px solid #000 !important;
            }

            .bl {
                border-left: 2px solid #000 !important;

            }

            .table {
                border: 1px solid #ddd;
                width: 25%;
                float: right;
            }

            .table thead th, .table td {
                border: 0 !important;
            }

            thead {
                background-color: #173f5f;
                color: #fff;
            }

            thead th {
                color: #fff
            }

            .bg-red {
                background-color: #53cbda;
                color: #000;
                font-weight: bold;
            }

            .table td, .table th {
                vertical-align: middle !important;
                padding: 0.25rem !important;
            }

            .bg-info {
                background-color: #cfeef3 !important;
            }

            .bg-success {
                background-color: #89e29e !important;
            }

            .bg1 {
                background-color: #20639b;
                color: #fff;
                padding: 10px !important;
            }

            .bg2 {
                background-color: #3caea3;
                padding: 10px !important;
            }

            .bg3 {
                background-color: #caa521;
                padding: 10px !important;
            }

            .bg4 {
                background-color: #ed553b;
                padding: 10px !important;
            }

            .bg5 {
                background-color: #6c6a68;
                padding: 10px !important;
            }

            @media (min-width: 767px) and (max-width: 1080px) {
                .table {
                    width: 50%;
                    float: right;
                }
            }

            @media (max-width: 767px) {
                .table {
                    width: 100%;
                    float: right;
                }
            }

            /* .bb{
              border-bottom: 3px solid #000;
            } */
        </style>

    </head>
    <body>
        <input type="hidden" id="hosturl" value="{$hosturl}"/>
        <input type="hidden" id="path" value="{$path}"/>
        <div class="full-container table-responsive" style=" padding-top: 20px;"    id="operation_container">
            {assign var=count value=1}
            {foreach $rooms as $room}
                <table class="table table-striped table-hover ">
                    <thead>
                        <tr>
                            <th class="bg{$count}" style="padding: 10px!important;">{$room.name}</th>
                        </tr>
                        <tr>
                            <th class="bg5" style="padding: 10px!important;">{if empty($room.reserve.name)}لا يوجد طبيب{else}{$room.reserve.name}{/if}</th>
                        </tr>
                        <tr class=" bb">
                            <th> اسم الحالة</th>
                        </tr>
                    </thead>
                    <tbody>
                        {assign var=op_itr value=1}
                        {foreach $room.reserve.visits as $single}
                            <tr class="{if $op_itr eq 1}even bg-success{elseif $op_itr eq 2}bg-info bb{/if}">
                                <td>{$op_itr} - {$single->patient_name}</td>
                            </tr>
                        {capture assign=op_itr}{$op_itr+1}{/capture}
                    {/foreach}
                </tbody>

            </table>
        {capture assign=count}{$count+1}{/capture}
    {/foreach}
</div>
{literal}
    <script>
        $(document).ready(function () {
            var host_url = $('#hosturl').val();

            setInterval(function () {
                $.post(host_url + '/controllers/index1.php?ac=clinicsInfo', function (result) {
                    //console.log(result);
                    $('#operation_container').html(result);
                });
            }, 30000); //120000
        });
    </script>
{/literal}


</body>
</html>

