@extends('frontend.layouts.contentLayoutMaster')

@section('title', '變更郵件')
@section('active', 'change_email')

@section('vendor-styles')

@endsection

@section('page-styles')

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-12 col-12">
            <form class="form form-horizontal" action="{{ Route('frontend.change_email.update', $user->id) }}" method="POST" id="main_form">
                @csrf
                @method('PATCH')
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label>郵件</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="email" name="email" placeholder="請輸入Email" type="text" value="{{ old('email', $user->email) }}">
                                        @if ($errors->has('email'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('email') ])
                                        @endif
                                    </div>
                                    <div class="col-md-4 form-group">
                                        @if (!empty($user->email) && empty($user->email_verified_at))
                                            {{-- 未驗證 --}}
                                            <button class="btn btn-success" type="button" id="send_verify_button" >寄送驗證信</button>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2 offset-md-2">
                                        @if (!empty($user->email) && !empty($user->email_verified_at))
                                            {{-- 驗證狀態 --}}
                                            <span class="badge badge-light-success">{{ config('general.verify.1') }}</span>
                                        @else
                                            <span class="badge badge-light-secondary">{{ config('general.verify.0') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-7 ml-lg-auto">
                                    <button class="btn btn-primary mr-1 mb-1" type="button" id="submit_button">更新</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
@endsection

@section('page-scripts')
<script>
    const OldUserEmail = '{{ $user->email }}';

    function checkEmailIsDirty() {
        let isDirty = OldUserEmail != $('#email').val();
        $('#submit_button').prop('disabled', isDirty ? false : true);
        $('#send_verify_button').prop('disabled', isDirty ? true : false);
    }

    checkEmailIsDirty();
    $('#email').on('keyup', function() {
        checkEmailIsDirty();
    });

    // 更新
    $('#submit_button').on('click', function() {
        let main_form = $('#main_form');

        return swal({
            'title':'更新郵件後，要重新驗證才會生效',
            'html': `請確認您的信件是否為：${$('#email').val()}`,
            'type': 'warning',
            'showCancelButton': true,
            'confirmButtonText': '更新',
            'cancelButtonText': '再編輯',
        }).then(function(response) {
            if (response.value === true) {

                main_form.submit();
            }

            return false;
        });
    });

    // 驗證
    $('#send_verify_button').on('click', function() {
        let main_form = $('#main_form');

        main_form.attr('action','{{ Route("frontend.change_email.send_verify_email", $user->id) }}').submit();
    });


</script>
@endsection