@section('title', __('site.page_scheduling_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/jquery-clock-timepicker/bootstrap-clockpicker.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .block.block-mode-loading.block-mode-loading-oneui::after{
            top:77px;
            font-size: 33px;
        }
        .scheduling-form.opened .block.block-rounded {
            display: block;
        }
        .scheduling-form .block.block-rounded {
            display: none;
        }
        .scheduling-form.opened .scheduling-nav {
            display: none!important;
        }
        .scheduling-form.opened .block{
            margin-top: -46px;
            position: relative;
        }
        .scheduling-form .scheduling-nav {
            display: block;
        }
        .scheduling-form.edit .insert-field {
            display: none;
        }
        .scheduling-form.edit .edit-field {
            display: block;
        }
        .scheduling-form.insert .edit-field {
            display: none;
        }
        .form-group.has-error .help-block {
            color: #dd4b39;
        }
        .form-group.has-error .form-control, .form-group.has-error .form-select {
            border-color: #dd4b39;
            box-shadow: none;
        }
        .form-group.has-error label {
            color: #dd4b39;
        }
        .blockScheduling .scheduling-items tr.playing-now {
            background: #e9f7f2;
        }
        .edit-program{border-color: #cbcbcb;}
        .blockScheduling.empty .scheduling-items .nothing-scheduled {
            display: block;
        }
        .blockScheduling .scheduling-items .loading-schedules ,
        .blockScheduling .scheduling-items .nothing-scheduled ,
        .blockScheduling .scheduling-items .item-list {
            display: none;
        }
        .blockScheduling.block-mode-loading .scheduling-items .loading-schedules {
            display: block;
        }
        .blockScheduling.loaded  .scheduling-items .item-list {
            display: table;
        }

        @-webkit-keyframes blinking {
            0% { opacity: 1.0; }
            70% { opacity: 0.8; }
            100% { opacity: 1.0; }
        }
        .blink{
            color:#239E76;
            animation: blinking 1.4s linear infinite;
        }
    </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<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">
                        {{ __('site.page_scheduling_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('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_4') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_4_sub_1') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-4 scheduling-form mb-5">
            <a class="btn btn-primary w-100 mb-2 scheduling-form-new clickable" ><i class="fa fa-plus me-1"></i> {{ __('site.page_scheduling_btn_add') }}</a>
            <div class="dropdown-menu d-block position-static pt-0 pb-0 mx-0 rounded-3 overflow-hidden scheduling-nav">
                <div class="p-3 mb-0 bg-light border-bottom">
                    <h5 class="fw-normal mb-0">{{ __('site.page_scheduling_title_weekday') }}</h5>
                </div>
                <ul class="list-unstyled p-0 position-static d-grid mb-0">
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-0" data-name="{{ __('site.page_scheduling_weekday_0') }}" day="0"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_0') }} @if(date('N') == '0')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-1" data-name="{{ __('site.page_scheduling_weekday_1') }}" day="1"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_1') }} @if(date('N') == '1')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-2" data-name="{{ __('site.page_scheduling_weekday_2') }}" day="2"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_2') }} @if(date('N') == '2')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-3" data-name="{{ __('site.page_scheduling_weekday_3') }}" day="3"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_3') }} @if(date('N') == '3')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-4" data-name="{{ __('site.page_scheduling_weekday_4') }}" day="4"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_4') }} @if(date('N') == '4')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable border-bottom scheduling-nav-5" data-name="{{ __('site.page_scheduling_weekday_5') }}" day="5"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_5') }} @if(date('N') == '5')<span class="float-end badge bg-primary rounded-pill" style="margin-top:2px">{{ __('site.page_mrequest_item_2') }}</span> @endif</a></li>
                    <li><a class="dropdown-item p-3 clickable scheduling-nav-6" data-name="{{ __('site.page_scheduling_weekday_6') }}" day="6"><i class="far fa-calendar me-1"></i> {{ __('site.page_scheduling_weekday_6') }}</a></li>
                </ul>
            </div>

            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper"></h3>
                </div>
                <div class="block-content pt-2 pe-2 ps-3 pe-3">
                    <form method="POST" name="main-form" id="main-form">
                        <input type="hidden" name="id" value="">
                        <div class="form-group mb-3">
                            <label class="form-label">{{ __('site.page_scheduling_new_form_input_1') }}</label>
                            <select class="form-select" name="program">
                                <option value="">{{ __('site.page_scheduling_new_form_input_1_1') }}</option>
                                @foreach($listPrograms as $program)
                                <option value="{{ $program->id }}">{{ $program->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row mb-3 g-4">
                            <div class="form-group col-6">
                                <label class="form-label">{{ __('site.page_scheduling_new_form_input_2') }}</label>
                                <input type="text" class="form-control" id="time_start" name="start" autocomplete="off">
                            </div>
                            <div class="form-group col-6">
                                <label class="form-label">{{ __('site.page_scheduling_new_form_input_3') }}</label>
                                <input type="text" class="form-control" id="time_end" name="end" autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group form-group-days mb-3 insert-field">
                            <label class="form-label">{{ __('site.page_scheduling_new_form_input_4') }}</label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="0" id="checkbox-day-0" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-0">{{ __('site.page_scheduling_weekday_0') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="checkbox-day-1" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-1">{{ __('site.page_scheduling_weekday_short_1') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="2" id="checkbox-day-2" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-2">{{ __('site.page_scheduling_weekday_short_2') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="3" id="checkbox-day-3" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-3">{{ __('site.page_scheduling_weekday_short_3') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="4" id="checkbox-day-4" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-4">{{ __('site.page_scheduling_weekday_short_4') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="5" id="checkbox-day-5" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-5">{{ __('site.page_scheduling_weekday_short_5') }}</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="6" id="checkbox-day-6" name="days[]">
                                    <label class="form-check-label" for="checkbox-day-6">{{ __('site.page_scheduling_weekday_6') }}</label>
                                </div>
                            </div>
                        </div>
                        <div id="scheduling-edit-date" class="form-group mb-3 edit-field">
                            <label class="control-label">{{ __('site.page_scheduling_new_form_input_4') }}</label>
                            <input class="form-control disabled" type="text" value="" disabled="disabled">
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <button type="submit" class="btn btn-primary saveBtn">{{ __('site.action_save') }}</button>
                            <div class="ml-auto">
                                <button type="button" class="btn scheduling-form-close btn-alt-secondary">{{ __('site.btn_cancel') }}</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>


        </div>
        <div class="col-md-8">
            <div class="block block-mode-loading-oneui blockScheduling block-rounded">
                <div class="block-content p-0">
                    <div class="block-content p-0 d-flex align-items-center pe-3 border-bottom border-1">
                        <h5 class="fw-normal ps-3 pe-3 pb-2 pt-3 mb-0 titleDay"></h5>
                    </div>
                    <div class="p-0 scheduling-items">
                        <div class="loading-schedules py-3 ps-3"><p class="mb-0">{{ __('site.page_scheduling_msg_block_wait') }}</p></div>
                        <div class="nothing-scheduled py-3 ps-3 text-center"><h5 class="mb-0 fw-normal"><i class="fa fa-info-circle d-block mb-2" style="font-size:25px;"></i> {{ __('site.page_scheduling_msg_block_empty') }}</h5></div>
                        <table class="item-list table table-hover table-vcenter table-sm mb-0">
                            <thead>
                            <tr>
                                <th class="ps-2" style="width: 100px;">{{ __('site.page_scheduling_table_1') }}</th>
                                <th style="width: 100px;">{{ __('site.page_scheduling_table_2') }}</th>
                                <th>{{ __('site.page_scheduling_table_3') }}</th>
                                <th style="width: 150px;"></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>


                    </div>
                </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 src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>

    $("#time_start").mask("99:99");
    $('#time_start').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'
    });

    loadDaySchedule();

    $('.scheduling-nav ul li.active').removeClass('active');

    $('.scheduling-nav ul li a').on('click', function() {
        var day = $(this).attr('day');
        loadDaySchedule(day);
        return false;
    });

    var escapeElementHolder = $('<div/>');
    function escapeHtml(str) {
        return escapeElementHolder.text(str).html();
    }

    function loadDaySchedule(day) {
        if ($('.blockScheduling').hasClass('block-mode-loading')) {
            return false;
        }

        if (typeof day === 'undefined') {
            var hash = window.location.hash;

            if (hash != '') {
                day = parseInt(hash.replace('#', ''), 10);
            }

            if (typeof day !== 'number') {
                day = parseInt($('.scheduling-nav ul li a.active').data('day')) || {{ date('w') }};
            }
        }

        if (window && window.history && typeof window.history.replaceState == 'function') {
            window.history.replaceState({}, '', window.location.href.replace(/#[\s\S]*$/, '') + '#' + (day));
        } else {
            window.location.hash = '#' + (day);
        }

        $('.scheduling-nav ul li a.active').removeClass('active');
        $('.scheduling-nav ul .scheduling-nav-' + day).addClass('active');

        $('.blockScheduling').addClass('block-mode-loading');

        var schedulingItemsElement = $('.blockScheduling').removeClass('empty loaded').addClass('block-mode-loading');
        var name = $('.scheduling-nav ul li a.scheduling-nav-' + day).attr('data-name');

        $.get('{{ route('site.scheduling.r.list') }}/' + day, function (data) {

            if (data.items.length == 0) {
                schedulingItemsElement.addClass('empty');
            } else {
                schedulingItemsElement.addClass('loaded');

                var linesHtml = '';
                var startColumn = '';
                var endColumn = '';
                var playingNow = '';
                var conflict = '';
                var trClass = '';

                $.each(data.items, function(i, item) {
                    startColumn = item.previous ? ('<td class="start-column other-day ps-2">' + item.start + ' <span class="fa fa-reply"></span></td>') : ('<td class="start-column ps-2">' + item.start + '</td>');
                    endColumn = item.next ? ('<td class="end-column other-day">' + item.end + ' <span class="fa fa-share"></span></td>') : ('<td class="end-column">' + item.end + '</td>')
                    playingNow = item.playing ? '<div class="tag-playing-now float-end blink"><span class="badge bg-primary">NO AR</span></div>' : '';

                    linesHtml += '<tr id="schedule-' + item.id + '" data-date="' + item.date + '" data-program="' + item.program_id + '" data-id="' + item.id + '" class="' + (item.playing ? 'playing-now' : '') + '">' +
                        startColumn +
                        endColumn +
                        '<td class="scheduling-program">' + escapeHtml(item.program) + ' ' + conflict + playingNow + '</td>' +
                        '<td class="text-end pe-2">' +
                        '<a class="edit-program btn btn-sm btn-alt-secondary" href=""><span class="fa fa-fw fa-pencil-alt"></span></a> ' +
                        '<a class="remove-program btn btn-sm btn-danger clickable"><span class="fa fa-fw fa-times"></span></a>' +
                        '</td>' +
                        '</tr>';

                });

                $('.scheduling-items').find('.item-list tbody').html(linesHtml);
            }
            $('.blockScheduling').removeClass('block-mode-loading');
            $('.titleDay').text('{{ __('site.page_scheduling_title_of') }} '+name);

        });

    }

    $('.scheduling-form-new').on('click', function() {
        openSchedulingForm('{{ __('site.page_scheduling_new_title') }}', 'insert');
        var formElement = $('.scheduling-form form');
        var selectedDay = $('.scheduling-nav ul li a.active').attr('day');
        $('#checkbox-day-' + selectedDay).prop('checked', true);



        return false;
    });
    $('.scheduling-form-close').on('click', function() {
        closeSchedulingForm();
        return false;
    });

    $('.blockScheduling .scheduling-items').on('click', 'a.edit-program', function() {

        var trElement = $(this).closest('tr');
        var id = trElement.attr('data-id');
        var selectedDate = trElement.attr('data-date');
        var programId = trElement.attr('data-program');

        openSchedulingForm('{{ __('site.page_scheduling_edit_title') }}', 'edit');

        $('input[name=id]').val(id);
        $('select[name=program]').val(programId);

        var startTime = $.trim(trElement.find('.start-column').text());
        var endTime = $.trim(trElement.find('.end-column').text());

        $('#time_start').val(startTime);
        $('#time_end').val(endTime);

        $('#scheduling-edit-date input').val(selectedDate);

        return false;
    });


    $('.blockScheduling .scheduling-items').on('click', 'a.remove-program', function() {
        var id = $(this).closest('tr').attr('data-id');
        Sweetalert2.fire({
            title: '{{ __('site.page_scheduling_alert_title') }}',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.btn_remove') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                Sweetalert2.fire({
                    title: '{{ __('site.btn_processing') }}',
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
                Sweetalert2.showLoading();
                $.post("{{ route('site.scheduling.d') }}",{ id: id }, function(data) {
                    if(data){
                        loadDaySchedule();
                        Sweetalert2.close();
                    }
                }, "json");
            }
        });
        return false;
    });

    function openSchedulingForm(title, type) {
        clearSchedulingForm();

        var schedulingForm = $('.scheduling-form');
        schedulingForm.addClass('opened').removeClass('insert').removeClass('edit').addClass(type).find('select').first().focus();
        schedulingForm.find('.block h3.block-title').html(title);
    }

    function closeSchedulingForm() {
        $('.scheduling-form').removeClass('opened');
        clearSchedulingForm();
    }

    function clearSchedulingForm() {
        var formElement = $('.scheduling-form form');
        formElement.find('.form-group').removeClass('has-error').find('.help-block').hide();
        formElement.find('select').val('');
        formElement.find('input[type=text]').val('');
        formElement.find('input[type=hidden]').val('');
        formElement.find('input[type=checkbox]').prop('checked', false);
    }


    $('.scheduling-form form').on('submit', function() {
        var formElement = $(this);
        var formData = $(this).serialize();

        $.post('/site/scheduling/save', formData, function (data) {

            $(document).find('.saveBtn').addClass('disabled').prop('disabled',true);
            if (data.errors.length == 0) {
                closeSchedulingForm();
                loadDaySchedule();
                setTimeout(function () {
                formElement.find('button[type=submit]').removeClass('disabled').removeAttr('disabled');
                }, 800);

            } else {
                formElement.find('.form-group').removeClass('has-error').find('.help-block').hide();
                $.each(data.errors, function(i, value) {
                    if (i == 'days') {
                        var formGroup = formElement.find('.form-group-days');
                    } else {
                        var input = $('input[name="' + i + '"], select[name="' + i + '"]');
                        var formGroup = input.closest('.form-group');
                    }
                    var helpBlock = formGroup.find('.help-block');
                    var message = '';

                    $.each(value, function(k, m) {
                        message = m;
                        return true;
                    });

                    formGroup.addClass('has-error');
                    if (helpBlock.length == 0) {
                        formGroup.append('<div class="help-block">' + message + '</div>');
                    } else {
                        helpBlock.html(message).show();
                    }
                });

                setTimeout(function () {
                    formElement.find('button[type=submit]').removeClass('disabled').removeAttr('disabled');
                }, 300);

            }
        } , 'json');

        return false;
    });


</script>
</body>
</html>