@extends('layouts.app')

@section('content')
<div class="row justify-content-center row-margin">
    <div class="col-md-12">
        <div class="page page-md comman-page-height-main user-listing">
            <div class="header-box py-5">
            </div>
            <div class="content-box bg-white">
            @include("admin.layouts.form-status")
                <div class="row">
                    <div class="col-md-12">
                        <form method="post" name="frm_my_account_info_update" id="frm_my_account_info_update" action="{{ route('my-account-form-post') }}">
                            @csrf
                            <h3 class="section-title">{{ __('message_lang.CHANGE_ACCOUNT_INFORMATION') }}</h3>
                            <div class="form-group">
                                <label for="phone_number">{{ __('message_lang.PLACEHOLDER_PHONE_NUMBER') }} <span style="color: red;">*</span></label>
                                <input type="text" class="form-control @error('phone_number') is-invalid @enderror custom-field" id="phone_number" name="phone_number" placeholder="{{ __('message_lang.PLACEHOLDER_PHONE_NUMBER') }}" value="{{ old('phone_number', @$user->phone_number) }}">

                                @error('phone_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>



                            <div class="form-group">
                                <label for="address">{{ __('message_lang.LBL_ADDRESS') }} <span style="color: red;">*</span></label>
                                <textarea class="form-control @error('address') is-invalid @enderror custom-field" id="address" name="address" placeholder="{{ __('message_lang.LBL_ADDRESS') }}">{{ old('address', @$user->address) }}</textarea>

                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="city">{{ __('message_lang.LBL_CITY') }} <span style="color: red;">*</span></label>
                                <input type="text" class="form-control @error('city') is-invalid @enderror custom-field" id="city" name="city" placeholder="{{ __('message_lang.LBL_CITY') }}" value="{{ old('city', @$user->city) }}">

                                @error('city')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <input type="hidden" name="profile_update_verification_code">

                            <div class="form-row">
                                <div class="col">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="frm_my_account_info_update_submit">{{ __('message_lang.BUTTON_SUBMIT') }}</button>
                                </div>
                                <div class="col">
                                    <a class="btn btn-primary btn-lg btn-block" href="{{ route('my-account') }}">{{ __('message_lang.BUTTON_CANCEL') }}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="profile_update_verification_code_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="profile_update_verification_code_modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="profile_update_verification_code_modalLabel">{{ __('message_lang.LBL_VERIFICATION_CODE') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="frm_profile_update_verification_code">
                @csrf
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="profile_update_verification_code">{{ __('message_lang.LBL_VERIFICATION_CODE') }} <span style="color:red;">*</span></label>
                                    <input type="text" class="form-control @error('profile_update_verification_code') is-invalid @enderror custom-field" id="profile_update_verification_code" name="profile_update_verification_code" placeholder="{{ __('message_lang.LBL_VERIFICATION_CODE') }}" value="">

                                    @error('profile_update_verification_code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('message_lang.BTN_CLOSE') }}</button>
                    <button type="submit" class="btn btn-primary" id="frm_profile_update_verification_code_submit">{{ __('message_lang.BTN_SUBMIT') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        // Disable accept money form after one click
        $('#frm_my_account_info_update').submit(function(){
			$('#frm_my_account_info_update_submit').attr('disabled', 'disabled');
		});
		$('#frm_profile_update_verification_code').submit(function(){
			$('#frm_profile_update_verification_code_submit').attr('disabled', 'disabled');
		});

        // Remove disabled attr on model close
        $("#profile_update_verification_code_modal").on('hide.bs.modal', function(){
            $('#frm_my_account_info_update_submit').removeAttr('disabled');
        });

        $("#frm_my_account_info_update").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) { // render error placement for each input type
                error.insertAfter(element);
                // for other inputs, just perform default behavior
            },
            ignore: "",
            rules: {
                phone_number: {
                    required: true
                },
                address: {
                    required: true
                },
                city: {
                    required: true,
                }
            },
            messages: {
                phone_number: {
                    required: '{{ __('message_lang.PLEASE_ENTER_PHONE_NUMBER') }}'
                },
                address: {
                    required: '{{ __('message_lang.PLEASE_ENTER_ADDRESS') }}'
                },
                city: {
                    required: '{{ __('message_lang.PLEASE_ENTER_CITY') }}'
                }
            },
            invalidHandler: function (event, validator) { //display error alert on form submit
                //successHandler1.hide();
                //errorHandler1.show();
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                // display OK icon
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                // add the Bootstrap 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, element) {
                label.addClass('help-block valid');
                // mark the current input as valid and display OK icon
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
            },
            submitHandler: function (frmadd) {
                // successHandler1.show();
                // errorHandler1.hide();
                // debugger;
                var verification_code = $('input:hidden[name=profile_update_verification_code]').val();
                if(verification_code != '')
                {
                    frmadd.submit();
                }
                else
                {
                    $.ajax({
                        url: "{{ route('my-account-form-verification-code-post') }}",
                        type: "POST",
                        dataType: "json",
                        data: $(frmadd).serializeArray(),
                        success: function(response) {
                            if(response.FLASH_STATUS == "S")
                            {
                                $('#profile_update_verification_code_modal').modal('show');
                                var message = response.FLASH_MESSAGE;
                                if(message)
                                {
                                    toastr.success(message, 'Success');
                                }
                            }
                            if(response.FLASH_STATUS == "E")
                            {
                                $('#frm_my_account_info_update_submit').removeAttr('disabled');
                                toastr.error(response.FLASH_MESSAGE, 'Error');
                            }
                        }
                    });
                }
            }
        });

        $("#frm_profile_update_verification_code").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) { // render error placement for each input type
                error.insertAfter(element);
                // for other inputs, just perform default behavior
            },
            ignore: "",
            rules: {
                profile_update_verification_code: {
                    required: true
                }
            },
            messages: {
                profile_update_verification_code: {
                    required: '{{ __('message_lang.VERIF_CODE_REQUIRED') }}'
                }
            },
            invalidHandler: function (event, validator) { //display error alert on form submit
                //successHandler1.hide();
                //errorHandler1.show();
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                // display OK icon
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                // add the Bootstrap 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, element) {
                label.addClass('help-block valid');
                // mark the current input as valid and display OK icon
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
            },
            submitHandler: function (frmadd) {
                // successHandler1.show();
                // errorHandler1.hide();
                // debugger;

                $.ajax({
                    url: "{{ route('my-account-form-check-verification-code-post') }}",
                    type: "POST",
                    dataType: "json",
                    data: $(frmadd).serializeArray(),
                    success: function(response) {
                        // debugger;
                        if(response.FLASH_STATUS == "S")
                        {
                            var verification_code = $("#frm_profile_update_verification_code input[name=profile_update_verification_code]").val();
                            $('input:hidden[name=profile_update_verification_code]').val(verification_code);
                            $('form#frm_my_account_info_update').submit();
                        }
                        else if(response.FLASH_STATUS == "E")
                        {
                            $('#frm_profile_update_verification_code_submit').removeAttr('disabled');
                            var message = response.FLASH_MESSAGE;
                            if(message)
                            {
                                toastr.error(message, 'Error');
                            }
                        }
                    }
                });
            }
        });
    });
</script>

@endsection