@extends('user.layouts.app')

@section('title', '基本情報')

@section('header')
    <p><a href="{{ route('user.my_account.index') }}">＜</a></p>
    @if(isset($is_image) && $is_image)
        <h1 id="title">身分証の登録<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
    @else
        <h1 id="title">基本情報<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
    @endif
@endsection

@section('content')
    <main>
        @include('user.layouts.flash-message')
        {{ Form::open(['route' => ['user.my_account.update', ['user'=>$user->id]], 'id' => 'frm_user_data', 'name' => 'frm_user_data', 'method' => 'put', 'files'=>true]) }}
        <input type="hidden" name="user_id" value="{{ $user->id }}">
        <div id="wrapper" class="contents">
            @if(isset($is_image) && $is_image)
                @include('user.my_account.form._image')
                @unless(isset($is_image) && $is_image && $user->confirm_status == config('const.confirm_status_code.accept'))
                    <span class="btn_normal ok" id="save">身分証明書を登録する</span>
                @endif
            @else
                @include('user.my_account.form._info')
                <span class="btn_normal ok" id="save">変更する</span>
            @endif
        </div>
        {{ Form::close()}}
    </main>
    <div id="dialog-confirm" style="display:none">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:2px 12px 20px 0;"></span>
            <span id="confirm_text"></span></p>{{ $user->reject_reason }}
    </div>
@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset('assets/vendor/dropzone/dist/dropzone.css') }}">
    <style>
        #card_front_row th {
            overflow: auto;
        }
        #imageUpload {
            display: none;
        }

        #profileImage {
            cursor: pointer;
        }

        #profile-container {
            width: 100px;
            height: 100px;
            overflow: hidden;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            margin: 0 auto;
        }

        #profile-container img {
            width: 100px;
            height: 100px;
            object-fit:cover;
        }
        .id_image {
            width: 200px;
        }
        .dropzone {
            min-height: unset !important;
            border: none !important;
            background: white;
            padding: 0 !important;
        }
        .dz-default.dz-message {
            display: none;
        }
        .dropzone .dz-preview {
            margin-top: 0 !important;
        }
        .dropzone label {
            border: 1px solid #888888;
            padding: 5px;
            color: #888888;
            display: inline-block;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            min-width: 76px;
        }
        .dropzone label::before {

            content: '＋';
            font-size: 12px;
            font-weight: bold;
            padding: 0px;
            transition: all, 0.25s, linear;
            margin-right: 0px;
        }
        .file_box img {
            width: 100px;
        }
        .hidden {
            display: none !important;
        }
        .dropzone label.btn_delete::before {
            content: '―';
            font-size: 12px;
            font-weight: bold;
            padding: 0px;
            transition: all, 0.25s, linear;
            margin-right: 0px;
        }
        .dropzone label.btn_delete {
            min-width: 30px !important;
        }
        #confirm_job_btn {
            padding: 5px 10px;
            background-color: #333333;
            border-radius: 5px;
            color: white;
            border-color: #333333;
        }
        span.card_txt {
            color: #333 !important;
            border: none !important;
            float: unset !important;
            font-size: 0.9rem !important;
            font-weight: bold !important;
            margin: 0 !important;
        }
        .ui-dialog-buttonset button:nth-child(2) {
            display: none !important;
        }

         div.guid-section {
            margin: 0 auto 20px auto;
            text-align: center;
             border-bottom: 3px solid #EC1C24;
             display: inline-block;
        }

        div.guid-section a {
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
        }

        td.notice-section p {
            font-size: 12px !important;
            line-height: 1.8;
            color: #EC1C24;
        }

        @media only screen and (max-width: 736px) {

        }
    </style>
@endsection

@section('page_js')
    <script src="{{ asset('assets/vendor/dropzone/dist/dropzone.js') }}"></script>
    <script src="{{ asset('assets/vendor/jquery-ui/jquery-ui.js') }}"></script>
    <script>
        Dropzone.autoDiscover = false;
        $(document).ready(function () {
            @if (isset($show_status) && $show_status)
                helper_confirm("dialog-confirm", "{{ config('const.confirm_status.'.$user->confirm_status) }}", "身分証明書が「{{ config('const.confirm_status.'.$user->confirm_status) }}」されました。", 300, "確認", "閉じる", function () {
                });
            @endif
            $('#save').click(function () {
                $('#frm_user_data').submit();
            });

            $('select[name="card_type"]').change(function() {
                setCardType();
            });
            setCardType(1);
            function setCardType(first = 0){
                let card_type = $('select[name="card_type"]').val();
                $(".card_txt").hide();
                $("#student_face_box").hide();
                $("#card_front_row").hide();
                $("#card_back_row").hide();
                if (!first) {
                    $("#front_id_img_src").attr('src','');
                    $("#front_id_img_src").hide();
                    $("#btn_delete_front").addClass('hidden');
                    $("#front_id_img").val('');
                    $("#back_id_img_src").attr('src','');
                    $("#back_id_img_src").hide();
                    $("#btn_delete_back").addClass('hidden');
                    $("#back_id_img").val('');
                    $("#face_id_img_src").attr('src','');
                    $("#face_id_img_src").hide();
                    $("#btn_delete_face").addClass('hidden');
                    $("#face_id_img").val('');
                }
                if(card_type == '' || card_type == "{{ config('const.user_card_type_code.id_card') }}") {
                    $(".id_card_txt").show();
                    $("#card_front_row").show();
                    $("#card_back_row").show();
                } else if(card_type == "{{ config('const.user_card_type_code.passport') }}") {
                    $(".passport_txt").show();
                    $("#card_front_row").show();
                } else if(card_type == "{{ config('const.user_card_type_code.student_card') }}") {
                    $(".student_txt").show();
                    $("#student_face_box").show();
                    $("#card_back_row").show();
                } else if(card_type == "{{ config('const.user_card_type_code.foreign_card') }}") {
                    $(".foregin_txt").show();
                    $("#card_front_row").show();
                }
            }
            $("#profileImage").click(function(e) {
                $("#imageUpload").click();
            });
            $('#confirm_job_btn').click(function() {
                if ($('select[name="job_type"]').val()) {
                    $.ajax({
                        type: "post",
                        url : '{{ route("user.my_account.update_job_type") }}',
                        data: {
                            'user_id':"{{ $user->id }}",
                            'job_type':$('select[name="job_type"]').val(),
                            _token: "{{ csrf_token() }}",
                        },
                        dataType:'json',
                        success: function(response) {
                        }
                    });
                }
            });
            $(".btn_delete").click(function() {

                let index = $(this).data('index');
                let file_name = $("#" + index + "_id_img").val();
                if(index == 'profile') {
                    file_name = $("#profile_image").val();
                }
                $.ajax({
                    type: "post",
                    url : '{{ route("user.my_account.delete_file") }}',
                    data: {
                        'user_id':"{{ $user->id }}",
                        'file_name':file_name,
                        _token: "{{ csrf_token() }}",
                    },
                    dataType:'json',
                    success: function(response) {
                        console.log(response.result_code);
                        if (response.result_code == 'success') {
                            if(index == 'profile' ) {
                                $("#profile_image_src").attr('src',"{{ asset('assets/user/img/icon/person.png') }}");
                                $("#btn_delete_" + index).addClass('hidden');
                                $("#profile_image").val('');
                            } else {
                                $("#" + index + "_id_img_src").attr('src','');
                                $("#" + index + "_id_img_src").addClass('hidden');
                                $("#btn_delete_" + index).addClass('hidden');
                                $("#" + index + "_id_img").val('');
                            }
                        } else {
                            showAlertDialog('エラー', '削除が失敗しました。');
                        }
                    }
                });
            });

            @if ($user->confirm_status != config('const.confirm_status_code.accept'))
            $("#file_box_back").dropzone({
                autoProcessQueue : true,
                dictCancelUpload:'キャンセル',
                previewsContainer:"#preview_zone_back",
                dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                clickable:"#btnbrowse_back",
                url:"{{ route("user.my_account.upload_file") }}",
                params:{
                    "_token":"{{ csrf_token() }}"
                },
                maxFiles:1,
                acceptedFiles : "image/*",
                dictDefaultMessage:"",
                dictRemoveFileConfirmation:1,
                addRemoveLinks:true,
                init:function(){
                    myDropzone = this;
                    this.on("complete", function(){
                        if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                        {
                            var _this = this;
                            _this.removeAllFiles();
                        }
                    });

                },
                success: function success(file) {
                    console.log(file.xhr.response);
                    let data = JSON.parse(file.xhr.response);
                    let img_src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                    console.log(data.file_path);
                    $("#back_id_img_src").attr('src',img_src );
                    $("#back_id_img_link").attr('href',img_src );
                    $("#back_id_img_src").removeClass('hidden');
                    $("#btn_delete_back").removeClass('hidden');
                    $("#back_id_img").val(data.file_path);
                    $("#back_id_img_src").show();
                    $("#back_id_img_link").show();
                }
            });
            $("#file_box_front").dropzone({
                autoProcessQueue : true,
                dictCancelUpload:'キャンセル',
                dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                previewsContainer:"#preview_zone_front",
                clickable:"#btnbrowse_front",
                url:"{{ route("user.my_account.upload_file") }}",
                params:{
                    "_token":"{{ csrf_token() }}"
                },
                maxFiles:1,
                acceptedFiles : "image/*",
                dictDefaultMessage:"",
                dictRemoveFileConfirmation:1,
                addRemoveLinks:true,
                init:function(){
                    myDropzone = this;
                    this.on("complete", function(){
                        if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                        {
                            var _this = this;
                            _this.removeAllFiles();
                        }
                    });

                },
                success: function success(file) {
                    let data = JSON.parse(file.xhr.response);
                    let img_src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                    console.log(data.file_path);
                    $("#front_id_img_src").attr('src',img_src );
                    $("#front_id_img_link").attr('href',img_src );
                    $("#front_id_img_src").removeClass('hidden');
                    $("#btn_delete_front").removeClass('hidden');
                    $("#front_id_img").val(data.file_path);
                    $("#front_id_img_src").show();
                    $("#front_id_img_link").show();
                }
            });
            $("#file_box_face").dropzone({
                autoProcessQueue : true,
                dictCancelUpload:'キャンセル',
                previewsContainer:"#preview_zone_face",
                dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                clickable:"#btnbrowse_face",
                url:"{{ route("user.my_account.upload_file") }}",
                params:{
                    "_token":"{{ csrf_token() }}"
                },
                maxFiles:1,
                acceptedFiles : "image/*",
                dictDefaultMessage:"",
                dictRemoveFileConfirmation:1,
                addRemoveLinks:true,
                init:function(){
                    myDropzone = this;
                    this.on("complete", function(){
                        if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                        {
                            var _this = this;
                            _this.removeAllFiles();
                        }
                    });

                },
                success: function success(file) {
                    let data = JSON.parse(file.xhr.response);
                    let img_src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                    console.log(data.file_path);
                    $("#face_id_img_src").attr('src',img_src );
                    $("#face_id_img_link").attr('href',img_src );
                    $("#face_id_img_src").removeClass('hidden');
                    $("#btn_delete_face").removeClass('hidden');
                    $("#face_id_img").val(data.file_path);
                    $("#face_id_img_src").show();
                    $("#face_id_img_link").show();
                }
            });
            @endif
            function fasterPreview( uploader, ele_id, link_ele = '') {
                if ( uploader.files && uploader.files[0] ){
                    $('#' + ele_id).attr('src',
                        window.URL.createObjectURL(uploader.files[0]) );
                    if(link_ele !== '') {
                        $('#' + link_ele).attr('href',
                            window.URL.createObjectURL(uploader.files[0]) );
                    }
                }
            }


            $("#imageUpload").change(function(){
                fasterPreview( this ,'profileImage');
            });

            $(".id_upload_file_btn").change(function () {
                $("#" + $(this).attr('name') + '_link').show();
                fasterPreview( this ,$(this).attr('name') + '_src', $(this).attr('name') + '_link');
            })
        });
    </script>
@endsection