@section('title', __('radio.relays_new'))
@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.relays_new') }}
                    </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="javascript:void(0)">{{ __('radio.menu_item_5') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.relays.r') }}">{{ __('radio.menu_item_5_sub_1') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.relays_new') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <div class="block-content">

                    <form method="POST" action="{{ route('radio.relays.c.do') }}">

                    <div class="mb-3 h-width">
                        <label class="form-label" for="example-text-input">{{ __('radio.relays_form_name') }}</label>
                        <input type="text" class="form-control" name="name" placeholder="{{ __('radio.relays_form_name_placeholder') }}" autocomplete="off" {{ (old('name') ? 'value='.old('name').'' : '') }}>
                        @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">
                        <label class="form-label" for="example-text-input">{{ __('radio.relays_form_url') }}</label>
                            <input type="text" class="form-control" name="url" id="url" placeholder="{{ __('radio.relays_form_url_placeholder') }}" autocomplete="off" {{ (old('url') ? 'value='.old('url').'' : '') }}>
                        @if (\Session::has('error_url')) <div id="msgError_url" class="form-text text-danger"> {!! \Session::get('error_url') !!} </div> @endif
                    </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.relays_form_time_start') }}</label>
                        <input type="text" class="form-control sm-input" id="time" name="time" @if(old('time')) value="{{ old('time') }}" @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="space-x-2 mb-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="checkEndTime1" name="checkEndTime" value="0" checked="">
                                <label class="form-check-label" for="checkEndTime1">{{ __('radio.relays_finish_at') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="checkEndTime2" name="checkEndTime" value="1">
                                <label class="form-check-label" for="checkEndTime2">{{ __('radio.relays_keep_active') }}</label>
                            </div>
                        </div>

                    <div class="mb-3 h-width  @if (\Session::has('error_time_end')) erro-inp @endif endTime">
                        <label class="form-label">{{ __('radio.relays_form_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_time_end')) <div id="msgError_time_end" class="form-text text-danger"> {!! \Session::get('error_time_end') !!} </div> @endif
                    </div>

                    <div class="mb-3">
                        <button type="submit" 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.maskedinput/jquery.maskedinput.min.js"></script>
<script src="/assets/js/plugins/jquery-clock-timepicker/jquery-clock-timepicker.min.js"></script>
<script>

    var txt_selectAll = 'Selecionar todos';
    var txt_deselectAll = 'Desmarcar todos';

    $("input[name=checkEndTime]") // select the radio by its id
        .change(function(){ // bind a function to the change event
            if( $(this).is(":checked") ){ // check if the radio is checked
                var val = $(this).val(); // retrieve the value
                if(val === '1'){
                    $('.endTime').addClass('d-none');
                }else{
                    $('.endTime').removeClass('d-none');
                }
            }
        });



    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);
        }
    }

    $("#time").mask("99:99");
    $('#time').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'
    });
</script>
</body>
</html>