@extends('layouts.welcomelayouts.app')

@section('title')
<title>Check Out - {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection

@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="{{$appSetting->h1}} {{$appSetting->slogan}}">
<meta property="og:description" content="{!!$appSetting->meta_description!!}">
<meta property="og:image" content="{asset($appSetting->logo())}}">
<meta property="og:url" content="{{route('welcome.checkout')}}">
@endsection

@push('css')
<style>
  .table-bordered td, .table-bordered th {
    padding: 5px;
  }

  @media only screen and (max-width: 770px) {
    .table-bordered td, .table-bordered th {
      font-size: 12px;
      padding: 2px 5px;
    }
  }
    .grandTotalPrice22{
        display:none;
    }
</style>
@endpush

@section('contents')

<div class="row" style="background: #ffffff;margin: 0;">
  <div class="col-md-2 hidemobiletopsidebar" style="padding: 0;">
    @include('layouts.welcomelayouts.topsidebarmenu')
  </div>
  <div class="col-md-10">
   <p style="margin: 0;cursor: pointer;padding: 5px;"><a href="{{ route('welcome.shoppingcart') }}" style="text-decoration: none;color: #03A9F4;">Cart View <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> Shipping & Billing <i class="fa fa-angle-double-right" aria-hidden="true"></i><span style="color: #cecece;"> Complete</span></p>
 </div>
</div>

<form method="post"  action="{{ route('welcome.checkoutPost') }}">

  @csrf


  <div class="fullcartdiv cart-all-div">
    <div class="row" style="margin:0;">
      <div class="col-md-7 cart-table-div">
        <div class="cart-table-items-div">
          @include('alerts.alerts')
          <p style="font-weight: bold;">BILLING DETAILS</p><hr>
          <div class="form-group">
            <label style="margin: 0;padding: 5px 0;font-size: 18px;">Name</label>
            <input type="text" name="name" value="{{$user->name}}" class="form-control" placeholder="Enter Your Name" required="">
          </div>
          <div class="form-group">
            <label style="margin: 0;padding: 5px 0;font-size: 18px;">Email</label>
            <input type="email" name="email" class="form-control" value="{{$user->email}}" placeholder="Enter Your Email">
          </div>
          <div class="form-group">
            <label style="margin: 0;padding: 5px 0;font-size: 18px;">Mobile</label>
            <input type="text" value="{{$user->mobile}}" name="mobile" class="form-control" placeholder="Enter Your Phone" required="">
          </div>
          <div class="form-group">
            <label style="margin: 0;padding: 5px 0;font-size: 18px;">Shipping Address</label>
            <textarea name="address" class="form-control" placeholder="Enter Shipping Address" rows="5" required="">{{$user->address}}</textarea>
          </div>
        </div>
      </div>
      <div class="col-md-5 cart-table-totals">
        <div class="cart-table-totals-div">
          <p style="font-weight: bold;">YOUR ORDER</p><hr>

  
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th>SubTotal</th>
                <td style="text-align: right;">BDT <span class="cartTotalPrice">{{ $cartTotalPrice }}</span></td>
              </tr>

               

              <tr>
                <th>Discount</th>
                <td style="text-align: right;">BDT <span class="cartDiscount">{{ $couponDisc }}</span></td>
              </tr>


              <tr>
                <th>Delivery Charge</th>
                <td style="text-align: right;">BDT <span class="cartDeliveryCharge">60</span></td>
              </tr>
              <tr>
                <th>Tax/Vat: (0 %)</th>
                <td style="text-align: right;">BDT <span class="cartTax">0</span></td>
              </tr>

              <tr>
                <th>Grand Totals</th>
                <td style="text-align: right;">BDT 
                <span class="grandTotalPrice60">{{$gt}}</span>
                <span class="grandTotalPrice100" style="display: none;">{{$gt}}</span>
                <!--<input type="hidden" class="grandTotalPrice22" name="totalvalue" value="{{$gt}}">-->
                </td>
              </tr>
            </tbody>
          </table>
        
          <div class="">
              <center>
               <p style="margin: 0;padding: 5px;background: #232f3e;color: white;font-size: 20px;">Coupon Apply</p>
          </center>
                    <div class="coupon-apply" style="padding: 15px;">
                          <form method="post" action="{{ route('user.myCouponApply') }}">
                            @csrf
                
                            @include('alerts.alerts')
                
                            <h5>Use Coupon Code</h5>
                            <div class="input-group input-group-sm mb-3">
                  <input type="text" class="form-control" name="coupon_code" placeholder="Apply your coupon code">
                  <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">Apply Coupon</button>
                
                  </div>
                
                
                </div>
                @if($mcc = Session::get('my_coupon_code'))
                <span class="help-text">Your Coupon Code: {{ $mcc }}</span>
                @else
                  <span class="help-text">Enter your coupon code if you have one.</span>
                @endif
                            
                            
                           
                          </form>
                        </div>  
            
           <center>
            <p style="margin: 0;padding: 5px;background: #232f3e;color: white;font-size: 20px;">Delivery Area</p>
          </center>
          <label style="cursor: pointer;width: 100%;">
            <div class="row intercity" style="padding: 10px; border: 1px solid #ececec;background:#ececec;margin:0; ">
              <div class="col-2" style="text-align: center;padding: 0;">
                <input type="radio" name="delivery_area" value="1" style="cursor: pointer;width: 15px;height: 15px;margin-top:5px;" required="" checked="">
              </div>
              <div class="col-10">
                <div>
                  <p style="padding: 10px 0;font-size: 12px;margin: 0;">Dhaka City Delivery (Only for Dhaka City ) | 1-2 Days BDT 60</p>
                </div>
              </div>
            </div>
          </label>
          <label style="cursor: pointer;width: 100%;">
            <div class="row outtercity" style="padding: 10px; border: 1px solid #ececec;background:#ececec;margin:0; ">
              <div class="col-2" style="text-align: center;padding: 0;">
                <input type="radio" name="delivery_area" value="2" style="cursor: pointer;width:15px;height:15px;margin-top:5px;" required="">
              </div>
              <div class="col-10">
                <div>
                  <p style="padding: 10px 0;font-size: 12px;margin: 0;">Out of Dhaka City (On Courier Service) | 5-7 Days BDT 100</p>
                </div>
              </div>

            </div>
          </label>
        </div>
        <div>
    {{-- <center>
        <p style="margin: 0;padding: 5px;background: #232f3e;color: white;font-size: 20px;">Payment Method</p>
      </center> --}}
      <div>
      {{-- <p style="margin: 0;padding: 10px 0;font-size: 18px;font-weight: bold;">Select Payment Method</p>

      <div style="display: inline;">
          <label id="handcash" style="cursor: pointer;">
              <input type="radio" name="payments" value="1" style="padding:3px 5px;" checked="">
              <span>
                  <img src="http://tanbinas.com/public/images/1581057497.5e3d05d93c253.png" width="100px;">
              </span>
          </label>
        </div> --}}
      {{-- <div style="display: inline;">
        <label id="bkash" style="cursor: pointer;">
            <input type="radio" name="payments" value="2" style="padding:3px 5px;">
            <span>
                <img src="http://tanbinas.com/public/images/1581057687.5e3d0697f11c4.png" width="100px;">
            </span>
        </label>
    </div>
    <div style="display: inline;">
        <label id="rocket" style="cursor: pointer;">
            <input type="radio" name="payments" value="3" style="padding:3px 5px;">
            <span>
                <img src="http://tanbinas.com/public/images/1581057723.5e3d06bb204df.png" width="100px;">
            </span>
        </label>
      </div> --}}
    </div>
{{-- <div class="handcashdiv" style="padding: 15px;background: rgb(239, 239, 239);border-radius: 5px;">
    <h3>Hand Cash</h3>
    <div style="padding: 10px 0;">
        Hand Cash Delivery
    </div>
  </div> --}}
{{-- <div class="bkashdiv" style="display: none;padding: 15px;background: rgb(239, 239, 239);border-radius: 5px;">
    <h3>bKash</h3>
    <span>0174210XXXXXX</span>
    <div style="padding: 10px 0;">
        bkash payment personal
    </div>
  </div> --}}
{{-- <div class="rocketdiv" style="display: none;padding: 15px;background: rgb(239, 239, 239);border-radius: 5px;">
    <h3>Rocket</h3>
    <span>0174210XXXXXX</span>
    <div style="padding: 10px 0;">
        Bkash payment Method
    </div>
  </div> --}}
{{-- <div class="inputdivpaymet">

</div> --}}
</div>
<hr>
<div class="row" style="margin: 0;">
  <div class="col-md-5">
    <label style="padding: 0 5px;"><input type="checkbox" name="terms" required="" style="cursor: pointer;"></label><label> Terms &amp; Condition</label>
  </div>
  <div class="col-md-7">
    <button type="submit" class="btn btn-success">Confirm Order</button>
  </div>
</div>
</div>
</div>
</div>
</div>
</form>

<br> 



@endsection


@push('js')


<script>

  $(function(){


//     $('input:radio[name="delivery_area"]').change(
//       function(){
//         if ($(this).is(':checked') && $(this).val() == '1') {
            
//             alart('1');
//           }
//         });


// if($('input:radio:checked').length > 0){
// // go on with script
//  }else{
//     // NOTHING IS CHECKED
//  }

$('input:radio[name="delivery_area"]').change(function(){
    if($(this).val() == '1'){
    $(".grandTotalPrice100").hide();
     $(".grandTotalPrice60").show();
     $(".cartDeliveryCharge").text(60);
    }
    else if($(this).val()=='2')
    {

        // var cc = Number($('.grandTotalPrice').text());
        //  alert(cc);
     // $(".cartDeliveryCharge").text(Number(100));
    //   var cc = Number($('.grandTotalPrice').text());
    //     var cc=$('.grandTotalPrice').text();
    //     alert(Number($('.grandTotalPrice').text()));
    //     alert(cc);
    //   var sum = $('.grandTotalPrice').text() + 40;
       $(".grandTotalPrice60").hide();
       $(".grandTotalPrice100").show();
       $(".cartDeliveryCharge").text(100);
    }
});


// $('input:radio[name="delivery_area"]').change(function(){
//     if($(this).val() == '1'){
       
//       $(".cartDeliveryCharge").text(Number(60));
//       var cc = Number($('.grandTotalPrice').text());
//       var sum = cc - 40;
//       $(".grandTotalPrice").empty().text(Number(sum));
//     }
//     else if($(this).val()=='2')
//     {
//          alert($('.grandTotalPrice22').text());
//      // $(".cartDeliveryCharge").text(Number(100));
//       var cc = Number($('.grandTotalPrice').text());
     
//       var sum = cc + 40;
//       $(".grandTotalPrice").empty().text(Number(sum));
//     }
// });

    
  });


</script>

@endpush