@php
    $configData = Helper::appClasses();
@endphp

@extends('layouts.layoutMaster')

@section('title', 'Payment - Front Pages')

<!-- Page Styles -->
@section('page-style')
    @vite(['resources/assets/vendor/scss/pages/front-page-payment.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite(['resources/assets/vendor/libs/cleavejs/cleave.js'])
@endsection

<!-- Page Scripts -->
@section('page-script')
    @vite([
    ])
@endsection


@section('content')
    <section class="section-py bg-body first-section-pt">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-lg-7 card-body border-end p-8">
                <h4 class="mb-2">Congratulations! </h4>
                <p class="mb-0">
                  Your effort has been rewarded! and you managed to exchange your points for <span class="badge bg-label-success me-2 ms-2 rounded-pill fw-bolder">{{ $product['name'] }}</span>
                  <br>
                </p>

                <br>
                <h6 class="fw-bolder">Your Prize Code:</h6>
                <h3 class="text-success">{{ generateRandomString(5, 'N') }}</h3>
                <p class="mb-0">
                  Please save this code. You will need it to claim your prize.
                  Your order <span class="badge bg-label-danger me-2 ms-2 rounded-pill fw-bolder">#{{ generateRandomString(12, 'U') }}</span> has been placed!
                  We sent an email to {{ $userData['email'] }} with your order confirmation and receipt. If the email hasn't arrived within two minutes, please check your spam folder to see if the email was routed there.
                </p>


                <div class="row my-8 gx-5">
                  <div class="col-md mb-md-0 mb-5"></div>
                  <div class="col-md"></div>
                </div>

                <div class="bg-lighter p-6 rounded-4">
                  <span class="mt-2 mb-4 fw-bold fs-5">Instructions</span>
                  <div class="row g-5">
                    <p>
                      {{ $product['redemptionInstructions'] }}
                    </p>
                  </div>
                  <hr>

                  <span class="mt-2 mb-4 fw-bold fs-5">Code Validity:</span>
                  <div class="row g-5">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat, sapien vitae tempus scelerisque, tortor enim mattis est, id finibus erat massa id sem. Fusce accumsan magna at odio dignissim condimentum. Nulla sollicitudin hendrerit commodo. In gravida nibh ante, nec gravida orci placerat in. Fusce dapibus ante in varius dictum. Donec ligula sapien, hendrerit eget eros vel, venenatis bibendum ex. Nulla ullamcorper molestie turpis, vitae vehicula dui sollicitudin at. Etiam vel maximus mauris.
                    </p>
                  </div>
                </div>

              </div>

              <div class="col-lg-5 card-body p-8 pt-0 pt-lg-8">
                <div class="customer-avatar-section">
                  <div class="d-flex align-items-center flex-column">
                    <img class="img-fluid rounded-3 mb-4" src="{{ asset($userData['img']) }}" height="120" width="120" alt="User avatar" />
                    <div class="customer-info text-center mb-6">
                      <h5 class="mb-0">Lorine Hischke</h5>
                      <span>Customer ID #EF{{ $userData['id'] }}</span>
                    </div>
                  </div>
                </div>
                <div class="d-flex justify-content-around flex-wrap mb-6 gap-4 gap-md-3 gap-lg-4">
                  <div class="d-flex align-items-center gap-4">
                    <div class="avatar">
                      <div class="avatar-initial rounded-3 bg-label-primary"><i class='ri-money-dollar-circle-line ri-24px'></i>
                      </div>
                    </div>
                    <div>
                      <h5 class="mb-0">567 XP</h5>
                      <span>Available</span>
                    </div>
                  </div>
                </div>

                <div class="card shadow-none bg-transparent border border-info">
                  <div class="card-body text-info">
                    <h5 class="card-title text-info">Thanks for being part of our community!</h5>
                    <p class="card-text">
                      At Enterfactory, we value your participation and want you to know how important you are to us. Your dedication and commitment bring you great benefits, and this is just the beginning!
                    </p>
                  </div>
                </div>


                  <div class="d-flex justify-content-end mt-3">
                    <a href="/" class="btn btn-primary waves-effect" >Continue</a>
                  </div>

              </div>
            </div>
          </div>
          <img src="{{asset('assets/img/illustrations/trophy.png')}}" class="position-absolute bottom-0 end-0 me-4" height="140" alt="view sales">
        </div>
      </div>
    </section>



    <!-- Modal -->
    @include('_partials._modals.modal-pricing')
    <!-- /Modal -->
@endsection