@extends('layouts.app')

@section('content')
<link media="screen" rel="stylesheet" type="text/css" href="../../public/css/jquery-ui.css">
<link media="screen" rel="stylesheet" type="text/css" href="../../public/css/dropzone.css">
<script type="text/javascript" src="../../public/js/jquery-ui.js"></script>
<script type="text/javascript" src="../../public/js/sheetclip.js"></script>
<script type="text/javascript" src="../../public/js/dropzone.js"></script>

{{ Form::open(['url' => 'billconv/index', 'method' => 'POST', 'name' => 'form', 'id' => 'createform', 'files' => true]) }}
<div class="col-md-10">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">請求データ変換</a></h3>
        </div>
            
        {{-- 通知メッセージ --}}
        @if ($message <> "")
            <div class="message">
                {{ Form::label("message", $message, ["class"=>"form-control btn-success btn"]) }}
            </div>
        @endif

        @if (session()->has('errors'))
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="panel-body">
            <table width="100%">
                <col width="25%">
                <col width="25%">
                <col width="25%">
                <col width="25%">
                <tr>
                    <td>請求月</td>
                    <td>請求日</td>
                    <td>売上計上日</td>
                    <td>お支払い期限</td>
                </tr>
                <tr>
                    <td>{{ Form::select('bill_month', $month_data, $month, ['class'=>'form-control validate[required, custom[number]]', 'id'=>'bill_month', 'style'=>'width: 70%']) }}</td>
                    <td>{{ Form::text('bill_date', $bill_date, ['class'=>'form-control validate[required]', 'id'=>'bill_date', 'style'=>'width: 70%']) }}</td>
                    <td>{{ Form::text('sale_date', $sale_date, ['class'=>'form-control validate[required]', 'id'=>'sale_date', 'style'=>'width: 70%']) }}</td>
                    <td>{{ Form::text('pay_date' , $pay_date, ['class'=>'form-control validate[required]', 'id'=>'pay_date' , 'style'=>'width: 70%']) }}</td>
                </tr>
            </table>
        </div><!-- panel-body -->

        <div class="panel-body">
        <div class="my-dropzone" class="dropzone">
            受注データのアップロード
            <div id="my-preview-dropzone" class="dropzone dz-message needsclick" style="text-align:center">ここにファイルをドラッグ＆ドロップまたはクリックしてアップロードしたいファイルを選択してください<br /></div>

            {!! Form::hidden('uploadfile_org', '', ['class'=>'form-control', 'id'=>'uploadfile_org']) !!}
            {!! Form::hidden('uploadfile_real', '', ['class'=>'form-control', 'id'=>'uploadfile_real']) !!}
            
        </div>
        <div id="setting_org"></div>
        <hr />
        {{ Form::submit('変換データをダウンロード', ['class'=>'btn btn-success']) }}

        </div><!-- panel-body -->
    </div><!-- panel panel-default -->
</div><!-- col-md-10 -->
{{ Form::close() }}

<script>
    $.datepicker.setDefaults({
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        changeYear: true,  // 年選択をプルダウン化
        changeMonth: true, // 月選択をプルダウン化
        showWeek: false,
        buttonImage: "../../public/css/images/calendar-icon.png",
        buttonText : "カレンダーから選択",
        buttonImageOnly: true,
        showOn: "both",
        minDate: null,
    });
    
    $('#bill_date').datepicker();
    $('#sale_date').datepicker();
    $('#pay_date').datepicker();
</script>

<script>
/* ------------------------------
 Loading イメージ表示関数
 引数： msg 画面に表示する文言
 ------------------------------ */
function dispLoading(msg){
    // 引数なし（メッセージなし）を許容
    if( msg == undefined ){
        msg = "";
    }
    
    // 画面表示メッセージ
    var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
    
    // ローディング画像が表示されていない場合のみ出力
    if($("#loading").length == 0){
        $("body").append("<div id='loading'>" + dispMsg + "</div>");
    }
}
 
/* ------------------------------
 Loading イメージ削除関数
 ------------------------------ */
function removeLoading(){
    $("#loading").remove();
}    
</script>

<style>
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("/ARMS/public/img/loading.png") center center no-repeat;
}
</style>

<script Language="JavaScript">
function checkPastDate(field, rules, i, options){
    if (field.val() != "") {
        var nowDate = new Date();
        var today = nowDate.getFullYear() + "/" + ('00' + eval(nowDate.getMonth() + 1)).slice(-2) + "/" + ('00' + nowDate.getDate()).slice(-2);
        if ( field.val() < today ) {
            return "現在より過去の日付は設定できません";
        }
    }
}
</script>

<script>
    var myDropzone = function() {
        Dropzone.autoDiscover = false;

         $('.my-dropzone').dropzone({
            url:"upload",
            paramName : "userfile",
            acceptedFiles : "text/csv",
            parallelUploads:1,
            maxFiles:100,
            maxFilesize:2,
            dictFileTooBig: "ファイルサイズが大きすぎます。アップロードできるのは2Mまでです。",
            dictInvalidFileType: "CSVファイルを選択してください。",
            dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
            dictDefaultMessage: "＋",
            dictRemoveFile: "×",
            addRemoveLinks: true,
            previewsContainer:  "#my-preview-dropzone",
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            accept: function(file, done) {
                    return done();
            },
            success:function(file, response_text, e) {
                var org_file;
                var real_file;
                
                org_file = $('#uploadfile_org').val();
                real_file = $('#uploadfile_real').val();
                
                if ( org_file != "" ) org_file = org_file + ",";
                if ( real_file != "") real_file = real_file + ",";
                
                org_file = org_file + file.name;
                real_file = real_file + response_text;

                $('#uploadfile_org').val(org_file);
                $('#uploadfile_real').val(real_file);
                    
            },
            removedfile: function(file) {
                var ref;
                if (file.previewElement != null) {
                    
                    // ファイル名テキストボックスの値を配列化
                    var work = $('#uploadfile_org').val();
                    var org_files = work.split(',');
                    work = $('#uploadfile_real').val();
                    var real_files = work.split(',');
                    
                    // 元ファイル名のkeyを取得
                    var key = org_files.indexOf(file.name);
                    
                    // 配列から削除
                    org_files.splice(key, 1);
                    real_files.splice(key, 1);
                    
                    $('#uploadfile_org').val(org_files.join());
                    $('#uploadfile_real').val(real_files.join());
                
                    ref = file.previewElement;
                    ref.parentNode.removeChild(file.previewElement);
                    void 0;
                }
            },
            drop: function(e) {
                    this.element.classList.remove("selected");
            },
            dragover: function(e) {
                    this.element.classList.add("selected");
            },
            dragleave: function(e) {
                    this.element.classList.remove("selected");
            },
            complete: function(file, message) {
            },
            canceled: function(file) {
            },
            error: function(file, message) {
                    this.removeFile(file);
            }
        });
    }

    $(function(){
        myDropzone();
    });
</script>
@endsection