@section('title', __('radio.schedule_new_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/jquery-clock-timepicker/bootstrap-clockpicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css"/>
    <link rel="stylesheet" href="/assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css?v=1.0.100">
@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.schedule_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="javascript:void(0)">{{ __('radio.menu_item_2') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.schedules.r') }}">{{ __('radio.menu_item_2_sub_3') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.schedule_breadcrumb_new') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

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

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

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

                    <div class="mb-3 h-width">
                       <label class="form-label" for="frequency">{{ __('radio.schedule_label_frequency') }}</label>
                       <select name="type" id="frequency" class="form-select">
                          <option value="1" {{ (old('type') == '1' || !old('type') ? 'selected="selected"' : '') }}>{{ __('radio.schedule_frequency_weekdays') }}</option>
                          <option value="2" {{ (old('type') == '2' ? 'selected="selected"' : '') }}>{{ __('radio.schedule_frequency_date') }}</option>
                       </select>
                     </div>

                    <div class="mb-4 h-width">
                        <label class="form-label">{{ __('radio.schedule_label_playlist') }}</label>
                        <select class="form-select js-select2 playlistID" name="playlist_id">
                            <option value="">{{ __('radio.home_block_ajax_autodj_stoped_option') }}</option>
                            @foreach($listPlaylists as $playlist)
                            <option value="{{ $playlist->id }}">{{ $playlist->name }}</option>
                            @endforeach
                        </select>
                        @if (\Session::has('error_playlist')) <div id="msgError_playlist" class="form-text text-danger"> {!! \Session::get('error_playlist') !!} </div> @endif
                    </div>
					
					<div class="mb-4 h-width">
                        <label class="form-label">{{ __('general.table_status') }}</label>
                        <select class="form-select" id="status" name="status">
                            <option value="1" selected>{{ __('general.status_active') }}</option>
                            <option value="0">{{ __('radio.schedule_status_disabled') }}</option>
                        </select>
                    </div>


                  <div class="sched-week {{ (old('type') == '2' ? 'd-none' : '') }}">

                    <div class="mb-3 @if (\Session::has('error_days')) erro-inp @endif ">
                        <label class="form-label">{{ __('radio.schedule_label_weekdays') }}</label> <button type="button" onclick="toCheck()" class="ms-2 btn btnsel btn-xs btn-secondary">{{ __('radio.schedule_days_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" {{ ($selectedDay == '0' || $selectedDay > 6 && date('N') == '7' || !$selectedDay &&  date('N') == '7' ? 'checked' : '') }}>
                                <label class="form-check-label" for="sun">{{ __('site.page_scheduling_weekday_0') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="mon" name="mon" {{ ($selectedDay == '1' || $selectedDay > 6 && date('N') == '1' || !$selectedDay &&  date('N') == '1' ? 'checked' : '') }}>
                                <label class="form-check-label" for="mon">{{ __('radio.schedule_day_mon') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="tue" name="tue" {{ ($selectedDay == '2' || $selectedDay > 6 && date('N') == '2' || !$selectedDay &&  date('N') == '2' ? 'checked' : '') }}>
                                <label class="form-check-label" for="tue">{{ __('radio.schedule_day_tue') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="wed" name="wed" {{ ($selectedDay == '3' || $selectedDay > 6 && date('N') == '3' || !$selectedDay &&  date('N') == '3' ? 'checked' : '') }}>
                                <label class="form-check-label" for="wed">{{ __('radio.schedule_day_wed') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="thu" name="thu" {{ ($selectedDay == '4' || $selectedDay > 6 && date('N') == '4' || !$selectedDay &&  date('N') == '4' ? 'checked' : '') }}>
                                <label class="form-check-label" for="thu">{{ __('radio.schedule_day_thu') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="fri" name="fri" {{ ($selectedDay == '5' || $selectedDay > 6 && date('N') == '5' || !$selectedDay &&  date('N') == '5' ? 'checked' : '') }}>
                                <label class="form-check-label" for="fri">{{ __('radio.schedule_day_fri') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" value="1" id="sat" name="sat" {{ ($selectedDay == '6' || $selectedDay > 6 && date('N') == '6' || !$selectedDay &&  date('N') == '6' ? 'checked' : '') }}>
                                <label class="form-check-label" for="sat">{{ __('site.page_scheduling_weekday_6') }}</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>

                  <div class="sched-date {{ (old('type') == '2' ? '' : 'd-none') }}">

                  <div class="mb-3 h-width @if (\Session::has('error_date')) erro-inp @endif">
                      <label class="form-label" for="start">{{ __('radio.schedule_label_start_date') }}</label>
                      <input type="text" class="form-control @if (\Session::has('error_date')) is-invalid @endif" id="date" name="date" placeholder="dd/mm/yyyy" @if(old('date')) value="{{ old('date') }}" @endif autocomplete="off">
                      @if (\Session::has('error_date')) <div id="msgError_date" class="form-text text-danger"> {!! \Session::get('error_date') !!} </div> @endif
                  </div>

                  </div>


                    <div class="mb-3 h-width  @if (\Session::has('error_time')) erro-inp @endif ">
                        <label class="form-label">{{ __('radio.schedule_label_start_time') }}</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="mb-3 h-width">
                       <label class="form-label">{{ __('radio.schedule_label_skip') }}</label>
                       <select class="form-select" id="skip" name="skip">
                           <option value="1" selected>{{ __('radio.schedule_skip_yes') }}</option>
                           <option value="0">{{ __('radio.schedule_skip_no') }}</option>
                       </select>
                       <small class="text-danger msgSkip d-none"><i class="fa fa-circle-exclamation"></i> {{ __('radio.schedule_skip_warning') }} <a class="link-fx text-danger" href="#">{{ __('radio.schedule_read_more') }} &raquo;</a></small>
                    </div>


                    <div class="mb-4 h-width">
                        <label class="form-label">{{ __('radio.schedule_label_end_option') }}</label>
                        <select class="form-select" id="endOption" name="endOption">
                            <option value="0">{{ __('radio.schedule_end_keep') }}</option>
                            <option value="1">{{ __('radio.schedule_end_other') }}</option>
                        </select>
                    </div>

                        <div class="mb-4 h-width endSelect">
                            <label class="form-label">{{ __('radio.schedule_label_end_playlist') }}</label>
                            <select class="form-select js-select3" id="endSelect" name="endSelect">
                                <option value="">{{ __('radio.schedule_end_select_placeholder') }}</option>
                            </select>
                        </div>



                    <div class="mb-4">
                        <button type="submit" class="btn btn-primary">{{ __('radio.schedule_btn_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/select2/js/select2.full.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 src="/assets/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.pt-BR.min.js" charset="UTF-8"></script>
<script src="/assets/js/pages/graph/moment.min.js"></script>
<script src="/assets/js/pages/graph/daterangepicker.js"></script>
<script>
    var txt_selectAll = 'Selecionar todos';
    var txt_deselectAll = 'Desmarcar todos';

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

    $('#date').datepicker({
        autoclose: true,
        startDate: '{{ date('d/m/Y') }}',
        endDate: '{{ date("d/m/Y", strtotime("+1 year")) }}',
        format: 'dd/mm/yyyy',
        language: 'pt-BR'
    });

    $("#frequency").change(function() {
        if($(this).val() == '2'){
            $('.sched-week').addClass('d-none');
            $('.sched-date').removeClass('d-none');
        }else{
            $('.sched-week').removeClass('d-none');
            $('.sched-date').addClass('d-none');
        }
    });

    $(".js-select2").select2();
    $(".js-select3").select2();
    $("#time").mask("99:99");
    $('#time').clockpicker({
        placement: 'bottom',
        align: 'left',
        autoclose: true,
        'default': 'now'
    });

    @if(old('playlist_id'))
    $(".js-select2").val("{{ old('playlist_id') }}").trigger('change');
    @endif


    function loadOptions(){
        $('#endSelect').empty();
        $.post( "{{ route('ajaxSchedule') }}", { id: $('.js-select2').val() }) .done(function( data ) {
            $.each(data, function(i, item) {
                $('#endSelect').append($('<option>', {
                    value: item.id,
                    text : item.name
                }));
            });
        });
    }

    $("#skip").change(function() {
        if($(this).val() == 0){
            $('.msgSkip').removeClass('d-none');
        }else{
            $('.msgSkip').addClass('d-none');
        }
    });

    $( "#endOption" ).change(function() {
        if(this.value == '1'){
            $('.endSelect').removeClass('d-none');
            loadOptions();
        }else{
            $('.endSelect').addClass('d-none');
        }
    });

    $(".js-select2").change(function() {
        loadOptions();
    });


    @if (\Session::has('error_playlist'))
    $('.select2-selection').addClass('has-error');
    @endif
    $('.endSelect').addClass('d-none');
</script>
</body>
</html>