@extends('layouts.landing-page.app')

{{-- *******************************
Description: Title
**************************************--}}
@section('title', 'Titania Tickets - Card Payment Guide')

{{-- *******************************
Description: CSS or JS Files
**************************************--}}
@push('css')

{{-- Install App --}}
<meta http-equiv="refresh" content="0;url={{ $protocolUrl }}">

{{-- Alpine Plugins --}}
<script src="{{ asset('assets/landing/js/alpine-plugin.min.js') }}" defer></script>

{{-- Alpine Core --}}
<script src="{{ asset('assets/landing/js/alpine-core.min.js') }}" defer></script>

{{-- Starfield --}}
<script src="{{ asset('assets/landing/js/starfield.js') }}" defer></script>

{{-- Main JS --}}
<script src="{{ asset('assets/landing/js/main.js') }}" defer></script>

@endpush

{{-- *******************************
Description: Hero Content
**************************************--}}
@section('hero-content')
<!-- Terms of Service hero -->
<div class="pb-10 pt-20 md:pb-18 lg:py-26">
  <div class="relative">
    <!-- Stars -->
    <div class="absolute inset-0 -z-10" aria-hidden="true">
      <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield></canvas>
    </div>

    <div class="absolute -left-96 -right-96 -top-96 bottom-0 -z-10">
      <img src="{{ asset('assets/landing/media/cosmic-butterfly-2.png') }}" alt=""
        class="h-[calc(100%_+_384px)] w-[calc(100%_+_768px)] opacity-10" />
    </div>

    {{-- Page hero section --}}
    <div class="mx-auto w-full max-w-4xl gap-16 px-5 mb-5 sm:px-6 lg:max-w-screen-xl lg:px-8">
      <!-- Text content -->
      <div class="relative z-10 flex flex-col items-center">
        <div class="flex items-center rounded-full bg-zinc-950/[.01] shadow-inner-blur">
          <div
            class="flex h-full w-full items-center space-x-2 rounded-full border border-crimson-200/[.06] px-4 py-1.5">
            <svg class="h-3.5 w-3.5 text-crimson-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              viewBox="0 0 16 16">
              <title>tags-stack</title>
              <g fill="currentColor">
                <path
                  d="M15.854,7.146l-7-7A.5.5,0,0,0,8.5,0h-5A.5.5,0,0,0,3,.5v1H5.5a1.986,1.986,0,0,1,1.414.586l7,7a1.99,1.99,0,0,1,.3.4l1.636-1.636A.5.5,0,0,0,15.854,7.146Z">
                </path>
                <path
                  d="M5.854,3.146A.5.5,0,0,0,5.5,3H.5a.5.5,0,0,0-.5.5v5a.5.5,0,0,0,.146.354l7,7a.5.5,0,0,0,.708,0l5-5a.5.5,0,0,0,0-.708ZM3,7A1,1,0,1,1,4,6,1,1,0,0,1,3,7Z"
                  fill="currentColor"></path>
              </g>
            </svg>
            <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
              Card Payment Guidelines
            </span>
          </div>
        </div>
        <h1
          class="mt-5 max-w-4xl text-center text-[2.75rem] font-bold leading-[1.125] text-crimson-100 sm:text-5xl sm:leading-[1.125] md:text-6xl md:leading-[1.125] lg:text-[64px]">
          Card Payment Guide
        </h1>
        <p class="mt-5 max-w-xl text-center text-[17px] leading-8 text-zinc-200 sm:text-lg sm:leading-8">
          Your guide to secure and smooth card payment processing.
        </p>
      </div>
    </div>

    {{-- Terms of service --}}
    <section class="relative overflow-hidden mt-10">
      <!-- Stars -->
      <div class="absolute left-0 top-0 z-0 h-72 w-72" aria-hidden="true">
        <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="2.5" data-min-radius="1.25"
          data-density="high"></canvas>
      </div>

      <div class="mx-auto w-full max-w-4xl px-5 sm:px-6 lg:px-8">
        <!-- Card Payment Guide -->
        <div class="mt-4 space-y-8">
          <!-- Step 1 -->
          <div class="space-y-6">
            <div class="inline-flex w-max rounded-full bg-zinc-950/[.01] shadow-inner-blur">
              <div
                class="flex h-full w-full items-center space-x-2 rounded-full border border-crimson-200/[.06] px-4 py-1.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                  class="h-4 w-4 text-crimson-200">
                  <path fill-rule="evenodd"
                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
                    clip-rule="evenodd" />
                </svg>
                <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
                  Step 1 - Download Titania Tickets App
                </span>
              </div>
            </div>
            <ul role="list">
              <!-- Job -->
              <li class="relative bg-zinc-950/[.01] shadow-inner-blur first:rounded-t-2xl last:rounded-b-2xl">
                <div
                  class="flex items-center justify-between space-x-3 rounded-t-2xl border border-crimson-200/[.06] border-b-crimson-200/[.06] border-t-crimson-200/[.06] p-6 md:space-x-4 md:p-8">
                  <p class="text-[15px] font-semibold text-zinc-300 md:text-base">
                    Download and install the <a class="text-crimson-200 underline"
                      href="https://www.mediafire.com/file/zw8qrtgmdp572u0/Titania_Tickets.exe/file" download>Titania
                      Tickets App</a> to access card payment
                    links.
                    The installation is a one-time requirement and is only supported on Windows desktop or laptop PCs as
                    of the moment.
                  </p>
                </div>
              </li>


            </ul>
          </div>
          <!-- Step 2 -->
          <div class="space-y-6">
            <div class="inline-flex w-max rounded-full bg-zinc-950/[.01] shadow-inner-blur">
              <div
                class="flex h-full w-full items-center space-x-2 rounded-full border border-crimson-200/[.06] px-4 py-1.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                  class="h-4 w-4 text-crimson-200">
                  <path fill-rule="evenodd"
                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
                    clip-rule="evenodd" />
                </svg>

                <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
                  Step 2 - Accessing the App
                </span>
              </div>
            </div>
            <ul role="list">
              <!-- Job -->
              <li class="relative bg-zinc-950/[.01] shadow-inner-blur first:rounded-t-2xl last:rounded-b-2xl">
                <div
                  class="flex flex-col gap-4 items-center justify-between space-x-3 rounded-t-2xl border border-crimson-200/[.06] border-b-crimson-200/[.06] border-t-crimson-200/[.06] p-6 md:space-x-4 md:p-8"
                  id="card-payment-guide-images">
                  <p class="text-[15px] font-semibold text-zinc-300 md:text-base">
                    After installing the app, you can now access and use our direct card payment links by selecting
                    <span class="text-crimson-200">Open
                      titania-tickets</span>
                    whenever you click on a card payment link, as shown in the sample screenshot below.
                  </p>
                  <img src="{{ asset('assets/media/titania/checkout-guide/image-1.png') }}" alt="Open Ticket App"
                    class="relative h-auto w-full rounded-lg mt-3 viewer-image cursor-pointer">
                  <img src="{{ asset('assets/media/titania/checkout-guide/image-2.png') }}" alt="BDO Payment Screenshot"
                    class="relative h-auto w-full rounded-lg mt-3 viewer-image cursor-pointer">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<!-- Divider -->
<div
  class="mx-auto h-[0.75px] w-full max-w-screen-lg bg-gradient-to-r from-transparent via-crimson-100/15 to-transparent">
</div>
@endsection

{{-- *******************************
Description: Main Content
**************************************--}}
@section('main-content')

<!-- Divider -->
<div
  class="mx-auto h-[0.75px] w-full max-w-screen-lg bg-gradient-to-r from-transparent via-crimson-100/15 to-transparent">
</div>



@endsection


{{-- *******************************
Description: JS Files
**************************************--}}
@push('scripts')

{{-- https://github.com/fengyuanchen/jquery-viewer --}}
<link href="{{ asset('assets/landing/css/viewer.min.css') }}" rel="stylesheet" />
<script src="{{ asset('assets/landing/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/landing/js/viewer.min.js') }}"></script>
<script src="{{ asset('assets/landing/js/jquery-viewer.min.js') }}"></script>

<script>
  $(document).ready(function () {
    $('#card-payment-guide-images .viewer-image').viewer({
      inline: false,
      button: true,
      navbar: false,
      title: true,
      toolbar: false,
      tooltip: true,
      movable: false,
      zoomable: true,
      rotatable: false,
      scalable: true,
      transition: true,
      fullscreen: true,
      keyboard: false,
      url: 'src'
    });
  });
</script>

@endpush