@section('title', __('radio.relays_edit'))
@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_edit') }}
                    </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_edit') }}</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.u.do', $dataRelay->id) }}">
                    <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" value="{{ old('name', $dataRelay->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" value="{{ old('url', $dataRelay->url) }}">
                        @if (\Session::has('error_url')) <div id="msgError_url" class="form-text text-danger"> {!! \Session::get('error_url') !!} </div> @endif
                    </div>
                    
                    @php
                      $checkType = old('checkType', $dataRelay->type ?? '1');
                    @endphp
                    
                    <div class="space-x-2 mb-3">
                        <div class="row">
                            <label class="form-label" for="type">{{ __('radio.relays_form_type') }}</label>
                        </div>
                        
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="checkType1" name="checkType" value="1" {{ $checkType == '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="checkType1">{{ __('radio.relays_form_type_weekdays') }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="checkType2" name="checkType" value="2" {{ $checkType == '2' ? 'checked' : '' }}>
                            <label class="form-check-label" for="checkType2">{{ __('radio.relays_form_type_datetime') }}</label>
                        </div>
                    </div>

                   <div id="selWeekContent" class="d-none">
                       @php
                          $hasOld = count(old()) > 0;
                      
                          $sun = $hasOld ? old('sun', '0') : $dataRelay->sun ?? '0';
                          $mon = $hasOld ? old('mon', '0') : $dataRelay->mon ?? '0';
                          $tue = $hasOld ? old('tue', '0') : $dataRelay->tue ?? '0';
                          $wed = $hasOld ? old('wed', '0') : $dataRelay->wed ?? '0';
                          $thu = $hasOld ? old('thu', '0') : $dataRelay->thu ?? '0';
                          $fri = $hasOld ? old('fri', '0') : $dataRelay->fri ?? '0';
                          $sat = $hasOld ? old('sat', '0') : $dataRelay->sat ?? '0';
                       @endphp
    
                      
                      <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" {{ $sun == '1' ? '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" {{ $mon == '1' ? '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" {{ $tue == '1' ? '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" {{ $wed == '1' ? '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" {{ $thu == '1' ? '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" {{ $fri == '1' ? '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" {{ $sat == '1' ? '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" value="{{ old('time', substr($dataRelay->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>
    
                      @php
                          $checkEndTime = (!empty($dataRelay) && $dataRelay->always === '1') ? '1' : '0';
                      @endphp
                      
                      <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" {{ $checkEndTime == '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" {{ $checkEndTime == '1' ? 'checked' : '' }}>
                              <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', $dataRelay->time_end)) value="{{ old('time_end', $dataRelay->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>
                   
                   <div id="selStartEndContent" class="d-none">
                   
                   <div class="mb-3 h-width">
                        <label class="form-label" for="example-text-input">{{ __('radio.relays_form_start_at') }}</label>
                        <input
                            type="datetime-local"
                            name="start_time"
                            class="form-control"
                            id="relay_starttime"
                         >
                        @if (\Session::has('error_start_time')) <div id="msgError_start_time" class="form-text text-danger"> {!! \Session::get('error_start_time') !!} </div> @endif
                    </div>
                    
                    @php
                        $checkEndTime1 = (!empty($dataRelay) && $dataRelay->always === '1') ? '1' : '0';
                    @endphp
                    
                    <div class="space-x-2 mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="checkEndTime01" name="checkEndTime1" value="0" {{ $checkEndTime1 == '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="checkEndTime02" name="checkEndTime1" value="1" {{ $checkEndTime1 == '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="checkEndTime2">{{ __('radio.relays_keep_active') }}</label>
                        </div>
                    </div>
                    
                    <div class="mb-3 h-width">
                        <input
                            type="datetime-local"
                            name="end_time"
                            class="form-control"
                            id="relay_endtime"
                         >
                        @if (\Session::has('error_end_time')) <div id="msgError_end_time" class="form-text text-danger"> {!! \Session::get('error_end_time') !!} </div> @endif
                    </div>
                   
                   </div>

                  <div class="mb-3">
                      <button type="submit" class="btn btn-primary">{{ __('general.action_save_changes') }}</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 currentRelay = @json($dataRelay);
    console.log(currentRelay);
    var txt_selectAll = 'Selecionar todos';
    var txt_deselectAll = 'Desmarcar todos';

    $("input[name=checkType]") // 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'){
                    $('#selWeekContent').removeClass('d-none');
                    $('#selStartEndContent').addClass('d-none');
                }else{
                    $('#selWeekContent').addClass('d-none');
                    $('#selStartEndContent').removeClass('d-none');
                    updateMinumumInput({ input: $('#relay_starttime'), startValue: new Date(currentRelay.start_time) });
                    updateMinumumInput({ input: $('#relay_endtime'),  minimumData: new Date($('#relay_starttime').val()), startValue: new Date(currentRelay.end_time) });
                }
            }
        });
        
        $("input[name=checkEndTime1]") // 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'){
                    $('#relay_endtime').addClass('d-none');
                }else{
                    $('#relay_endtime').removeClass('d-none');
                }
            }
        });
        
        $("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');
                }
            }
        });
        
    $("input[name=checkEndTime]:checked").trigger('change');
    $("input[name=checkEndTime1]:checked").trigger('change');
    $("input[name=checkType]:checked").trigger('change');
    
    $("#relay_starttime").on('change', function () { 
        updateMinumumInput({ input: $('#relay_starttime') })
        updateMinumumInput({ input: $('#relay_endtime'), minimumData: new Date($('#relay_starttime').val()) })
    })
    
    $("#relay_endtime").on('change', function () { 
        updateMinumumInput({ input: $('#relay_starttime') })
        updateMinumumInput({ input: $('#relay_endtime'), minimumData: new Date($('#relay_starttime').val()) })
    })

    function updateMinumumInput ({ input, minimumData = new Date(), minimunMinutes = 10, startValue = new Date() }) {
        
        const valueInput = input.val();
        if (valueInput) startValue = new Date(valueInput);
        const minDate = new Date(minimumData.getTime() + minimunMinutes * 60000);
    
        const finalDate = startValue > minDate ? startValue : minDate; 

        const minStr = formatDateTimeLocal(minDate);
        const finalStr = formatDateTimeLocal(finalDate);
    
        input.attr('min', minStr);
        input.val(finalStr);
    }
    
    function formatDateTimeLocal(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const dd = String(date.getDate()).padStart(2, '0');
        const hh = String(date.getHours()).padStart(2, '0');
        const mi = String(date.getMinutes()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
    }

    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>