@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
time_tables List
@parent
@stop

{{-- Page content --}}
@section('content')
<section class="content-header">
    <h1><b>Time Schedule for  Dinning </b></h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{ route('dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                Dashboard
            </a>
        </li>
        <li>Time Table</li>
        <li class="active">time_tables</li>
    </ol>
</section>

<section class="content paddingleft_right15">
    <div class="row">
        <div class="panel panel-primary ">
            <div class="panel-heading clearfix">
                <h4 class="panel-title pull-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                    Time Schedule For Dmu Cafe Management System
                </h4>
                <div class="pull-right">
                    <a href="{{ route(session::get('role_name').'.time_tables.create') }}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-plus"></span> @lang('button.create')</a>
                </div>
                <br>
                <div id="clock" style="font-size:25px;color:grey;text-shadow:2px 2px 2px blue;
                border:3px groove blue;background-color:#aaffaa; width:195px; height:40px" align="right"></div>
            </div>
            <br />
            <script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()


//to add a zero in front of numbers<10

m=checkTime(m)
s=checkTime(s)

document.getElementById('clock').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()', 500)
}

function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}

window.onload=startTime;

</script>

<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
        var s=today.getSeconds()
        var ap="AM";

        //to add AM or PM after time

        if(h>11) ap="PM";
        if(h>12) h=h-12;
        if(h==0) h=12;

        //to add a zero in front of numbers<10

        m=checkTime(m)
        s=checkTime(s)

        document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap
        t=setTimeout('startTime()', 500)
        }

        function checkTime(i)
        {
        if (i<10)
        { i="0" + i}
        return i
        }

        window.onload=startTime;

        </script>



        <table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
                <tr><td class="clock" id="dc"></td>  <!-- THE DIGITAL CLOCK. -->
                <td>
                <table cellpadding="0" cellspacing="0" border="0">

                <!-- HOUR IN 'AM' AND 'PM'. -->
                <tr><td class="clocklg" id="dc_hour"></td></tr>

                <!-- SHOWING SECONDS. -->
                <tr><td class="clocklg" id="dc_second"></td></tr>
                </table>
                </td>
                </tr>
                </table>
                </div>
                </body>
                <script>
                // OUR FUNCTION WHICH IS EXECUTED ON LOAD OF THE PAGE.
                function digitized() {
                    var dt = new Date();    // DATE() CONSTRUCTOR FOR CURRENT SYSTEM DATE AND TIME.
                    var hrs = dt.getHours();
                    var min = dt.getMinutes();
                    var sec = dt.getSeconds();

                    min = Ticking(min);
                    sec = Ticking(sec);

                    document.getElementById('dc').innerHTML = hrs + ":" + min;
                    document.getElementById('dc_second').innerHTML = sec;

                    if (hrs > 12) {
                        document.getElementById('dc_hour').innerHTML = 'PM';
                    }
                    else {
                        document.getElementById('dc_hour').innerHTML = 'AM';
                    }

                    // CALL THE FUNCTION EVERY 1 SECOND (RECURSION).
                    var time
                    time = setInterval('digitized()', 1000);
                }

        function Ticking(ticVal) {
            if (ticVal < 10) {
                ticVal = "0" + ticVal;
            }
            return ticVal;
        }
        </script>
        </html>
        <script>
            setCal()

            function getTime() {
// initialize time-related variables with current time settings
                var now = new Date()
                var hour = now.getHours()
                var minute = now.getMinutes()
                now = null
                var ampm = ""

// validate hour values and set value of ampm
                if (hour >= 12) {
                    hour -= 12
                    ampm = "PM"
                } else
                    ampm = "AM"
                hour = (hour == 0) ? 12 : hour

// add zero digit to a one digit minute
                if (minute < 10)
                    minute = "0" + minute // do not parse this number!

// return time string
                return hour + ":" + minute + " " + ampm
            }

            function leapYear(year) {
                if (year % 4 == 0) // basic rule
                    return true // is leap year
                /* else */ // else not needed when statement is "return"
                return false // is not leap year
            }

            function getDays(month, year) {
// create array to hold number of days in each month
                var ar = new Array(12)
                ar[0] = 31 // January
                ar[1] = (leapYear(year)) ? 29 : 28 // February
                ar[2] = 31 // March
                ar[3] = 30 // April
                ar[4] = 31 // May
                ar[5] = 30 // June
                ar[6] = 31 // July
                ar[7] = 31 // August
                ar[8] = 30 // September
                ar[9] = 31 // October
                ar[10] = 30 // November
                ar[11] = 31 // December

// return number of days in the specified month (parameter)
                return ar[month]
            }

            function getMonthName(month) {
// create array to hold name of each month
                var ar = new Array(12)
                ar[0] = "January"
                ar[1] = "February"
                ar[2] = "March"
                ar[3] = "April"
                ar[4] = "May"
                ar[5] = "June"
                ar[6] = "July"
                ar[7] = "August"
                ar[8] = "September"
                ar[9] = "October"
                ar[10] = "November"
                ar[11] = "December"

// return name of specified month (parameter)
                return ar[month]
            }

            function setCal() {
// standard time attributes
                var now = new Date()
                var year = now.getYear()
                if (year < 1000)
                    year+=1900
                var month = now.getMonth()
                var monthName = getMonthName(month)
                var date = now.getDate()
                now = null

// create instance of first day of month, and extract the day on which it occurs
                var firstDayInstance = new Date(year, month, 1)
                var firstDay = firstDayInstance.getDay()
                firstDayInstance = null

// number of days in current month
                var days = getDays(month, year)

// call function to draw calendar
                drawCal(firstDay + 1, days, date, monthName, year)
            }

            function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
                var headerHeight = 40 // height of the table's header cell
                var border = 2 // 3D height of table's border
                var cellspacing = 1 // width of table's border
                var headerColor = "midnightblue" // color of table's header
                var headerSize = "2" // size of tables header font
                var colWidth = 100 // width of columns in table
                var dayCellHeight = 50 // height of cells containing days of the week
                var dayColor = "darkblue" // color of font representing week days
                var cellHeight = 30 // height of cells representing dates in the calendar
                var todayColor = "red" // color specifying today's date in the calendar
                var timeColor = "purple" // color of font representing current time

// create basic table structure
                var text = "" // initialize accumulative variable to empty string
                text += '<CENTER>'
                text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
                text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
                text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
                text += monthName + ' ' + year
                text += '</FONT>' // close table header's font settings
                text += '</TH>' // close header cell

// variables to hold constant settings
                var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
                openCol += '<FONT COLOR="' + dayColor + '">'
                var closeCol = '</FONT></TD>'

// create array of abbreviated day names
                var weekDay = new Array(7)
                weekDay[0] = "Sun"
                weekDay[1] = "Mon"
                weekDay[2] = "Tues"
                weekDay[3] = "Wed"
                weekDay[4] = "Thu"
                weekDay[5] = "Fri"
                weekDay[6] = "Sat"

// create first row of table to set column width and specify week day
                text += '<TR ALIGN="center" VALIGN="center">'
                for (var dayNum = 0; dayNum < 7; ++dayNum) {
                    text += openCol + weekDay[dayNum] + closeCol
                }
                text += '</TR>'

// declaration and initialization of two variables to help with tables
                var digit = 1
                var curCell = 1

                for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
                    text += '<TR ALIGN="right" VALIGN="top">'
                    for (var col = 1; col <= 7; ++col) {
                        if (digit > lastDate)
                            break
                        if (curCell < firstDay) {
                            text += '<TD></TD>';
                            curCell++
                        } else {
                            if (digit == date) { // current cell represent today's date
                                text += '<TD HEIGHT=' + cellHeight + '>'
                                text += '<FONT COLOR="' + todayColor + '">'
                                text += digit
                                text += '</FONT><BR>'
                                text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
                                text += '<CENTER>' + getTime() + '</CENTER>'
                                text += '</FONT>'
                                text += '</TD>'
                            } else
                                text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
                            digit++
                        }
                    }
                    text += '</TR>'
                }

// close all basic table tags
                text += '</TABLE>'
                text += '</CENTER>'

// print accumulative HTML string
                document.write(text)
            }
        </script>
            <div class="panel-body">
                <table class="table table-bordered " id="table">
                    <thead>
                        <tr class="filters">
                            <th><font color="#8b0000">ID</th>
                            <th><font color="#8b0000">Menu_id</th>
							<th><font color="#8b0000">Mnu_name</th>
							<th><font color="#8b0000">መጀሪያ</th>
							<th><font color="#8b0000">መጨረሻ</th>
                            <th><font color="#8b0000">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($time_tables as $time_table)
                        <tr>
                            <td>{!! $time_table->id !!}</td>
                            <td>{!! $time_table->std_id !!}</td>
							<td>{!! $time_table->mnu_name !!}</td>
							<td>{!! $time_table->strt_time !!}</td>
							<td>{!! $time_table->end_time !!}</td>
                            <td>
                                <a href="{{ route(session::get('role_name').'.time_tables.show', $time_table->id) }}">
                                    <i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view time_table"></i>
                                </a>
                                <a href="{{ route(session::get('role_name').'.time_tables.edit', $time_table->id) }}">
                                    <i class="livicon" data-name="edit" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="edit time_table"></i>
                                </a>
                                <a href="{{ route(session::get('role_name').'.time_tables.confirm-delete', $time_table->id) }}" data-toggle="modal" data-target="#delete_confirm">
                                    <i class="livicon" data-name="remove-alt" data-size="18" data-loop="true" data-c="#f56954" data-hc="#f56954" title="delete time_table"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
            </div>
        </div>
    </div>    <!-- row-->
</section>
@stop

<style>
    /* Panel and Layout Refinements */
    .panel-primary {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .panel-heading {
        padding: 15px !important;
        background: #428BCA !important;
    }

    /* Digital Clock Styling */
    #clock {
        font-family: 'Orbitron', sans-serif; /* Digital look */
        font-weight: bold;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        box-shadow: inset 0 0 10px rgba(0,0,255,0.2);
        margin-top: 10px;
        float: right;
    }

    /* Calendar Styling (The JS generated table) */
    center > table {
        border-collapse: collapse;
        margin: 20px 0;
        background-color: #fff;
        border: 1px solid #ddd !important;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    center > table th {
        background-color: #2c3e50 !important;
        color: white !important;
        padding: 15px;
        font-size: 18px !important;
        text-transform: uppercase;
    }

    center > table tr:first-of-type td {
        background-color: #f8f9fa;
        font-weight: bold;
        height: 40px !important;
    }

    center > table td {
        border: 1px solid #eee !important;
        padding: 10px;
        transition: background 0.3s;
    }

    center > table td:hover {
        background-color: #f1f7ff;
    }

    /* Data Table Styling */
    #table {
        margin-top: 20px;
        background: #fff;
    }

    #table thead {
        background-color: #f4f6f9;
    }

    #table thead th {
        border-bottom: 2px solid #428BCA;
        padding: 12px;
        text-transform: uppercase;
        font-size: 12px;
    }

    .filters th font {
        color: #333 !important; /* Overriding the darkred in your HTML */
        font-weight: 600;
    }

    /* Action Icons */
    .livicon {
        margin-right: 5px;
        cursor: pointer;
    }

    /* Button Styling */
    .btn-default {
        background-color: #fff;
        color: #428BCA;
        border: 1px solid #fff;
        font-weight: bold;
    }

    .btn-default:hover {
        background-color: #e6e6e6;
    }
</style>
{{-- Body Bottom confirm modal --}}
@section('footer_scripts')
<div class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="user_delete_confirm_title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>
<script>$(function () {$('body').on('hidden.bs.modal', '.modal', function () {$(this).removeData('bs.modal');});});</script>
@stop