@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', app()->getLocale()) }}" 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 #F58220; 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-primary" disabled>{{ __('dashboard.profileDelete.button') }}<div class="ripple-container"></div></button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var debug = 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();

        var form = $('#accountDeleteForm');

        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
        })
        .done( function(response) {
            console.log('done');
            $('#infoModalTitle').html('{{ __('modal.infoModalTitle.success') }}');
            $('#infoModalMessage').html('{{ __('modal.infoModalMessage.success') }}');
            $('#infoModal').modal('show');
            //$('.modal-backdrop').hide();
            if(debug == true) console.log(response);
            $('#infoModal').on('hidden.bs.modal', function (e) {
                location.href = "