@extends('user.user_dashboard')
@section('home')




<!-- ================================
    START BREADCRUMB AREA
================================= -->
<section class="breadcrumb-area section-padding img-bg-2">
   <div class="overlay"></div>

   <div class="container">

       <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">
          
           <div class="section-heading">
               <h2 class="section__title text-white">  
                <a href="{{ route('dashboard') }}"> 
                    <i class="la la-chevron-left icon text-white"> </i> 
                </a>  
                Sponsor Subscriptions 
            </h2>
           </div>

           <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center">
               <li> <a href="/"> Dashboard </a> </li>
               <li> Sponsor Subscriptions </li>
           </ul>

       </div><!-- end breadcrumb-content -->

   </div><!-- end container -->
</section><!-- end breadcrumb-area -->
<!-- ================================
   END BREADCRUMB AREA
================================= -->



<!-- ================================
       START PAYMENT AREA
================================= -->

<section class="cart-area section--padding">
    <div class="container">


        <p class="text-center text-white mb-5"> Sponsor Subscriptions For Several Others to Access the E-library </p>

    

        <div class="card shadow rounded-4 p-4">
                <form method="POST" action="{{ route('sponsor.payment') }}">
                    @csrf

                    <!-- Name -->
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="nameInput" placeholder="Full Name" name="name"  value="{{ $userData->firstname . ' ' . $userData->surname }}">

                        <label for="nameInput"><i class="bi bi-person-fill me-2"></i> Full Name</label>

                        @error('name')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror

                    </div>


                    <!-- Email -->
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="emailInput" placeholder="Email" name="email"  value="{{ $userData->email }}">
                        <label for="emailInput"><i class="bi bi-envelope-fill me-2"></i>Email Address</label>
                        @error('email')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>


                     <!-- Phone Number -->
                    <div class="form-floating mb-3">
                        <input type="tel" class="form-control" id="phoneInput" placeholder="Phone Number" name="phone_number"  value="{{ $userData->phone_number }}">
                        <label for="phoneInput"><i class="bi bi-telephone-fill me-2"></i> Phone Number</label>
                       
                        @error('phone_number')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror

                    </div>


                    <!-- Currency -->
                    <div class="form-floating mb-3">
                        <select class="form-select" id="paymentMethod" name="selected_currency"  value="{{ old('selected_currency') }}">
                            <option selected disabled> -- Select Currency --</option>
                            <option value="espees"> Espees </option>
                            <option value="usd"> USD - US Dollar </option>
                            <option value="eur"> EUR - Euro </option>
                            <option value="gbp"> GBP - British Pound </option>
                            <option value="cad"> CAD - Canadian Dollar </option>
                            <option value="zar"> ZAR - South African Rand </option>
                            <option value="ngn"> NGN - Nigerian Naira </option>
                        </select>
                        <label for="paymentMethod"><i class="bi bi-credit-card-2-front-fill me-2"></i> Currency</label>

                          @error('selected_currency')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>


                       <!-- Amount -->
                    <div class="form-floating mb-3">
                        <input type="number" class="form-control" id="amountInput" name="amount" placeholder="Enter Amount" min="1"  value="{{ old('amount') }}">
                        <label for="amountInput"><i class="bi bi-cash me-2"></i> Amount </label>
                         
                        @error('amount')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>


                      
                    <!-- Hidden Narration -->
                    <input type="hidden" name="narration" value="E-library Subscription Sponsorship">


                    <!-- Submit -->
                    <div class="text-center">
                        <button type="submit" class="btn btn-danger w-100">
                            <i class="bi bi-arrow-right-circle me-2"> </i> Proceed
                        </button>
                    </div>

                </form>

            </div>



            <div class="section-block"></div>










    </div>
</section>




<script>
    
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
      
    });
    
  </script>



<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>


 <script>
   document.addEventListener("DOMContentLoaded", function () {
    const currencySelect = document.getElementById("paymentMethod");
    const amountInput = document.getElementById("amountInput");

    const minAmounts = {
        espees: 0.001,
        usd: 1,
        eur: 1,
        gbp: 1,
        cad: 1,
        zar: 20,
        ngn: 2000
    };

    currencySelect.addEventListener("change", function () {
        const selected = this.value;
        if (minAmounts[selected] !== undefined) {
            amountInput.min = minAmounts[selected];
        }
    });

    // Extra guard: prevent manual entry below min
    amountInput.addEventListener("input", function () {
        const selected = currencySelect.value;
        if (minAmounts[selected] !== undefined && this.value) {
            if (parseFloat(this.value) < minAmounts[selected]) {
                this.setCustomValidity(`Minimum amount is ${minAmounts[selected]} ${selected.toUpperCase()}`);
            } else {
                this.setCustomValidity("");
            }
        }
    });
});
</script>

























@endsection