@extends('template')
@section('title',"時數使用明細")
@section('content_title',"時數使用明細")

@section('content')

    <script type="text/javascript">

        Week = ['日','一','二','三','四','五','六'];

        UserID = '';
        if(empty(sessionStorage.getItem('user_id'))) 
        {
            // window.location.href = '{{ URL::to('/booking') }}';
        }
        else 
        {
            UserID = sessionStorage.getItem('user_id');
        }
        
        $(function(){

            $('.data_table').bootstrapTable();

            $('.cate_nav_item').click(function() {

                $('.cate_nav_item').removeClass('active');
                $(this).addClass('active');

                $('.week-nav-bk').hide();
                $('.month-nav-bk').hide();
                $('.custom-nav-bk').hide();

                var key = $(this).data('key');

                var s_date = '';
                var e_date = '';
                var today  = new Date();

                switch(key) 
                {
                    case "day":

                        var month = ((today.getMonth()+1)<10)?'0'+(today.getMonth()+1):(today.getMonth()+1);
                        var date  = (today.getDate()<10)?'0'+today.getDate():today.getDate();

                        s_date = today.getFullYear()+ "-" + month + "-" + date;
                        e_date = s_date;
                    break;

                    case "week":
                        var now_time = today.getTime() ; 
                        var day = today.getDay();
                        var one_day_time = 24*60*60*1000 ; 

                        var monday_time = now_time - (day-1)*one_day_time; 
                        var sunday_time = now_time + (7-day)*one_day_time; 

                        var monday = new Date(monday_time);
                        var sunday = new Date(sunday_time);

                        var month = ((monday.getMonth()+1)<10)?'0'+(monday.getMonth()+1):(monday.getMonth()+1);
                        var date  = (monday.getDate()<10)?'0'+monday.getDate():monday.getDate();
                        s_date = monday.getFullYear()+ "-" + month + "-" + date;

                        var month = ((sunday.getMonth()+1)<10)?'0'+(sunday.getMonth()+1):(sunday.getMonth()+1);
                        var date  = (sunday.getDate()<10)?'0'+sunday.getDate():sunday.getDate();
                        e_date = sunday.getFullYear()+ "-" + month + "-" + date;

                        $('#interval').text((monday.getMonth()+1) + "/" + monday.getDate()+" - "+(sunday.getMonth()+1) + "/" + sunday.getDate());

                        $('.week-nav-bk').show();
                    break;

                    case "month":
                        var start_date = new Date();
                        var end_date   = new Date();

                        start_date.setDate(1);

                        end_date.setMonth(end_date.getMonth()+1);
                        end_date.setDate(1);
                        end_date.setDate(end_date.getDate()-1);

                        var month = ((start_date.getMonth()+1)<10)?'0'+(start_date.getMonth()+1):(start_date.getMonth()+1);
                        var date  = (start_date.getDate()<10)?'0'+start_date.getDate():start_date.getDate();
                        s_date = start_date.getFullYear()+ "-" + month + "-" + date;

                        var month = ((end_date.getMonth()+1)<10)?'0'+(end_date.getMonth()+1):(end_date.getMonth()+1);
                        var date  = (end_date.getDate()<10)?'0'+end_date.getDate():end_date.getDate();
                        e_date = end_date.getFullYear()+ "-" + month + "-" + date;

                        $('#last_month').text((start_date.getMonth())+'月');
                        $('#this_month').text((start_date.getMonth()+1)+'月');
                        $('#next_month').text((start_date.getMonth()+2)+'月');

                        $('.month-nav-bk').show();

                    break;

                    case "custom":

                        var start_date = new Date();
                        var end_date   = new Date();

                        start_date.setMonth(start_date.getMonth()-1);
                        start_date.setDate(1);

                        end_date.setMonth(end_date.getMonth()+2);
                        end_date.setDate(1);
                        end_date.setDate(end_date.getDate()-1);

                        var month = ((start_date.getMonth()+1)<10)?'0'+(start_date.getMonth()+1):(start_date.getMonth()+1);
                        var date  = (start_date.getDate()<10)?'0'+start_date.getDate():start_date.getDate();
                        s_date = start_date.getFullYear()+ "-" + month + "-" + date;

                        var month = ((end_date.getMonth()+1)<10)?'0'+(end_date.getMonth()+1):(end_date.getMonth()+1);
                        var date  = (end_date.getDate()<10)?'0'+end_date.getDate():end_date.getDate();
                        e_date = end_date.getFullYear()+ "-" + month + "-" + date;

                        $('.custom-nav-bk').show();

                    break;
                }

                $('#current_s_date').val(s_date);
                $('#current_e_date').val(e_date);


                refressh_table();

            })

            $('.btn_last_week').click(function() {

                var current_s_date = $('#current_s_date').val();

                var current_s_time = new Date(current_s_date).getTime();
                var one_day_time = 24*60*60*1000 ; 

                var sunday_time = current_s_time - 1*one_day_time; 
                var monday_time = current_s_time - 7*one_day_time; 

                var monday = new Date(monday_time);
                var sunday = new Date(sunday_time);

                var month = ((monday.getMonth()+1)<10)?'0'+(monday.getMonth()+1):(monday.getMonth()+1);
                var date  = (monday.getDate()<10)?'0'+monday.getMonth():monday.getDate();
                s_date = monday.getFullYear()+ "-" + month + "-" + date;

                var month = ((sunday.getMonth()+1)<10)?'0'+(sunday.getMonth()+1):(sunday.getMonth()+1);
                var date  = (sunday.getDate()<10)?'0'+sunday.getDate():sunday.getDate();
                e_date = sunday.getFullYear()+ "-" + month + "-" + date;

                $('#interval').text((monday.getMonth()+1) + "/" + monday.getDate()+" - "+(sunday.getMonth()+1) + "/" + sunday.getDate());

                $('#current_s_date').val(s_date);
                $('#current_e_date').val(e_date);

                refressh_table();
                
            })

            $('.btn_next_week').click(function() {

                var current_e_date = $('#current_e_date').val();

                var current_e_time = new Date(current_e_date).getTime();
                var one_day_time = 24*60*60*1000 ; 

                var monday_time = current_e_time + 1*one_day_time; 
                var sunday_time = current_e_time + 7*one_day_time; 

                var monday = new Date(monday_time);
                var sunday = new Date(sunday_time);

                var month = ((monday.getMonth()+1)<10)?'0'+(monday.getMonth()+1):(monday.getMonth()+1);
                var date  = (monday.getDate()<10)?'0'+monday.getMonth():monday.getDate();
                s_date = monday.getFullYear()+ "-" + month + "-" + date;

                var month = ((sunday.getMonth()+1)<10)?'0'+(sunday.getMonth()+1):(sunday.getMonth()+1);
                var date  = (sunday.getDate()<10)?'0'+sunday.getDate():sunday.getDate();
                e_date = sunday.getFullYear()+ "-" + month + "-" + date;

                $('#interval').text((monday.getMonth()+1) + "/" + monday.getDate()+" - "+(sunday.getMonth()+1) + "/" + sunday.getDate());

                $('#current_s_date').val(s_date);
                $('#current_e_date').val(e_date);

                refressh_table();
                
            })

            $('.month_nav_item').click(function() {

                var key = $(this).data('key');

                var s_date = '';
                var e_date = '';
                switch(key) 
                {
                    case "last_month":

                        var current_s_date = $('#current_s_date').val();

                        var current_s_time = new Date(current_s_date).getTime();
                        var one_day_time = 24*60*60*1000;

                        var end_date_time = current_s_time - 1*one_day_time;
                        var end_date = new Date(end_date_time);

                        var month = ((end_date.getMonth()+1)<10)?'0'+(end_date.getMonth()+1):(end_date.getMonth()+1);
                        var date = (end_date.getDate()<10)?'0'+end_date.getDate():end_date.getDate();
                        s_date = end_date.getFullYear()+ "-" + (end_date.getMonth()+1) + "-01";
                        e_date = end_date.getFullYear()+ "-" + (end_date.getMonth()+1) + "-" + end_date.getDate();

                        $('#last_month').text((end_date.getMonth())+'月');
                        $('#this_month').text((end_date.getMonth()+1)+'月');
                        $('#next_month').text((end_date.getMonth()+2)+'月');

                    break;

                    case "next_month":

                         var current_e_date = $('#current_e_date').val();

                        var current_e_time = new Date(current_e_date).getTime();
                        var one_day_time = 24*60*60*1000;

                        var start_date_time = current_e_time + 1*one_day_time;
                        var start_date = new Date(start_date_time);

                        var month = ((start_date.getMonth()+1)<10)?'0'+(start_date.getMonth()+1):(start_date.getMonth()+1);
                        var date = (start_date.getDate()<10)?'0'+start_date.getDate():start_date.getDate();
                        s_date = start_date.getFullYear()+ "-" + month + "-" + date;

                        var end_date = new Date(s_date);
                        end_date.setMonth(end_date.getMonth()+1);
                        end_date.setDate(1);
                        end_date.setDate(end_date.getDate()-1);

                        var month = ((end_date.getMonth()+1)<10)?'0'+(end_date.getMonth()+1):(end_date.getMonth()+1);
                        var date = (end_date.getDate()<10)?'0'+end_date.getDate():end_date.getDate();
                        e_date = end_date.getFullYear()+ "-" + month + "-" + date;

                        $('#last_month').text((start_date.getMonth())+'月');
                        $('#this_month').text((start_date.getMonth()+1)+'月');
                        $('#next_month').text((start_date.getMonth()+2)+'月');

                    break;
                }

                $('#current_s_date').val(s_date);
                $('#current_e_date').val(e_date);

                refressh_table();

            });

            $('#current_s_date,#current_e_date').change(function() {

                refressh_table();
                
            })

            
            $($('.cate_nav_item')[0]).click();
        });

        function refressh_table()
        {
            $.ajax({
                url: '{{ url('ajax/get_booking_record') }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:{
                    filter_start_date: $('#current_s_date').val(),
                    filter_end_date: $('#current_e_date').val(),
                    user_id: UserID,
                },
                datatype: 'json',
                async: true,
                cache: false,
                success:function(data,textStatus,jqXHR) {
                    // console.log(data);
                    if(isJson(data))
                    {
                        var json = JSON.parse(data);
                        if(json.status)
                        {
                            var data = [];
                            var total_use_time = 0;
                            $.each( json.data.list, function(index,row) {

                                var date = new Date(row.date);
                                var day = Week[date.getDay()];

                                row_data = {
                                    "date":(date.getMonth()+1)+'/'+date.getDate()+' ('+day+')'+'<br>'+row.start_time.substr(0,5),
                                    "conference_room_name":row.conference_room_name+'<br>'+row.use_time+'小時',
                                    "point":'--',
                                    "description":(!empty(row.description))?row.description:'--',
                                };

                                data.push(row_data);

                                total_use_time += row.use_time;
                            });

                            $('#total_use_time').text(total_use_time);

                            //清除資料
                            $('.data_table').bootstrapTable('removeAll');
                            $('.data_table').bootstrapTable('append',data);
                        }
                    }
                },
                error:ajaxError
            });
        }


    </script>

    <style type="text/css">

        .cate-nav-bk {
            width: 100%;
            background-color: #96e4fb;
        }

        .week-nav-bk,.month-nav-bk,.custom-nav-bk {
            width: 100%;
            background-color: #0066CC;
            height: 84px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 46px;
            color: #FFFFFF;
            position: relative;
            display: flex;
        }

        .cate-nav {
            width: 100%;
            height: 76px;
            overflow-x: auto;
            overflow-y: hidden;
            flex-flow: nowrap;
            margin-right: 19px;
        }

        .cate-nav-item {
            width: calc(100% / 4);
            height: 100%;
            margin: 0 8px;
            font-size: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666666;
        }

        .month-nav-item {
            width: calc(100% / 3);
            height: 100%;
            margin: 0 8px;
            font-size: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666666;
        }

        .cate-nav-item:first-child,.month-nav-item:first-child {
            margin-left: unset;
        }

        .cate-nav-item.active .cate-nav-link{
            color: #FFFFFF;
            border-bottom-width: 3px;
            border-bottom-style: solid;
            font-weight: bold;
            border-color: #FFFFFF;
            border-width: 8px;
        }

        .month-nav-item.active .month-nav-link{
            color: #FFFFFF;
        }
        
    </style>

    

    <div class="d-flex cate-nav-bk">   
        <ul class="nav cate-nav" style="margin-left: 19px;">
            <li class="cate-nav-item cursor-pointer theme-border cate_nav_item" data-key="day">
                <div class="cate-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                    <span>今日</span>
                </div>
            </li>
            <li class="cate-nav-item cursor-pointer theme-border cate_nav_item" data-key="week">
                 <div class="cate-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                    <span>本週</span>
                </div>
            </li>
            <li class="cate-nav-item cursor-pointer theme-border cate_nav_item" data-key="month">
                 <div class="cate-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                    <span>本月</span>
                </div>
            </li>
            <li class="cate-nav-item cursor-pointer theme-border cate_nav_item" data-key="custom">
                 <div class="cate-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                    <span>自訂日期</span>
                </div>
            </li>
        </ul>
    </div>

    <div class="week-nav-bk" style="display: none;">
        <div class="last-week btn_last_week" style="position: absolute; left: 5%">
            <span>上一週</span>
        </div>
        <span id="interval"></span>
        <div class="next-week btn_next_week" style="position: absolute; right: 5%">
            <span>下一週</span>
        </div>
    </div>

    <div class="month-nav-bk" style="display: none;">
       <li class="month-nav-item cursor-pointer theme-border month_nav_item" data-key="last_month">
            <div class="month-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                <span id="last_month"></span>
            </div>
        </li>
        <li class="month-nav-item cursor-pointer theme-border month_nav_item active" data-key="this_month">
             <div class="month-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                <span id="this_month"></span>
            </div>
        </li>
        <li class="month-nav-item cursor-pointer theme-border month_nav_item" data-key="next_month">
             <div class="month-nav-link d-flex align-items-center text-nowrap" style="height: 90%;">
                <span id="next_month"></span>
            </div>
        </li>
    </div>

    <div class="custom-nav-bk" style="display: none;position: relative;">
        <input type="date" id="current_s_date" style="background-color: #0000;position: absolute;left: 5%;width: 392px;border: unset;">
        <input type="date" id="current_e_date" style="background-color: #0000;position: absolute;right: 5%;width: 392px;border: unset;">
    </div>

    <div class="container-fluid"  style="font-size: 42px;">
        <div class="row">
            <div class="col-4 d-flex align-items-center justify-content-center">
                <span>使用時數</span>
            </div>
            <div class="col-4"></div>
            <div class="col-4 d-flex align-items-center justify-content-center">
                <span id="total_use_time">0</span>
            </div>
        </div>
        <div class="row">
            <div class="col-4 d-flex align-items-center justify-content-center">
                <span>購買時數</span>
            </div>
            <div class="col-4"></div>
            <div class="col-4 d-flex align-items-center justify-content-center">
               <span id="total_buy_time">0</span>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <table id='data_table' class='data_table' data-classes='table table-borderless table-hover' data-toolbar='.toolbar' data-pagination="true" data-search-align='left' data-locale='{{ app()->getLocale() }}' style="font-size: 38px;">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="date" data-align='center' data-halign='center' >日期</th>
                            <th data-sortable="true" data-field="conference_room_name" data-align='center' data-halign='center' >會議室</th>
                            <th data-sortable="true" data-field="point" data-align='center' data-halign='center' >點數</th>
                            <th data-sortable="true" data-field="description" data-align='center' data-halign='center' >備註</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


@endsection