@extends('dashboard.layout.layout')

@section('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-header row"></div>
      <div class="content-body">
        <div class="container-fluid">
          <h2 class="mb-3">სადარბაზოების და შლაგბაუმების რედაქტირება</h2>
          <p class="mb-4" style="color: #5e5873; font-weight: 500;">{{ $block->name }}</p>

          <div class="row g-4">
            <!-- Left Panel: Domophone Management -->
            <div class="col-lg-6">
              <div class="card h-100 shadow-sm">
                <div class="card-header" style="background-color: #7367f0; color: white;">
                  <h4 class="mb-0 text-white"><i class="fa fa-phone me-2"></i>დომოფონები</h4>
                </div>
                <div class="card-body">
                  @php
                    $anyRTU = $block->entrances->contains(function ($entrance) {
                        return in_array($entrance->domophone_model, ['RTU5024', 'RTU5024-TEL']);
                    });
                  @endphp

                  <button type="button" class="btn btn-outline-primary mb-3 mt-1" id="add-entrance">
                    დამატება
                  </button>

                  <form action="{{ url('blocks/' . $block->id . '/entrances/update') }}" method="POST"
                    id="entrances-form">
                    @csrf
                    <div id="entrances-container">
                      @foreach ($block->entrances as $index => $entrance)
                        <div class="entrance mb-3 p-3 border rounded bg-light" id="entrance-{{ $index + 1 }}">
                          <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="form-group me-3 mb-0">
                              <label for="type-{{ $index + 1 }}" class="small text-muted mb-1">ტიპი:</label>
                              <select class="form-control form-control-sm" id="type-{{ $index + 1 }}"
                                name="entrances[{{ $index }}][type]"
                                onchange="updateTitle(this, {{ $index + 1 }})">
                                <option value="entrance"
                                  {{ ($entrance->type ?? 'entrance') == 'entrance' ? 'selected' : '' }}>სადარბაზო</option>
                                <option value="barrier"
                                  {{ ($entrance->type ?? 'entrance') == 'barrier' ? 'selected' : '' }}>შლაგბაუმი</option>
                              </select>
                            </div>
                            <h5 class="mb-0 text-primary" id="title-{{ $index + 1 }}">
                              {{ ($entrance->type ?? 'entrance') == 'barrier' ? 'შლაგბაუმი' : 'სადარბაზო' }}
                              {{ $index + 1 }}
                            </h5>
                          </div>

                          <div class="row g-2">
                            <div class="col-md-6">
                              <label for="phone-{{ $index + 1 }}" class="small text-muted mb-1">ტელეფონი:</label>
                              <input type="text" class="form-control form-control-sm" id="phone-{{ $index + 1 }}"
                                name="entrances[{{ $index }}][phone]" value="{{ $entrance->phone }}">
                            </div>
                            <div class="col-md-6">
                              <label for="phone-model-{{ $index + 1 }}" class="small text-muted mb-1">მოდელი:</label>
                              <select class="form-control form-control-sm domophone-model"
                                id="phone-model-{{ $index + 1 }}" name="entrances[{{ $index }}][phone_model]">
                                <option value="">არჩევა</option>
                                <option value="K6" {{ $entrance->domophone_model == 'K6' ? 'selected' : '' }}>K6
                                </option>
                                <option value="RTU5024" {{ $entrance->domophone_model == 'RTU5024' ? 'selected' : '' }}>
                                  RTU5024</option>
                                <option value="RTU5024-TEL"
                                  {{ $entrance->domophone_model == 'RTU5024-TEL' ? 'selected' : '' }}>RTU5024-TEL
                                </option>
                              </select>
                            </div>
                          </div>

                          <div class="mt-2">
                            <label for="comment-{{ $index + 1 }}" class="small text-muted mb-1">კომენტარი:</label>
                            <textarea class="form-control form-control-sm" id="comment-{{ $index + 1 }}"
                              name="entrances[{{ $index }}][comment]" rows="1">{{ $entrance->comment }}</textarea>
                          </div>

                          <button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-entrance">
                            წაშლა
                          </button>
                        </div>
                      @endforeach
                    </div>
                  </form>

                  <div class="border rounded p-3 mb-3 bg-white" id="block-settings-section"
                    style="display: {{ $anyRTU ? 'block' : 'none' }};">
                    <h5 class="mb-3 text-primary">
                      <i class="fa fa-cog me-1"></i> კორპუსის დომოფონის მონაცემები
                      @if ($settingsLocked)
                        <small class="text-danger">(დაბლოკილია)</small>
                      @endif
                    </h5>
                    @if ($settingsLocked)
                      <div class="alert alert-warning py-2 small">
                        პარამეტრები დაბლოკილია, რადგან კოდები უკვე გენერირებულია.
                      </div>
                    @endif

                    <form action="{{ url('blocks/' . $block->id . '/update-settings') }}" method="POST"
                      id="block-settings-form">
                      @csrf
                      <div class="row g-2">
                        <div class="col-md-6">
                          <label for="allowed-phones" class="small text-muted mb-1">ტელეფონების რაოდენობა:</label>
                          <select class="form-control form-control-sm" id="allowed-phones"
                            name="domophone_allowed_phones_per_user" {{ $settingsLocked ? 'disabled' : '' }}>
                            <option value="">არჩევა</option>
                            @for ($i = 1; $i <= 5; $i++)
                              <option value="{{ $i }}" @if (isset($block->domophone_allowed_phones_per_user) && $block->domophone_allowed_phones_per_user == $i) selected @endif>
                                {{ $i }}</option>
                            @endfor
                            <option value="20" @if (isset($block->domophone_allowed_phones_per_user) && $block->domophone_allowed_phones_per_user == 20) selected @endif>ყველა</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label for="phone-max-number" class="small text-muted mb-1">მაქს. რაოდენობა:</label>
                          <select class="form-control form-control-sm" id="phone-max-number"
                            name="domophone_phone_max_number" {{ $settingsLocked ? 'disabled' : '' }}>
                            <option value="">არჩევა</option>
                            @foreach ([200, 500, 999] as $value)
                              <option value="{{ $value }}" @if (isset($block->domophone_phone_max_number) && $block->domophone_phone_max_number == $value) selected @endif>
                                {{ $value }}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="card-footer bg-transparent border-top">
                  <button type="button" class="btn btn-primary" id="save-domophone">
                    <i class="fa fa-save me-1"></i> დომოფონების შენახვა
                  </button>
                </div>
              </div>
            </div>

            <!-- Right Panel: ZKTeco Door Configuration -->
            <div class="col-lg-6">
              <div class="card h-100 shadow-sm">
                <div class="card-header" style="background-color: #7367f0; color: white;">
                  <h4 class="mb-0 text-white"><i class="fa fa-microchip me-2"></i>ZKTeco კონფიგურაცია</h4>
                </div>
                <div class="card-body">
                  @if (!empty($block->device_endpoints))
                    @php
                      $deviceRelayRanges = collect($block->device_relay_ranges ?? []);
                    @endphp

                    @if ($deviceRelayRanges->isNotEmpty())
                      <div class="mb-3 mt-2 p-2 bg-light rounded">
                        <small class="text-muted">
                          <i class="fa fa-link me-1"></i>
                          @foreach ($deviceRelayRanges as $range)
                            @if (!empty($range['door_start']) && !empty($range['door_end']))
                              <div class="me-2 mb-1">
                                <strong>მოწყობილობა {{ $range['endpoint_index'] + 1 }}</strong>:
                                {{ $range['ip'] }} - {{ $range['port'] }} - {{ $range['model'] }} →
                                რელეები {{ $range['door_start'] }}-{{ $range['door_end'] }}
                              </div>
                            @endif
                          @endforeach
                        </small>
                      </div>
                    @endif

                    <form id="zkteco-doors-form">
                      @csrf
                      <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                          <thead style="background-color: #f3f2f7;">
                            <tr>
                              <th style="width: 60px;" class="text-center">რელე</th>
                              <th>რომელ მოწყობილობას ეკუთვნის</th>
                              <th>ტიპი</th>
                            </tr>
                          </thead>
                          <tbody>
                            @for ($door = 1; $door <= $block->zkteco_relay_count; $door++)
                              @php
                                $doorConfig = $zktecoDoors->firstWhere('door_number', $door);
                                $relayOwner = $deviceRelayRanges->first(function ($range) use ($door) {
                                    if (empty($range['door_start']) || empty($range['door_end'])) {
                                        return false;
                                    }

                                    return $door >= $range['door_start'] && $door <= $range['door_end'];
                                });
                                $localRelay = $relayOwner ? $door - $relayOwner['door_start'] + 1 : null;
                              @endphp
                              <tr>
                                <td class="text-center align-middle">
                                  <span class="badge"
                                    style="background-color: #7367f0; font-size: 0.9rem;">{{ $door }}</span>
                                </td>
                                <td class="align-middle">
                                  @if ($relayOwner)
                                    <small>
                                      <strong>მოწყობილობა {{ $relayOwner['endpoint_index'] + 1 }}</strong><br>
                                      {{ $relayOwner['ip'] }} - {{ $relayOwner['port'] }} -
                                      {{ $relayOwner['model'] }}<br>
                                      ლოკალური რელე: {{ $localRelay }} / {{ $relayOwner['relay_count'] }}
                                    </small>
                                  @else
                                    <small class="text-muted">—</small>
                                  @endif
                                </td>
                                <td>
                                  <select class="form-control form-control-sm zkteco-door-type"
                                    name="zkteco_doors[{{ $door }}][type]" data-door="{{ $door }}">
                                    <option value="entrance"
                                      {{ ($doorConfig?->type ?? 'entrance') == 'entrance' ? 'selected' : '' }}>
                                      სადარბაზო (ყოველთვის ჩართული)
                                    </option>
                                    <option value="elevator"
                                      {{ ($doorConfig?->type ?? 'entrance') == 'elevator' ? 'selected' : '' }}>
                                      ლიფტი (გადახდის მიხედვით)
                                    </option>
                                  </select>
                                </td>
                              </tr>
                            @endfor
                          </tbody>
                        </table>
                      </div>

                      <div class="alert py-2 mt-3 mb-0" style="background-color: #e8e6fc; border: 1px solid #7367f0;">
                        <small>
                          <i class="fa fa-info-circle me-1 text-primary"></i>
                          <strong>სადარბაზო:</strong> წვდომა ყველა მომხმარებელს ყოველთვის.<br>
                          <i class="fa fa-info-circle me-1 text-primary"></i>
                          <strong>ლიფტი:</strong> წვდომა მხოლოდ გადახდილ მომხმარებლებს.
                        </small>
                      </div>
                    </form>
                  @else
                    <div class="alert alert-warning mb-0">
                      <i class="fa fa-exclamation-triangle me-1"></i>
                      <strong>ZKTeco არ არის კონფიგურირებული.</strong><br>
                      <small>დაამატეთ მოწყობილობები კორპუსის პარამეტრებში.</small>
                    </div>
                  @endif
                </div>
                @if (!empty($block->device_endpoints))
                  <div class="card-footer bg-transparent border-top">
                    <button type="button" class="btn btn-primary" id="save-zkteco">
                      <i class="fa fa-save me-1"></i> ZKTeco შენახვა
                    </button>
                  </div>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const blockSettingsSection = document.getElementById('block-settings-section');
    const allowedPhonesSelect = document.getElementById('allowed-phones');
    const phoneMaxNumberSelect = document.getElementById('phone-max-number');
    const isLocked = '{{ $settingsLocked }}' === '1';

    function checkIfAnyRTUSelected() {
      const domophoneModels = document.querySelectorAll('.domophone-model');
      return Array.from(domophoneModels).some(select => ['RTU5024', 'RTU5024-TEL'].includes(select.value));
    }

    function toggleBlockSettingsVisibility() {
      if (checkIfAnyRTUSelected()) {
        blockSettingsSection.style.display = 'block';
        if (!isLocked) {
          allowedPhonesSelect.setAttribute('required', 'required');
          phoneMaxNumberSelect.setAttribute('required', 'required');
        }
      } else {
        blockSettingsSection.style.display = 'none';
        allowedPhonesSelect.removeAttribute('required');
        phoneMaxNumberSelect.removeAttribute('required');
      }
    }

    document.querySelectorAll('.domophone-model').forEach(select => {
      select.addEventListener('change', toggleBlockSettingsVisibility);
    });

    toggleBlockSettingsVisibility();

    const entrancesForm = document.getElementById('entrances-form');
    const blockSettingsForm = document.getElementById('block-settings-form');
    const zktecoDoorsForm = document.getElementById('zkteco-doors-form');

    async function postForm(url, form) {
      const formData = new FormData(form);
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
      });
      if (!response.ok) {
        throw new Error(`Request to ${url} failed with status ${response.status}`);
      }
      return response.json().catch(() => ({}));
    }

    async function generateCodes(blockId) {
      const getCSRFToken = () => {
        const metaToken = document.querySelector('meta[name="csrf-token"]');
        if (metaToken) return metaToken.getAttribute('content');
        const inputToken = document.querySelector('input[name="_token"]');
        if (inputToken) return inputToken.value;
        throw new Error('CSRF token not found');
      };

      const csrfToken = getCSRFToken();
      const res = await fetch(`/blocks/${blockId}/generate-codes`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({
          block_id: blockId,
          domophone_allowed_phones_per_user: allowedPhonesSelect.value,
          domophone_phone_max_number: phoneMaxNumberSelect.value
        })
      });

      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.message || 'Code generation failed');
      }

      const data = await res.json();
      if (!data.success) throw new Error(data.message || 'Error generating codes');
      return data;
    }

    // Domophone Save Button
    document.getElementById('save-domophone').addEventListener('click', async () => {
      try {
        await postForm(entrancesForm.action, entrancesForm);

        if (!isLocked && blockSettingsForm) {
          await postForm('/blocks/{{ $block->id }}/update-settings', blockSettingsForm);
        }

        if (checkIfAnyRTUSelected()) {
          new Notify({
            title: 'მუშაობა',
            text: 'კოდების გენერირება მიმდინარეობს...',
            status: 'success',
            autoclose: true,
            effect: 'slide',
            type: 2,
            autotimeout: 15000
          });
          await generateCodes({{ $block->id }});
        }

        alert('დომოფონები წარმატებით შენახულია!');
        window.location.reload();
      } catch (err) {
        console.error(err);
        alert('შეცდომა: ' + err.message);
      }
    });

    // ZKTeco Save Button
    const zktecoSaveBtn = document.getElementById('save-zkteco');
    if (zktecoSaveBtn) {
      zktecoSaveBtn.addEventListener('click', async () => {
        try {
          await postForm('/blocks/{{ $block->id }}/zkteco-doors/update', zktecoDoorsForm);
          alert('ZKTeco კონფიგურაცია წარმატებით შენახულია!');
          window.location.reload();
        } catch (err) {
          console.error(err);
          alert('შეცდომა: ' + err.message);
        }
      });
    }

    // Dynamic Add Entrance
    const addEntranceBtn = document.getElementById('add-entrance');
    const entrancesContainer = document.getElementById('entrances-container');
    let entranceCount = {{ $block->entrances->count() }};

    addEntranceBtn.addEventListener('click', () => {
      entranceCount++;
      const newIndex = entranceCount - 1;

      const newEntrance = document.createElement('div');
      newEntrance.classList.add('entrance', 'mb-3', 'p-3', 'border', 'rounded', 'bg-light');
      newEntrance.id = `entrance-${entranceCount}`;

      newEntrance.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="form-group me-3 mb-0">
            <label for="type-${entranceCount}" class="small text-muted mb-1">ტიპი:</label>
            <select class="form-control form-control-sm" id="type-${entranceCount}" name="entrances[${newIndex}][type]" onchange="updateTitle(this, ${entranceCount})">
              <option value="entrance">სადარბაზო</option>
              <option value="barrier">შლაგბაუმი</option>
            </select>
          </div>
          <h5 class="mb-0 text-primary" id="title-${entranceCount}">სადარბაზო ${entranceCount}</h5>
        </div>
        <div class="row g-2">
          <div class="col-md-6">
            <label for="phone-${entranceCount}" class="small text-muted mb-1">ტელეფონი:</label>
            <input type="text" class="form-control form-control-sm" id="phone-${entranceCount}" name="entrances[${newIndex}][phone]" value="">
          </div>
          <div class="col-md-6">
            <label for="phone-model-${entranceCount}" class="small text-muted mb-1">მოდელი:</label>
            <select class="form-control form-control-sm domophone-model" id="phone-model-${entranceCount}" name="entrances[${newIndex}][phone_model]">
              <option value="">არჩევა</option>
              <option value="K6">K6</option>
              <option value="RTU5024">RTU5024</option>
              <option value="RTU5024-TEL">RTU5024-TEL</option>
            </select>
          </div>
        </div>
        <div class="mt-2">
          <label for="comment-${entranceCount}" class="small text-muted mb-1">კომენტარი:</label>
          <textarea class="form-control form-control-sm" id="comment-${entranceCount}" name="entrances[${newIndex}][comment]" rows="1"></textarea>
        </div>
        <button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-entrance"><i class="fa fa-trash me-1"></i>წაშლა</button>
      `;

      entrancesContainer.appendChild(newEntrance);

      const newSelect = newEntrance.querySelector('.domophone-model');
      newSelect.addEventListener('change', toggleBlockSettingsVisibility);

      const removeBtn = newEntrance.querySelector('.remove-entrance');
      removeBtn.addEventListener('click', () => {
        newEntrance.remove();
        toggleBlockSettingsVisibility();
      });

      toggleBlockSettingsVisibility();
    });

    document.querySelectorAll('.remove-entrance').forEach(btn => {
      btn.addEventListener('click', () => {
        btn.closest('.entrance').remove();
        toggleBlockSettingsVisibility();
      });
    });

    function updateTitle(select, index) {
      const title = document.getElementById(`title-${index}`);
      title.textContent = select.value === 'barrier' ? `შლაგბაუმი ${index}` : `სადარბაზო ${index}`;
    }

    function updateBarrierPhones(select) {
      const entrance = select.closest('.entrance');
      if (!entrance) return;
      const checkboxes = entrance.querySelectorAll('.barrier-phone-checkbox');
      const isBarrier = select.value === 'barrier';
      checkboxes.forEach(checkbox => {
        checkbox.disabled = !isBarrier;
      });
    }

    document.querySelectorAll('[id^="type-"]').forEach(select => {
      select.addEventListener('change', function() {
        updateTitle(this, this.id.split('-')[1]);
        updateBarrierPhones(this);
      });
    });

    document.querySelectorAll('[id^="type-"]').forEach(select => {
      updateBarrierPhones(select);
    });
  </script>
@endsection