@extends('frontend.layouts.app-manila-other')

@section('title')
Grupo Alegria | Alegria Manila
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Grupo Alegria | Alegria Manila" />
<meta property="og:url"             content="" />
<meta property="og:site_name"       content="Grupo Alegria" />
<meta property="og:image"           content="{{ asset('resources/web_thumbnail.jpg') }}" />
<meta property="og:thumbnail"       content="{{ asset('resources/web_thumbnail.jpg') }}" />
@endsection

@section('content')
<div class="container">
  <div class="bg-black rounded-0 text-white p-4">
    <div class="text-center">
      <h1 class="mb-3">Payment Success!</h1>

      <span class="fs-5">Your Reference Number:</span><br>
      <h2>{{ request()->query('reference_no') }}</h2>
    </div>
  </div>
</div>
@endsection

@section('style')
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/style.css') }}">
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/gallery.css') }}">
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/alegria-manila.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
@endsection

@section('script')
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
  <script src="{{ asset('js/frontend/script.js') }}"></script>
  <script>
    Fancybox.bind("[data-fancybox]", {
      // Your custom options
    });

    var slider = tns({
      container: '.slider',
      loop: false,
      rewind: true,
      slideBy: 'page',
      items: 1,
      edgePadding: -1,
      gutter: 10,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      speed: 1000,
      controlsText: [
        '<i class="fa-solid fa-angle-left fa-2xl text-white"></i>',
        '<i class="fa-solid fa-angle-right fa-2xl text-white"></i>'
      ],
      responsive: {
        0: {
          items: 1,
        },
        767: {
          items: 2,
        },
        991: {
          items: 4,
        }
      }
    });
  </script>
@endsection