@extends('layouts.app')

@section('form-title') {{ __('Google Maps field') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('settings') }}">{{ __('Settings') }}</a> </li> 
<li class="breadcrumb-item">{{ __('Google Maps field') }} </li> 
@endsection
    
@section('content')
<style>
  .form-radio input:disabled + i,
  .form-radio input:disabled + label {
      opacity: 0.5 !important; /* Makes it look grayed out */
      cursor: not-allowed !important; /* Shows not-allowed cursor */
  }
</style>
<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <!-- Page body start -->
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
              <!-- Basic Inputs Validation start -->
              <div class="card">
                <div class="card-block">
                  <form id="main" method="post" action="{{ route('settings.update', $type) }}" novalidate>
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Option to fill in Google Maps field') }} *</label>
                      <div class="col-sm-8">
                        {!! yesNoRadio('option_to_fill_in', old('option_to_fill_in', $google_maps_field->option_to_fill_in ?? 'yes')) !!}
                        <span class="messages">
                            @if($errors->has('option_to_fill_in'))
                            <p class="text-danger error">{{ $errors->first('option_to_fill_in') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Automatically fill in street and city based on ZIP code and house number') }} *</label>
                        <div class="col-sm-8">
                          {!! yesNoRadio('automatically_fill_in', old('automatically_fill_in', $google_maps_field->automatically_fill_in ?? 'yes')) !!}
                          <span class="messages">
                              @if($errors->has('automatically_fill_in'))
                              <p class="text-danger error">{{ $errors->first('automatically_fill_in') }}</p>
                              @endif
                          </span>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Forward to Google Maps API to place a dot on a route map, for example') }} *</label>
                        <div class="col-sm-8">
                          {!! yesNoRadio('forward_to_gm_api', old('forward_to_gm_api', $google_maps_field->forward_to_gm_api ?? 'yes')) !!}
                          <span class="messages">
                              @if($errors->has('forward_to_gm_api'))
                              <p class="text-danger error">{{ $errors->first('forward_to_gm_api') }}</p>
                              @endif
                          </span>
                        </div>
                    </div>
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4"></label>
                      <div class="col-sm-8">
                        <input type="hidden" name="type" value="{{ $type }}">
                        <button type="submit" class="btn btn-primary m-b-0">{{ __('Update') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          {{-- Edit section ends --}}
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
  <script>
    function updateRadioButtons() {
      // Group 1: Option to fill in
      const optionYes = document.getElementById('option_to_fill_in_yes');
      // const optionNo = document.getElementById('option_to_fill_in_no'); // Not needed for logic

      // Group 2: Automatically fill in
      const autoYes = document.getElementById('automatically_fill_in_yes');
      const autoNo = document.getElementById('automatically_fill_in_no');

      // Group 3: Forward to Google Maps API
      const forwardYes = document.getElementById('forward_to_gm_api_yes');
      const forwardNo = document.getElementById('forward_to_gm_api_no');

      if (optionYes.checked) {
        // When first option is yes, enable group 2
        autoYes.disabled = false;
        autoNo.disabled = false;

        // Now check the second group
        if (autoYes.checked) {
          // If automatically_fill_in is yes, enable group 3
          forwardYes.disabled = false;
          forwardNo.disabled = false;
        } else {
          // If automatically_fill_in is no, force group 3 to no and disable it
          forwardYes.checked = false;
          forwardNo.checked = true;
          forwardYes.disabled = true;
          forwardNo.disabled = true;
        }
      } else {
        // When first option is no:
        // Force group 2 to no and disable
        autoYes.checked = false;
        autoNo.checked = true;
        autoYes.disabled = true;
        autoNo.disabled = true;

        // Force group 3 to no and disable
        forwardYes.checked = false;
        forwardNo.checked = true;
        forwardYes.disabled = true;
        forwardNo.disabled = true;
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      updateRadioButtons();

      // Add change event listeners for groups 1 and 2
      document.querySelectorAll('input[name="option_to_fill_in"]').forEach(function(radio) {
        radio.addEventListener('change', updateRadioButtons);
      });

      document.querySelectorAll('input[name="automatically_fill_in"]').forEach(function(radio) {
        radio.addEventListener('change', updateRadioButtons);
      });
    });
  </script>
@endpush