@section('title', __('radio.password_new_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/jquery-clock-timepicker/bootstrap-clockpicker.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<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">
                        {{ __('radio.password_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('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.live-passwords.r') }}">{{ __('radio.menu_item_4') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.password_new_breadcrumb') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-content">
                    <form id="newPassForm" action="{{ route('radio.live-passwords.c.do') }}" method="POST">
                    <div class="mb-3 h-width @if (\Session::has('error_name')) erro-inp @endif">
                        <label class="form-label" for="name">{{ __('general.table_name') }}</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="{{ __('radio.password_name_placeholder') }}" @if(old('name')) value="{{ old('name') }}" @endif onkeyup="this.value = this.value.replace(/[^a-z@$*+áàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑA-Z0-9 \.]/g, ''); limit(this,'25');" autocomplete="off">
                        @if (\Session::has('error_name'))
                            <div id="msgError_name" class="form-text text-danger">
                                <i class="fa fa-fw fa-triangle-exclamation"></i> {!! \Session::get('error_name') !!}
                            </div>
                        @endif
                    </div>
                    <div class="mb-4 h-width">
                        <label class="form-label" for="password">{{ __('radio.password_label') }}</label>
                        <div class="input-group flex-row-reverse">
                            <button type="button" class="btn btn-secondary newPass">{{ __('general.action_generate') }}</button>
                            <input type="text" class="form-control form-control-alt passinput me-auto" @if(old('password')) value="{{ old('password') }}" @endif onkeyup="this.value = this.value.replace(/[^a-z@$*+#A-Z0-9\.]/g, ''); limit(this,'20');" name="password" placeholder="{{ __('radio.password_placeholder') }}">
                        </div>
                    </div>
					<div class="mb-3 d-flex align-items-center">
						<input class="form-check-input restrict m-0" type="checkbox" value="1" id="restrict" name="restrict" {{ (old('restrict') ? 'checked' : '') }}>
						<label class="form-check-label ms-2 mb-0" for="restrict" style="cursor: pointer;">{{ __('radio.password_restrict') }}</label>
						<i class="fa fa-fw fa-circle-info text-muted ms-2"
						   style="cursor: help;"
						   data-bs-toggle="tooltip"
						   data-bs-placement="right"
						   data-bs-html="true"
						   title="{{ __('radio.password_restrict_tip') }}"></i>
					</div>
					<div class="prohibe @if(!old('restrict')) d-none @endif">
					<div class="alert alert-secondary d-flex align-items-center h-width padSm">
						<div class="flex-shrink-0">
							<i class="fa fa-fw fa-triangle-exclamation"></i>
						</div>
						<div class="flex-grow-1 ms-2">
							<p class="mb-0">
								{{ __('radio.password_restrict_alert') }}
							</p>
						</div>
					</div>
                        <div class="mb-3 @if (\Session::has('error_days')) erro-inp @endif ">
                            <label class="form-label">{{ __('radio.form_weekdays_label') }}</label> <button type="button" onclick="toCheck()" class="ms-2 btn btnsel btn-xs btn-secondary">{{ __('radio.action_select_all') }}</button>
                            <div class="space-x-1">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="sun" name="sun" {{ (old('sun') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="sun">{{ __('radio.weekday_sun') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="mon" name="mon" {{ (old('mon') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="mon">{{ __('radio.weekday_mon') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="tue" name="tue" {{ (old('tue') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="tue">{{ __('radio.weekday_tue') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="wed" name="wed" {{ (old('wed') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="wed">{{ __('radio.weekday_wed') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="thu" name="thu" {{ (old('thu') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="thu">{{ __('radio.weekday_thu') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="fri" name="fri" {{ (old('fri') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="fri">{{ __('radio.weekday_fri') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="sat" name="sat" {{ (old('sat') ? 'checked' : '') }}>
                                    <label class="form-check-label" for="sat">{{ __('radio.weekday_sat') }}</label>
                                </div>
                            </div>
                            @if (\Session::has('error_days')) <div id="msgError_days" class="form-text text-danger"> {!! \Session::get('error_days') !!} </div> @endif
                        </div>
                            <div class="mb-3 h-width  @if (\Session::has('error_time')) erro-inp @endif ">
                                <label class="form-label">{{ __('radio.password_time_start') }}</label>
                                <input type="text" class="form-control sm-input" id="time_start" name="time_start" @if(old('time_start')) value="{{ old('time_start') }}" @endif autocomplete="off">
                                @if (\Session::has('error_time')) <div id="msgError_time" class="form-text text-danger"> {!! \Session::get('error_time') !!} </div> @endif
                            </div>
                            <div class="mb-3 h-width  @if (\Session::has('error_time2')) erro-inp @endif ">
                                <label class="form-label">{{ __('radio.password_time_end') }}</label>
                                <input type="text" class="form-control sm-input" id="time_end" name="time_end" @if(old('time_end')) value="{{ old('time_end') }}" @endif autocomplete="off">
                                @if (\Session::has('error_time2')) <div id="msgError_time" class="form-text text-danger"> {!! \Session::get('error_time2') !!} </div> @endif
                            </div>
					</div>
                    <div class="mb-4">
                        <button type="submit" id="btnSubmit" class="btn btn-primary">{{ __('radio.action_create') }}</button>
                    </div>
                    </form>
                </div>
            </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/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/assets/js/plugins/jquery.maskedinput/jquery.maskedinput.min.js"></script>
<script src="/assets/js/plugins/jquery-clock-timepicker/jquery-clock-timepicker.min.js"></script>
<script>
    var txt_selectAll = '{{ __('radio.action_select_all') }}';
    var txt_deselectAll = '{{ __('radio.action_unselect_all') }}';
    function toCheck(){
        var checkeds = $('input[type=checkbox]:checked').length;
        if(checkeds >= 2){
            $('input:checkbox').prop('checked', false);
            $('.btnsel').text(txt_selectAll);
        }else{
            $('input:checkbox').prop('checked', true);
            $('.btnsel').text(txt_deselectAll);
        }
    }
    $(".restrict").change(function() {
        if(this.checked) {
            $('.prohibe').removeClass('d-none');
        }else{ $('.prohibe').addClass('d-none'); }
    });
    $("#time_start").mask("99:99");
    $('#time_start').clockpicker({
        placement: 'bottom',
        align: 'left',
        autoclose: true,
        'default': 'now'
    });
    $("#time_end").mask("99:99");
    $('#time_end').clockpicker({
        placement: 'bottom',
        align: 'left',
        autoclose: true,
        'default': 'now'
    });
    var submitting = false;
    $("#newPassForm").validate({
        rules: {
            name: "required",
            password: {
                required: true,
                minlength: 6
            }
        },
        messages: {
            name: "{{ __('radio.password_name_placeholder') }}",
            password: {
                required: "{{ __('radio.password_required') }}",
                minlength: "{{ __('radio.password_minlength') }}"
            }
        },
        submitHandler: function(form) {
            if (submitting) return false;
            submitting = true;

            var $btn = $('#btnSubmit');$btn.prop('disabled', true).css('min-width', $btn.outerWidth() + 'px').html('<i class="fa fa-spinner fa-spin me-1"></i> {{ __('radio.action_creating') }}');

            form.submit();
        }
    });
    function limit(element,qtd)
    {
        if(element.value.length >= qtd) {
            element.value = element.value.substr(0, qtd);
        }
    }
    @if(!old('password'))
    $('.passinput').val((Math.random() + 1).toString(36).substring(3).toUpperCase());
    @endif
    $(".newPass").click(function() {
        $('.passinput').val((Math.random() + 1).toString(36).substring(3).toUpperCase());
    });
	if (typeof bootstrap !== 'undefined') {
		document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
			new bootstrap.Tooltip(el);
		});
	}
</script>
</body>
</html>