@section('title', __('radio.password_edit_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_edit_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_edit_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="editPassForm" action="{{ route('radio.live-passwords.u', $djData->id) }}" method="POST">
                    @csrf
                    <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') }}" value="{{ old('name', $djData->name) }}" 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>
                        <input type="text" class="form-control form-control-alt" id="password" value="{{ $djData->password }}" readonly>
                        <div class="form-text text-muted">
                            <i class="fa fa-fw fa-lock"></i> {{ __('radio.password_readonly_note') }}
                        </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', $djData->prohibed) ? '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 lh-1"
                           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', $djData->prohibed)) d-none @endif">
                        <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', $djData->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', $djData->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', $djData->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', $djData->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', $djData->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', $djData->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', $djData->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" value="{{ old('time_start', substr($djData->time_start, 0, 5)) }}" 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" value="{{ old('time_end', substr($djData->time_end, 0, 5)) }}" 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">{{ __('general.action_save_changes') }}</button>
                        <a href="{{ route('radio.live-passwords.r') }}" id="btnCancel" class="btn btn-alt-secondary">{{ __('radio.home_blockinfo_changepl_btn_cancel') }}</a>
                    </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 = $('.prohibe input[type=checkbox]:checked').length;
        if(checkeds >= 2){
            $('.prohibe input:checkbox').prop('checked', false);
            $('.btnsel').text(txt_selectAll);
        }else{
            $('.prohibe 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;
    $("#editPassForm").validate({
        rules: {
            name: "required"
        },
        messages: {
            name: "{{ __('radio.password_name_placeholder') }}"
        },
        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_saving') }}');

            $('#btnCancel').addClass('disabled').attr('aria-disabled', 'true').css('pointer-events', 'none');

            form.submit();
        }
    });
    function limit(element,qtd)
    {
        if(element.value.length >= qtd) {
            element.value = element.value.substr(0, qtd);
        }
    }
    if (typeof bootstrap !== 'undefined') {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
            new bootstrap.Tooltip(el);
        });
    }
</script>
</body>
</html>