@extends('layout.manage')

@section('css_page_level')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.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-fileinput/bootstrap-fileinput.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') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-select/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="javascript:void(0)">首頁</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:void(0)">汽機車充電系統</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:void(0)">充電設定</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN DASHBOARD STATS -->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN EXAMPLE TABLE PORTLET-->
                    <div class="portlet light bordered">
                        <div class="portlet-body">
                            <div class="table-toolbar">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group">
                                            <a id="btn_query" href="javascript:;" class="btn green">
                                                資料建立 API<i class="fa fa-plus"></i>
                                            </a>
                                        </div>
                                        <button id="btn_mass_delete" class="btn btn-primary" data-toggle="modal"
                                            data-target="#modal_fc_edit">
                                            選擇廠商</i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped table-bordered table-hover" id="table_access">
                                <thead>
                                    <tr>
                                        <th>
                                            ID
                                        </th>
                                        <th>
                                            廠商
                                        </th>
                                        <th>
                                            API路徑
                                        </th>
                                        <th>
                                            狀態
                                        </th>
                                        <th>
                                            動作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($dataArray['charge_setting'] as $item)
                                        <tr class="odd gradeX">
                                            <td>
                                                {{ $item->id }}
                                            </td>
                                            <td>
                                                {{ $item->factory_name }}
                                            </td>
                                            <td>
                                                {{ $item->url }}
                                            </td>
                                            <td>
                                                @if ($item->status == 1)
                                                    <span class="label label-sm label-success"> 啟用中 </span>
                                                @else
                                                    <span class="label label-sm label-danger"> 停用中 </span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <button class="btn btn-default btn-xs dropdown-toggle" type="button"
                                                        data-toggle="dropdown" aria-expand ed="false">
                                                        @lang('messages.action') <i class="fa fa-angle-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li>
                                                            <a class="btn_edit" href="javascript:;"
                                                                data-id="{{ $item->id }}">
                                                                <i class="fa fa-pencil"></i>
                                                                @lang('messages.edit') </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
        </div>
        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
    </div>

    <div class="modal fade draggable-modal" id="modal_query" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-blue-madison">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title font-white">新增設定資料</h4>
                </div>
                <form id="form_query" method="POST" action="" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-body">
                            <div id="form_error_alert" class="alert alert-danger display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.col_invalid')
                            </div>
                            <div id="form_success_alert" class="alert alert-success display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.valid_and_sent')
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">廠商
                                    <span class="required" aria-required="true">*</span>
                                </label>
                                <div class="col-md-9">
                                    <select class="form-control" name="factory_chose">
                                        @foreach ($dataArray['factory'] as $item)
                                            <option value="{{ $item->id }}" @if ($chose_factory === $item->factory_code) selected @endif>
                                                {{ $item->factory_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">API路徑<span class="required"
                                        aria-required="true"> * </span></label>
                                <div class="col-md-9">
                                    <input type="text" name="url" class="form-control" placeholder="請輸入API路徑">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        <button type="button" class="btn gray" data-dismiss="modal">@lang('messages.close')</button>
                        <button type="submit" class="btn blue" value="print">送出</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade draggable-modal" id="modal_edit" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-blue-madison">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title font-white">編輯廠商資料</h4>
                </div>
                <form id="form_edit" method="POST" action="" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">廠商<span class="required" aria-required="true"> *
                                    </span></label>
                                <div class="col-md-9">
                                    <input type="text" id="factory_name2" name="factory_name2" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">API路徑<span class="required"
                                        aria-required="true"> * </span></label>
                                <div class="col-md-9">
                                    <input type="text" id="url2" name="url2" class="form-control" placeholder="請輸入API路徑">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id2" id="id2">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        <button type="button" class="btn gray" data-dismiss="modal">@lang('messages.close')</button>
                        <button type="submit" class="btn blue" value="print">送出</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade draggable-modal" id="modal_fc_edit" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-blue-madison">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title font-white">選擇廠商</h4>
                </div>
                <form id="chose_setting" method="POST" action="" class="form-horizontal">
                    <div class="modal-body">
                        <h2>目前選擇廠商:
                            <span class="text-danger">
                                @if ($chose_factory === 'yulon')
                                    裕隆
                                @endif
                                @if ($chose_factory === 'fetnet')
                                    遠傳
                                @endif
                                @if ($chose_factory === 'jean')
                                    新美齊
                                @endif
                            </span>
                        </h2>
                        <div class="form-body">
                            <select class="form-control" name="factory_chose">
                                @foreach ($dataArray['factory'] as $item)
                                    <option value="{{ $item->id }}" @if ($chose_factory === $item->factory_code) selected @endif>
                                        {{ $item->factory_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        <button type="button" class="btn gray" data-dismiss="modal">@lang('messages.close')</button>
                        <button type="submit" class="btn blue" value="print">送出</button>
                    </div>
                </form>
            </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/jquery-validation/js/additional-methods.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.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/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" 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/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() {

            var table = $('#table_access');
            var oTable = table.dataTable({
                // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                "language": {
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                    "emptyTable": "@lang('messages.datatable_no_data')",
                    "info": "@lang('messages.display_from') _START_ @lang('messages.display_to') _END_ @lang('messages.then_total') _TOTAL_ @lang('messages.records')",
                    "infoEmpty": "@lang('messages.no_match')",
                    "infoFiltered": "(@lang('messages.from') _MAX_ @lang('messages.records_filter'))",
                    "lengthMenu": "@lang('messages.show') _MENU_ @lang('messages.records')",
                    "search": "@lang('messages.quick_filter'):",
                    "zeroRecords": "@lang('messages.no_data')",
                    "paginate": {
                        "previous": "@lang('messages.last_page')",
                        "next": "@lang('messages.next_page')",
                        "last": "@lang('messages.lastest')",
                        "first": "@lang('messages.most_previous')"
                    }
                },
                "aaSorting": [
                    [1, 'desc']
                ],
                "lengthMenu": [
                    [10, 20, 50, -1],
                    [10, 20, 50, "All"] // change per page values here
                ],
                // set the initial value
                "pageLength": 10,
                "pagingType": "bootstrap_full_number",
            });
        });

        $(document).on('change', '#class_id', function() {
            var uname = $(this).find(':selected').attr('uname');
            $('#class_name').val(uname);
        });

        $(document).on('click', '#btn_query', function() {
            $('#modal_query').modal('show');
        });

        // 取得廠商設定
        $(document).on('click', '.btn_edit', function() {
            var id = $(this).data('id');
            $.ajax({
                type: 'GET',
                url: "{{ route('manage::charge::setting::get_setting') }}",
                dataType: 'json',
                data: {
                    id: id,
                    _token: $('#_token').val(),
                },
                success: function(sendback) {
                    $("#form_edit input[name='factory_name2']").val(sendback.data.factory_name);
                    $("#form_edit input[name='url2']").val(sendback.data.url);
                    $("#form_edit input[name='id2']").val(sendback.data.id);
                    $('#modal_edit').modal('show');
                }
            });
        });

        // 新增廠商
        $('#form_query').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: {
            },
            messages: {
            },

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

            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 form = $('#form_query');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "{{ route('manage::charge::setting::add_setting') }}",
                    data: form.serialize(),
                    success: function(sendback) {
                        toastr['success']('資料成功送出')
                        $('#modal_edit').modal('hide');
                        window.location.reload();
                    },
                    error: function(data) {
                        toastr['error'](data.responseJSON.message);
                        window.location.reload();
                    }
                });
            }
        });

        // 編輯廠商
        $('#form_edit').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: {
            },
            messages: {
            },
            invalidHandler: function(event, validator) { //display error alert on form submit
            },

            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 form = $('#form_edit');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "{{ route('manage::charge::setting::edit_setting') }}",
                    data: form.serialize(),
                    success: function(sendback) {
                        toastr['success']('資料成功送出')
                        $('#modal_edit').modal('hide');
                        window.location.reload();
                    },
                    error: function(data) {
                        toastr['error']('發生錯誤，請重新整理後再次操作');
                        window.location.reload();
                    }
                });
            }
        });

        // 選擇廠商
        $('#chose_setting').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: {
                name: {
                    required: true
                },
            },
            messages: {
                name: {
                    required: '請輸入類別名稱'
                },
            },

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

            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 form = $('#chose_setting');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "{{ route('manage::charge::setting::chose_setting') }}",
                    data: form.serialize(),
                    success: function(sendback) {
                        toastr['success']('資料成功送出')
                        $('#modal_fc_edit').modal('hide');
                        window.location.reload();
                    },
                    error: function(data) {
                        // toastr['error']('發生錯誤，請重新整理後再次操作');
                        // window.location.reload();
                    }
                });
            }
        });
    </script>
@endsection