@extends('layouts.default')
@section('title', 'Cronogramas')
@section('plugins.Toastr', true)

@section('css')
    <link rel="stylesheet" href="{{ asset('css/style_colors.css?v=2') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css?v=2') }}">
    <link rel="stylesheet" href="{{ asset('css/calendario.css') }}">
    <style type="text/css">

        #toast-container {
            top: 250px;
        }

    	.card {
    		zoom: 0.86;
    	}

    	@media only screen and (max-width: 600px) {
    	    .card {
    	    	zoom: 0.70;
    	    }
    	}
        .block-field {
            opacity: 0.65;
            background: #c5c5c5;
        }


        .autosave-float-button {
            width: 60px;
            height: 60px;
            border: 7px solid var(--corPrincipal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--corPrincipal);
            position: fixed;
            bottom: 30px;
            right: 60px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .autosave-float-button:hover {
            background-color: var(--corSecundaria);
            color: #fff;
        }

    </style>
@stop

@section('content')
<div class="card">
    {{-- AUTOSAVE --}}
    <div id="autosave-container" style="position: fixed; bottom: 5px; right: 20px; text-align: center;">
        <div id="autosave-text" style="margin-bottom: 85px;">Salvamento Automático</div>
        <div id="autosave-button" class="autosave-float-button">
            <span id="autosave-timer">15</span>
        </div>
    </div>
    <div class="card-header d-flex justify-content-between align-items-end">
		<h3>
			Cronograma: {{"$monthTwoCases/$year"}}
		</h3>
		<div id="divVoltar" class='pb-1 mr-3'>
			<a href="{{ route('cronogramas', ['associado_id'=>$associado_id]) }}" class="text-white">
				<i class="fas fa-reply"></i>
			</a>
		</div>
    </div>

    <div class="card-body">
        @if (!$exigir_cronograma)
            <div class="alert alert-warning alert-dismissible fade show text-center" role="alert">
                <b style="font-size: 23px">
                    Fique tranquilo(a). No momento, a sua associação não exige o preenchimento do cronograma.
                </b>
                <br>
                <span style="font-size: 18px">
                    Caso isso mude, você será notificado(a).
                </span>
            </div>
		@elseif ($permiteRealizarCronograma)
		<div class="alert alert-success alert-dismissible fade show text-center" role="alert">
			<b>
                CRONOGRAMA LIBERADO PARA SER REALIZADO!!!
            </b>
            <br>
			Você pode marcar qualquer dia entre as datas: {{ \Carbon\Carbon::parse($data_cronograma['periodo_inicial'])->setTimezone('GMT-3')->format('d/m/Y')}} e {{ \Carbon\Carbon::parse($data_cronograma['periodo_final'])->setTimezone('GMT-3')->format('d/m/Y')}}
		</div>
		@endif
		{!! Form::open(['route'=>['cronogramas.store', 'method'=>'post', 'id'=>$cronograma_id, 'month'=>$month, 'year'=>$year]]) !!}

			<div class='meses-cronograma'>
				@foreach($arrMeses as $key => $mes)
					<a {{$key == $month ? "class=active" : ''}} href="{{ route('cronogramas.edit', ['id'=>$cronograma_id, 'associado_id'=>\Crypt::encrypt($associado_id), 'month'=>$key, 'year'=>$year]) }}" class="text-white"> {{$mes}} </a>
				@endforeach
			</div>
	    	<table class='calendar'>
		    	<thead>
			    	<tr>
				    	@foreach($daysOfWeek as $day)
				    	     <th class='header'>{{$day}}</th>
				    	@endforeach
		    		</tr>
		    	</thead>
		    	<tbody>
		    		<tr>
				    	@if ($dayOfWeek > 0)
				    	    <td colspan='{{$dayOfWeek}}'>&nbsp;</td>
				    	@endif

				    	@while ($currentDay <= $numberDays)
				    	     @if ($dayOfWeek == 7)
				    	         @php $dayOfWeek = 0; @endphp
							   	</tr>
							    <tr>
				    	     @endif

							@php $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT); @endphp

							@php $date = "$year-$month-$currentDayRel"; @endphp

							@php
                                $class = !$permiteRealizarCronograma || (\Carbon\Carbon::parse($date)->lt(\Carbon\Carbon::parse($data_cronograma['periodo_inicial']))) || (\Carbon\Carbon::parse($date)->gt(\Carbon\Carbon::parse($data_cronograma['periodo_final'])))
                                       ? 'block-field' : '';
                            @endphp

							<td rel='{{$date}}' class="{{$class}}">
								<div class='day'>
									{{$currentDay}}
								</div>
								<div class='check'>
									<div>
                                        <div class="geral {{$exigir_cronograma && !empty($arrTurnoDiaSemanas[$dayOfWeek]['M']) ? '' : 'block-field'}}">
                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['M']['I']) ? "" : "block-field"}}' title='Manhã Ida'>
                                                <label class="container"><span class='legenda'>M. Ida</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="M" data-sentido="I" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[MI{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox" {{ isset($cronogramaViagem['MI'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>

                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['M']['V']) ? "" : "block-field"}}' title='Manhã Volta'>
                                                <label class="container"><span class='legenda'>M. Volta</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="M" data-sentido="V" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[MV{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox"  {{ isset($cronogramaViagem['MV'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="geral {{$exigir_cronograma && !empty($arrTurnoDiaSemanas[$dayOfWeek]['T']) ? '' : 'block-field'}}">
                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['T']['I']) ? "" : "block-field"}}' title='Tarde Ida'>
                                                <label class="container"><span class='legenda'>T. Ida</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="T" data-sentido="I" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[TI{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox"  {{ isset($cronogramaViagem['TI'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>

                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['T']['V']) ? "" : "block-field"}}' title='Tarde Volta'>
                                                <label class="container"><span class='legenda'>T. Volta</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="T" data-sentido="V" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[TV{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox"  {{ isset($cronogramaViagem['TV'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="geral {{$exigir_cronograma && !empty($arrTurnoDiaSemanas[$dayOfWeek]['N']) ? '' : 'block-field'}}">
                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['N']['I']) ? "" : "block-field"}}' title='Noite Ida'>
                                                <label class="container"><span class='legenda'>N. Ida</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="N" data-sentido="I" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[NI{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox"  {{ isset($cronogramaViagem['NI'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>

                                            <div class='checkbox-geral {{$exigir_cronograma && isset($arrTurnoDiaSemanas[$dayOfWeek]['N']['V']) ? "" : "block-field"}}' title='Noite Volta'>
                                                <label class="container"><span class='legenda'>N. Volta</span>
                                                    <input data-dia-semana="{{$dayOfWeek}}" data-turno="N" data-sentido="V" data-diamesano="{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}" name="cronograma[NV{{$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)}}]" type="checkbox"  {{ isset($cronogramaViagem['NV'.$year."-".$monthTwoCases."-".str_pad($currentDay, 2, "0", STR_PAD_LEFT)]) ? 'checked="checked"' : ''}}>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                        </div>
									</div>
								</div>
							</td>

							@php
							$currentDay++;
							$dayOfWeek++;
							@endphp

				    	@endwhile

				    	@if ($dayOfWeek != 7)
				    	     @php $remainingDays = 7 - $dayOfWeek; @endphp
				    	     <td colspan='{{$remainingDays}}'>&nbsp;</td>
				    	@endif
		    		</tr>
		    	</tbody>
	    	</table>

            <div class='form-row mt-5'>
                <div class="alert alert-danger alert-dismissible fade show" role="alert" style="font-size: 18px; font-weight: 600;">

                    <p style="margin-bottom: 5px"> As paradas selecionadas serão utilizadas como referência pelo motorista, dessa forma ele saberá se poderá desviar o trajeto ou não.
                        Também serão utilizadas para saber quando é necessário pegar ou deixar alguém na estrada.
                    </p>
                    <p style="margin-bottom: 5px"> Caso você associado selecione a parada errada e acabe por perder o transporte, será de responsabilidade total sua. </p>
                    <p style="margin-bottom: 5px"> Ressaltando que os motoristas terão a liberdade de alterar o trajeto, então é importante que você se informe com ele visto que essa informação de paradas será utilizada apenas como uma referência.</p>

                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class='form-row mt-5'>
                <div class="form-group col-md-2">
                    {!! Form::label('parada_id_embarque_ida', 'Parada Embarque Ida:') !!}
                    {!! Form::select('parada_id_embarque_ida', ($arrParadas['E']['I'] ?? []), $parada_id_embarque_ida, ['class'=>'form-control', 'required']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('parada_id_desembarque_ida', 'Parada Desembarque Ida:') !!}
                    {!! Form::select('parada_id_desembarque_ida', ($arrParadas['D']['I'] ?? []), $parada_id_desembarque_ida, ['class'=>'form-control', 'required']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('parada_id_embarque_volta', 'Parada Embarque Volta:') !!}
                    {!! Form::select('parada_id_embarque_volta', ($arrParadas['E']['V'] ?? []), $parada_id_embarque_volta, ['class'=>'form-control', 'required']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('parada_id_desembarque_volta', 'Parada Desembarque Volta:') !!}
                    {!! Form::select('parada_id_desembarque_volta', ($arrParadas['D']['V'] ?? []), $parada_id_desembarque_volta, ['class'=>'form-control', 'required']) !!}
                </div>
            </div>
    		<div class='form-row'>
    			<div class="form-group col-md-6" style="margin-top: 10px;">
                    {!! Form::reset('Limpar', ['class'=>'btn btn-default']) !!}
                    {!! Form::submit('Salvar', ['class'=>'btn btn-primary', 'disabled' => !$exigir_cronograma]) !!}
                </div>
            </div>
            {!! Form::close() !!}
    </div>
</div>

<script defer>
    let autoSaveTimer;
    let timeLeft = 15;

    function startAutoSaveTimer() {
        clearInterval(autoSaveTimer);
        timeLeft = 15;
        document.getElementById('autosave-timer').textContent = timeLeft;
        autoSaveTimer = setInterval(() => {
            timeLeft--;
            document.getElementById('autosave-timer').textContent = timeLeft;
            if (timeLeft <= 0) {
                clearInterval(autoSaveTimer);
                autoSave();
            }
        }, 1000);
    }

    async function autoSave() {
        try {
            $('#autosave-text').text('Salvando...');
            const cronogramaData = $('form').serializeArray();
            cronogramaData.push({ name: 'id', value: '{{ $cronograma_id }}' });
            cronogramaData.push({ name: 'month', value: '{{ $month }}' });
            cronogramaData.push({ name: 'year', value: '{{ $year }}' });
            cronogramaData.push({ name: 'AJAX', value: true });

            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
            $.ajax({
                url: '{{ route("cronogramas.store") }}',
                method: 'POST',
                data: cronogramaData,
                success: function(response) {
                    toastr.success("Salvamento automático realizado com sucesso!", "Auto-Save");
                    $('#autosave-text').text('Salvamento Automático');
                    document.getElementById('autosave-timer').textContent = 15;
                },
                error: function(xhr, status, error) {
                    toastr.error("Não foi possível realizar o auto-save, tente novamente mais tarde: " + error, "Auto-Save Error");
                    document.getElementById('autosave-timer').textContent = 15;
                    $('#autosave-text').text('Salvamento Automático');
                }
            });
        } catch (error) {
            toastr.error("Não foi possível realizar o auto-save, tente novamente mais tarde: " + error.message, "Auto-Save Error");
            document.getElementById('autosave-timer').textContent = 15;
            $('#autosave-text').text('Salvamento Automático');
        }
    }

    async function mostrarConfirmacaoDeTrocaDeViagem(data, sentidoNovo, turnoNovo) {
        const formattedDate = data.split('-').reverse().join('/').replace(/^(\d{2})\/(\d{2})\/(\d{4})$/, '$1/$2/$3');
        const options = [];
        $(`input[data-diamesano="${data}"]:not([data-sentido="${sentidoNovo}"][data-turno="${turnoNovo}"]):checked`).each(function() {
            const turno = $(this).attr('data-turno');
            const sentido = $(this).attr('data-sentido');

            let turnoDescricao;
            let sentidoDescricao;
            switch (turno) {
                case 'M': turnoDescricao = 'Manhã'; break;
                case 'T': turnoDescricao = 'Tarde'; break;
                case 'N': turnoDescricao = 'Noite'; break;
                default: turnoDescricao = 'Desconhecido'; break;
            }

            switch (sentido) {
                case 'I': sentidoDescricao = 'Ida'; break;
                case 'V': sentidoDescricao = 'Volta'; break;
                default: sentidoDescricao = 'Desconhecido'; break;
            }

            options.push(`<label><input type="radio" name="swal-radio" value="${turno}${sentido}${data}"> ${formattedDate} de ${turnoDescricao} - ${sentidoDescricao}</label><br>`);
        });

        const { value: formValues } = await Swal.fire({
            title: 'Tem certeza que deseja alterar o turno/sentido de uma viagem?',
            text: 'Essa ação só poderá ser feita com 48 horas de antecedência!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Alterar!',
            cancelButtonText: 'Cancelar!',
            html: `
            <div>
                <p>Qual viagem você gostaria de substituir?</p>
                ${options.join('')}
                <div id="radio-error" style="color: red; display: none;">Por favor, selecione uma opção.</div>
            </div>`,
            preConfirm: () => {
                const selectedRadio = document.querySelector('input[name="swal-radio"]:checked');
                if (!selectedRadio) {
                    document.getElementById('radio-error').style.display = 'block';
                    return false;
                } else {
                    document.getElementById('radio-error').style.display = 'none';
                    return selectedRadio.value;
                }
            }
        });

        return formValues
    }

    function isMoreThanXDaysLater(dataReferencia, dataDeHoje, quantidadeDias = {{ $dias_cancelamento }}) {
        const dataRef = new Date(dataReferencia);
        const dataHoje = new Date(dataDeHoje);
        const diferencaMs = dataRef - dataHoje;

        const diferencaDias = diferencaMs / (1000 * 60 * 60 * 24);

        return diferencaDias > quantidadeDias;
    }

	window.onload = function() {
        setTimeout(() => {
            $('body:not(.sidebar-closed) > div > nav > ul:nth-child(1) > li > a').trigger('click');
        }, 300)

		$('.card-body').on('click', 'input[name^=cronograma]', async function() {
            startAutoSaveTimer()

            const data_cronograma = JSON.parse('{!! json_encode($data_cronograma) !!}');
            const turnoDiaSemana = JSON.parse('{!! json_encode($arrTurnoDiaSemanas) !!}');
            const permiteRealizarCronogramaHoje = "{{(int)$permiteRealizarCronograma}}";
			const permitirAlterarTurnoDaViagem = "{{(int)$permitirAlterarTurnoDaViagem}}";
			const estavaCheckado = $(this).attr('checked') == 'checked';

			const data = $(this).attr('data-diamesano');
            const turno = $(this).attr('data-turno')
            const sentido = $(this).attr('data-sentido')
            const diaSemana = $(this).attr('data-dia-semana')

			const hoje = new Date().toLocaleDateString('pt-BR').split('/').reverse().join('-')
            if (data <= hoje) {
				event.preventDefault();
			  	swal.fire(
			      	'Você não pode fazer isso!',
			      	'Você não pode cancelar/marcar uma viagem que já aconteceu ou que acontecerá hoje',
			      	'error'
			  	);
			} else if (permiteRealizarCronogramaHoje != '1' && (this.checked && !estavaCheckado)) {
                const possuiViagemAgendadaEmOutroTurnoOuSentido = $(`input[data-diamesano="${data}"]:not([data-sentido="${sentido}"][data-turno="${turno}"]):checked`).length
                if (permitirAlterarTurnoDaViagem != '1' || !possuiViagemAgendadaEmOutroTurnoOuSentido) {
                    event.preventDefault();
                    swal.fire(
                        'Você não pode fazer isso!',
                        'Você não pode marcar uma viagem pois está fora do prazo para realizar o cronograma.',
                        'error'
                    )
                    $(this).attr('checked', false).prop('checked', false).removeAttr('checked');
                    return
                }
                const selectedOption = await mostrarConfirmacaoDeTrocaDeViagem(data, sentido, turno)
                if (!selectedOption) {
                    $(this).attr('checked', false).prop('checked', false).removeAttr('checked');
                    event.preventDefault();
                    return
                }
                $(this).attr('checked', 'checked')
                $(`input[name="cronograma[${selectedOption}]"]`).attr('checked', false).prop('checked', false).removeAttr('checked');
            } else if ((this.checked && !estavaCheckado) && (data < data_cronograma.periodo_inicial || data > data_cronograma.periodo_final)) {
				event.preventDefault();
			  	swal.fire(
			      	'Você não pode fazer isso!',
			      	`Você está tentando marcar uma viagem fora do prazo de cronograma. (${new Date(data_cronograma.periodo_inicial).toLocaleDateString('pt-BR')} - ${new Date(data_cronograma.periodo_final).toLocaleDateString('pt-BR')})`,
			      	'error'
			  	)
            } else if (permiteRealizarCronogramaHoje != '1' && (!this.checked && estavaCheckado)) { // desmarcando uma viagem
                const dataComMaisTempoDoqOMinimoExigidoDeAntecedencia = isMoreThanXDaysLater(data, hoje)
                if (!dataComMaisTempoDoqOMinimoExigidoDeAntecedencia) {
                    event.preventDefault();
                    swal.fire(
                        'Você não pode fazer isso!',
                        'Você só pode desmarcar viagens com {{ $dias_cancelamento }} dias de antecedência.',
                        'error'
                    )
                    $(this).attr('checked', true).prop('checked', true).attr('checked', true);
                    return
                }
            } else if (!(turnoDiaSemana[diaSemana]?.[turno]?.[sentido] ?? false)) {
                event.preventDefault();
                swal.fire(
                    'Você não pode fazer isso!',
                    'Seu cronograma não está habilitado para permitir viagens nesse turno ou sentido',
                    'error'
                )
            }
		});
	};
</script>
@stop