@section('title', __('radio.menu_item_5_sub_1'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.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.menu_item_5_sub_1') }}
                    </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 active" aria-current="page">{{ __('radio.menu_item_5_sub_1') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

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

            @if (\Session::has('success'))
                <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
                    <i class="uil uil-check-circle"></i> <b>{!! \Session::get('success') !!}</b>
                </div>
                @php Session::forget('success'); @endphp
            @endif
            
            @if (\Session::has('error'))
                <div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
                    <i class="uil uil-check-circle"></i> <b>{!! \Session::get('error') !!}</b>
                </div>
                @php Session::forget('error'); @endphp
            @endif

            <div class="block block-rounded">

                    <div class="block-content p-0">

                        <div class="ps-2 pe-4 pt-2  mb-0 border-bottom border-1">
                            <div class="d-md-flex">
                                <div class="flex-grow-1 mb-2">
                                    <a href="{{ route('radio.relays.c') }}" class="btn btn-primary">
                                        <i class="fa fa-plus me-1 opacity-50"></i> {{ __('radio.relays_new') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        @if($allRelays->count() == 0)
                            <div class="block-content text-center"><p>{{ __('radio.relays_empty') }}</p></div>
                        @else
                    <div class="table-responsive">

                        <table class="table table-sm table-vcenter mb-0">
                            <thead>
                            <tr>
                                <th class="ps-2">{{ __('general.table_name') }}</th>
                                <th>{{ __('radio.relays_table_when') }}</th>
                                <th class="text-center">{{ __('radio.relays_table_start') }}</th>
                                <th class="text-center">{{ __('radio.relays_table_end') }}</th>
                                <th class="d-none d-sm-table-cell text-center" style="width: 15%;">{{ __('general.table_status') }}</th>
                                <th class="text-end pe-2" style="width: 200px;">{{ __('radio.table_actions') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php
                            $hasActive = $allRelays->contains('active', '1');
                            foreach($allRelays as $relay){
                                $totalDays = $relay->sun+$relay->mon+$relay->tue+$relay->wed+$relay->thu+$relay->fri+$relay->sat;
                            @endphp
                            <tr>
                                <td class="fw-semibold fs-sm ps-2">
                                    {{ $relay->name }}
                                </td>
                                @if($relay->type == '1')
                                <td>
                                     @php
                                         $dias = [
                                             'sun' => [__('radio.weekday_short_sun'), __('site.page_scheduling_weekday_0')],
                                             'mon' => [__('radio.weekday_short_mon'), __('site.page_scheduling_weekday_1')],
                                             'tue' => [__('radio.weekday_short_tue'), __('site.page_scheduling_weekday_2')],
                                             'wed' => [__('radio.weekday_short_wed'), __('site.page_scheduling_weekday_3')],
                                             'thu' => [__('radio.weekday_short_thu'), __('site.page_scheduling_weekday_4')],
                                             'fri' => [__('radio.weekday_short_fri'), __('site.page_scheduling_weekday_5')],
                                             'sat' => [__('radio.weekday_short_sat'), __('site.page_scheduling_weekday_6')],
                                         ];
                          
                                         $nomes = [];
                          
                                         foreach ($dias as $key => [$curto, $longo]) {
                                             if ($relay->$key) {
                                                 $nomes[] = $totalDays > 1 ? $curto : $longo;
                                             }
                                         }
                          
                                         echo implode(', ', $nomes);
                                     @endphp
                                </td>
                                @elseif($relay->type == '2')
                                <td>
                                    {{ date('d/m/Y', strtotime($relay->start_time)) }}
                                </td>
                                @endif
                                <td class="text-center">
                                    {{ date('H:i', strtotime($relay->start_time ? $relay->start_time : $relay->time_start)) }}
                                </td>
                                <td class="text-center">
                                    @if ($relay->end_time)
                                        {{ $relay->type == '1' ? date('d/m/Y H:i', strtotime($relay->end_time)) : date('H:i', strtotime($relay->end_time)) }}
                                    @elseif ($relay->always == '0' && $relay->time_end)
                                        {{ date('H:i', strtotime($relay->time_end)) }}
                                    @else
                                        {{ __('radio.relays_always_active') }}
                                    @endif
                                </td>

                                <td class="d-none d-sm-table-cell text-center">
                                    @php
                                        $var = strtolower(date('D'))
                                    @endphp
                                    @if($relay->active == '1')
                                        <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-primary-light text-white">{{ __('radio.home_block_item_type_2') }}</span>
                                    @else
                                        <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-danger-light text-danger">{{ __('radio.status_offline') }}</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="btn-group">
                                        @if(!$hasActive)
                                            <a class="btn btn-sm btn-alt-secondary btn-margin startRelayAct" data-id="{{$relay->id}}" data-token="{{ str_replace('/', '|brasbar', EncryptBras($relay->id.'|'.$relay->port)) }}" data-name="{{$relay->name}}">
                                                <i class="fa fa-fw fa-play-circle"></i>
                                            </a>
                                        @endif
                                        @if($relay->active == '1')
                                            <a  href="{{ route('radio.relays.r.data',$relay->id) }}" class="btn btn-sm btn-alt-secondary">
                                                <i class="fa fa-fw fa-eye"></i>
                                            </a>
                                        @else
                                            
                                            <a href="{{ route('radio.relays.u',$relay->id) }}" class="btn btn-sm btn-alt-secondary btn-margin">
                                                <i class="fa fa-fw fa-edit"></i>
                                            </a>
                                            
                                            <button type="button" id="{{ $relay->id }}" class="btn btn-sm btn-danger removeConfirm">
                                                <i class="fa fa-fw fa-times"></i>
                                            </button>
                                        @endif
                                        <form id="form_delete_{{ $relay->id }}" action="{{ route('radio.relays.d', $relay->id) }}" method="POST">@method('DELETE')</form>
                                    </div>
                                </td>
                            </tr>
                            @php } @endphp
                            </tbody>
                        </table>

                    </div>
                </div>
                @endif
            </div>

        </div>
    </div>
    <div class="modal fade" id="startRelayModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content" >
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('radio.relays_modal_start_title') }}</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <div class="row">
                            <label for="title_relay" class="form-label">{{ __('radio.menu_item_5_sub_1') }}: <b id="modal_relay_name"></b></label>
                        </div>
                        <div class="row mb-2">
                            <label for="subtitle_relay" class="form-label">{{ __('radio.relays_table_start') }}: <b>{{ __('radio.relays_modal_now') }}</b></label>
                        </div>
                        <div class="row">
                            <label for="relay_endtime" class="form-label">{{ __('radio.relays_modal_end_at') }}</label>
                        </div>
                        <form id="form_start" method="POST">
                            @method('POST')
                            <div class="space-x-2 mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" id="checkEndTime1" name="always" 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="always" value="1">
                                    <label class="form-check-label" for="checkEndTime2">{{ __('radio.relays_keep_active') }}</label>
                                </div>
                            </div>
                            <input
                                type="datetime-local"
                                name="end_time"
                                class="form-control"
                                id="modal_relay_endtime"
                            >
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="startRelay" type="button" class="btn btn-primary">{{ __('radio.relays_start_btn') }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('radio.action_close') }}</button>
                </div>
            </div>
        </div>
    </div>


</div>

</div>

</main>


@include('includes/footer')

</div>
<style>

.btn-margin {
  margin-right:6px
}

</style>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    var startRelayModal = new bootstrap.Modal(document.getElementById("startRelayModal"), {backdrop: 'static', keyboard: false});
    var currentRelay = null;
    
    $('.startRelayAct').on('click', function (event) {
        var name = $(this).attr('data-name');
        var id = $(this).attr('data-id');
        
        var allRelays = @json($allRelays);
        currentRelay = allRelays.filter(it => it.id == id)[0] || null;
        if (!currentRelay) return;
        console.log(currentRelay);
         
        $('#modal_relay_name').text(name || 'Sem nome');
        var token = $(this).attr('data-token');
        var baseUrl = "{{ route('radio.relays.start', ':token') }}";
        var finalUrl = baseUrl.replace(':token', token);
        $('#form_start').attr('action', finalUrl);
        
        startRelayModal.show();
        atualizarMinimoInicial();
    })
    function atualizarMinimoInicial () {
        const agora = new Date();
        var input = $('#modal_relay_endtime');
        const minDate = new Date(agora.getTime() + 10 * 60000);
    
        const [h, m, s] = currentRelay.time_end.split(':').map(Number);
        const endDate = new Date(
            agora.getFullYear(),
            agora.getMonth(),
            agora.getDate(),
            h,
            m,
            s
        );
    
        const finalDate = endDate > minDate ? endDate : 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}`;
    }
    
    $('#modal_relay_endtime').on('change', function (event) {
        var input = $(this);
        const agora = new Date();
        const minDate = new Date(agora.getTime() + 10 * 60000);
    
        const minStr = formatDateTimeLocal(minDate);
        input.attr('min', minStr);
    
        const valDate = new Date(input.val().replace('T', ' '));
        if (isNaN(valDate.getTime())) return;
    
        if (valDate.getTime() < minDate.getTime()) {
            input.val(minStr);
        }
    })
    
    $('#startRelay').on('click', function () {
        $('#form_start').submit();
    })
    

    $('.removeConfirm').on('click', function( event ) {
        var id = $(this).attr('id');
        Sweetalert2.fire({
            title: 'Deseja realmente remover esta retransmissão?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Remover',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
                $("#form_delete_" + id).submit();
            }
        });
    });
    $("input[name=always]") // 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'){
                $('#modal_relay_endtime').addClass('d-none');
            }else{
                $('#modal_relay_endtime').removeClass('d-none');
            }
        }
    });
</script>
</body>
</html>