<?php $this->view('ajax_loading_v'); ?>
<script type="text/javascript">
    $(function(){
        $('img').tooltip();
    });

    function showDetail(id){
        var p={};
        p['id'] =id;

        $('#div_detail').load("<?php echo site_url('carcalendar/ajax_detail') ?>",p,function(){
            $('#myModal').modal('show');
        });
        return false;
    }
</script>
<style type="text/css" media="all">
    table.okv_calendar {border:1px solid #aaa; border-collapse: collapse; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; width: 100%;}
    .okv_calendar td {border:1px solid #aaa; border-collapse: collapse; clear: both;}

    .okv_calendar .blank {background: #f5f5f5; cursor: default !important;}

    .okv_calendar .calendar_y_m {border-spacing: 0px; padding: 0;}
    .okv_calendar .calendar_y_m table.calendar_year_month {border: none; border-collapse: collapse; width: 100%;}
    .okv_calendar .calendar_y_m table.calendar_year_month td {border: none; border-right: 1px solid #aaa;}
    .okv_calendar .calendar_y_m table.calendar_year_month td:last-child {border: none;}
    .okv_calendar .month_year {background: #bbb; color: #000; font-weight: bold; font-size: 16px; padding: 5px; text-align: center;}
    .okv_calendar .prev_month, .okv_calendar .next_month {background: #bbb; color: #000; font-weight: bold; text-align: center; width:30px;}
    .okv_calendar .prev_month a, .okv_calendar .next_month a {color: #000; display: block; line-height: 30px; text-decoration: none;}
    .okv_calendar .prev_year, .okv_calendar .next_year {background: #bbb; color: #fff; font-weight: bold; text-align: center; width:30px;}
    .okv_calendar .prev_year a, .okv_calendar .next_year a {color: #000; display: block; line-height: 30px; text-decoration: none;}

    .okv_calendar .calendar_date {font-size: 15px; font-style: italic; height:60px; padding: 5px; vertical-align: top; width:14.2%;}
    .okv_calendar .calendar_date a {color: #143270; text-decoration: none;}
    .okv_calendar .calendar_date .calendar_appointment {cursor: pointer; color:#555; display: inline-block; float: right; font-size: 13px; font-style: normal; vertical-align: top; width:80%;}
    .okv_calendar .calendar_date .special_day {color:#555; display: inline-block; font-size: 12px; vertical-align: top; width:48%;}
    .okv_calendar .calendar_week_day {background: #ddd; font-weight: bold; padding: 5px; text-align: center; width:14.2%;}
    .okv_calendar .click_date {background: #ddf4ff;}
    .okv_calendar .current_date {background: #ffefdf; border: 2px solid #ffd2a6;}
    .okv_calendar .have_appointment {background: #fff8f1;}

    a:link, a:visited{
        text-decoration: none;
        color:#005e95;
    }
    a:hover{
        color: #ff8000;
        text-decoration: underline;
    }
</style>
<div class="textbox">
    <div class="toolbar">
        <div class="pull-left title"><?php echo $page_title; ?></div>
        <div class="pull-right">
            <?php echo anchor('main', "<i class='icon-remove-circle'></i> ปิด", array('class' => 'btn')); ?>
        </div>
        <div class="clear"></div>
    </div>
    <div class="textbox_content">
        <div>
            <span><img src="<?php echo base_url(); ?>assets/images/msg0_16x16.png" align="middle"/> คือรายการจองที่รอการอนุมัติ</span>&nbsp;,&nbsp;
            <span><img src="<?php echo base_url(); ?>assets/images/msg1_16x16.png" align="middle"/> คือรายการจองที่ผ่านการอนุมัติ</span>
        </div>
        <?php
        echo $calendar->display();
        unset($calendar);
        ?>
    </div>
</div>

<!-- หน้าจอแสดงรายละเอียด -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form method="post" class="form-horizontal" id="myform">
        <div class="modal-header" style="padding:10px;">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4>รายละเอียดการจองใช้รถ</h4>
        </div>
        <div class="modal-body" style="padding:10px;">
            <div id="div_detail"></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true"> ปิด </button>
        </div>
    </form>
</div>