<dialog id="contract-agreement-dialog" class="relative">
    <div>
        <a 
            href="#" 
            class="link-default absolute"
            style="right: 1em;" 
            onclick="
                event.preventDefault();
                document.getElementById('contract-agreement-dialog').close()
                document.body.classList.remove('overflow-hidden')
            ">
                <svg style="transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
            </a>
    </div>
  <div style="width: 90%;margin: auto;">
    @include('orders.cards.modal-content')

    <br><br>
    <div class="flex justify-center">
        <button 
            type="button"
            class="border inline-flex items-center justify-center appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 relative disabled:cursor-not-allowed shadow h-9 px-3 bg-primary-500 border-primary-500 hover:enabled:bg-primary-400 hover:enabled:border-primary-400 text-white"
            onclick="
                event.preventDefault();
                document.getElementById('contract-agreement-dialog').close()
                document.body.classList.remove('overflow-hidden')
            "
            >
            <span class="flex items-center gap-1">
              {{ __('I have read the contract') }}
            </span>
          </button>
    </div>
  </div>
</dialog>

<p>
    <div class="flex">
        <div class="flex-row" style="width: 3em;">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="rgba(var(--colors-primary-500))">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
        </div>
        <div class="flex-row w-full">
            <a 
                href="#" 
                class="link-default" 
                onclick="
                    event.preventDefault();
                    document.getElementById('contract-agreement-dialog').showModal()
                    document.body.classList.add('overflow-hidden')
                ">
                {{ __('I accept terms of contract') }} ({{__('Click to read')}})
            </a>
        </div>
    </div>
</p>
