@extends('layouts.errors.app')

{{-- *******************************
Description: Title
**************************************--}}
@section('title', 'Titania Tickets - Internal Server Error')

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

{{-- 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>


@endpush


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

<!-- Server Error content -->
<div class="relative mx-auto w-full max-w-screen-xl gap-16 px-5 py-20 sm:px-6 lg:px-8 lg:pt-28">
  <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
    class="absolute -bottom-3/4 left-1/2 h-auto max-w-3xl -translate-x-1/2 object-contain opacity-90 sm:max-w-4xl md:-bottom-full lg:-bottom-[135%] lg:max-w-7xl" />
  <!-- 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-4 w-4 text-crimson-200" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
          viewBox="0 0 18 18">
          <title>ufo</title>
          <g fill="currentColor">
            <circle cx="14.75" cy="1.75" r=".75"></circle>
            <path
              d="M3.869,1.894l-.947-.315-.315-.947c-.103-.306-.609-.306-.712,0l-.315,.947-.947,.315c-.153,.051-.256,.194-.256,.356s.104,.305,.256,.356l.947,.315,.315,.947c.051,.153,.194,.256,.356,.256s.305-.104,.356-.256l.315-.947,.947-.315c.153-.051,.256-.194,.256-.356s-.104-.305-.256-.356Z">
            </path>
            <path
              d="M17.054,5.256c-.232-1.36-2.349-1.747-4.612-1.721-.653-1.501-2.143-2.51-3.817-2.51-2.234,0-4.048,1.771-4.148,3.981-.323,.123-.638,.249-.921,.382-1.666,.783-2.431,1.646-2.274,2.563,.243,1.424,2.511,1.73,4.41,1.73,.435,0,.85-.016,1.218-.039,.414-.025,.728-.38,.703-.794s-.374-.738-.794-.703c-2.479,.149-3.737-.22-4.029-.453,.282-.469,2.244-1.66,6.166-2.329,3.921-.671,6.169-.198,6.59,.151-.211,.345-1.4,1.18-4.097,1.887-.401,.105-.641,.515-.536,.916,.104,.4,.516,.638,.916,.536,1.681-.44,5.554-1.672,5.225-3.595Z"
              fill="currentColor"></path>
            <path
              d="M16.902,15.88L11.675,6.67c-.289-.551-1.074-.692-2.856-.38-2.016,.352-2.313,.776-2.411,.916-.07,.1-.13,.266-.146,.396l-1.006,8.561c-.049,.411,.246,.784,.657,.832,.03,.004,.059,.005,.088,.005,.375,0,.699-.281,.744-.663l.915-7.781c.366-.005,.856-.048,1.527-.166,.57-.1,1.21-.275,1.529-.374l4.883,8.604c.138,.244,.392,.38,.653,.38,.125,0,.253-.031,.37-.098,.36-.205,.487-.662,.282-1.022Z">
            </path>
          </g>
        </svg>

        <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
          Internal Server Error
        </span>
      </div>
    </div>
    <h1 class="mt-5 max-w-5xl text-center text-8xl font-bold tracking-wide text-crimson-100 md:text-9xl">
      5<span class="relative inline-block text-nowrap">
        <span
          class="relative z-10 bg-gradient-to-b from-crimson-400 via-crimson-400 to-crimson-500 bg-clip-text text-transparent">0
        </span>
        <span class="absolute -top-0.5 left-0 -z-10 text-crimson-300">0</span> </span>0
    </h1>
    <p class="mt-5 max-w-xl text-center text-lg leading-8 text-zinc-200">
      Apologies! We've encountered an unexpected issue. Rest assured, our team is addressing it as quickly as possible.
      Please
      try refreshing the page later. Thank you for bearing with us
    </p>
    <div class="mt-8 flex items-center justify-center space-x-3 sm:space-x-5">

      @guest
      <a href="{{ route('landing-page.home') }}" id="top-cta"
        class="group relative inline-flex items-center rounded-lg text-crimson-100 bg-crimson-500 px-4 py-2.5 text-sm font-semibold  antialiased  outline-none after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:opacity-0 shadow-btn-secondary after:shadow-btn-secondary-hover after:transition-all after:duration-200 after:content-[''] hover:after:opacity-100 sm:px-5 sm:py-3 sm:text-[15px]">
        <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
          <span>Go back home</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4">
            <path fill-rule="evenodd"
              d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd" />
          </svg>
        </div>
      </a>
      @endguest
      @auth
      <a href="{{ auth()->user()->hasRole('admin') ? route('dashboard.admin.home') : route('dashboard.user.home') }}"
        id="top-cta"
        class="group relative inline-flex items-center rounded-lg text-crimson-100 bg-crimson-500 px-4 py-2.5 text-sm font-semibold  antialiased  outline-none after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:opacity-0 shadow-btn-secondary after:shadow-btn-secondary-hover after:transition-all after:duration-200 after:content-[''] hover:after:opacity-100 sm:px-5 sm:py-3 sm:text-[15px]">
        <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
          <span>Go back home</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4">
            <path fill-rule="evenodd"
              d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd" />
          </svg>
        </div>
      </a>
      @endauth


    </div>
  </div>
</div>

@endsection

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

@endpush