{% extends 'base.html' %}
{% block custom_scripts %}
<link rel="stylesheet" href="{{ url_for('static', filename='jquery.'+theme+'.schedule.css') }}">
<!--<script src="{{ url_for('static', filename='jquery.schedule2.js') }}"></script>-->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

{% endblock %}
{% block page_body %}
<div class="row justify-content-center">
    <div class="col-12 col-lg-10 col-xl-10 mx-auto">

<div class="row">
	<div class="col-lg-6">
		<h1 class="display-4 float-sm-start">{{ _('Scheduler') }}</h1>
	</div>

        <div class="my-10">
            <!-- Tabs navs -->
            <ul class="nav nav-underline" id="settings" role="tablist">
                <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="ch" data-bs-toggle="tab" data-bs-target="#ch-tab" role="tab" aria-controls="ch-tab" aria-selected="true" href="#ch-tab">Centralne Ogrzewanie</a>
                </li>
                <li class="nav-item" role="presentation">
                        <a class="nav-link" id="dhw" data-bs-toggle="tab" data-bs-target="#dhw-tab" role="tab" aria-controls="dhw-tab" aria-selected="true" href="#dhw-tab">Ciepła Woda Użytkowa</a>
                </li>
            </ul>
            <!-- Tabs navs -->

            <!-- Tabs content -->
            <div class="tab-content" id="ex1-content">
                <div class="tab-pane fade show active" id="ch-tab" role="tabpanel" aria-labelledby="ch-tab">
			<div class="col-lg-12">
                		<div id="schedule3" class="jqs-demo mb-3 jqs jqs-mode-edit">
            		</div>
			<button class="btn btn-outline-secondary w-100 mb-5 mt-3" id="savech">{{ _('Save') }}</button>
			</div>
		</div>
                <div class="tab-pane fade" id="dhw-tab" role="tabpanel" aria-labelledby="dhw-tab">
			<div class="col-lg-12">
                		<div id="schedule4" class="jqs-demo mb-3 jqs jqs-mode-edit">
        		</div>
			<button class="btn btn-outline-secondary w-100 mb-5 mt-3" id="savedhw">{{ _('Save') }}</button>
			</div>
                </div>

	    </div>
	</div>

<!--
	<div class="col-lg-6 align-self-center">
		<button class="btn btn-primary btn-lg float-sm-end" id="savech">{{ _('Save') }}</button>
	</div>
            <div class="col-lg-12">
                <div id="schedule3" class="jqs-demo mb-3 jqs jqs-mode-edit">
            </div>

        </div>
<div class="row">
       <div class="col-lg-8">
	       <h1 class="display-4 float-sm-start">{{ _('Domestic Hot Water scheduler') }}</h1>
        </div>
        <div class="col-lg-4 align-self-center">
		<button class="btn btn-primary btn-lg float-sm-end" id="savedhw">{{ _('Save') }}</button>
        </div>
	<div class="col-lg-12">
		<div id="schedule4" class="jqs-demo mb-3 jqs jqs-mode-edit">
	</div>
	</div>-->
</div>
</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

			<script>
/*				$('#schedule3').jqs({
      onInit: function () {
        $('#logs').val('onInit fire !\n' + $('#logs').val());
      },
      onAddPeriod: function () {
        $('#logs').val('onAddPeriod fire !\n' + $('#logs').val());
      },
      onRemovePeriod: function () {
        $('#logs').val('onRemovePeriod fire !\n' + $('#logs').val());
      },
      onClickPeriod: function () {
        $('#logs').val('onClickPeriod fire !\n' + $('#logs').val());
      }
    });
				$('#schedule4').jqs({
      onInit: function () {
        $('#logs').val('onInit fire !\n' + $('#logs').val());
      },
      onAddPeriod: function () {
        $('#logs').val('onAddPeriod fire !\n' + $('#logs').val());
      },
      onRemovePeriod: function () {
        $('#logs').val('onRemovePeriod fire !\n' + $('#logs').val());
      },
      onClickPeriod: function () {
        $('#logs').val('onClickPeriod fire !\n' + $('#logs').val());
      }
    });
$('#schedule3').jqs('import', {{ ch }});
				console.log('{{ ch }}');
$('#schedule4').jqs('import', {{ dhw }});*/
$('#savech').click(function () {
      var schedulech=$('#schedule3').jqs('export');
	$.post('/scheduler', {schedulech: schedulech}, function(data) {
		         var text=data.msg;
                        var state=data.state;
			appendAlert(text,state);
        /*                Swal.fire({
                                html: text,
                                icon: state,
                                showCloseButton: false,
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                                didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b')
                        timerInterval = setInterval(() => {
                            b.textContent = Swal.getTimerLeft()
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                                                })*/

                        });
    });
$('#savedhw').click(function () {
      var scheduledhw=$('#schedule4').jqs('export');
        $.post('/scheduler', {scheduledhw: scheduledhw}, function(data) {
                        var text=data.msg;
                        var state=data.state
                        Swal.fire({
                                html: text,
                                icon: state,
                                showCloseButton: false,
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                                didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b')
                        timerInterval = setInterval(() => {
                            b.textContent = Swal.getTimerLeft()
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                                                })

                        });
    });


			</script>
{% endblock %}
{% block end_scripts %}

<script src="{{ url_for('static', filename='jquery.schedule2.js') }}"></script>
		<script>

                                $('#schedule3').jqs({
      onInit: function () {
        $('#logs').val('onInit fire !\n' + $('#logs').val());
      },
      onAddPeriod: function () {
        $('#logs').val('onAddPeriod fire !\n' + $('#logs').val());
      },
      onRemovePeriod: function () {
        $('#logs').val('onRemovePeriod fire !\n' + $('#logs').val());
      },
      onClickPeriod: function () {
        $('#logs').val('onClickPeriod fire !\n' + $('#logs').val());
      }
    });
                                $('#schedule4').jqs({
      onInit: function () {
        $('#logs').val('onInit fire !\n' + $('#logs').val());
      },
      onAddPeriod: function () {
        $('#logs').val('onAddPeriod fire !\n' + $('#logs').val());
      },
      onRemovePeriod: function () {
        $('#logs').val('onRemovePeriod fire !\n' + $('#logs').val());
      },
      onClickPeriod: function () {
        $('#logs').val('onClickPeriod fire !\n' + $('#logs').val());
      }
    });
$(document).ready(function() {
    const socket = io(); // Upewniamy się, że socket jest tworzony tylko raz

    socket.on("connect", () => {
        console.log("Połączono z serwerem Socket.io");
    });
        socket.on('scheduler', function(data) {
                var scheduler1=data.chsch
		var scheduler2=data.dhwsch
		$('#schedule3').jqs('import', scheduler1);
		$('#schedule4').jqs('import', scheduler2);

    });
        socket.on('return', function(msg) {
                switch(Object.keys(msg)[0]) {
                        case "info":
                                appendAlert(msg.info, msg.status);
                                break;
                }
                console.log(msg)
        });
});

//$('#schedule4').jqs('import', {{ dhw }});

		</script>
{% endblock %}
