@php
  // Get accounts from user if not provided
  if (!isset($accounts)) {
      $accounts = $user->accounts;
  }

  // Ensure accounts is a collection
  if (!($accounts instanceof \Illuminate\Support\Collection)) {
      $accounts = collect($accounts);
  }

  $account = $accounts->first();
  $allSameModel = $user->hasDifferentDomophoneModels();
  $hasRegularGsmDomophoneEntrance = $user->has_regular_gsm_domophone_entrance;

  // Process assigned codes for each account
  if ($account) {
      for ($index = 1; $index <= 20; $index++) {
        $account->{'assignedCode_' . $index} = null;

        if ($hasRegularGsmDomophoneEntrance) {
          $assignedCode = \Illuminate\Support\Facades\DB::table('user_phone_codes')
            ->where('user_id', $user->id)
            ->where('phone', $account->{'account_' . $index})
            ->first();

          if ($assignedCode) {
            $account->{'assignedCode_' . $index} = $assignedCode->code;
          }
          }
      }
  }

  // If no accounts exist, create an empty account object for the form
  if ($accounts->isEmpty()) {
      $account = new \App\Models\UserAccount();
      $accounts = collect([$account]);
  }

  // Set default title if not provided
  if (!isset($title)) {
      $title = $user->name . ' ოჯახის წევრები';
  }

  // Set default back route if not provided
  if (!isset($backRoute)) {
      $backRoute = route('users.index');
  }

  // Calculate initial visible inputs (minimum 5, or more if accounts exist)
  $initialVisibleInputs = 5;
  if ($account) {
      for ($i = 6; $i <= 20; $i++) {
          if (!empty($account->{'account_' . $i})) {
              $initialVisibleInputs = $i;
          }
      }
  }
@endphp

<div class="card">
  <div class="card-body border-bottom">
    <h4 class="card-title">{{ $title }}</h4>
  </div>
  <div class="container pb-2 pt-2">
    <form method="POST" class="row"
      @can('users.accountsAdd') action="{{ route('users.accountsAdd', $user->id) }}" @endcan>
      @can('users.accountsAdd')
        @csrf
      @endcan
      <div id="accounts-container" class="row">
        @foreach ($accounts as $account)
          @for ($i = 1; $i <= $initialVisibleInputs; $i++)
            <div class="col-md-4 mb-2 account-input-wrapper" data-index="{{ $i }}">
              <label for="account_{{ $i }}" class="form-label">ნომერი {{ $i }}</label>
              <div class="input-group">
                <input value="{{ $account['account_' . $i] }}" type="text" class="form-control phone-input"
                  name="account_{{ $i }}" id="account_{{ $i }}"
                  placeholder="ნომერი {{ $i }}" data-index="{{ $i }}">
                @if (($account['assignedCode_' . $i] ?? null) && $hasRegularGsmDomophoneEntrance)
                  <span class="input-group-text"
                    style="{{ $allSameModel ? '' : 'color: red' }}">{{ $account['assignedCode_' . $i] }}</span>
                @elseif ($hasRegularGsmDomophoneEntrance && isset($user->block()->domophone_allowed_phones_per_user) &&
                        $user->block()->domophone_allowed_phones_per_user > 0 &&
                        $i > $user->block()->domophone_allowed_phones_per_user &&
                        $i <= 6 &&
                        $user->block()->domophone_allowed_phones_per_user != 20)
                  <button type="button" class="btn btn-outline-secondary" id="generate-button-{{ $i }}"
                    onclick="generateCode({{ $i }})">+</button>
                @endif
              </div>
            </div>
          @endfor
        @endforeach
      </div>

      @can('users.accountsAdd')
        @if (!$user->has_at_least_one_k6_domophone)
          <div class="col-12 mb-2" id="add-phone-container">
            <button type="button" class="btn btn-outline-primary" id="add-phone-btn" title="ახალი ნომრის დამატება">
              <i class="ti ti-plus"></i> ნომრის დამატება
            </button>
          </div>
        @endif
      @endcan

      <div class="col-12 text-end">
        @can('users.accountsAdd')
          <button type="submit" class="btn btn-success">შენახვა</button>
        @endcan
        <a href="{{ $backRoute }}" class="btn btn-danger">უკან</a>
      </div>
    </form>
  </div>
</div>

@push('scripts')
  <script>
    const maxAccounts = 20;
    let currentAccountCount = {{ $initialVisibleInputs }};

    // Function to generate code for accounts
    function generateCode(accountIndex) {
      const url = "{{ route('users.accountsGenerateCode', ['userId' => $user->id, 'accountIndex' => '']) }}" +
        accountIndex;
      fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
          }
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // Replace the button with the generated code
            const button = document.getElementById(`generate-button-${accountIndex}`);
            const codeSpan = document.createElement('span');
            codeSpan.className = 'input-group-text';
            codeSpan.textContent = data.code;
            button.parentNode.replaceChild(codeSpan, button);
          } else {
            alert('ჩაწერეთ ნომერი. თუ ჩაწერილი გაქვთ ჯერ დააჭირეთ შენახვას');
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }

    function addPhoneInput() {
      if (currentAccountCount >= maxAccounts) {
        return;
      }

      currentAccountCount++;
      const index = currentAccountCount;
      const container = document.getElementById('accounts-container');

      const newInput = document.createElement('div');
      newInput.className = 'col-md-4 mb-2 account-input-wrapper';
      newInput.dataset.index = index;
      newInput.innerHTML = `
        <label for="account_${index}" class="form-label">ნომერი ${index}</label>
        <div class="input-group">
          <input type="text" class="form-control phone-input"
            name="account_${index}" id="account_${index}"
            placeholder="ნომერი ${index}" data-index="${index}">
        </div>
      `;

      container.appendChild(newInput);

      // Focus the new input
      const newPhoneInput = newInput.querySelector('.phone-input');
      newPhoneInput.focus();

      // Hide add button if max reached
      if (currentAccountCount >= maxAccounts) {
        const addContainer = document.getElementById('add-phone-container');
        if (addContainer) {
          addContainer.style.display = 'none';
        }
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      // Add phone button click handler
      const addPhoneBtn = document.getElementById('add-phone-btn');
      if (addPhoneBtn) {
        addPhoneBtn.addEventListener('click', addPhoneInput);
      }

      // Hide add button if already at max
      if (currentAccountCount >= maxAccounts) {
        const addContainer = document.getElementById('add-phone-container');
        if (addContainer) {
          addContainer.style.display = 'none';
        }
      }

    });
  </script>
@endpush