@extends('layouts.app')

@section('content')

    @page(['col'=>12, 'page'=>__('agendamento.create_crud', ['page'=>$page_create])])

    @alert(['msg' => session('msg'), 'status' => session('status')])
    @endalert

    @breadcrumb(['page'=>$page,'items'=>$breadcrumb ?? []])
    @endbreadcrumb

    @form(['action'=>route('agendamentoTituloHora'), 'method'=>'POST'])

    <fieldset class="fieldAgendar">
        <p id="agendar">Agendar data</p>
    </fieldset>
    <fieldset class="calendario">
    <div class="calendar-wrapper">
            <button id="btnPrev" type="button"> < Voltar</button>
            <button id="btnNext" type="button">Proximo > </button>
        <div id="divCal"></div>
    </div>
    </fieldset>
    <fieldset class="calendario">
        <button class="enviarbtn" onclick="window.location = '{{ route('agendamentoTituloHora') }}'">@lang('agendamento.next')</button>
    </fieldset>

    <script>
            var Cal = function(divId) {

        //Store div id
        this.divId = divId;

        // Dias da semana, começando no domingo
        this.DaysOfWeek = [
        'Dom',
        'Seg',
        'Ter',
        'Qua',
        'Qui',
        'Sex',
        'Sab'
        ];

        // Meses, informando em janeiro
        this.Months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ];

        // Define o mês atual, ano
        var d = new Date();

        this.currMonth = d.getMonth();
        this.currYear = d.getFullYear();
        this.currDay = d.getDate();

        };

        // Vai para o próximo mês
        Cal.prototype.nextMonth = function() {
        if ( this.currMonth == 11 ) {
        this.currMonth = 0;
        this.currYear = this.currYear + 1;
        }
        else {
        this.currMonth = this.currMonth + 1;
        }
        this.showcurr();
        };

        // Vai para o mês anterior
        Cal.prototype.previousMonth = function() {
        if ( this.currMonth == 0 ) {
        this.currMonth = 11;
        this.currYear = this.currYear - 1;
        }
        else {
        this.currMonth = this.currMonth - 1;
        }
        this.showcurr();
        };

        // Mostrar o mês atual
        Cal.prototype.showcurr = function() {
        this.showMonth(this.currYear, this.currMonth);
        };

        // Mostrar mês (ano, mês)
        Cal.prototype.showMonth = function(y, m) {

        var d = new Date()
        // Primeiro dia da semana no mês selecionado
        , firstDayOfMonth = new Date(y, m, 1).getDay()
        // Último dia do mês selecionado
        , lastDateOfMonth =  new Date(y, m+1, 0).getDate()
        // Último dia do mês anterior
        , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();


        var html = '<table>';

        // Escreve o mês e ano selecionados
        html += '<thead><tr>';
        html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
        html += '</tr></thead>';


        // Escreve o cabeçalho dos dias da semana
        html += '<tr class="days">';
        for(var i=0; i < this.DaysOfWeek.length;i++) {
        html += '<td>' + this.DaysOfWeek[i] + '</td>';
        }
        html += '</tr>';

        // Escreve os dias
        var i=1;
        do {

        var dow = new Date(y, m, i).getDay();

        // Se for domingo, comece uma nova linha
        if ( dow == 0 ) {
            html += '<tr>';
        }
        // Se não for domingo, mas primeiro dia do mês
        // vai escrever os últimos dias do mês anterior
        else if ( i == 1 ) {
            html += '<tr>';
            var k = lastDayOfLastMonth - firstDayOfMonth+1;
            for(var j=0; j < firstDayOfMonth; j++) {
            html += '<td class="not-current">' + k + '</td>';
            k++;
            }
        }

        // Escreve o dia atual no loop
        var chk = new Date();
        var chkY = chk.getFullYear();
        var chkM = chk.getMonth();
        if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
            html += '<td class="today">' + i + '</td>';
        } else {
            html += '<td class="normal">' + i + '</td>';
        }
        // Se for sábado, fecha a linha
        if ( dow == 6 ) {
            html += '</tr>';
        }
        // Se não for sábado, mas último dia do mês selecionado
        // vai escrever nos próximos dias a partir do próximo mês
        else if ( i == lastDateOfMonth ) {
            var k=1;
            for(dow; dow < 6; dow++) {
            html += '<td class="not-current">' + k + '</td>';
            k++;
            }
        }

        i++;
        }while(i <= lastDateOfMonth);

        // Fecha table
        html += '</table>';

        // Escreva HTML para o div
        document.getElementById(this.divId).innerHTML = html;
        };

        // No carregamento da window
        window.onload = function() {

        // Inicia calendar
        var c = new Cal("divCal");			
        c.showcurr();

        // Vincular os cliques do botão seguinte e anterior
        getId('btnNext').onclick = function() {
        c.nextMonth();
        };
        getId('btnPrev').onclick = function() {
        c.previousMonth();
        };
        }

        // Obter elemento por id
        function getId(id) {
        return document.getElementById(id);
        }
    </script>

    @endform

    @endpage


@endsection




<!-- <fieldset class="fieldAgendar">
        <p id="agendar">Agendar data</p>
    </fieldset>

    <fieldset class="calendario">
        <input type="date" id="data" name="dataAgendamento">
        <br>
        <button class="enviarbtn" onclick="window.location = '{{ route('agendamentoTituloHora') }}'">@lang('agendamento.next')</button>
    </fieldset> -->