@extends('layouts.dashboard-template')
 @section('page-content')
 @php
 $data = getAdminCart();
 $tax=0.00;
 $discount=0.00;
 $subtotal=0.00;
 @endphp
 <style>
     .red {
         color: red;
     }

     #registereduser {
         display: none;

     }

     #pills-finish {
         display: none;

     }

     .ajax-loader {
         visibility: hidden;
         background-color: rgba(255, 255, 255, 0.7);
         position: absolute;
         z-index: +100 !important;
         width: 100%;
         height: 100%;
     }

     .ajax-loader img {
         position: relative;
         top: 50%;
         left: 50%;
     }
 </style>
 <div class="main-content overflow-hidden">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Checkout</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                                 <li class="breadcrumb-item active">Checkout</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->
             <form action="javascript:void(0);" id="checkoutform">
                 <div class="row">
                     <div class="col-xl-8">
                         <div class="card">
                             <div class="card-body checkout-tab">
                                 <div class="ajax-loader">
                                     <img src="{{asset('admin/images/loader.gif')}}" class="img-responsive" />
                                 </div>
                                 <div class="tab-content">
                                     <div class="tab-pane fade show active" id="pills-bill-info" role="tabpanel" aria-labelledby="pills-bill-info-tab">
                                         <div>
                                             <h5 class="mb-1">Billing Information</h5>
                                             <p class="text-muted mb-4">Please fill all information below</p>
                                         </div>

                                         <div>

                                             <div class="row row bg-light pt-3">
                                                 <div class="col-6">
                                                     <input type="radio" id="contactChoice1" name="user_type" onclick="clickLink(this);" value="0" checked />
                                                     <label for="contactChoice1">Unregistered user</label>
                                                 </div>
                                                 <div class="col-6">
                                                     <input type="radio" id="contactChoice1" onclick="clickForm(this);" name="user_type" value="1" />
                                                     <label for="contactChoice1">Registered user</label>
                                                 </div>
                                             </div>

                                             <div id="billinginfo">
                                                 <div class=" row">
                                                     <div class=" col-sm-6">
                                                         <div class="mb-3">
                                                             <label for="billinginfo-firstName" class="form-label">First
                                                                 Name </label>
                                                             <input type="text" class="form-control" id="billinginfo-firstName" name="fname" placeholder="Enter first name">
                                                             <div class="red" id="fname"></div>
                                                         </div>
                                                     </div>

                                                     <div class="col-sm-6">
                                                         <div class="mb-3 form-group">
                                                             <label for="billinginfo-lastName" class="form-label">Last
                                                                 Name</label>
                                                             <input type="text" class="form-control" id="billinginfo-lastName" name="lname" placeholder="Enter last name" value="">
                                                             <div class="red" id="lname"></div>

                                                         </div>
                                                     </div>
                                                 </div>

                                                 <div class="row">
                                                     <div class="col-sm-6">
                                                         <div class="mb-3 form-group">
                                                             <label for="billinginfo-email" class="form-label">Email</label>
                                                             <input type="email" class="form-control" id="billinginfo-email" name="email" placeholder="Enter email">
                                                             <div class="red" id="email"></div>
                                                         </div>
                                                     </div>

                                                     <div class="col-sm-6">
                                                         <div class="mb-3 form-group">
                                                             <label for="billinginfo-phone" class="form-label">Phone</label>
                                                             <input type="text" class="form-control" id="billinginfo-phone" name="phone" placeholder="Enter phone no.">
                                                             <div class="red" id="phone"></div>

                                                         </div>
                                                     </div>
                                                 </div>

                                                 <div class="mb-3 form-group">
                                                     <label for="billinginfo-address" class="form-label">Address<span class="text-muted">( with pincode)</span></label>
                                                     <textarea class="form-control" id="billinginfo-address" name="address" placeholder="Enter address" rows="3"></textarea>
                                                     <div class="red" id="address"></div>
                                                 </div>
                                             </div>

                                             <div id="registereduser" class="card card-body">


                                                 <div class="row">
                                                     <div class="col-sm-6">
                                                         <div class="mb-3 form-group">
                                                             <label for="billinginfo-email" class="form-label">Email</label>
                                                             <input class="typeahead form-control" id="searchemail" name="email" type="text">
                                                             <!-- <input type="email" class="form-control" id="searchemail" name="email" placeholder="Enter email"> -->
                                                             <div class="red" id="userinfo"></div>
                                                         </div>
                                                     </div>
                                                     <div class="col-sm-6">
                                                         <div class="mb-3 form-group">
                                                             <button type="button" class="btn btn-warning btn-label  mt-4" id="searchuser">
                                                                 Search</button>
                                                         </div>
                                                     </div>
                                                     <div class="col-sm-12">
                                                         <div id="userdetails" class="mt-5">

                                                         </div>
                                                     </div>
                                                 </div>

                                             </div>
                                         </div>
                                         <div>
                                             <h5 class="mb-1">Payment Information</h5>
                                             <p class="text-muted mb-4">Please fill all information below</p>
                                         </div>
                                         <div>
                                             <div class="row g-12">
                                                 <div class="col-lg-4 col-sm-6">
                                                     <div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse.show" aria-expanded="false" aria-controls="paymentmethodCollapse">
                                                         <div class="form-check card-radio">
                                                             <input id="paymentMethod01" name="paymentMethod" type="radio" value="UPI" class="form-check-input">
                                                             <label class="form-check-label" for="paymentMethod01">
                                                                 <span class="fs-16 text-muted me-2"><i class="ri-qr-scan-fill align-bottom"></i></span>
                                                                 <span class="fs-14 text-wrap">UPI</span>
                                                             </label>
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="col-lg-4 col-sm-6">
                                                     <div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse" aria-expanded="true" aria-controls="paymentmethodCollapse">
                                                         <div class="form-check card-radio">
                                                             <input id="paymentMethod02" name="paymentMethod" type="radio" value="Credit/Debit Card" class="form-check-input" checked>
                                                             <label class="form-check-label" for="paymentMethod02">
                                                                 <span class="fs-16 text-muted me-2"><i class="ri-bank-card-fill align-bottom"></i></span>
                                                                 <span class="fs-14 text-wrap">Credit / Debit Card</span>
                                                             </label>
                                                         </div>
                                                     </div>
                                                 </div>

                                                 <div class="col-lg-4 col-sm-6">
                                                     <div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse.show" aria-expanded="false" aria-controls="paymentmethodCollapse">
                                                         <div class="form-check card-radio">
                                                             <input id="paymentMethod03" name="paymentMethod" type="radio" value="Cash on Delivery" class="form-check-input">
                                                             <label class="form-check-label" for="paymentMethod03">
                                                                 <span class="fs-16 text-muted me-2"><i class="ri-money-dollar-box-fill align-bottom"></i></span>
                                                                 <span class="fs-14 text-wrap">Cash on Delivery</span>
                                                             </label>
                                                         </div>
                                                     </div>
                                                 </div>

                                                 <div class="d-flex align-items-start gap-3 mt-3">

                                                     <button type="submit" class="btn btn-primary btn-label right ms-auto nexttab button1" data-nexttab="pills-bill-info-tab">
                                                         <i class="ri-bank-card-line label-icon align-middle fs-16 ms-2"></i>Place Order</button>
                                                 </div>

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

                                     <div class="text-center py-5" id="pills-finish">

                                         <div class="mb-4">
                                             <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>
                                         </div>
                                         <h5>Thank you ! Your Order is Completed !</h5>
                                         <p class="text-muted">You will receive an order confirmation email
                                             with
                                             details of your order.</p>

                                         <h3 class="fw-semibold"> <a href="{{route('admin.order')}}" class="text-decoration-underline">View Order</a></h3>
                                     </div>

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

                             </div>

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

                     <div class="col-xl-4">
                         <div class="card">
                             <div class="card-header">
                                 <div class="d-flex">
                                     <div class="flex-grow-1">
                                         <h5 class="card-title mb-0">Order Summary</h5>
                                     </div>
                                 </div>
                             </div>
                             <div class="card-body">
                                 <div class="table-responsive table-card">
                                     <table class="table table-borderless align-middle mb-0">
                                         <thead class="table-light text-muted">
                                             <tr>
                                                 <th style="width: 90px;" scope="col">Product</th>
                                                 <th scope="col">Product Info</th>
                                                 <th scope="col" class="text-end">Price</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             @foreach($data as $item)
                                             <tr>
                                                 <td>
                                                     <div class="avatar-md bg-light rounded p-1">
                                                         <img src="{{ asset('uploads/product/'.$item->product->image) }}" alt="" class="img-fluid d-block">
                                                     </div>
                                                 </td>
                                                 <td>
                                                     <h5 class="fs-14"><a href="{{route('admin.view-product', ['slug' => $item->product->slug])}}" class="text-dark">{{$item->product->name}}</a>
                                                     </h5>
                                                     <p class="text-muted mb-0">Quantity : {{$item->quantity}}</p>
                                                 </td>
                                                 <td class="text-end">{{$item->product->price * $item->quantity}}</td>
                                             </tr>
                                             @php
                                             $tax+=$item->product->tax;
                                             $discount+=$item->product->discount;
                                             $subtotal+=$item->product->price * $item->quantity;
                                             @endphp
                                             @endforeach
                                             <tr>
                                                 <td class="fw-semibold" colspan="2">Sub Total :</td>
                                                 <td class="fw-semibold text-end"> {{floatval($subtotal)}}
                                                     <input type="hidden" name="subtotal" value="{{floatval($subtotal)}}">
                                                 </td>
                                             </tr>
                                             <tr>
                                                 <td colspan="2">Discount
                                                     : </td>
                                                 <td class="text-end">- {{floatval($discount)}}
                                                     <input type="hidden" name="discount" value="{{floatval($discount)}}">
                                                 </td>
                                             </tr>
                                             <tr>
                                                 <td colspan="2">Estimated Tax : </td>
                                                 <td class="text-end">{{floatval($tax)}}
                                                     <input type="hidden" name="tax" value="{{floatval($tax)}}">
                                                 </td>
                                             </tr>
                                             <tr class="table-active">
                                                 <th colspan="2">Total :</th>
                                                 <td class="text-end">
                                                     <span class="fw-semibold">
                                                         {{$subtotal+$tax-$discount}}
                                                         <input type="hidden" name="total" value="{{floatval($subtotal+$tax-$discount)}}">
                                                     </span>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>

                                 </div>
                             </div>
                             <!-- end card body -->
                         </div>
                         <!-- end card -->
                     </div>
                     <!-- end col -->
                 </div>
             </form>
             <!-- end row -->

         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->

 </div>
 <script>
     $(document).on('submit', '#checkoutform', function() {
         $('.ajax-loader').css("visibility", "visible");

         var data = $('#checkoutform').serialize();
         $.ajax({
             type: "POST",
             url: "{{ route('admin.place-order') }}",
             data: {
                 "_token": "{{ csrf_token() }}",
                 'data': data
             },
             success: function(data) {
                 $("#pills-bill-info").hide('slow');
                 $("#pills-finish").show('slow');
                 $('.ajax-loader').css("visibility", "hidden");
             }


         });
     })

     $(document).on('click', '.button1', function() {
         let x = document.forms["checkoutform"]["fname"].value;
         let type = document.forms["checkoutform"]["user_type"].value;
         var flag = 0;
         if (type == 0) {
             if (x == '') {
                 $('#fname').text("First name is Required");
                 flag = 1;
             } else {
                 $('#fname').text("");
             }
             let l = document.forms["checkoutform"]["lname"].value;
             if (l == '') {
                 $('#lname').text("Last name is Required");
                 flag = 1;
             } else {
                 $('#lname').text("");
             }
             let e = document.forms["checkoutform"]["email"].value;
             var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

             if (e == '') {
                 $('#email').text("Email is Required");
                 flag = 1;
             } else if (reg.test(e) == false) {
                 $('#email').text("Invalid Email format. Please enter a valid email id");
                 flag = 1;
             } else {
                 $('#email').text("");
             }
             let p = document.forms["checkoutform"]["phone"].value;
             var regx = /^[6-9]\d{9}$/;
             if (p == '') {
                 $('#phone').text("Phone number is Required");
                 flag = 1;
             } else if (regx.test(p) == false) {
                 $('#phone').text("Invalid phone number format. Please enter a valid phone number");
                 flag = 1;
             } else {
                 $('#phone').text("");
             }
             let a = document.forms["checkoutform"]["address"].value;
             if (a == '') {
                 $('#address').text("Address is Required");
                 flag = 1;
             } else {
                 $('#address').text("");
             }
         }

     })
     $(document).on('click', '.button1', function() {
         $('#pills-finish-tab').removeAttr('disabled');
     })
     $(document).on('click', '#searchuser', function() {
         var email = $('#searchemail').val();
         $.ajax({
             type: "GET",
             url: "{{ route('admin.search-user') }}",
             data: {
                 'email': email
             },
             success: function(data) {
                 $('#userinfo').html(data);

             }
         });
     })
     //  jQuery(window).on("load", function() {
     //      $("#registereduser").show('slow');
     //      $("#billinginfo").hide('slow');
     //  });

     function clickLink(myRadio) {
         $("#billinginfo").show('slow');
         $("#registereduser").hide('slow');
     }

     function clickForm(myRadio) {
         $("#billinginfo").hide('slow');
         $("#registereduser").show('slow');

     }
 </script>

 <script type="text/javascript">
     var path = "{{ route('admin.autocomplete') }}";

     $("#searchemail").autocomplete({
         source: function(request, response) {
             $.ajax({
                 url: path,
                 type: 'GET',
                 dataType: "json",
                 data: {
                     search: request.term
                 },
                 success: function(data) {
                     response(data);
                 }
             });
         },
         select: function(event, ui) {
             $('#searchemail').val(ui.item.label);
             //     console.log(ui.item);
             return false;
         }
     });
 </script>

 @endsection