@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">
        <!-- users list start -->
        <section class="app-user-list">
          <!-- list and filter start -->
          <div class="card">
            <div class="card-body border-bottom">
              <div class="card-header d-flex justify-content-between">
                <h4 class="card-title">{{ $title }}</h4>
                <input type="text" id="searchBlock" placeholder="კორპუსის ძებნა" class="form-control"
                  style="width: 300px;">
              </div>
            </div>
            <div class="card-datatable table-responsive p-1">
              <table class="dt-column-search table" id="blocksTable">
                <thead class="table-light">
                  <tr>
                    <th>კორპუსი</th>
                    <th>დომოფონი</th>
                    <th>სადარბაზოები</th>
                    <th>აქტიური მესიჯები</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($blocks as $block)
                    <tr>
                      <td>{{ $block->name }}</td>
                      <td>{{ $block->entrances->first()?->domophone_model ?? '' }}</td>
                      <td>{{ $block->entrances->count() }}</td>
                      <td>
                        <input type="checkbox" class="send-messages-toggle" data-id="{{ $block->id }}"
                          {{ $block->send_messages_to_domophone ? 'checked' : '' }}>
                      </td>
                      <td>
                        <a href="{{ route('blocks.entrances.edit', $block->id) }}"
                          class="btn btn-primary btn-sm">რედაქტირება</a>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          <!-- list and filter end -->
        </section>
        <!-- users list ends -->
      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const searchInput = document.getElementById('searchBlock');
      searchInput.addEventListener('keyup', function(e) {
        const term = e.target.value.toLowerCase();
        const rows = document.querySelectorAll('#blocksTable tbody tr');

        rows.forEach(row => {
          const blockName = row.querySelector('td:first-child').textContent.toLowerCase();
          if (blockName.includes(term)) {
            row.style.display = '';
          } else {
            row.style.display = 'none';
          }
        });
      });

      document.querySelectorAll('.send-messages-toggle').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
          const blockId = this.getAttribute('data-id');
          const sendMessages = this.checked;

          fetch(`/blocks/toggle-send-messagesa/${blockId}`, {
              method: 'POST',
              headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                send_messages_to_domophone: sendMessages
              })
            }).then(response => response.json())
            .then(data => {
              if (data.success) {
                alert('Status updated successfully');
              } else {
                alert('Failed to update status');
              }
            });
        });
      });
    });
  </script>
@endpush