@section('title', __('radio.menu_item_2_sub_3'))

@section('head')
    <link href="/assets/css/schedules.css?v=1.0.100" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">

    @if(Config::get('constants.IS_APP'))
        <style>
            .schedule-info .schedule-options{width: 65px!important;}
        </style>
    @endif

    <style>
        .scheduling-type,
        .scheduling-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .scheduling-type {
            min-width: 17ch;
        }

        .scheduling-status {
            min-width: 12ch;
        }

        .scheduling-type .badge,
        .scheduling-status .badge {
            width: 100%;
            white-space: nowrap;
        }
    </style>
@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.schedules_h1') }}
                    </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 active" aria-current="page">{{ __('radio.menu_item_2_sub_3') }}</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

            <div class="row d-flex align-items-center mb-2">
                <div class="col-sm-12 col-md-6">
                    <a href="{{ route('radio.schedules.c') }}" class="btn btn-sm btn-primary mb-2 mt-2 {{ (Config::get('constants.IS_APP') ? 'w-100' : '') }}">
                        <i class="fa fa-plus"></i> {{ __('radio.schedule_new_title') }}
                    </a>
                </div>
                <div class="ml-auto col-md-6 col-sm-12 text-md-end {{ (Config::get('constants.IS_APP') ? 'mb-2' : '') }}">
                    <button type="button" class="history btn btn-secondary btn-sm {{ (Config::get('constants.IS_APP') ? 'w-100 mb-3' : '') }}" data-bs-toggle="modal" data-bs-target="#modal-history">
                        <i class="fa fa-history me-1"></i> {{ __('radio.schedules_history_btn') }}
                    </button>
                    <button type="button" class="select-all btn btn-alt-secondary btn-sm">{{ __('radio.schedules_check_all') }}</button>
                    <button type="button" class="clear-selected btn btn-alt-secondary btn-sm d-none">{{ __('radio.schedules_uncheck_all') }}</button>
                    <button type="submit" class="remove-selected btn btn-sm btn-danger {{ (Config::get('constants.IS_APP') ? 'float-end' : '') }} disabled">{{ __('site.btn_remselect') }}</button>
                </div>
            </div>

            <div class="block block-rounded">
                <div class="block-content playlist-scheduling p-0">
                    <div class="nav-tabs-custom scheduling-list">
                        <ul class="nav nav-tabs nav-tabs-block">
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="0">
                                <a href="#day-0" class="nav-link active" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_sun') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_sun') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="1">
                                <a href="#day-1" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_mon') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_mon') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="2">
                                <a href="#day-2" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_tue') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_tue') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="3">
                                <a href="#day-3" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_wed') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_wed') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="4">
                                <a href="#day-4" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_thu') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_thu') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center border-end border-2" data-weekday="5">
                                <a href="#day-5" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_fri') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_fri') }}</span>
                                </a>
                            </li>
                            <li class="day-schedule-link nav-item text-center" data-weekday="6">
                                <a href="#day-6" class="nav-link" data-toggle="tab">
                                    <span class="normal-name">{{ __('radio.weekday_sat') }}</span>
                                    <span class="short-name">{{ __('radio.weekday_short_sat') }}</span>
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            @php
                                $fqc[1] = '<span class="badge bg-primary text-white">'.__('radio.schedule_label_weekdays').'</span>';
                                $fqc[2] = '<span class="badge bg-secondary text-white">'.__('radio.stats_period_date').'</span>';

                                $status_bg[1] = '<span class="badge bg-primary text-white">'.__('radio.schedules_status_enabled').'</span>';
                                $status_bg[0] = '<span class="badge bg-secondary text-white">'.__('radio.schedule_status_disabled').'</span>';

                                $dia_full[0] = __('radio.weekday_sun'); $dia_full[1] = __('radio.weekday_mon'); $dia_full[2] = __('radio.weekday_tue'); $dia_full[3] = __('radio.weekday_wed');
                                $dia_full[4] = __('radio.weekday_thu'); $dia_full[5] = __('radio.weekday_fri'); $dia_full[6] = __('radio.weekday_sat');

                                $dia_min[0] = __('radio.weekday_short_sun'); $dia_min[1] = __('radio.weekday_short_mon'); $dia_min[2] = __('radio.weekday_short_tue'); $dia_min[3] = __('radio.weekday_short_wed');
                                $dia_min[4] = __('radio.weekday_short_thu'); $dia_min[5] = __('radio.weekday_short_fri'); $dia_min[6] = __('radio.weekday_short_sat');

                                $day_qr[0] = "sun"; $day_qr[1] = "mon"; $day_qr[2] = "tue"; $day_qr[3] = "wed";
                                $day_qr[4] = "thu"; $day_qr[5] = "fri"; $day_qr[6] = "sat";
                            @endphp

                            <ul class="timeline">
                                @php for($dia = 0; $dia <= 6; $dia++) { @endphp

                                    <li class="time-label" data-weekday="{{ $dia }}" style="opacity: 1;">
                                        <span class="weekday-name bg-primary text-white text-center">
                                            <span class="normal-name">{{ $dia_full[$dia] }}</span>
                                            <span class="short-name">{{ $dia_min[$dia] }}</span>
                                        </span>
                                    </li>

                                    @php if (isset($age[$dia]) && count($age[$dia]) == 0 || !isset($age[$dia])) { @endphp

                                        <li class="content-row first-row last-row">
                                            <i class="glyphicon"></i>
                                            <div class="timeline-item">
                                                <div class="timeline-body">
                                                    <div class="no-playlist-available-message">
                                                        {{ __('radio.schedules_empty_day') }}
                                                        <span class="d-block d-md-inline">
                                                            <a href="{{ route('radio.schedules.c', $dia) }}">{{ __('radio.schedules_empty_day_link') }}</a> {{ __('radio.schedules_empty_day_suffix') }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                    @php } else if (isset($age[$dia])) {

                                        for ($cont = 0; $cont < count($age[$dia]); $cont++) {
                                            $hora        = explode(";", $age[$dia][$cont]["hora"]);
                                            $nome        = explode(";", $age[$dia][$cont]["nome"]);
                                            $data        = explode(";", $age[$dia][$cont]["data"]);
                                            $tipo        = explode(";", $age[$dia][$cont]["tipo"]);
                                            $code        = explode(";", $age[$dia][$cont]["code"]);
                                            $status      = explode(";", $age[$dia][$cont]["status"]);
                                            $playlist_id = explode(";", $age[$dia][$cont]["playlist_id"]);
											$is_playing = (
												$playingScheduleId !== null
												&& $code[0] == $playingScheduleId
												&& $dia == $todayWeekday
											);

                                            $row_num = "";
                                            $total = count($age[$dia]) - 1;
                                            if ($cont == 0) { $row_num = "first-row"; }
                                            if ($cont == $total) { $row_num .= " last-row"; }
                                    @endphp

                                        <li class="content-row selectable {{ $row_num }}">
                                            <i class="fa fa-circle"></i>
                                            <div class="timeline-item">
                                                <div class="timeline-body">
                                                    <div class="schedule-start-time">
                                                        <div class="form-check form-check-inline">
                                                            <label>
                                                                <input class="form-check-input" type="checkbox" name="ids[]" value="{{ $code[0] }}" id="{{ $day_qr[$dia] }}">
                                                                <b>{{ $hora[0] }}</b>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="schedule-info">
                                                        <div class="schedule-options text-end">
                                                            <a class="btn btn-primary btn-xs" href="{{ route('radio.schedules.u', $code[0]) }}">
                                                                <span class="fa fa-pencil"></span>
                                                            </a>
                                                            <a class="btn btn-danger btn-xs need-confirmation" id="{{ $code[0] }}" data-day="{{ $day_qr[$dia] }}">
                                                                <span class="fa fa-xmark"></span>
                                                            </a>
                                                        </div>

                                                        <div class="float-end d-flex align-items-center gap-2">
                                                            <span class="scheduling-date">
                                                                <b>{!! $data[0] !!}</b>
                                                            </span>

                                                            <span class="scheduling-type">
                                                                {!! $fqc[$tipo[0]] !!}
                                                            </span>

                                                            <span class="scheduling-status">
                                                                {!! $status_bg[$status[0]] !!}
                                                            </span>
                                                        </div>

                                                        <div class="schedule-name">
                                                            <span class="name-content">{{ $nome[0] }}</span>
                                                            @if($is_playing)
                                                                <span class="badge bg-warning text-white ms-1">
                                                                    <i class="fa fa-play me-1"></i>{{ __('radio.home_player_current') }}
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                    @php
                                        }
                                    }
                                    @endphp

                                @php } @endphp

                                <li class="content-row"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

</div>

</main>

<div class="modal" id="modal-history" tabindex="-1" role="dialog" aria-labelledby="modal-block-large" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper">{{ __('radio.schedules_history_title') }}</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>

                <div class="block-content p-0">
                    @if($history->count() == 0)
                        <div class="py-5 text-center">{{ __('radio.msg_no_records') }}</div>
                    @else
                        <div class="d-block" style="max-height: 350px; overflow-y: auto;">
                            <table class="table table-bordered table-vcenter mb-0">
                                <thead>
                                    <tr>
                                        <th style="width: 200px;">{{ __('radio.schedules_history_date') }}</th>
                                        <th>{{ __('radio.schedule_label_playlist') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($history as $hist)
                                        <tr>
                                            <td>{{ $curTime = FormatdateSchedule("d/m/Y H:i:s", $hist->created_at, $getStreamDetails->timezone) }}</td>
                                            <td>{{ $hist->name }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

                <div class="block-content block-content-full text-end bg-body p-2 pe-3">
                    <button type="button" class="btn btn-sm btn-primary me-1" data-bs-dismiss="modal">{{ __('radio.action_close') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

@include('includes/footer')

</div>

<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script>
    var CURRENT_DAY = {{ date('N') }};
    var oneChecked = @json(__('radio.sched_js_confirm_remove_one'));
    var moreChecked = @json(__('radio.sched_js_confirm_remove_many'));
    window.LNG = Object.assign(window.LNG || {}, {
        action_remove: @json(__('general.action_remove')),
        action_cancel: @json(__('radio.app_action_cancel')),
        processing: @json(__('site.btn_processing')),
        got_it: @json(__('site.btn_got'))
    });
</script>
<script src="/assets/js/pages/schedules.js?t={{ time() }}"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>

<script>
    $('.need-confirmation').on('click', function (event) {
        var id = $(this).attr('id');
        var day = $(this).attr('data-day');

        Sweetalert2.fire({
            title: 'Deseja realmente remover este agendamento?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Remover',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
                Sweetalert2.fire({
                    title: 'Processando...',
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
                Sweetalert2.showLoading();

                $.post("{{ route('radio.schedules.d') }}", { id: id, day: day })
                    .done(function (data) {
                        if (!data.status) {
                            Sweetalert2.hideLoading();
                            Sweetalert2.fire({
                                icon: 'error',
                                title: data.message,
                                showConfirmButton: true,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                confirmButtonText: 'Entendi'
                            });
                        } else {
                            location.reload();
                        }
                    }, "json");
            }
        });
    });
</script>

</body>
</html>