@extends('layouts.guest-invoice')

@section('title', 'Information Regarding Your Order')

@section('content')
  @if(session()->has('success'))
    <div class="container">
      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 mt-4 rounded relative" role="alert" id="alert-wrapper">
        <strong class="font-bold">Success!</strong>
        <span class="block sm:inline">{{ session()->get('success') }}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="closeAlert()">
        <svg class="fill-current h-6 w-6 text-success-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
      </span>
      </div>
    </div>
  @elseif(session()->has('warning'))
    <div class="container">
      <div class="bg-red-100 border border-yallow-400 text-yallow-700 px-4 py-3 mt-4 rounded relative" role="alert" id="alert-wrapper">
        <strong class="font-bold">Warning!</strong>
        <span class="block sm:inline">{{ session()->get('warning') }}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="closeAlert()">
        <svg class="fill-current h-6 w-6 text-yallow-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
      </span>
      </div>
    </div>
  @elseif(session()->has('error'))
    <div class="container">
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 mt-4 rounded relative" role="alert" id="alert-wrapper">
        <strong class="font-bold">Error!</strong>
        <span class="block sm:inline">{{ session()->get('error') }}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="closeAlert()">
        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
      </span>
      </div>
    </div>
  @endif
  <div class="container py-8">
    <div class="mb-3 flex justify-between">
      <h4 class="text-2xl">Invoice from <strong>{{ config('settings.app_name') }}</strong></h4>
      <x-print-button href="{{ route('pdf.invoice', $invoice) }}">Print/PDF</x-print-button>
    </div>
    <div class="text-base flex flex-col space-y-6 lg:space-y-0 lg:space-x-6 lg:flex-row lg:justify-between">
      <div class="w-full lg:w-9/12 border-gray-200 border p-3">
        <!-- Invoice Head Start -->
        <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 justify-content-between mb-3">
          <div class="">
            <div class="w-56">
              <img class="w-full" src="{{ asset(config('settings.app_logo')) }}" alt="{{ config('settings.app_name') }}">
            </div>
            <h4 class="text-2xl font-semibold pt-2 pb-1">{{ config('settings.app_name') }}</h4>
            <p class="text-sm">{{ config('settings.address') }}</p>
            <p>{{ config('settings.city') }}, {{ config('settings.country') }}.</p>
          </div>
          <div class="flex flex-col justify-content-between">
            <div class="text-right">
              <p><strong>Invoice No :</strong> {{ $invoice->invoice_no }}</p>
              <p><strong>Issued :</strong> {{ $invoice->formatted_created_at_date }}</p>
            </div>
            <div class="text-right">
              <h4 class="text-xl font-semibold">{{ $invoice->formatted_grand_total }}</h4>
              <h4 class="font-semibold">{{ $invoice->formatted_payment_status }}</h4>
            </div>
          </div>
        </div>
        <!-- Invoice Head End -->

        <!-- Invoice Bar Start -->
        <div class="bg-gray-100 text-gray-800 rounded p-2 lg:p1 flex flex-col lg:flex-row space-y-1 lg:space-y-0">
          <span class="text-sm flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#888282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
            <span class="ml-2">{{ config('settings.phone') }}</span>
          </span>
          <span class="hidden lg:block text-sm mx-3">|</span>
          <span class="text-sm flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#888282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="4" width="20" height="16" rx="2"></rect>
              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
            </svg>
            <span class="ml-2">{{ config('settings.email') }}</span>
          </span>
        </div>
        <!-- Invoice Bar End -->

        <!-- Invoice Body Start -->
        <div class="py-3">
          <!-- Invoice Billing Info Start -->
          <div>
            <h4 class="text-lg">Bill To</h4>
            <h5 class="text-lg font-semibold">{{ $invoice->customer->name }}</h5>
            <h5 class="text-sm">{{ $invoice->customer->address }}</h5>
            <h5>{{ $invoice->customer->email }}</h5>
            @if ($invoice->billing_address)
              <p class="mt-2 text-sm">{!! $invoice->billing_address !!}</p>
            @endif
          </div>
          <!-- Invoice Billing Info End -->

          <div>
            <!-- Invoice Items Start -->
            <div class="mt-3">
              <h4 class="text-xl">Items</h4>

              @foreach ($invoice->orders as $order)
                <!-- Invoice Item Start -->
                <div class="border px-3 py-2 mt-3">
                  <h4 class="text-xs">Order ID: {{ $order->id }}</h4>
                  <h4 class="text-xs">Date: {{ $order->formatted_created_at_date }}</h4>
                  <h4 class="text-md font-semibold mb-2">{{ $order->billing_type->title() }} on {{ $order->sites_title }}</h4>

                  @foreach ($order->sites as $site)
                    <p class="text-md border-b flex justify-content-between space-x-2 lg:space-x-0">
                      <span class="break-all">{{ $site->pivot->live_link }}</span>
                      <span>{{ $site->formatted_pivot_price }}</span>
                    </p>
                  @endforeach

                  <div class="w-3/6 ml-auto">
                    <p class="text-sm flex justify-content-between mt-2 border-b">
                      <span>Sub Total</span>
                      <span class="text-right">{{ $order->formatted_sub_total }}</span>
                    </p>
                    <p class="text-sm flex justify-content-between border-b">
                      <span>Discount</span>
                      <span class="text-right">{{ $order->formatted_discount }}</span>
                    </p>
                    <p class="text-sm flex justify-content-between font-semibold">
                      <span>Total</span>
                      <span class="text-right">{{ $order->formatted_grand_total }}</span>
                    </p>
                  </div>
                </div>
                <!-- Invoice Item End -->
              @endforeach

            </div>
            <!-- Invoice Items End -->

            <!-- Invoice Summery Start -->
            <div class="w-3/5 ml-auto mt-3">
              <div class="flex justify-content-between pt-2 border-b">
                <span>Sub Total</span>
                <span>{{ $invoice->formatted_sub_total }}</span>
              </div>
              <div class="flex justify-content-between pt-2 border-b">
                <span>Discount</span>
                <span>{{ $invoice->formatted_discount }}</span>
              </div>
              <div class="flex justify-content-between py-2 font-semibold">
                <span>Grand Total</span>
                <span>{{ $invoice->formatted_grand_total }}</span>
              </div>
            </div>
            <!-- Invoice Summery End -->
          </div>

          @if ($invoice->description)
            <!-- Invoice Footer Start -->
            <div class="border-b border-t py-3">
              <h4 class="text-md font-semibold pt-3">Description</h4>
              <p class="text-md">{{ $invoice->description }}</p>
            </div>
            <!-- Invoice Footer End -->
          @endif

        </div>
        <!-- Invoice Body End -->
      </div>
      <div class="w-full lg:w-3/12">
        <div class="border-gray-200 border p-3">
          <h4 class="flex justify-content-between font-bold"><span>Invoice Total:</span> <span>{{ $invoice->formatted_grand_total }}</span></h4>
        </div>
        <div class="border p-3">

          @if($invoice->payment_status->isPayable())
            <form action="{{ route('guest.invoice.make-payment', $invoice->invoice_no) }}" method="POST" class="hidden" id="make-payment-form"> @csrf </form>

            @forelse($invoice->supportedEnabledPaymentMethods as $supported_payment_method)
              <div class="py-2">
                @if($supported_payment_method->isPayProGlobal())
                  <button class="bg-green-500 w-full text-white h-12 text-sm rounded-xl flex py-2 justify-center space-x-3 text-xl font-semibold d-inline" type="submit" name="payment_method" value="{{ $supported_payment_method->payment_method->value }}" form="make-payment-form">Pay Now<span class="text-xs font-normal align-bottom">&nbsp;-&nbsp;PayPro Global</span></button>
                @elseif($supported_payment_method->isPaddle())
                  <div>
                    <button id="paddle-button" onclick="openCheckout()" data-override="{{ $paddle_payment_link??'' }}" data-paddle-vendor-id="{{ $paddle_vendor_id }}" data-is-test-mode="{{ $paddle_is_test_mode_enable }}" class="w-full bg-green-600 font-semibold text-white h-12 text-2xl rounded-xl" font-family="inherit">Pay by Card »</button>
                    <button onclick="openCheckout()" data-override="{{ $paddle_payment_link??'' }}" data-paddle-vendor-id="{{ $paddle_vendor_id }}" data-is-test-mode="{{ $paddle_is_test_mode_enable }}" class="w-full border border-2 border-gray-900 mt-2 flex justify-content-center font-semibold text-white py-2 rounded-xl h-12">
                      <img src="{{ asset('assets/images/icons/paypal.svg') }}" alt="Paypal Pay" class="h-full">
                    </button>
                    <button onclick="openCheckout()" data-override="{{ $paddle_payment_link??'' }}" data-paddle-vendor-id="{{ $paddle_vendor_id }}" data-is-test-mode="{{ $paddle_is_test_mode_enable }}" class="w-full border border-2 border-gray-900 mt-2 flex justify-content-center font-semibold text-white py-2 rounded-xl h-12 bg-gray-900">
                      <img src="{{ asset('assets/images/icons/google-pay-light.svg') }}" alt="Google Pay" class="h-full">
                    </button>
                  </div>
                @else
                  <h2 class="text-md text-gray-800">{!! $supported_payment_method->payment_method->description() !!}</h2>
                @endif
              </div>

              @if(! $loop->last)
                <h4 class="text-center text-sm font-semibold">Or</h4>
              @endif
            @empty
              <h1 class="font-semibold">{{ __('Payment methods are temporarily unavailable. Please, Try again after some time.') }}</h1>
            @endforelse
          @else
            <div class="bg-green-600 text-center text-white py-2">{{ $invoice->formatted_payment_status }}</div>
          @endif
        </div>
      </div>
    </div>
  </div>
@endsection

@push('head-scripts')
  <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
      tailwind.config = {
          theme: {
              container: {
                  center: true,
                  padding: {
                      sm: '80px',
                      md: '100px',
                      lg: '180px'
                  },
              }
          }
      }
  </script>
@endpush

@push('scripts')
  <script>
    function closeAlert() {
      document.getElementById('alert-wrapper').remove();
    }

    function openCheckout() {
      let paddle_button = document.querySelector('#paddle-button');
      if (paddle_button.dataset.isTestMode) {
        Paddle.Environment.set('sandbox');
      }
      Paddle.Setup({
        vendor: parseInt(paddle_button.dataset.paddleVendorId)
      });
      Paddle.Checkout.open({
        override: paddle_button.dataset.override
      });
    }
  </script>
@endpush