
@extends('client.layouts.app')
@section('title','إنهاء الطلب')
@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
          <div class="row breadcrumbs-top">
            <div class="col-12">

              <h2 class="content-header-title float-start mb-0">
                إنهاء الطلب
             </h2>
              <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{route('client.home')}}">لوحة التحكم </a>
                  </li>
                  <li class="breadcrumb-item"><a href="{{route('client.packages.index')}}">الباقات</a>
                  </li>
                  <li class="breadcrumb-item active" > 
                   {{$package->package_name}}             
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
          <div class="mb-1 breadcrumb-right">
            <div class="dropdown">

            </div>
          </div>
        </div>
      </div>
      <div class="content-body">

        <section class="app-user-list row">

    <!-- list and filter start -->
 <div class="col-md-8 col-12 ">   
    <div class="card">
      <div class="card-body border-bottom">
        <h4 class="card-title"  style="direction: rtl; text-align: right;"> حدد الخطة المناسبة لك </h4>
        <h4>  الباقة المختارة :  {{$package->package_name}}  </h4>   
        <p> يعتمد السعر علي عدد الشهور , فكلما زاد عدد الشهور قل سعر الشهر الواحد</p> 
 
      </div>
      <div class="card-body">

        <div class="row">
        @foreach($package->types as $type)
        <?php $months = preg_replace('/[^0-9]/', '', $type->type_name); ?>
        <div class="col-lg-4 col-md-4 col-6 type" id="{{$type->id}}" >
            <div id="price_{{$type->id}}" style="display:none">{{$type->type_price}}</div> 
            <div id="period_{{$type->id}}" style="display:none">{{$type->period}}</div> 
            <div class="card card-tiny-line-stats">
              <div class="card-body " align="center">
                <p>{{$type->type_name}}  </p>
                      <h1 class="pricing-enterprise-value fw-bolder text-primary">{{$type->type_price}} MRU</h1>
                        <p> MRU {{number_format($type->type_price/$months,1)}} / الشهر</p>    
                        <div id="check_{{$type->id}}" class="check" style="display:none"><i style="width: 35;height: 35; color:green" data-feather='check' ></i></div>  
              </div>
            </div>
          </div>
        @endforeach
          
      </div>
      </div>
    </div>
</div>


<div class="col-md-4 col-12 ">   
    <div class="checkout-options">
        <div class="card">
          <div class="card-body">
            <label class="section-label form-label mb-1">ملخص الطلب</label>
            <div class="coupons input-group input-group-merge">
              <input type="text" class="form-control" placeholder="كوبون الخصم" aria-label="Coupons" aria-describedby="input-coupons">
              <span class="input-group-text text-primary ps-1" id="input-coupons">تفعيل</span>
            </div>
            <hr>
            <div class="price-details">

              <ul class="list-unstyled">
                <li class="price-detail">
                    <div style="display: flex; justify-content: space-between;">
                  <div  class="detail-title">إجمالي قيمة الباقة</div>
                  <div  class="detail-amt">0 MRU</div>
                    </div>
                </li>
                <br>
                <li class="price-detail">
                <div style="display: flex; justify-content: space-between;">
                  <div  class="detail-title">الخصم</div>
                  <div   class="discount-amt discount-amt text-success">0 MRU</div>
                </div>
                </li>
  
              </ul>
              <hr>
              <ul class="list-unstyled">
                <li class="price-detail">
                    <div style="display: flex; justify-content: space-between;">
                 <input value="0" id="total" type="hidden" name="total">
                 <input value="0" id="type" type="hidden" name="type">

                  <div class="detail-title detail-total">الإجمالي</div>
                  <div class="detail-amt fw-bolder total">0 MRU</div>
                    </div>
                </li>
              </ul>
              <hr>
              <div id="paypal-button" align="center" style="display: none"> </div>
              <div align= "center" style="display: none" id="contact">
                <br>
              <a target="_blank" href="https://wa.me/+22226440645?text"
              class="btn btn-md btn-block btn-outline-success">
               <i class="fa fa-whatsapp"></i>
               اشترك معنا عن طرق الواتساب
           </a>
          </div>
            </div>
          </div>
        </div>
        <!-- Checkout Place Order Right ends -->
      </div>
</div>


    <!-- list and filter end -->
  </section>
</div>
</div>
</div>
@endsection


@section('style')
<link rel="stylesheet" type="text/css" href="https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/app-assets/css-rtl/pages/app-ecommerce.min.css">
@endsection

@section('script')
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
    $('.type').click(function(){
   $('.check').hide();
   var id =  $(this).attr('id');
   $('#check_'+id).show() ;
   var price = $('#price_'+id).text();
    var period = $('#period_'+id).text();
    $('.detail-amt').text(price+" MRU");
    $('.total').text(price+" MRU");
    $('#paypal-button').show();  
    $('#total').val(price);
    $('#type').val(id);
   $('#contact').show() ;


    });

paypal.Button.render({
    env: 'sandbox',
    client: {
        sandbox: 'ARnpVhpiySrvGrOB0o1WIsfHjKS9CsD_G4V2duow4Ad9pUBht6eatDgYxIra1u21XZw9wZ9Ey998TsHP',
        production: 'ARnpVhpiySrvGrOB0o1WIsfHjKS9CsD_G4V2duow4Ad9pUBht6eatDgYxIra1u21XZw9wZ9Ey998TsHP'
    },
    locale: 'en_US',
    style: {
            
        label: 'paypal',
        size: 'medium',
        color: 'blue',
        shape: 'rect',
        fundingicons: 'true',
        
    },
    funding: {
        allowed: [paypal.FUNDING.CARD],
        disallowed: [paypal.FUNDING.CREDIT]
    },

    payment: function(data, actions) {
        return actions.payment.create({
            transactions: [{
                amount: {
                    total: $('#total').val() / 0.025,
                    currency: 'USD'
                }
            }]
        });
    },
    onAuthorize: function(data, actions) {
        return actions.payment.execute()
            .then(function() {
                window.location = "/dashboard/packages/Paypal/" + data.paymentID + "/" + data.paymentToken + "/" + data.payerID + "/{{$package->id}}/"+$('#type').val()+"/";
            });
    },
    onCancel: function(data, actions) {
        toastr.warning("رفض العملية من جهه العميل","تم إلغاء عملية الدفع",{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });  

    }
}, '#paypal-button');


</script>
@endsection