@extends('user::_layouts.authenticated.layout')

@section('title', __('messages.global.edit_supported_animals'))

@section('content')
  <div class="row">

    <div class="col-lg-4">
    </div>

    <div class="col-lg-8 order-first">

      <div class="card card-user">
        <div class="card-header">
          <h5 class="card-title">{{ __('messages.global.edit_supported_animals') }}</h5>
        </div>
        <div class="card-body">
          <form method="post" action="{{ route('user.animals_management.update') }}">
            {{ csrf_field() }}

            {{-- Full Field --}}
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <div class="custom-control custom-switch mt-2">
                    <input type="checkbox" class="custom-control-input" id="full" name="full"
                      @if (old('full', $animalsManagement->full)) checked @endif>
                    <label class="custom-control-label" for="full">{{ __('messages.global.full') }}</label>
                  </div>
                  @if ($errors->has('full'))
                    <span class="small text-danger">{{ $errors->first('full') }}</span>
                  @endif
                </div>
              </div>
            </div>

            {{-- Content Field --}}
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="content">{{ __('messages.global.content') }}</label>
                  <textarea id="content" name="content" data-maxlength="1000" class="form-control" rows="3"
                    placeholder="{{ __('messages.global.content') }}">{{ old('content') ?? $animalsManagement->content }}</textarea>
                  <div data-parent-id="content" class="char-count-div text-right small text-muted">
                    <span data-parent-id="content" class="char-count-current">0</span>
                    <span data-parent-id="content" class="char-count-maximum">/ 1000</span>
                  </div>
                  @if ($errors->has('content'))
                    <span class="small text-danger">{{ $errors->first('content') }}</span>
                  @endif
                </div>
              </div>
            </div>

            {{-- Supported Animals Field --}}
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="supported_animals">{{ __('messages.global.supported_animals') }}</label>

                  @php
                    const ANIMAL_HIERARCHY = \Modules\Common\Entities\Animal::ANIMAL_SPECIES;

                    function generateCheckboxes($items, $parentId = null)
                    {
                        $supportedAnimals = auth()->user()->organization->animalsManagement->supported_animals ?? [];

                        $html = '<ul class="list-unstyled ml-4">';

                        foreach ($items as $key => $value) {
                            $isCategory = is_array($value);
                            $key = $isCategory ? $key : $value;
                            $keyTrans = __("messages.animal_species.$key");
                            $checked = in_array($key, $supportedAnimals);

                            $html .= '<li>';
                            $html .= '<div class="custom-control custom-checkbox">';
                            $html .=
                                '<input type="checkbox" class="custom-control-input" name="supported_animals[]" id="' .
                                $key .
                                '" value="' .
                                $key .
                                '" ' .
                                ($checked ? 'checked' : '') .
                                '>';
                            $html .= '<label class="custom-control-label" for="' . $key . '">' . $keyTrans . '</label>';
                            $html .= '</div>';

                            if ($isCategory) {
                                $html .= generateCheckboxes($value, $key);
                            }

                            $html .= '</li>';
                        }

                        $html .= '</ul>';
                        return $html;
                    }
                  @endphp
                  {!! generateCheckboxes(ANIMAL_HIERARCHY) !!}

                  @if ($errors->has('supported_animals'))
                    <span class="small text-danger">{{ $errors->first('supported_animals') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="row">
              <div class="update ml-auto mr-auto">
                <button type="submit" class="btn btn-primary btn-round">
                  {{ __('messages.global.update') }}
                </button>
              </div>

            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
@endsection

@section('js')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      function updateParentCheckbox(checkbox) {
        const parentLi = checkbox.closest('li').parentElement.closest('li');
        if (parentLi) {
          const parentCheckbox = parentLi.querySelector('.custom-control-input');
          const childCheckboxes = Array.from(parentLi.querySelectorAll('ul .custom-control-input'))
            .filter(child => child !== parentCheckbox);
          const anyChecked = childCheckboxes.some(child => child.checked);
          const allChecked = childCheckboxes.every(child => child.checked);

          parentCheckbox.checked = allChecked;
          parentCheckbox.indeterminate = !allChecked && anyChecked;
        }
      }

      function updateChildCheckboxes(checkbox, isChecked) {
        const childCheckboxes = checkbox.closest('li').querySelectorAll('ul .custom-control-input');
        childCheckboxes.forEach(childCheckbox => {
          childCheckbox.checked = isChecked;
        });
        childCheckboxes.forEach(childCheckbox => {
          updateParentCheckbox(childCheckbox);
        });
      }

      const checkboxes = document.querySelectorAll('.custom-control-input');

      checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
          if (this.closest('li').querySelector('ul')) {
            // Checkbox is a parent
            updateChildCheckboxes(this, this.checked);
          } else {
            // Checkbox is a child
            updateParentCheckbox(this);
          }
        });
      });

      // Initialize parent checkboxes
      checkboxes.forEach(function(checkbox) {
        if (checkbox.closest('li')) {
          updateParentCheckbox(checkbox);
        }
      });
    });
  </script>
@endsection