@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('mycart') }}"> <i class="la la-chevron-left icon text-white"> </i> </a>  Purchase Print Book - Checkout  </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="{{ route('dashboard') }}"> Dashboard </a></li>
                <li> Checkout </li>
            </ul>

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

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




<!-- ================================
       START CONTACT AREA
================================= -->
<section class="cart-area section--padding">
    
    <div class="container">

        <div>
            <h6 class="text-white font-weight-light  mb-2 " > <i class="la la-play mr-1"></i> Shipping Fee Applies for Delivery of Print Books   </h6>
            <h6 class="text-white font-weight-light   mb-5"> <i class="la la-play mr-1"></i> See list of Countries we presently ship print copies to below   </h6>
          </div>
       


        <form method="POST" action="{{ route('checkout.payment') }}" enctype="multipart/form-data">
         @csrf

         <div class="form-body mt-4">                     
            <div class="row">



                <div class="col-lg-6">

    
                    <div class="card card-item">
                        <div class="card-body">
    
                            <h3 class="card-title fs-22 pb-3">Billing Details</h3>
                            <div class="divider"><span></span></div>
    
                          
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black">Full Name </label>
                                   
                                    <div class="form-group">
                                        <input class="form-control form--control" type="text" name="name" placeholder="name" value="{{ $userData->firstname }}  {{ $userData->surname }}" required> 
                                    </div>
                                </div><!-- end input-box -->
                                
    
    
                             
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black">Email Address</label>
                                   
                                    <div class="form-group">
                                        <input class="form-control form--control" type="email" name="email" placeholder="email" value="{{ $userData->email }}" required>
                                    </div>
                                </div><!-- end input-box -->
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black">Phone Number</label>
                                    <div class="form-group">
                                        <input id="phone" class="form-control form--control" name="phone_number" value="{{ $userData->phone_number }}" required>
                                      
                                    </div>
                                </div><!-- end input-box -->
    
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Company Name (Optional) </label>
                                   
                                    <div class="form-group">
                                        <input id="company" class="form-control form--control"  name="company" >
                                    </div>
                                </div><!-- end input-box -->
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Country </label>
                                  
                                    
                                    <div class="form-group">
                                       

                                    <select name="country" id="country" class="form-control" required>

                                        <option selected value=""> Select Country </option>
                                      
                                        <option value="albania" {{ old('country') == 'albania' ? 'selected' : '' }}>Albania  </option>
                                        <option value="andorra" {{ old('country') == 'andorra' ? 'selected' : '' }}>Andorra   </option>
                                        <option value="belarus" {{ old('country') == 'belarus' ? 'selected' : '' }}>Belarus </option>
                                        <option value="belgium" {{ old('country') == 'belgium' ? 'selected' : '' }}>Belgium </option>
                                        <option value="benin" {{ old('country') == 'benin' ? 'selected' : '' }}>Benin </option>
                                        <option value="bosnia_and_herzegovina" {{ old('country') == 'bosnia_and_herzegovina' ? 'selected' : '' }}>Bosnia and Herzegovina </option>
                                        <option value="botswana" {{ old('country') == 'botswana' ? 'selected' : '' }}>Botswana </option>
                                        <option value="bulgaria" {{ old('country') == 'bulgaria' ? 'selected' : '' }}>Bulgaria </option>
                                        <option value="canada" {{ old('country') == 'canada' ? 'selected' : '' }}>Canada </option>
                                        <option value="croatia" {{ old('country') == 'croatia' ? 'selected' : '' }}>Croatia </option>
                                        <option value="cyprus" {{ old('country') == 'cyprus' ? 'selected' : '' }}>Cyprus </option>
                                        <option value="czech_republic" {{ old('country') == 'czech_republic' ? 'selected' : '' }}>Czech Republic </option>
                                        <option value="denmark" {{ old('country') == 'denmark' ? 'selected' : '' }}>Denmark </option>
                                        <option value="estonia" {{ old('country') == 'estonia' ? 'selected' : '' }}>Estonia </option>
                                        <option value="eswatini" {{ old('country') == 'eswatini' ? 'selected' : '' }}>Eswatini </option>
                                        <option value="finland" {{ old('country') == 'finland' ? 'selected' : '' }}>Finland </option>
                                        <option value="france" {{ old('country') == 'france' ? 'selected' : '' }}>France </option>
                                        <option value="gambia" {{ old('country') == 'gambia' ? 'selected' : '' }}>Gambia </option>
                                        <option value="germany" {{ old('country') == 'germany' ? 'selected' : '' }}>Germany </option>
                                        <option value="ghana" {{ old('country') == 'ghana' ? 'selected' : '' }}>Ghana </option>
                                        <option value="greece" {{ old('country') == 'greece' ? 'selected' : '' }}>Greece </option>
                                        <option value="guinea" {{ old('country') == 'guinea' ? 'selected' : '' }}>Guinea </option>
                                        <option value="guinea_bissau" {{ old('country') == 'guinea_bissau' ? 'selected' : '' }}>Guinea-Bissau </option>
                                        <option value="hungary" {{ old('country') == 'hungary' ? 'selected' : '' }}>Hungary </option>
                                        <option value="iceland" {{ old('country') == 'iceland' ? 'selected' : '' }}>Iceland </option>
                                        <option value="india" {{ old('country') == 'india' ? 'selected' : '' }}>India </option>
                                        <option value="ireland" {{ old('country') == 'ireland' ? 'selected' : '' }}>Ireland </option>
                                        <option value="italy" {{ old('country') == 'italy' ? 'selected' : '' }}>Italy </option>                                   
                                        <option value="latvia" {{ old('country') == 'latvia' ? 'selected' : '' }}>Latvia </option>
                                        <option value="lesotho" {{ old('country') == 'lesotho' ? 'selected' : '' }}>Lesotho </option>
                                        <option value="liberia" {{ old('country') == 'liberia' ? 'selected' : '' }}>Liberia </option>
                                        <option value="liechtenstein" {{ old('country') == 'liechtenstein' ? 'selected' : '' }}>Liechtenstein </option>                                       
                                        <option value="lithuania" {{ old('country') == 'lithuania' ? 'selected' : '' }}>Lithuania </option>
                                        <option value="luxembourg" {{ old('country') == 'luxembourg' ? 'selected' : '' }}>Luxembourg </option>
                                        <option value="madagascar" {{ old('country') == 'madagascar' ? 'selected' : '' }}>Madagascar </option>                                                                              
                                        <option value="malawi" {{ old('country') == 'malawi' ? 'selected' : '' }}>Malawi </option>
                                        <option value="mali" {{ old('country') == 'mali' ? 'selected' : '' }}>Mali </option>
                                        <option value="malta" {{ old('country') == 'malta' ? 'selected' : '' }}>Malta </option>
                                        <option value="mauritania" {{ old('country') == 'mauritania' ? 'selected' : '' }}>Mauritania </option>
                                        <option value="moldova" {{ old('country') == 'moldova' ? 'selected' : '' }}>Moldova </option>                                                       
                                        <option value="monaco" {{ old('country') == 'monaco' ? 'selected' : '' }}>Monaco </option>                                 
                                        <option value="montenegro" {{ old('country') == 'montenegro' ? 'selected' : '' }}>Montenegro </option>                                 
                                        <option value="mozambique" {{ old('country') == 'mozambique' ? 'selected' : '' }}>Mozambique </option>                                      
                                        <option value="namibia" {{ old('country') == 'namibia' ? 'selected' : '' }}>Namibia </option>                               
                                        <option value="netherlands" {{ old('country') == 'netherlands' ? 'selected' : '' }}>Netherlands </option>
                                        <option value="new_zealand" {{ old('country') == 'new_zealand' ? 'selected' : '' }}>New Zealand </option>                                      
                                        <option value="niger" {{ old('country') == 'niger' ? 'selected' : '' }}>Niger </option>
                                        <option value="nigeria" {{ old('country') == 'nigeria' ? 'selected' : '' }}>Nigeria </option>                                       
                                        <option value="north_macedonia" {{ old('country') == 'north_macedonia' ? 'selected' : '' }}>North Macedonia </option>                                                                               
                                        <option value="norway" {{ old('country') == 'norway' ? 'selected' : '' }}>Norway </option>
                                        <option value="pakistan" {{ old('country') == 'pakistan' ? 'selected' : '' }}>Pakistan </option>                                                                                                                                                  
                                        <option value="poland" {{ old('country') == 'poland' ? 'selected' : '' }}>Poland </option>                                       
                                        <option value="qatar" {{ old('country') == 'qatar' ? 'selected' : '' }}>Qatar </option>
                                        <option value="romania" {{ old('country') == 'romania' ? 'selected' : '' }}>Romania </option>
                                        <option value="russia" {{ old('country') == 'russia' ? 'selected' : '' }}>Russia </option>
                                        <option value="san_marino" {{ old('country') == 'san_marino' ? 'selected' : '' }}>San Marino </option>
                                        <option value="senegal" {{ old('country') == 'senegal' ? 'selected' : '' }}>Senegal </option>
                                        <option value="serbia" {{ old('country') == 'serbia' ? 'selected' : '' }}>Serbia </option>                                                                            
                                        <option value="slovakia" {{ old('country') == 'slovakia' ? 'selected' : '' }}>Slovakia </option>
                                        <option value="slovenia" {{ old('country') == 'slovenia' ? 'selected' : '' }}>Slovenia </option>
                                        <option value="south_africa" {{ old('country') == 'south_africa' ? 'selected' : '' }}>South Africa </option>
                                        <option value="spain" {{ old('country') == 'spain' ? 'selected' : '' }}>Spain </option>                        
                                        <option value="sweden" {{ old('country') == 'sweden' ? 'selected' : '' }}>Sweden </option>
                                        <option value="switzerland" {{ old('country') == 'switzerland' ? 'selected' : '' }}>Switzerland </option>                                     
                                        <option value="togo" {{ old('country') == 'togo' ? 'selected' : '' }}>Togo </option>                                                 
                                        <option value="ukraine" {{ old('country') == 'ukraine' ? 'selected' : '' }}>Ukraine </option>
                                        <option value="united_kingdom" {{ old('country') == 'united_kingdom' ? 'selected' : '' }}>United Kingdom </option>
                                        <option value="united_states" {{ old('country') == 'united_states' ? 'selected' : '' }}>United States </option>
                                        <option value="vatican_city" {{ old('country') == 'vatican_city' ? 'selected' : '' }}>Vatican City </option>
                                        <option value="zambia" {{ old('country') == 'zambia' ? 'selected' : '' }}>Zambia </option>
                                        <option value="zimbabwe" {{ old('country') == 'zimbabwe' ? 'selected' : '' }}>Zimbabwe </option>
                                   
                                  </select>

                                </div>
                                </div><!-- end input-box -->
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> State </label>
                                    
                                    <div class="form-group">
                                        <input id="state" class="form-control form--control" name="state" required>
                                    </div>
                                </div><!-- end input-box -->
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Town/City  </label>
                                  
                                    <div class="form-group">
                                        <input id="city" class="form-control form--control" name="city" required>
                                    </div>
                                </div><!-- end input-box -->
    
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Suburb (Optional) </label>
                                   
                                    <div class="form-group">
                                        <input id="suburb" class="form-control form--control" name="suburb" >
                                    </div>
                                </div><!-- end input-box -->
    
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Street Address </label>
                                   
                                    <div class="form-group">
                                        <input id="address" class="form-control form--control" name="address" required> 
                                    </div>
                                </div><!-- end input-box -->
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black">Postal Code</label>
                                    
                                    <div class="form-group">
                                        <input id="postal_code" class="form-control form--control" name="postal_code" required>  
                                    </div>
                                </div><!-- end input-box -->
    
    
    
                                <div class="input-box col-lg-12">
                                    <label class="label-text text-black"> Order Notes (Optional) </label>
                                    
                                    <div class="form-group">
                                        <textarea id="order_notes" class="form-control form--control"  name="order_notes" rows="7">  </textarea>
                                            
                                    </div>
                                </div><!-- end input-box -->
    
    
                               
                        </div><!-- end card-body -->
                    </div><!-- end card -->
    
    
    
                </div><!-- end col-lg-7 -->



            <div class="col-lg-6">

                <div class="card card-item">

                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3"> Product Details</h3>
                        
                        <div class="divider"><span></span></div>
                        
                        
 
                            <div>


                            <table class="table table-bordered">
                               <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Quantity</th>
                                        <th>Amount in Espees </th>
                                        <th>Amount in USD </th>
                                    </tr>
                              </thead>
    
                              <tbody>
      
                                  @foreach ($carts as $item)
        
                                    <tr>
                                       <td>{{ $item->name }}</td>
                                       <td>{{ $item->qty }}</td>
                                       <td>{{ number_format($item->price * $item->qty, 2) }} Espees</td>
                                       <td>{{ number_format($item->options->price_usd * $item->qty, 2) }} USD</td>
                                    </tr>
        
                                 @endforeach
    
                              </tbody>

                           </table>

                        
                                
                              
                               

                            </div><!-- end media -->

                            
                       
                       
                    </div><!-- end card-body -->

                </div><!-- end card -->



                <div class="card card-item">
                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3">Select Payment Method</h3>
                        
                        <div class="divider"><span></span></div>

                        <div class="payment-option-wrap">


                            <div class="payment-tab is-active">
                                <div class="payment-tab-toggle">
                                    <input checked="" id="espees" name="payment_method" type="radio" value="espees">
                                    <label for="espees"> Pay With Espees </label>
                                    <img class="payment-logo" src="images/payment-img.png" alt="">
                                </div>
                                
                                <div class="payment-tab-content fw-light">

                                    Payment Gateway for Espees Payment
                                  
                                </div>
                            </div><!-- end payment-tab -->



                            <div class="payment-tab">
                                <div class="payment-tab-toggle">
                                    <input id="stripe" name="payment_method" type="radio" value="stripe">
                                    <label for="stripe"> Credit / Debit Card - USD </label>
                                    <img class="payment-logo" src="images/paypal.png" alt="">
                                </div>

                                <div class="payment-tab-content fw-light">

                                    Payment Gateway for USD Payment

                                </div>
                            </div><!-- end payment-tab -->


                        {{--
                            <div class="payment-tab">
                                <div class="payment-tab-toggle">
                                    <input id="card" name="payment_method" type="radio" value="card">
                                    <label for="card"> Credit / Debit Card - NGN  </label>
                                    <img class="payment-logo" src="images/paypal.png" alt="">
                                </div>

                                <div class="payment-tab-content fw-light">


                                    Flutterwave Payment Gateway for Naira Payment

                                </div>
                            </div><!-- end payment-tab -->
                            --}}
                        

                           


                        </div>
                    </div><!-- end card-body -->
                </div><!-- end card -->




                @php

                  $shipping_fee_espees = round($cartTotal * 0.25, 2);
                  $usdTotal = 0;
                
                  foreach(Cart::content() as $item) {
                    $usdTotal += $item->options->price_usd * $item->qty;
                  }
               
                  $shipping_fee_usd = round($usdTotal * 0.25, 2);

                 @endphp
            
          
                <div class="card card-item">
             
                    <div class="card-body">
                   
                        <h3 class="card-title fs-22 pb-3">Payment Summary</h3>
                   
                        <div class="divider"><span></span></div>

                        <ul class="generic-list-item generic-list-item-flash fs-15" id="price-display">
                            <li class="d-flex align-items-center justify-content-between font-weight-semi-bold">
                                <span class="text-black">Original price:</span>
                                <span id="price-amount" class="text-black">{{ number_format($cartTotal, 2) }} Espees</span>
                            </li>
                
                            <li class="d-flex align-items-center justify-content-between font-weight-semi-bold">
                                <span class="text-black"> Shipping Fee: </span>
                                <span id="shipping-fee" class="text-black">{{ number_format($shipping_fee_espees, 2) }} Espees</span>
                            </li>
                
                            <li class="d-flex align-items-center justify-content-between font-weight-bold">
                                <span class="text-black">Total:</span>
                                <span id="price-total" class="text-black">{{ number_format($cartTotal + $shipping_fee_espees, 2) }} Espees</span>
                            </li>
                        </ul>
                            
                        <div class="btn-box border-top border-top-gray pt-3">
                            
                            <input type="hidden" name="amount_esp" value="{{ number_format($cartTotal + $shipping_fee_espees, 2) }}">
                            <input type="hidden" name="amount_usd" value="{{ number_format($usdTotal + $shipping_fee_usd, 2) }}">
                            <input type="hidden" name="narration" value="E-Library - Print Book Purchase">
                            <input type="hidden" name="cartQty" value="{{ $cartQty }}">
                
                            <input type="submit" class="btn theme-btn w-100" value="Proceed">
                        </div>
            
               
                    </div>
            
                </div>
            



            </div>


         



           </div><!-- end row -->
        </div>

   </form>


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

       
    </div><!-- end container -->
</section>
<!-- ================================
       END CONTACT AREA
================================= -->

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




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>
    $(document).ready(function() {
        var espeesPrice = {{ $cartTotal }};
        var usdPrice = {{ $usdTotal }};

        var feeShipping_usd = (usdPrice * 0.25).toFixed(2);
        var feeShipping_espees = (espeesPrice * 0.25).toFixed(2);

        $('input[name="payment_method"]').on('change', function() {
            var selectedMethod = $('input[name="payment_method"]:checked').val();
            var priceAmount = $('#price-amount');
            var priceTotal = $('#price-total');
            var shippingFee = $('#shipping-fee');

            if (selectedMethod === 'stripe') {
                priceAmount.text(usdPrice.toFixed(2) + ' USD');
                priceTotal.text((parseFloat(usdPrice) + parseFloat(feeShipping_usd)).toFixed(2) + ' USD');
                shippingFee.text(feeShipping_usd + ' USD');
            } else if (selectedMethod === 'espees') {
                priceAmount.text(espeesPrice.toFixed(2) + ' Espees');
                priceTotal.text((parseFloat(espeesPrice) + parseFloat(feeShipping_espees)).toFixed(2) + ' Espees');
                shippingFee.text(feeShipping_espees + ' Espees');
            }
        });
    });
</script>







@endsection