{{--
/**
* Componente para editar disponibilidade de membro
*/
--}}

@props([
	'user',
	'nvisits' => App\Data\User::getQtyVisits(),
    'class' => 'col-sm-12',
	'preventNotInformed' => false,	// se True impede que o valor 'não informada' seja mantido.
])


@section('scripts')
	@parent
	<script type="text/javascript">
		$(function () {

			//styling do SWAL para bootstrap
			const swalWithBootstrapButtons = Swal.mixin({
				customClass: {
				confirmButton: "btn btn-primary mr-2",
				title: "h4 text-primary mb-2",
				html: "h5 text-secondary"
				},
				buttonsStyling: false
			});

			var preventNotInformed = {{ $preventNotInformed ? 'true' : 'false' }};

			if (preventNotInformed) {
				$('.choose-period').each(function() {
					var el = $(this);
					// if the initial value is not 'não informada', remove it from the options
					if (el.val() != -1) {
						el.find('option[value="-1"]').remove();
					}
				});

				// Find the form this component is in and attach to its submit event.
				var form = $('.choose-period').first().closest('form');
				form.on('submit', function(event) {
					var hasError = false;
					// Reset any previous error indicators
					$('.choose-period').closest('.card').removeClass('border-danger');

					$('.choose-period').each(function() {
						var el = $(this);
						if (el.val() == -1) {
							hasError = true;
							// Highlight the card with the error
							el.closest('.card').addClass('border-danger');
						}
					});

					if (hasError) {
						event.preventDefault(); // Stop form submission
						// Reset the double submission prevention flag so the user can submit again after fixing the error.
						form.removeData('submitted');
						swalWithBootstrapButtons.fire({
							title: 'Atenção!',
							text: 'Todos os períodos de disponibilidade devem ser definidos. Por favor, corrija os campos destacados.',
							icon: 'warning',
							confirmButtonText: 'Ok'
						});
					}
				});
			}

			$('.choose-period').on('change', function () {
				var el = $(this);
				var period = el.data('period');
				var card = el.closest('.card');
				var val = el.val();

				// First, remove all possible color classes for a clean slate
				card.removeClass('bg-danger text-light bg-warning bg-success text-gray-100');

				if (preventNotInformed && val != -1) {
					// if changed to something other than 'não informada',
					// remove 'não informada' from the options to prevent reverting
					el.find('option[value="-1"]').remove();
				}

				if (val == 0) { // Indisponível
					card.addClass('bg-danger text-light');
				} else if (val == 1) { // Parcial
					card.addClass('bg-warning text-gray-100');
				} else if (val == 2) { // Disponível
					card.addClass('bg-success text-gray-100');
				}
				// For 'Não informado' (any other value), no color class is added.

				$('#typedisp-' + period).val(el.val());
			});
		});
	</script>
@endsection

@php
	$days = App\Data\General::getDays();
	$periods =App\Data\User::getPeriodOptions();
	$disp = App\Data\User::getAvailabityOptions();
	$dispclass = App\Data\User::getAvailabityClassOptions();
	$dispicon = App\Data\User::getAvailabityIconOptions();
@endphp

<x-form.text name="visit" :value="$user->visit" number
	class="col-12 col-md-6"
	help-text="Distância máxima em <em>km</em> da cidade do membro"
	tooltip="Distância máximaque o membro aceita viajar para fazer visitas e apresentações, a partir de sua cidade.">
	Raio de visitas
</x-form.text>

<x-form.select name="nvisits" :items="$nvisits" :value="$user->nvisits"
	tooltip="Frequência máxima que o membro está disponível para atividades preventivas."
	class="col-12 col-md-6">
	Disponibilidade para visitas
</x-form.select>


<div class="{{ $class }}">
    <div class="form-row mt-1">
        @foreach($days as $day_index => $day_name)
            <div class="col-12 col-sm-6 col-md-4 col-lg mb-3 mt-2 mb-lg-0 @if(!$loop->last) border-right @endif">
                <div class="text-center font-weight-bold text-uppercase small pt-2 pb-1 mb-2 border-bottom bg-secondary text-white">{{ $day_name }}</div>

                @foreach($periods as $key => $period)
                    @php
                        $availabilitytype = $user->availabilitytype($key, $day_index);
                        $periodId = 'period-'.$key.'-'.$day_index;
                        $typeDispId = 'typedisp-'.$key.'-'.$day_index;
                    @endphp
                    <div class="card mb-2 {{ $dispclass[$availabilitytype] }}">
                        <div class="card-body px-1 pt-0 pb-2 text-center">
                            <x-form.select name="disp" :items="$disp" :value="$availabilitytype"
                                class="px-1"  
								control-class="choose-period form-control-sm disableSelect2" :data-period="$key.'-'.$day_index">
								
								<strong>{!! $period !!}</strong>
							</x-form.select>

                            <input type="hidden" id="{{ $periodId }}" name="disponibility[]" value="{{ $key.'|'.$day_index }}">
                            <input type="hidden" id="{{ $typeDispId }}" name="{{ $typeDispId }}" value="{{ $availabilitytype }}">
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>