@extends('layout.manage')

@section('css_page_level')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/clockface/css/clockface.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/icheck/skins/all.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}" />
@endsection

@section('page-content-wrapper')
    <div class="page-content-wrapper" id="main">
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <h3 class="page-title">
                @inject('setting', 'anlutro\LaravelSettings\Facade')
                {{ $setting::get('system_name', '全方位建築智慧化管理系統') }}
                <small>{{ $setting::get('company_name', '新保科技') }}</small>
            </h3>
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{ route('manage::index') }}">@lang('messages.homepage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:;">@lang('messages.charge_system')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:;">@lang('messages.charge_manage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('manage::charge::charge::charge') }}">@lang('messages.reserve')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('manage::charge::charge::create') }}">新增充電樁預約</a>
                    </li>
                </ul>
                <div class="page-toolbar">

                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN DASHBOARD STATS -->
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box yellow">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-plus"></i>@lang('messages.add_new_charge')
                            </div>
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#normal" data-toggle="tab">
                                        @lang('messages.general_setting') </a>
                                </li>
                            </ul>
                        </div>

                        <div class="portlet-body">
                            <form action="{{ route('manage::charge::charge::store') }}" method="POST"
                                enctype="multipart/form-data">
                                <div class="tab-content form-horizontal form-bordered">
                                    <div class="tab-pane active " id="normal">
                                        <!--基本設定Section-->
                                        <h3 class="form-section">@lang('messages.basic_config')</h3>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">@lang('messages.charge_name')<span
                                                    class="required" aria-required="true"> * </span></label>
                                            <div class="col-md-6">
                                                <input name="name" type="text" class="form-control"
                                                    placeholder="@lang('messages.key_in')@lang('messages.charge_name')">
                                            </div>
                                        </div>
                                        <div class="form-group cover">
                                            <label class="col-md-3 control-label">@lang('messages.charge_cover_img')</label>
                                            <div class="col-md-4">
                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                    <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                                                        style="width: 200px; height: 150px;">
                                                        <img src="{{ asset('assets/images/blank_image01.jpg') }}"
                                                            alt="" />
                                                    </div>
                                                    <div>
                                                        <span class="btn default btn-file">
                                                            <span class="fileinput-new">
                                                                @lang('messages.select_img') </span>
                                                            <span class="fileinput-exists">
                                                                @lang('messages.change') </span>
                                                            <input type="file" name="cover_img" id="cover_img">
                                                            <input type="hidden" name="compressed_cover"
                                                                id="compressed_cover" value="">
                                                        </span>
                                                        <a href="javascript:;" id="cover_reset"
                                                            class="btn red fileinput-exists" data-dismiss="fileinput">
                                                            @lang('messages.remove') </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.active_or_not')</label>
                                            <div class="col-md-3">
                                                <input type="checkbox" name="status" class="make-switch"
                                                    data-on-text="@lang('messages.active')" data-off-text="@lang('messages.no_active')"
                                                    checked>
                                            </div>
                                        </div>
                                        <!--點數設定Section-->
                                        <h3 class="form-section">@lang('messages.pt_config')</h3>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.need_pt_times')</label>
                                            <div class="col-md-3">
                                                <input name="point_use" type="number" class="form-control"
                                                    placeholder="@lang('messages.enter_point_uneed')">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">@lang('messages.pt_type')</label>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <div class="icheck-inline">
                                                        <label><input name="point_type" type="radio" class="icheck"
                                                                data-radio="icheckbox_flat-green" checked
                                                                value="free">@lang('messages.given_pt')</label>
                                                        <!-- <label><input name="point_type" type="radio" class="icheck" data-radio="icheckbox_flat-green" value="buy">@lang('messages.buy_pt')</label>
                 <label><input name="point_type" type="radio" class="icheck" data-radio="icheckbox_flat-green" value="any">@lang('messages.unlimit')</label> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--上限設定Section-->
                                        <h3 class="form-section">@lang('messages.reserve_config')</h3>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">@lang('messages.before_days_reserve')</label>
                                            <div class="col-md-6">
                                                <input name="orders_pre_days" type="number" class="form-control"
                                                    placeholder="@lang('messages.for_example26')">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.daily_limit_reservation')</label>
                                            <div class="col-md-3">
                                                <input type="checkbox" name="orders_one_day_flag" class="make-switch"
                                                    data-on-text="@lang('messages.limit')" data-off-text="@lang('messages.unlimit')">
                                            </div>
                                            <div class="col-md-4">
                                                <input name="orders_one_day" type="number" class="form-control"
                                                    placeholder="@lang('messages.for_example27')">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.for_example30')</label>
                                            <div class="col-md-3">
                                                <input type="checkbox" name="persons_one_day_flag" class="make-switch"
                                                    data-on-text="@lang('messages.limit')" data-off-text="@lang('messages.unlimit')">
                                            </div>
                                            <div class="col-md-4">
                                                <input name="persons_one_day" type="number" class="form-control"
                                                    placeholder="@lang('messages.for_example30')">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.for_example33')</label>
                                            <div class="col-md-3">
                                                <input type="checkbox" name="orders_one_user_one_day_flag"
                                                    class="make-switch" data-on-text="@lang('messages.limit')"
                                                    data-off-text="@lang('messages.unlimit')">
                                            </div>
                                            <div class="col-md-4">
                                                <input name="orders_one_user_one_day" type="number" class="form-control"
                                                    placeholder="@lang('messages.for_example33')">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">是否限制當日不可預約</label>
                                            <div class="col-md-3">
                                                <input type="checkbox" name="orders_by_today_flag" class="make-switch"
                                                    data-on-text="@lang('messages.limit')" data-off-text="@lang('messages.unlimit')">
                                            </div>
                                        </div>
                                        <!--開放時段Section-->
                                        <h3 class="form-section">@lang('messages.config_allow_reserve_period')</h3>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.config_allow_reserve_period')</label>
                                            <div class="col-md-2">
                                                <div class="input-group">
                                                    <input id="section_start" name="section_start" type="text"
                                                        class="form-control timepicker timepicker-24" value="08:00">
                                                    <span class="input-group-btn">
                                                        <button class="btn default" type="button"><i
                                                                class="fa fa-clock-o"></i></button>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="input-group">
                                                    <input id="section_end" name="section_end" type="text"
                                                        class="form-control timepicker timepicker-24" value="09:00">
                                                    <span class="input-group-btn">
                                                        <button class="btn default" type="button"><i
                                                                class="fa fa-clock-o"></i></button>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <button id="btn_add_section" type="button"
                                                    class="btn blue-hoki">@lang('messages.create_period')</button>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.rest_time_config')</label>
                                            <div class="col-md-9">
                                                <div id="DIV_OFF_WEEKDAY_TIME" style="padding:10px 0;">
                                                    <fieldset>
                                                        <table class="table table-hover" id="table_inst_list">
                                                            <thead>
                                                                <tr>
                                                                    <th>@lang('messages.time_week')</th>
                                                                    <th style="text-align:center;">@lang('messages.mon')</th>
                                                                    <th style="text-align:center;">@lang('messages.tue')</th>
                                                                    <th style="text-align:center;">@lang('messages.wed')</th>
                                                                    <th style="text-align:center;">@lang('messages.thur')</th>
                                                                    <th style="text-align:center;">@lang('messages.fri')</th>
                                                                    <th style="text-align:center;">@lang('messages.sat')</th>
                                                                    <th style="text-align:center;">@lang('messages.sun')</th>
                                                                    <th style="text-align:center;"></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="section_content">

                                                            </tbody>
                                                        </table>
                                                    </fieldset>
                                                </div>
                                                <input type="hidden" name="time_section">
                                                <input type="hidden" name="each_section">
                                            </div>
                                        </div>
                                        <!--描述設定Section-->
                                        <h3 class="form-section">@lang('messages.desc_config')</h3>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.charge_rule')</label>
                                            <div class="col-md-9">
                                                <textarea name="rule" id="rule" rows="50" cols="80">
								            </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">@lang('messages.charge_desc')</label>
                                            <div class="col-md-9">
                                                <textarea name="info" id="info" rows="50" cols="80">
								            </textarea>
                                            </div>
                                        </div>
                                        <div class="form-actions">
                                            <div class="row">
                                                <div class="col-md-offset-3 col-md-9">
                                                    <button type="submit" class="btn purple pull-right"><i
                                                            class="fa fa-check"></i> @lang('messages.submit')</button>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                    <!-- END PORTLET-->
                </div>
            </div>
        </div>
    @endsection

    @section('plugins_page_level')
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}">
        </script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}">
        </script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/ckeditor/ckeditor.js') }}"></script>
        <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-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/clockface/js/clockface.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}">
        </script>
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script>
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}">
        </script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/icheck/icheck.min.js') }}"></script>
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
        <script type="text/javascript"
                src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>
    @endsection

    @section('js_page_level')
        <script>
            $(document).ready(function() {
                //Time Picker
                $('.timepicker-24').timepicker({
                    autoclose: true,
                    minuteStep: 5,
                    showSeconds: false,
                    showMeridian: false
                });

                //TimePicker btn
                $('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e) {
                    e.preventDefault();
                    $(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
                });


                CKEDITOR.replace('rule');
                CKEDITOR.replace('info');

                $(".form_datetime").datetimepicker({
                    autoclose: true
                });



                //驗證送出表單
                $('#form_add_inst').validate({
                    errorElement: 'span', //default input error message container
                    errorClass: 'help-block help-block-error', // default input error message class
                    focusInvalid: false, // do not focus the last invalid input
                    ignore: "", // validate all fields including form hidden input
                    rules: {
                        title: {
                            required: true
                        },
                        cover_img: {
                            extension: "jpg|gif",
                        }
                    },
                    messages: {
                        title: {
                            required: '@lang('messages.enter_subject')'
                        },
                        cover_img: {
                            extension: '@lang('messages.correct_style') jpg / gif @lang('messages.upload')',
                        }
                    },

                    invalidHandler: function(event, validator) { //display error alert on form submit
                        $('#form_add_inst_success').hide();
                        $('#form_add_inst_error').show();
                        $(document).scrollTop($('#form_add_inst_error'));
                    },

                    highlight: function(element) { // hightlight error inputs
                        $(element)
                            .closest('.form-group').addClass(
                            'has-error'); // set error class to the control group
                    },

                    unhighlight: function(element) { // revert the change done by hightlight
                        $(element)
                            .closest('.form-group').removeClass(
                            'has-error'); // set error class to the control group
                    },

                    success: function(label) {
                        label
                            .closest('.form-group').removeClass(
                            'has-error'); // set success class to the control group
                    },

                    submitHandler: function(form) {
                        var options = document.getElementById('card_reader_1_select').options,
                            text = '';
                        for (var i = 0; i < options.length; i++) {
                            if (options[i].selected) {
                                text = text + "," + options[i].value;
                            }
                        }
                        $('#card_reader_1').val(text.slice(1));

                        var options = document.getElementById('card_reader_2_select').options,
                            text = '';
                        for (var i = 0; i < options.length; i++) {
                            if (options[i].selected) {
                                text = text + "," + options[i].value;
                            }
                        }
                        $('#card_reader_2').val(text.slice(1));

                        $('textarea.ckeditor').each(function() {
                            var $textarea = $(this);
                            $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
                        });

                        if ($('#compressed_cover').val() != '') {
                            $("cover_img").prop('disabled', true);
                        }

                        form.submit();
                    },

                    errorPlacement: function(error, element) {
                        if (element.attr("name") === "cover_img") {
                            error.appendTo(element.parent().parent());
                        } else {
                            error.insertAfter(element);
                        }
                    },
                });

                $(document).on('click', '#btn_add_section', function() {
                    var time_start = $('#section_start').val();
                    var time_end = $('#section_end').val();

                    //產生渲染底圖
                    var section_html = '';
                    section_html = section_html + '<tr class="odd gradeX" data-time=' + time_start + '-' +
                        time_end + ' style="">';
                    section_html = section_html + '<th style="text-align:center;">' + time_start + '-' +
                        time_end + '</th>';
                    //依照星期一到日開始
                    for (var w = 1; w <= 7; w++) {
                        section_html = section_html + '<td style="text-align:center;">';
                        section_html = section_html +
                            '<input type="button" class="btn section_btn" off-time="' + w + '=' + time_start +
                            '-' + time_end + '" data-w="' + w + '" value="開放" data-status="1" />';
                        section_html = section_html + '</td>';
                    }
                    section_html = section_html +
                        '<td><a href="javascript:;" class="btn btn-icon-only btn-circle purple remove_section"><i class="fa fa-times"></i></a></td>';
                    section_html = section_html + '</tr>';
                    $("#section_content").append(section_html);
                    //讓time_start變成time_end time_end變成time_end + 1 hour
                    $('#section_start').val(time_end);
                    var startTime = time_end.split(':');
                    var endHours = parseInt(startTime[0]) + 1;
                    endHours = Math.min(Math.max(endHours, 1), 24);
                    $('#section_end').val(endHours + ':' + startTime[1]);

                    //將time_section寫入input
                    var weekday_string = getOffWeekdayTimeString();
                    $('input[name="time_section"]').val(weekday_string);

                    getEachTimeSections();
                });

                $(document).on('click', '.remove_section', function() {
                    $(this).parent().parent().remove();
                    getEachTimeSections();
                });

                $(document).on('click', '.section_btn', function() {
                    if ($(this).hasClass("red")) {
                        $(this).removeClass("red");
                        $(this).prop("checked", false);
                        $(this).attr('data-status', 1);
                        $(this).val('@lang('messages.open_apply')');
                    } else {
                        $(this).addClass("red");
                        $(this).prop("checked", true);
                        $(this).attr('data-status', 0);
                        $(this).val('@lang('messages.rest')');
                    }
                    var weekday_string = getOffWeekdayTimeString();
                    $('input[name="time_section"]').val(weekday_string);
                });

                function getOffWeekdayTimeString() {
                    var returnValue = '0';
                    $("#DIV_OFF_WEEKDAY_TIME input").each(function() {
                        returnValue += ',' + $(this).attr("off-time") + '#' + $(this).attr('data-status');
                    });
                    return returnValue;
                }

                function getEachTimeSections() {
                    var returnValue = '';
                    $("#section_content tr").each(function() {
                        returnValue += $(this).attr("data-time") + ',';
                    });
                    $('input[name="each_section"]').val(returnValue);
                }

                $('.fileinput').on('change.bs.fileinput', function() {
                    $("#form_add_inst").validate().element('input[name=cover_img]');
                });
            });

            $("#test_btn").on("click", function() {
                alert($("#card_reader_1").val());
            });
        </script>
    @endsection