@extends('layout.manage')

@section('css_page_level')
<link href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@section('page-content-wrapper')
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <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="index.html">@lang('messages.homepage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">@lang('messages.firecontrol')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">@lang('messages.batch_import')</a>
                    </li>
                </ul>
                <div class="page-toolbar">

                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                    <!-- Begin: life time stats -->
                    <div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption">
                                <i class="fa fa-home"></i>@lang('messages.batch_import')
                            </div>
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#tab_0" data-toggle="tab">
                                    @lang('messages.batch_import_record') </a>
                                </li>
                                <li>
                                    <a href="#tab_1" data-toggle="tab">
                                    @lang('messages.batch_importing') </a>
                                </li>
                            </ul>
                        </div>
                        <div class="portlet-body">
                            <div class="tabbable">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab_0">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="tabbable">
                                                    <table class="table table-striped table-bordered table-advance table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>
                                                            <i class="fa fa-calendar-o"></i> @lang('messages.time')
                                                        </th>
                                                        <th class="hidden-xs">
                                                            <i class="fa fa-text"></i> @lang('messages.mark')
                                                        </th>
                                                        <th>
                                                            @lang('messages.success_import_item')
                                                        </th>
                                                        <th>
                                                            @lang('messages.fail_import_item')
                                                        </th>
                                                        <th>
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($imports as $import)
                                                    <tr>
                                                        <td>
                                                            {{ $import->created_at }}
                                                        </td>
                                                        <td class="hidden-xs">
                                                            {{ $import->title }}
                                                        </td>
                                                        <td>
                                                            {{ $import->success }}
                                                        </td>
                                                        <td>
                                                            {{ $import->fail }}
                                                        </td>
                                                        <td>
                                                            <div class="btn-group">
                                                                <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                                                                @lang('messages.action') <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li>
                                                                        <a href="{{action('FirecontrolController@downloadExcelCCTV',['id'=>$import->id])}}">
                                                                        <i class="fa fa-file"></i>
                                                                        @lang('messages.downloadxlsx')</a>
                                                                    </li>
                                                                    <li class="divider">
                                                                    </li>
                                                                    <li>
                                                                        <a class="btn_destroy_import" url="{{action('FirecontrolController@destroyImportCCTV',['id'=>$import->id])}}">
                                                                        <i class="fa fa-trash-o"></i>
                                                                        @lang('messages.deleteoutput') </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab_1">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h4>@lang('messages.batch_importing')</h4>
                                                <form id="form_import" action="{{ route('manage::firecontrol::XLSImportCCTV') }}" method="POST" enctype="multipart/form-data">
                                                <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                                                <div class="portlet light">
                                                    <div class="portlet-title">
                                                        <div class="caption">
                                                            <i class="icon-bar-chart font-green-sharp hide"></i>
                                                            <span class="caption-subject font-green-sharp bold uppercase">@lang('messages.xlsxstep1')</span>
                                                        </div>
                                                    </div>
                                                    <div class="portlet-body">
                                                        <p>@lang('messages.descrixlsx')</p>
                                                        <p>@lang('messages.hint_object')</p>
                                                        <ul>
                                                            <li>@lang('messages.unlimit_file_name')</li>
                                                            <li>@lang('messages.sub_xlsx')</li>
                                                            <li>@lang('messages.not_function')</li>
                                                        </ul>

                                                        <p><a class="btn blue btn-block" href="{{ route('manage::firecontrol::downloadWithTableCCTV') }}">@lang('messages.download_example_cctv')</a></p>

                                                    </div>
                                                </div>
                                                <div class="portlet light">
                                                    <div class="portlet-title">
                                                        <div class="caption">
                                                            <i class="icon-bar-chart font-green-sharp hide"></i>
                                                            <span class="caption-subject font-green-sharp bold uppercase">@lang('messages.xlsxstep2')</span>
                                                        </div>
                                                    </div>
                                                    <div class="portlet-body">
                                                        <p>@lang('messages.upload_xls_here')</p>
                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                            <div class="input-group input-large">
                                                                <div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
                                                                    <i class="fa fa-file fileinput-exists"></i>&nbsp; <span class="fileinput-filename">
                                                                    </span>
                                                                </div>
                                                                <span class="input-group-addon btn default btn-file">
                                                                <span class="fileinput-new">
                                                                @lang('messages.select_file') </span>
                                                                <span class="fileinput-exists">
                                                                @lang('messages.change') </span>
                                                                <input type="file" name="import_file">
                                                                </span>
                                                                <a href="javascript:;" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
                                                                @lang('messages.remove')  </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="portlet light">
                                                    <div class="portlet-title">
                                                        <div class="caption">
                                                            <i class="icon-bar-chart font-green-sharp hide"></i>
                                                            <span class="caption-subject font-green-sharp bold uppercase">@lang('messages.xlsxstep3')</span>
                                                        </div>
                                                    </div>
                                                    <div class="portlet-body">
                                                        <p>@lang('messages.mark4_this_batch')</p>
                                                        <form action="#" class="form-horizontal">
                                                            <div class="form-body">
                                                                <div class="form-group">
                                                                    <label class="col-md-3 control-label">@lang('messages.this_batch_name')</label>
                                                                    <div class="col-md-9">
                                                                        <input name="title" type="text" class="form-control input-circle" placeholder=@lang('messages.hint_input_example')>
                                                                        <span class="help-block">
                                                                        @lang('messages.hint_input_notice_cctv')</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-actions">
                                                                <div class="row">
                                                                    <div class="col-md-offset-3 col-md-9">
                                                                        <button type="submit" class="btn btn-circle blue">@lang('messages.submit')</button>
                                                                        <button type="button" class="btn btn-circle default btn_reset">@lang('messages.reset')</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="clearfix"></div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End: life time stats -->
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
    <!-- END CONTENT -->
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="../../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/global/plugins/jquery.pulsate.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}" type="text/javascript"></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 src="{{ asset('assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js') }}" type="text/javascript"></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/bootbox/bootbox.min.js') }}"></script>
@endsection

@section('js_page_level')
<script type="text/javascript">
$(document).ready(function(){
    $('#form_import').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:{
            import_file:{
                required:true,
            },
            title:{
                required: true,
                minlength: 4,
                maxlength: 25,
            }
        },
        messages:{
            import_file:{
                required:'請至少選擇一個Excel檔案上傳'
            },
            title:{
                required: '請輸入批次名稱',
                minlength: '批次名稱最少需要4個字元',
                maxlength: '批次名稱最少需要25個字元'
            }
        },

        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) {
            form[0].submit();
        }
    });
});

$(document).on('click','.btn_destroy_import',function(){
    var url = $(this).attr('url');
    bootbox.confirm("<h3 style='font-weight:bold;'><i class='fa fa-exclamation-triangle font-red-mint'></i> 確定要刪除本次批次匯入?</h3><br><div class='alert alert-danger'><strong>警告!</strong> 一旦刪除後所有對應之CCTV資料將一併刪除，且無法復原 </div>", function(result) {
        if(result == true){
            $.ajax({
                type  : 'DELETE',
                url   : url,
                dataType:'json',
                data  : {
                    _token   : '{{csrf_token()}}',
                },
                success : function(sendback){
                    toastr['success']('刪除成功!');
                    window.location.reload();
                },
                error : function(sendback){
                    toastr['error']('刪除失敗!');
                }
            }); 
        }
    }); 
});

$(document).on('click','.btn_reset',function(){
    $('[name="title"]').val('');
});
</script>


@endsection