@section('title', __('general.page_email_new_title'))
@section('head')
@endsection
@include('includes/header')
@include('includes/topDash')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('general.page_email_new_title') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard.r') }}">{{ __('general.top_menu_item_general') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('emails.r') }}">{{ __('general.menu_item_2') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('general.action_add') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-content">

                    @php
                    $subDom = $siteData->subdomain.'.minhawebradio.com';
                    @endphp

                    @if($siteData->domain == $subDom)
                    <div class="pt-0 pb-3 text-center">{{ __('general.emails_need_domain') }}</div>
                    @else
                    <form action="{{ route('emails.c.do') }}" method="POST">
                        @csrf
                        <div class="mb-3 h-width @if (\Session::has('error_name')) erro-inp @endif">
                            <label class="form-label">{{ __('general.table_email') }}</label>
                            <div class="input-group">
                                <input type="text" onKeyPress="if(this.value.length==32) return false;" oninput="this.value = this.value.replace(/[^a-z0-9-\.]/g, '');" class="form-control @if (\Session::has('error_name')) is-invalid @endif " name="name" value="{{ old('name') }}" autocomplete="off">
                                <span class="input-group-text">&#64;{{ $siteData->domain }}</span>
                            </div>
                            @if (\Session::has('error_name')) <div id="msgerror_name" class="form-text text-danger"> {!! \Session::get('error_name') !!} </div> @endif
                        </div>

                        <div class="mb-3 h-width @if (\Session::has('error_pass')) erro-inp @endif">
                            <label class="form-label">{{ __('general.label_password') }}</label>
                            <div class="input-group">
                                <input type="password" id="password" class="form-control @if (\Session::has('error_pass')) is-invalid @endif" name="password" placeholder="{{ __('general.label_password_placeholder') }}">
                                <button type="button" class="btn btn-alt-secondary see"><i class="icSee fa fa-eye-slash"></i></button>
                                <button type="button" class="btn btn-alt-secondary gen">{{ __('general.action_generate') }}</button>
                            </div>
                            @if (\Session::has('error_pass')) <div id="msgerror_pass" class="form-text text-danger"> {!! \Session::get('error_pass') !!} </div> @endif
                            <div id="pswmeter" class="mt-1"></div>
                            <div id="pswmeter-message" class="mt-1"></div>
                        </div>

                </div>
                <div class="block-content py-2 border-top">
                    <button type="submit" class="btn btn-primary saveBtn">{{ __('general.action_save') }}</button>
                    </form>
                </div>
                @endif
            </div>
        </div>
    </div>

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/pages/pswmeter.min.js"></script>

<script>
    const saveBtn = document.querySelector('.saveBtn');
    saveBtn.disabled = true;

    document.getElementById('pswmeter').addEventListener('onScore0', () => saveBtn.disabled = true);
    document.getElementById('pswmeter').addEventListener('onScore1', () => saveBtn.disabled = true);
    document.getElementById('pswmeter').addEventListener('onScore2', () => saveBtn.disabled = true);
    document.getElementById('pswmeter').addEventListener('onScore3', () => saveBtn.disabled = false);
    document.getElementById('pswmeter').addEventListener('onScore4', () => saveBtn.disabled = false);

    $('.gen').off('click').on('click', function(e) {
        var randomstring = Math.random().toString(36).slice(-10);
        $('#password').val(randomstring);
        $('#password').attr('type', 'text');
        $('.icSee').removeClass('fa-eye-slash').addClass('fa-eye');
        document.getElementById('password').dispatchEvent(new Event('keyup'));
    });

    $('.see').click(function() {
        if ($('#password').attr('type') === 'password') {
            $('.icSee').removeClass('fa-eye-slash').addClass('fa-eye');
            $('#password').attr('type', 'text');
        } else {
            $('.icSee').removeClass('fa-eye').addClass('fa-eye-slash');
            $('#password').attr('type', 'password');
        }
    });
</script>

</body>
</html>