@extends('dashboard.layout.layout')

@section('content')
  <!-- BEGIN: Content-->
  <div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-body">
        <h2>{{ $block->name }}</h2>
        <form id="entrancesForm" class="mt-4" action="{{ route('blocks.phones.update', $block->id) }}" method="post">
          @csrf
          <div class="entrances-container">
            @forelse($block->entrances as $index => $entrance)
              <h2>სადარბაზო {{ $index + 1 }}</h2>
              <div class="p-3 border mb-3">
                <div class="input-group mb-3">
                  <input type="text" name="entrances[{{ $index + 1 }}][phone]" class="form-control"
                    style="max-width: 400px;" placeholder="შეიყვანეთ პირველი სადარბაზოს ნომერი"
                    aria-label="Entrance {{ $index + 1 }}" value="{{ $entrance->phone }}">
                </div>
                <select name="entrances[{{ $index + 1 }}][domophone_model]" class="form-select mb-3"
                  style="max-width: 400px">
                  <option value="K6" @if ($entrance->domophone_model == 'K6') selected @endif>K6</option>
                  <option value="RTU5024" @if ($entrance->domophone_model == 'RTU5024') selected @endif>RTU5024</option>
                  <option value="RTU5024-TEL" @if ($entrance->domophone_model == 'RTU5024-TEL') selected @endif>RTU5024-TEL</option>
                  <option value="Eldes 320" @if ($entrance->domophone_model == 'Eldes 320') selected @endif>Eldes 320</option>
                </select>
                <textarea style="max-width: 400px" name="entrances[{{ $index + 1 }}][comment]" class="form-control"
                  placeholder="კომენტარი">{{ $entrance->comment }}</textarea>
              </div>
            @empty
              <h2>სადარბაზო 1</h2>
              <div class="p-3 border mb-3">
                <!-- Initial input if no entrances exist -->
                <div class="input-group mb-3">
                  <input type="text" name="entrances[1][phone]" class="form-control" style="max-width: 400px;"
                    placeholder="შეიყვანეთ პირველი სადარბაზოს ნომერი" aria-label="Entrance 1">
                </div>
                <select style="max-width: 400px" name="entrances[1][domophone_model]" class="form-select mb-3">
                  <option value="K6">K6</option>
                  <option value="RTU5024">RTU5024</option>
                  <option value="RTU5024-TEL">RTU5024-TEL</option>
                  <option value="Eldes 320">Eldes 320</option>
                </select>
                <textarea style="max-width: 400px" name="entrances[1][comment]" class="form-control" placeholder="კომენტარი"></textarea>
              </div>
            @endforelse
          </div>
          <div class="mt-2 mb-3">
            <button class="btn btn-outline-secondary" type="button" id="addEntranceButton" onclick="addEntrance()">
              სადარბაზოს დამატება</button>
          </div>
          <button type="submit" class="btn btn-primary mt-3">შენახვა</button>
        </form>
      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let entranceCount = {{ $block->entrances()->count() ? $block->entrances()->count() : 1 }};

      window.addEntrance = function() {
        entranceCount++;
        let title = document.createElement('h2');
        title.textContent = `სადარბაზო ${entranceCount}`;
        
        let entranceContainer = document.createElement('div');
        entranceContainer.className = 'p-3 border mb-3';

        entranceContainer.innerHTML = `
          <div class="input-group mb-3">
            <input type="text" name="entrances[${entranceCount}][phone]" class="form-control" style="max-width: 400px;" placeholder="შეიყვანეთ ნომერი მე-${entranceCount} სადარბაზოსთვის" aria-label="Entrance ${entranceCount}">
          </div>
          <select style="max-width: 400px" name="entrances[${entranceCount}][domophone_model]" class="form-select mb-3">
            <option value="K6">K6</option>
            <option value="RTU5024">RTU5024</option>
            <option value="RTU5024-TEL">RTU5024-TEL</option>
            <option value="Eldes 320">Eldes 320</option>
          </select>
          <textarea style="max-width: 400px" name="entrances[${entranceCount}][comment]" class="form-control" placeholder="კომენტარი"></textarea>
        `;

        document.querySelector('.entrances-container').appendChild(title);
        document.querySelector('.entrances-container').appendChild(entranceContainer);
      };
    });
  </script>
@endpush