@extends('layout.front')
@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
<style type="text/css">
    h5 {
        font-size: 200%;
    }
    #table_list tr td {
        padding-left: 3vw;
    }
    .btn {
        font-size: 20px !important;
    }
    #date_start,#date_end {
        font-size: 22px !important;
        height: 4.5vh;
        text-align: center;
    }
</style>
@endsection
@section('page-content')
    <div class="wrap-fluid" id="paper-bg">
        <div class="row">
            <div class="col-lg-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title" style="padding-bottom:0px;"><i class="fontello-doc"></i>
                            <span style="font-size:200%;">訪客報表</span>
                        </h3>
                    </div>
                    <div class="box-body">
                        <div class="box-body">
                            <form id="form_data" target="_blank" method="post">
                                <table id="table_list" style="width: 50%;" class="table table-striped table-bordered table-hover">
                                    <tr>
                                        <td style="width: 50%;">
                                            <h5>Step 1. 查詢日期(起)</h5>
                                        </td>
                                        <td style="padding-left: 1vw;">
                                            <div class="input-group date form_datetime date-picker" data-date-format="yyyy-mm-dd">
                                                <input type="text" id="date_start" name="date_start" readonly class="form-control" value="2025-03-15">
                                                <span class="input-group-btn">
                                                    <button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h5>Step 2. 查詢日期(止)</h5>
                                        </td>
                                        <td style="padding-left: 1vw;">
                                            <div class="input-group date form_datetime date-picker" data-date-format="yyyy-mm-dd">
                                                <input type="text" id="date_end" name="date_end" readonly class="form-control" value="2025-03-15">
                                                <span class="input-group-btn">
                                                    <button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td style="padding-left: 1vw;">
                                            <a class="btn btn-success" id="btn_submit" style="margin-left: 2vw;">
                                                資料查詢
                                            </a>
                                            <a class="btn btn-info" id="btn_excel" style="margin-left: 3vw;">
                                                資料下載
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            </form>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js') }}"></script>
<script type="text/javascript">
    $('.date-picker').datepicker({
        orientation: "left",
        autoclose: true,
        dateFormat: 'yyyy-mm-dd',
        todayHighlight: true,
        language: 'zh-TW'
    });
    $(document).on('click','#btn_submit',function(){
        if( $('#date_start').val() > $('#date_end').val() ){
            toastr['error']('請確認所選擇之日期是否異常');
        }else{
            var form = $('#form_data');
            form.attr("action", '{{action('Website\GuestController@guest_report')}}');
            $('#form_data')[0].submit();
        }
    });
    $(document).on('click','#btn_excel',function(){
        if( $('#date_start').val() > $('#date_end').val() ){
            toastr['error']('請確認所選擇之日期是否異常');
        }else{
            var form = $('#form_data');
            form.attr("action", '{{action('Website\GuestController@guest_excel')}}');
            $('#form_data')[0].submit();
        }
    });
</script>
@endsection