@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('alert-wrapper')">
        <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>
  @endif
  @if(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('alert-wrapper')">
        <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->name() }} 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->isPaid() or $invoice->isPaymentPending())
            <div class="bg-green-600 text-center text-white py-2">{{ $invoice->formatted_payment_status }}</div>
          @else
            @if ($invoice->payment_method == \App\Enums\PaymentMethod::PADDLE && !empty($paddle_payment_link))
              <div>
                <button id="paddle-button" onclick="openCheckout()" data-override="{{ $paddle_payment_link }}" 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 }}" 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 }}" 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>
            @elseif($invoice->isPaymentMethodPaypal())
              <div class="">
                <form action="{{ route('guest.invoice.pay', $invoice->invoice_no) }}" method="POST">
                  @csrf
                  @method('PUT')
                  <button class="bg-green-600 w-full text-white h-12 text-sm rounded-xl flex py-2 justify-center space-x-3" type="submit">
                    <span class="pt-2">Pay With </span><img class="h-full" src="{{ asset('assets/images/external-logo/paypal.svg') }}" alt="PayPal">
                  </button>
                </form>
              </div>

{{--              <div class="text-center my-2">OR</div>--}}

{{--              <div class="">--}}
{{--                <form action="{{ route('guest.invoice.pay', $invoice->invoice_no) }}" method="POST">--}}
{{--                  @csrf--}}
{{--                  @method('PUT')--}}

{{--                  <input type="hidden" name="custom_payment_method" value="{{ \App\Enums\PaymentMethod::STRIPE() }}">--}}

{{--                  <div class="d-flex space-x-1">--}}
{{--                    <input type="text" class="form-control w-full mb-2" name="card_holder_name" placeholder="Card Holder Name" required>--}}
{{--                  </div>--}}
{{--                  <div class="d-flex space-x-1">--}}
{{--                    <input type="text" class="form-control w-full mb-2" name="card_no" placeholder="Card No" required>--}}
{{--                  </div>--}}
{{--                  <div class="d-flex space-x-1">--}}
{{--                    <input type="text" class="form-control mb-2" name="expiry_month" placeholder="Exp. Month" required>--}}
{{--                    <input type="text" class="form-control mb-2" name="expiry_year" placeholder="Exp. Year" required>--}}
{{--                  </div>--}}
{{--                  <div class="d-flex space-x-1">--}}
{{--                    <input type="text" class="form-control mb-2" name="cvv" placeholder="CVV" required>--}}
{{--                  </div>--}}
{{--                  <button class="bg-green-600 w-full text-white h-12 text-sm rounded-xl flex py-2 justify-center space-x-3" type="submit"><span class="pt-1 font-semibold text-lg">Pay By Card</span></button>--}}
{{--                </form>--}}
{{--              </div>--}}
            @elseif($invoice->isPaymentMethodStripe() && false)
              <div class="">
                <form action="{{ route('guest.invoice.pay', $invoice->invoice_no) }}" method="POST">
                  @csrf
                  @method('PUT')
                  <div class="d-flex space-x-1">
                    <input type="text" class="form-control w-full mb-2" name="card_holder_name" placeholder="Card Holder Name" required>
                  </div>
                  <div class="d-flex space-x-1">
                    <input type="text" class="form-control w-full mb-2" name="card_no" placeholder="Card No" required>
                  </div>
                  <div class="d-flex space-x-1">
                    <input type="text" class="form-control mb-2" name="expiry_month" placeholder="Exp. Month" required>
                    <input type="text" class="form-control mb-2" name="expiry_year" placeholder="Exp. Year" required>
                  </div>
                  <div class="d-flex space-x-1">
                    <input type="text" class="form-control mb-2" name="cvv" placeholder="CVV" required>
                  </div>
                  <button class="bg-green-600 w-full text-white h-12 text-sm rounded-xl flex py-2 justify-center space-x-3" type="submit"><span class="pt-1 font-semibold text-lg">Pay By Card</span></button>
                </form>
              </div>
            @elseif($invoice->isPaymentMethodPayProGlobal())
              <div class="">
                <form action="{{ route('guest.invoice.pay', $invoice->invoice_no) }}" method="POST">
                  @csrf
                  @method('PUT')

                  <input type="hidden" name="custom_payment_method" value="{{ \App\Enums\PaymentMethod::PAY_PRO_GLOBAL() }}">

                  <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" style="display: inline-block !important;" type="submit">Pay Now<span class="text-xs font-normal" style="vertical-align: bottom">&nbsp;-&nbsp;PayPro Global</span></button>

                </form>
              </div>
            @else
              <div class="w-full">
                <h2 class="text-lg">{{ $invoice->payment_method->description() }}</h2>
              </div>
            @endif
          @endif
        </div>
      </div>
    </div>
  </div>
@endsection

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

  @if (!$invoice->is_paid)
    <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
  @endif
@endpush

@push('scripts')
  @if (!$invoice->is_paid)
    <script type="text/javascript">
      function openCheckout() {
        let paddle_button = document.querySelector('#paddle-button');
        @if (config('settings.payment_methods.paddle.is_test_mode'))
        Paddle.Environment.set('sandbox');
        @endif
        Paddle.Setup({
          vendor: {{ config('settings.payment_methods.paddle.vendor_id') }}
        });
        Paddle.Checkout.open({
          override: paddle_button.dataset.override
        });
      }
    </script>
  @endif

  <script>
    function closeAlert(id) {
      document.getElementById('alert-wrapper').remove();
    }
  </script>
@endpush