

<?php $__env->startSection('content'); ?>

<style>
    button:disabled,
    button[disabled]{
    background-color: #9fb5ff;
    }

    button:disabled:hover{
    color: #d1d5db;
    }

    .loader-body {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.7;
        background-color: #28282b;
        z-index: 99;
    }

    .loader {
        border-top-color: #0e4792;
        -webkit-animation: spinner 1.5s linear infinite;
        animation: spinner 1.5s linear infinite;
    }

    @-webkit-keyframes spinner {
        0% {
        -webkit-transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        }
    }

    @keyframes  spinner {
        0% {
        transform: rotate(0deg);
        }
        100% {
        transform: rotate(360deg);
        }
    }
</style>

<!-- component -->
<div class="mt-10">
        <div class="py-16 px-4 md:px-6 2xl:px-0 flex justify-center items-center 2xl:mx-auto 2xl:container">
<!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
            <div class="flex flex-col justify-start items-start w-full space-y-9">
                <div class="flex justify-start flex-col items-start space-y-2">
                    <a href="<?php echo e(route('barrel')); ?>" class="flex flex-row items-center text-gray-600 dark:text-white hover:text-gray-500 space-x-1">
                        <svg class="fill-stroke" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.91681 7H11.0835" stroke="currentColor" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M2.91681 7L5.25014 9.33333" stroke="currentColor" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M2.91681 7.00002L5.25014 4.66669" stroke="currentColor" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <p class="text-sm leading-none">Back</p>
                    </a>
                    <p class="text-3xl lg:text-4xl font-semibold leading-7 lg:leading-9 text-gray-800 dark:text-gray-50">Checkout</p>
                    <p class="text-base leading-normal sm:leading-4 text-gray-600 dark:text-white">Home > Shop > Buy Barrels > Checkout</p>
                </div>

                <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.alert','data' => []]); ?>
<?php $component->withName('alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    
                <div class="flex flex-col xl:flex-row justify-center xl:justify-between space-y-6 xl:space-y-0 xl:space-x-6 w-full">
                    <div class="xl:w-3/5 flex flex-col sm:flex-row xl:flex-col justify-center items-center bg-gray-100 dark:bg-gray-800 py-7 sm:py-0 xl:py-10 px-10 xl:w-full">
                        <div class="flex flex-col justify-start items-start w-full space-y-4">
                        <?php $__currentLoopData = session('cart'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $id => $details): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <p class="text-xl md:text-2xl leading-normal text-gray-800 dark:text-gray-50">
                                <?php echo e($details['quantity'] . " " . $details['name']); ?><?php if($details['quantity'] > 1): ?>s <?php else: ?> <?php endif; ?>
                            </p>
                            <p class="text-base font-semibold leading-none text-gray-600 dark:text-white">
                                Total: &#8358;<?php echo e(number_format($details['quantity'] * $details['price'])); ?>

                            </p>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                        <div class="mt-6 sm:mt-0 xl:my-10 xl:px-20 w-52 sm:w-96 xl:w-auto">
                            <img src="<?php echo e(asset('images/barrel3.png')); ?>" alt="headphones" />
                        </div>
                    </div>
    
                    <div class="p-8 bg-gray-100 dark:bg-gray-800 flex flex-col lg:w-full xl:w-3/5">
                        <button class="pay-transfer border border-transparent text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 shadow-lg shadow-blue-500/50 flex flex-row justify-center items-center space-x-2 py-4 rounded w-full">
                            <div>
                            <svg class="h-6 w-6 text-white"  width="24" height="24" viewBox="0 0 24 24" stroke-width="2" 
                                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  
                                <path stroke="none" d="M0 0h24v24H0z"/>  <rect x="3" y="3" width="6" height="6" rx="1" />  
                                <rect x="15" y="15" width="6" height="6" rx="1" />
                                <path d="M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3" />  
                                <path d="M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3" />
                            </svg>
                            </div>
                            <div>
                                <p class="text-base leading-4">Pay via Bank Transfer</p>
                            </div>
                        </button>
    
                        <div class="flex flex-row justify-center items-center mt-6">
                            <hr class="border w-full" />
                            <p class="flex flex-shrink-0 px-4 text-base leading-4 text-gray-600 dark:text-white">or pay with card</p>
                            <hr class="border w-full" />
                        </div>

                        <div class="mt-4 mx-auto">
                          <a href="" class="text-gray-500 flex">
                            <span class="mt-2">Powered by <i><b>Mastercard</b></i></span> 
                            <img class="h-10" src="<?php echo e(asset('images/mastercard.png')); ?>"/></a>
                        </div>

                        <!-- Card Payment Form -->
                      <form>

                        <div class="mt-4 mb-3">
                            <input class="require border border-gray-300 p-4 rounded w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="email" value="<?php echo e(Auth::user()->email); ?>" id="" placeholder="Email" />
                        </div>
    
                        <label class="mt-8 text-base leading-4 text-gray-800 dark:text-gray-50">Card details</label>
                        <div class="mt-2 flex-col">
                            <div>
                                <input class="require border rounded-tl rounded-tr border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="card_number" id="card_number" placeholder="0000 0000 0000 0000" />
                            </div>
                            <div class="flex-row flex">
                                <input class="require border rounded-bl border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="expiry" id="expiry" placeholder="MM/YY" />
                                <input class="require border rounded-br border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="cvv" id="cvv" placeholder="CVV" />
                            </div>
                        </div>
    
                        <label class="mt-8 text-base leading-4 text-gray-800 dark:text-gray-50">Card Name</label>
                        <div class="mt-2 flex-col">
                            <div>
                                <input class="require border rounded border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="card_name" id="card_name" placeholder="Name on card" />
                            </div>
                        </div>
    
                        <label class="mt-8 text-base leading-4 text-gray-800 dark:text-gray-50">Country or region</label>
                        <div class="mt-2 flex-col">
                            <div class="relative">
                                <input id="changetext" disabled class="text-left border rounded-tr rounded-tl border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600 bg-white" type="text" name="" value="Nigeria">             
                            </div>
                            <input class="require border rounded-bl rounded-br border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="number" name="card_pin" id="card_pin" placeholder="4-Digit Pin" />
                        </div>
    
                        <button type="button" disabled="disabled" class="card-pay t-8 mt-4 border border-transparent text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 shadow-lg shadow-blue-500/50 flex justify-center items-center py-4 rounded w-full">
                        <div>
                            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 
                              15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                            </svg>
                            </div>
                            <div>
                                <p class="text-base leading-4 ml-2">Pay with card</p>
                            </div>
                        </button>
                        <small class="text-xsm text-gray-400 mt-8 mx-auto">Your Card is protected against fraud for purchases in stores, in apps or over the phone.</small>
                      </form>
                    </div>
                </div>
            </div>
        </div>
    </div>



                
<!--Modal-->
  <div id="shrink" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    
    <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto shadow-lg z-50 overflow-y-auto mt-8 md:mt-10">
      
      <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
        <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
          <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
        </svg>
        <span class="text-sm">(Esc)</span>
      </div>

      <!-- Modal From -->
      <!-- Add margin if you want to see some of the overlay behind the modal-->
      <div class="modal-content py-4 text-left px-6">
        <!--Title-->
        <div class="flex justify-between items-center pb-3">
          <p class="text-2xl text-dark font-bold">Add Order Details</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
          </div>
        </div>

        <!--Body-->
        
            <p class="mb-2">Add your Order Details</p>
            
        <form id="iform" action="<?php echo e(route('checkout')); ?>" method="post" class="">
            <?php echo csrf_field(); ?>
            <div class="block w-full pb-3 mt-1">
                <input type="text" name="state" id="state" placeholder="State Of Delivery" 
                class="required w-full border-b-1 focus:ring-white border-t-0 border-l-0 border-r-0 p-3 bg-white h-16 text-black"
                required autofocus>
            </div>

            <div class="block w-full pb-3 mt-1">
                <input type="text" name="address" id="address" placeholder="Address Of Delivery" 
                class="required w-full border-b-1 focus:ring-white border-t-0 border-l-0 border-r-0 p-3 h-16 text-black"
                required autofocus>
            </div>

            <div class="block w-full pb-3 mt-1">
                <input type="text" name="zip" id="zip" placeholder="Zip Code" 
                class="required w-full border-b-1 focus:ring-white border-t-0 border-l-0 border-r-0 p-3 h-16 text-black"
                required autofocus>
            </div>

            <div class="block w-full pb-3 mt-1">
                <input type="text" name="permit" id="permit" placeholder="Env.Permit Number(Optional)" 
                class="w-full border-b-1 focus:ring-white border-t-0 border-l-0 border-r-0 p-3 h-16 text-black"
                autofocus>
            </div>

            <input type="hidden" name="ref_id" class="item-id" value="<?php echo e($ref_id); ?>"/>
            
            <br>
            <p class="mb-4">Barrel Total: <b>&#8358;<?php echo e(number_format($details['quantity'] * $details['price'])); ?></b></p>
            
            <button type="button" disabled="disabled" class="proceed-pay px-5 py-4 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 shadow-lg shadow-blue-500/50 ">Proceed To Pay</button>
         </form>
        
      </div>
      <!-- Modal content end -->



      <!-- Modal Details -->
      <!-- Add margin if you want to see some of the overlay behind the modal-->
      <div class="modal-details py-4 text-left px-6">
        <!--Title-->
        <div class="flex justify-between items-center pb-3">
          <p class="text-2xl text-dark font-bold">Bank Transfer</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
          </div>
        </div>

        <!--Body-->
        
        <p class="mb-2">Make a fund transfer of <b>&#8358;<?php echo e(number_format($details['quantity'] * $details['price'])); ?></b> to:</p>
        
        <div class="text-center">
            <p class="text-lg text-dark font-bold">Bank</p>
            <p class="text-2xl text-dark mb-3"><?php echo e($bank->description); ?></p>
            <p class="text-lg text-dark font-bold">Account Name</p>
            <p class="text-2xl text-dark mb-3"><?php echo e($account_name->description); ?></p>
            <p class="text-lg text-dark font-bold">Account Number</p>
            <p class="text-2xl text-dark mb-6"><?php echo e($account_number->description); ?></p>

            <p class="text-md text-dark mb-10">
            Click the button below if you successfully made the fund transfer
                <br>
                Once payment is verified your delivery 
                process will commence immediately.</p>

            <button type="submit" form="iform" class="px-5 py-4 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 shadow-lg shadow-blue-500/50 ">I have made the transfer</button>
        </div>
        
        
      </div>
      <!-- Modal Details page end -->

    </div>
  </div> 



<script>
    $( document ).ready(function() {
        $(".modal-details").hide();

        //Pay with transfer
        $('.required').on('keyup', function() {
        let empty = false;
    
        $('.required').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });
    
        if (empty)
          $('.proceed-pay').attr('disabled', 'disabled');
        else
          $('.proceed-pay').attr('disabled', false);
      });

      //Pay with card
      $('.require').on('keyup', function() {
        let empty = false;
    
        $('.require').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });
    
        if (empty)
          $('.card-pay').attr('disabled', 'disabled');
        else
          $('.card-pay').attr('disabled', false);
      });
    });

    let closeIcon = document.getElementById("closeIcon");

    $(document).bind("ajaxSend", function() {
        $("#loader-body").removeClass("invisible");
    }).bind("ajaxComplete", function() {
        $("#loader-body").addClass("invisible");
    });


    //Modal
    $(".pay-transfer").click(function(e) {
        e.preventDefault();

        toggleModal()
    }); 
    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)
    
    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal);
    }
    
    document.onkeydown = function(evt) {
      evt = evt || window.event
      var isEscape = false
      if ("key" in evt) {
    	isEscape = (evt.key === "Escape" || evt.key === "Esc")
      } else {
    	isEscape = (evt.keyCode === 27)
      }
      if (isEscape && document.body.classList.contains('modal-active')) {
    	toggleModal()
      }
    };
      
    function toggleModal () {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }


    //On clicking of proceed to pay
    $(".proceed-pay").click(function(e) {
        e.preventDefault();

        $(".modal-content").hide();

        $(".modal-details").show();
    });



let openIcon = document.getElementById("openIcon");
let dropdown = document.getElementById("dropdown");
let text = document.getElementById("changetext");
// more free and premium Tailwind CSS components at https://tailwinduikit.com/
const showMenu = (flag) => {
  if (flag) {
    closeIcon.classList.toggle("hidden");
    openIcon.classList.toggle("hidden");
    dropdown.classList.toggle("hidden");
  } else {
    closeIcon.classList.toggle("hidden");
    openIcon.classList.toggle("hidden");
    dropdown.classList.toggle("hidden");
  }
};

const changeText = (country) => {
  text.innerHTML = country;
  closeIcon.classList.toggle("hidden");
  openIcon.classList.toggle("hidden");
  dropdown.classList.toggle("hidden");
};




// PAYMENT PROCESSING INITIALIZER
$(".card-pay").click(function() {
        var card_name = $('#card_name').val();
        var card_number = $('#card_number').val();
        var expiry = $('#expiry').val();
        var cvv = $('#cvv').val();
        var card_pin = $('#card_pin').val();
        var token = "<?php echo e(csrf_token()); ?>";

    let data_obj = {
      _token:token,
      card_name:card_name,
      card_number:card_number,
      expiry:expiry,
      cvv:cvv,
      card_pin:card_pin
    };

    $.ajax({
        url: "<?php echo e(route('card_pay')); ?>",
        method: "POST",
        data: data_obj,
        success:function(data) {
            if(data == 1) {
                Swal.fire({
                  title: '',
                  text: 'Your payment could not be authorized, please try another payment method', 
                  icon: 'error', 
                  confirmButtonText: 'Okay'
                }).then(function() {
                    window.location.href = " <?php echo e(route('checkout_index')); ?> ";
                });
            }
            else {
                Swal.fire('', 'An unknown error occured and we were unable to process your request, please try again', 'error');
            }
        }
    });
  });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\wamp64\www\jango\resources\views/checkout.blade.php ENDPATH**/ ?>