@extends('layouts.app')

@section('content')
<h1 class="text-center contract_title">{{ __('dashboard.profileDelete.title') }}</h1>
<hr class="my-4 contract_title" />
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <form method="POST" id="accountDeleteForm" action="{{ route('delete') }}" class="notifications">
                {{--<input type="hidden" name="token" value="{{ $token }}"/>--}}
                @csrf

                <p class="text-center p-4">
                    <span>{!! __('dashboard.profileDelete.warningMsg') !!}</span>
                </p>

                <div class="container">
                    <div class="row p-3 ml-3">
                        <div class="col-1 p-0 d-flex align-items-center"><i class="fa fa-exclamation-circle text-danger float-right" style="font-size:27px"></i></div>
                        <div class="col-11 pl-3 d-flex align-items-center">{{ __('dashboard.profileDelete.list1') }}</div>
                    </div>
                    <div class="row p-3 ml-3">
                        <div class="col-1 p-0 d-flex align-items-center"><i class="fa fa-exclamation-circle text-danger float-right" style="font-size:27px"></i></div>
                        <div class="col-11 pl-3 d-flex align-items-center">{{ __('dashboard.profileDelete.list2') }}</div>
                    </div>
                    <div class="row p-3 ml-3">
                        <div class="col-1 p-0 d-flex align-items-center"><i class="fa fa-exclamation-circle text-danger float-right" style="font-size:27px"></i></div>
                        <div class="col-11 pl-3 d-flex align-items-center">{{ __('dashboard.profileDelete.list3') }}</div>
                    </div>
                </div>

                <div id="typeDelete" class="form-group bmd-form-group mt-4">
                    <label for="typeDelete" class="component-label bmd-label-static"><h3>{{ __('dashboard.profileDelete.typeDelete') }}</h3></label>
                    <input id="typeDelete" type="typeDelete" class="col-md-12 form-control mt-4" name="typeDelete" value="" autocomplete="false">
                </div>

                <div class="form-group mt-4">
                    <label  for="whyLeaveOption" class="component-label bmd-label-static">{{ __('dashboard.profileDelete.whyLeaveOption0') }}</label>
                    <select class="form-control" id="whyLeaveOption" name="whyLeaveOption">
                        <option value="...">{{ __('dashboard.profileDelete.whyLeaveOption7') }}</option>
                        @foreach ($whyLeaves  as $whyLeave)
                            <option value="{{ $whyLeave }}">{{ $whyLeave }}</option>
                        @endforeach
                            <option value="other">{{ __('dashboard.profileDelete.whyLeaveOption6') }}</option>
                    </select>
                </div>

                <div class="form-group question component-type-textbox bmd-form-group d-none p-0" id="leaveOther">
                    <div class="component required"><label for="leaveOther" class="component-label"></label>
                        <textarea id="leaveOtherTarea" name="leaveOther" class="form-control" style="border: solid 2px #2196f3; background-image: none;" title="" rows="4" cols="50" data-next="" minlength="1" maxlength="300" placeholder="" required="" autocomplete="off"></textarea>
                        <div class="charNum">300</div>
                        <span class="invalid-feedback" role="alert"></span>
                    </div>
                </div>

                <div class="form-group text-center mt-5">
                    <button id="sendAccountDelete" type="button" class="btn btn-red" disabled>{{ __('dashboard.profileDelete.button') }}<div class="ripple-container"></div></button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var ajaxDebug = false;
    $( '.container' ).on( 'keyup', '#typeDelete', function(e) {
        e.stopPropagation();

        document.getElementById("sendAccountDelete").disabled = true;

        if( $(this).val() == 'DELETE' )
            document.getElementById("sendAccountDelete").disabled = false;
    });

    $( '.container' ).on( 'change', '#whyLeaveOption', function(e) {
        e.stopPropagation();

        if( $(this).val() == 'other' )
            $('#leaveOther').removeClass('d-none');
        else
            $('#leaveOther').addClass('d-none');
    });

    $('#sendAccountDelete').on('click',function (e) {
        e.preventDefault();
        
        form_ajax({
            formId: 'accountDeleteForm',
            loader: true,
            responseCode200: function ( response ) {
                if( ajaxDebug ) console.log('sendAccountDelete: ', response);
                
                alert_modal( '{{ __('modal.infoModalMessage.success') }}', '{{ __('modal.infoModalTitle.success') }}', 'success' );
                $('#alertModal').on('hidden.bs.modal', function (e) {
                    window.location.href = "{{ route('welcome') }}";
                });
            },
            failCallback: function ( error ) {
                if( ajaxDebug ) console.log('sendAccountDelete failed: ', error);
                alert_modal( '{{ __('modal.infoModalMessage.error') }}', '{{ __('modal.infoModalTitle.error') }}', 'warning' );
            }
        });
    });
});
</script>
@endpush

@section('title')
{{ __('meta.title.profileDelete') }}
@endsection

@section('description')
{{ __('meta.description.profileDelete') }}
@endsection