@php
  $allSameModel = $user->hasDifferentDomophoneModels();

  if (!isset($accounts)) {
      $accounts = $user->accounts;
  }

  if (!($accounts instanceof \Illuminate\Support\Collection)) {
      $accounts = collect($accounts);
  }

  $account = $accounts->first();

  if (!$account) {
      $account = new \App\Models\UserAccount();
      $accounts = collect([$account]);
  }

  $accountPhones = [];
  for ($i = 1; $i <= 20; $i++) {
      $phone = $account->{'account_' . $i} ?? null;
      if (!empty($phone)) {
          $accountPhones[] = preg_replace('/\s+/', '', trim($phone));
      }
  }

  $storedBarrierPhones = $account->barrier_phones ?? [];
  $storedBarrierPhones = array_values(array_filter($storedBarrierPhones, fn($phone) => !empty($phone)));

  $barrierInputPhones = $storedBarrierPhones;

  $assignedCodesByPhone = \Illuminate\Support\Facades\DB::table('user_phone_codes')
      ->where('user_id', $user->id)
      ->get()
      ->mapWithKeys(function ($row) {
          $normalized = preg_replace('/\s+/', '', trim((string) $row->phone));

          return [$normalized => $row->code];
      })
      ->toArray();

  if (!isset($title)) {
      $title = $user->name . ' შლაგბაუმის ნომრები';
  }

  if (!isset($backRoute)) {
      $backRoute = route('users.index');
  }

  $initialVisibleInputs = max(5, count($barrierInputPhones));
  $initialVisibleInputs = min(20, $initialVisibleInputs);
@endphp

<div class="card mt-2">
  <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.accountsBarrierAdd', $user->id) }}" @endcan>
      @can('users.accountsAdd')
        @csrf
      @endcan

      <div id="barrier-accounts-container" class="row">
        @for ($i = 1; $i <= $initialVisibleInputs; $i++)
          <div class="col-md-4 mb-2 barrier-account-input-wrapper" data-index="{{ $i }}">
            <label for="barrier_phone_{{ $i }}" class="form-label">შლაგბაუმის ნომერი
              {{ $i }}</label>
            @php
              $barrierPhone = $barrierInputPhones[$i - 1] ?? '';
              $normalizedBarrierPhone = preg_replace('/\s+/', '', trim((string) $barrierPhone));
              $assignedCode = $assignedCodesByPhone[$normalizedBarrierPhone] ?? null;
            @endphp
            <div class="input-group">
              <input value="{{ $barrierPhone }}" type="text" class="form-control"
                name="barrier_phone_{{ $i }}" id="barrier_phone_{{ $i }}"
                placeholder="შლაგბაუმის ნომერი {{ $i }}" data-index="{{ $i }}">
              @if ($assignedCode)
                <span class="input-group-text"
                  style="{{ $allSameModel ? '' : 'color: red' }}">{{ $assignedCode }}</span>
              @endif
            </div>
          </div>
        @endfor
      </div>

      @can('users.accountsAdd')
        <div class="col-12 mb-2" id="add-barrier-phone-container">
          <button type="button" class="btn btn-outline-primary" id="add-barrier-phone-btn"
            title="ახალი შლაგბაუმის ნომრის დამატება">
            <i class="ti ti-plus"></i> შლაგბაუმის ნომრის დამატება
          </button>
        </div>
      @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 barrierMaxAccounts = 20;
    let currentBarrierAccountCount = {{ $initialVisibleInputs }};

    function addBarrierPhoneInput() {
      if (currentBarrierAccountCount >= barrierMaxAccounts) {
        return;
      }

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

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

      container.appendChild(newInput);

      const newBarrierInput = newInput.querySelector('input');
      newBarrierInput.focus();

      if (currentBarrierAccountCount >= barrierMaxAccounts) {
        const addContainer = document.getElementById('add-barrier-phone-container');
        if (addContainer) {
          addContainer.style.display = 'none';
        }
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      const addBarrierPhoneBtn = document.getElementById('add-barrier-phone-btn');
      if (addBarrierPhoneBtn) {
        addBarrierPhoneBtn.addEventListener('click', addBarrierPhoneInput);
      }

      if (currentBarrierAccountCount >= barrierMaxAccounts) {
        const addContainer = document.getElementById('add-barrier-phone-container');
        if (addContainer) {
          addContainer.style.display = 'none';
        }
      }
    });
  </script>
@endpush