@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-body">
        <div class="modal fade" id="agreementModal" tabindex="-1" aria-labelledby="agreementModalLabel" aria-hidden="true"
          data-bs-backdrop="static" data-bs-keyboard="false">
          <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
              <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="agreementModalLabel">ხელშეკრულებაზე თანხმობა</h5>
              </div>
              <div class="modal-body">
                <div class="border rounded p-2 bg-light" style="white-space: pre-wrap; min-height: 160px;">
                  {{ $agreementText }}
                </div>
                <div class="alert alert-info mt-2 mb-0" role="alert">
                  გაცნობებთ, რომ ჩართული გაქვთ SMS მომსახურება. მომსახურების ყოველთვიური საკომისიო შეადგენს 0.50 ლარს. მომსახურების გაუქმება შესაძლებელია ვებგვერდზე ავტორიზაციის შემდეგ.
                </div>
                @if ($contracts->isNotEmpty())
                  <div class="mt-2" id="agreementContracts">
                    <p class="mb-1 text-muted">გთხოვთ, გაეცნოთ ხელშეკრულებას:</p>
                    @foreach ($contracts as $contract)
                      <a href="{{ route('agreement.contract', $contract) }}" target="_blank" rel="noopener"
                        class="btn btn-outline-primary btn-sm me-1 mb-1 js-agreement-contract"
                        data-contract-id="{{ $contract->id }}">
                        ხელშეკრულების ნახვა
                      </a>
                    @endforeach
                  </div>
                @endif
              </div>
              <div class="modal-footer flex-column align-items-stretch">
                <div id="agreementLockedNotice" class="alert alert-warning py-1 px-2 mb-2 w-100 text-center d-none" role="alert">
                  გთხოვთ, ჯერ გაეცანით ხელშეკრულებას
                </div>
                <div class="d-flex justify-content-end">
                  <form method="POST" action="{{ route('agreement.decline') }}" class="me-1">
                    @csrf
                    <button type="submit" class="btn btn-outline-danger js-agreement-action"
                      @if ($contracts->isNotEmpty()) data-locked="1" title="გაეცანით ხელშეკრულებას" @endif>უარყოფა</button>
                  </form>
                  <form method="POST" action="{{ route('agreement.accept') }}">
                    @csrf
                    <button type="submit" class="btn btn-success js-agreement-action"
                      @if ($contracts->isNotEmpty()) data-locked="1" title="გაეცანით ხელშეკრულებას" @endif>თანხმობა</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <style>
    body.agreement-modal-visible .modal-backdrop.show {
      opacity: 1;
      background-color: rgba(34, 41, 47, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
  </style>
@endpush

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var modalElement = document.getElementById('agreementModal');

      if (modalElement) {
        document.body.classList.add('agreement-modal-visible');
        new bootstrap.Modal(modalElement).show();
      }

      var contractLinks = document.querySelectorAll('.js-agreement-contract');

      if (contractLinks.length > 0) {
        var openedContracts = new Set();
        var actionButtons = document.querySelectorAll('.js-agreement-action');
        var lockedNotice = document.getElementById('agreementLockedNotice');

        contractLinks.forEach(function(link) {
          link.addEventListener('click', function() {
            openedContracts.add(link.getAttribute('data-contract-id'));

            if (openedContracts.size >= contractLinks.length) {
              actionButtons.forEach(function(button) {
                button.removeAttribute('data-locked');
                button.removeAttribute('title');
              });

              if (lockedNotice) {
                lockedNotice.classList.add('d-none');
              }
            }
          });
        });

        actionButtons.forEach(function(button) {
          button.addEventListener('click', function(event) {
            if (button.hasAttribute('data-locked')) {
              event.preventDefault();

              if (lockedNotice) {
                lockedNotice.classList.remove('d-none');
              }
            }
          });
        });
      }
    });
  </script>
@endpush