@php
use GuzzleHttp\Client;
$baseurl = env('API_URL');

$sort_no = Config::get('app.sort_no');
$end_no = Config::get('app.end_no');

@endphp

@extends('mainlayout')

@section('title')
MILIKI | Choose Payment Method, Plot No {{$plot->plotnumber}} - {{$property->name}}
@endsection

@push('extracss')
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/bd-wizard.css">



<script>
$(document).ready(function(){
    $('#myselection').on('change', function(){
        var demovalue = $(this).val(); 
        $("div.payMethod").hide();
        $("#show"+demovalue).show();
    });
});
</script>
<style>
.payMethod{
    display:none;
}
</style>

@endpush

@section('content')

<div class="page-title-section section" style="padding-bottom: 12px;">
    <div class="row ">
        <div class="col-lg-12">
            <ul class="progressbar">
              <li class="active" >Fill Owner Details</li>
              <li class="active">Choose Payment Plan</li>
              <li >Choose Payment Method</li>
              <li>Make Payment</li>
            </ul>
        </div>
    </div>
</div>

<div class="page-title-section section" style="padding-top: 12px;padding-bottom: 2px;">
    <div class="row justify-content-between align-items-center" style="padding:0em 3.5em">
        <div class="col-sm-auto col-12">

            @if($message)
            <div class="alert alert-success alert-dismissible fade show" role="alert" style="margin-bottom:1em">
              {{$message}}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            @endif
           
            <h3 class="title" style="text-align:left;font-size: 32px;">{{ __('messages.purchase_plot_text') }} {{$plot->plotnumber}} - {{$property->name}}</h3>

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

    <div class="checkout-section section section-padding-bottom mt-4">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!-- Checkout Form Start-->
                        <div class="row row-40">

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

                                    <!-- Cart Total -->
                                    <div class="col-12 max-mb-60">

                                        <h4 class="checkout-title">{{ __('messages.order_summary') }}</h4>

                                        <div class="checkout-cart-total">

                                            <h4>Order ID : {{$plotOrder->referenceid}}</h4>
                                            <h5 class="">{{ __('messages.plot_no') }}{{$plot->plotnumber}} - {{$property->name}}</h5>
                                            <p style="padding:0;border-bottom: none;">Sold By: {{$property->propertyownername}} </p>
                                            <p style="padding:0;border-bottom: none;">{{ __('messages.area_size') }}: {{$plot->area_size}} SQM</p>
                                            <p style="padding:0;border-bottom: none;">{{ __('messages.land_use') }} : {{$plot->landuse}}</p>
                                            <p style="padding:0;border-bottom: none;">Initial Installment Expiry : {{$plotOrder->initial_expiry_date}}</p>
                                            <p style="padding:0;border-bottom: none;">Initial Installment Amount : TZS {{number_format($plotOrder->initial_payment_amount)}}</p>
                                            <p class="mb-4"  style="padding:0;">Last Installment Expiry : {{$plotOrder->full_expiry_date}}</p>

                                            <h4 style="font-size:18px;">{{ __('messages.payment_type') }} <span>{{ __('messages.fee') }}</span></h4>

                                            <ul>
                                                <li style="font-size:16px;font-weight: 300">{{$type}}<span>TZS {{number_format($payment)}}</span></li>
                                                
                                            </ul>


                                        </div>

                                        

                                    </div>


                                </div>
                            </div>

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

                                

                                <!-- Billing Address -->
                               
                                <div id="billing-form" class="mb-10">
                                    <h4 class="checkout-title">{{ __('messages.choose_a_payment_method') }}</h4>

                                    @if($errors)
                                       @foreach ($errors->all() as $error)
                                          <div>{{ $error }}</div>
                                      @endforeach
                                    @endif
                                    
                                    <div class="row">

                                        <div class="col-md-12 col-12 mb-20 checkout-form">

                                            <div class="course" style="border: 1px solid #6b6b6b;padding: 1em;">
                                                
                                                <label>PAYMENT METHOD</label>

                                                <div class="row">
                                                    <div class="col-7">
                                                        <select name="method" id="myselection">
                                                            <option>Choose Method</option>
                                                            <option value="Bank">Bank</option>
                                                            <option value="Card">Card</option>
                                                            <option value="MobileMoney">Mobile Money</option>
                                                            <option value="PayLater">Pay Later</option>
                                                        </select>
                                                    </div>
                                                </div> 


                                                <div class="row" style="margin-top: 1em;">

                                                    <div class="col-md-12 col-12 mb-20 payMethod" id="showBank">

                                                         <form method='POST' action="/orderpost/mmoney" class="checkout-form">
                                                            @csrf
                                                            <input type="hidden" name="project_id" value="{{urlencode(base64_encode( (($proj_id*$sort_no)/$end_no) ))}}">
                                                            <input type="hidden" name="plot_id" value="{{urlencode(base64_encode( (($plot_id*$sort_no)/$end_no) ))}}">
                                                            <input type="hidden" name="project_name" value="{{$property->name}}">
                                                            <input type="hidden" name="plot_no" value="{{$plot->plotnumber}}">
                                                            <input type="hidden" name="property_owner" value="{{$property->propertyownername}}">
                                                            <input type="hidden" name="area_size" value="{{$plot->area_size}}">
                                                            <input type="hidden" name="land_use" value="{{$plot->landuse}}">
                                                            <input type="hidden" name="payment_type" value="{{$type}}">
                                                            <input type="hidden" name="fee" value="{{$payment}}">
                                                            <input type="hidden" name="via" value="bank">


                                                            <div class="course" style="border: 1px solid #6b6b6b;padding: 1em;">
                                                                <label>{{ __('messages.bank') }}</label>
                                                                <div class="row">
                                                                    <div class="col-7">
                                                                        <select name="method">
                                                                           
                                                                            <option value="CRDB">CRDB Bank</option>
                                                                            <option value="NBC">National Bank of Commerce (NBC)</option>
                                                                            <option value="NMB">National Microfinance Bank (NMB)</option>
                                                                           
                                                                        </select>
                                                                    </div>

                                                                    <div class="col-5">
                                                                        <button type="submit" class="btn btn-info">{{ __('messages.select_method') }}</button>
                                                                    </div>
                                                                    
                                                                </div>
                                                                

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

                                                    <div class="col-md-12 col-12 mb-20 payMethod" id="showMobileMoney">

                                                         <form method="POST" action="/orderpost/mmoney" class="checkout-form">
                                                            @csrf
                                                             <input type="hidden" name="project_id" value="{{urlencode(base64_encode( (($proj_id*$sort_no)/$end_no) ))}}">
                                                             <input type="hidden" name="plot_id" value="{{urlencode(base64_encode( (($plot_id*$sort_no)/$end_no) ))}}">
                                                            <input type="hidden" name="project_name" value="{{$property->name}}">
                                                            <input type="hidden" name="plot_no" value="{{$plot->plotnumber}}">
                                                            <input type="hidden" name="property_owner" value="{{$property->propertyownername}}">
                                                            <input type="hidden" name="area_size" value="{{$plot->area_size}}">
                                                            <input type="hidden" name="land_use" value="{{$plot->landuse}}">
                                                            <input type="hidden" name="payment_type" value="{{$type}}">
                                                            <input type="hidden" name="fee" value="{{$payment}}">
                                                            <input type="hidden" name="via" value="mmoney">

                                                        <div class="course" style="border: 1px solid #6b6b6b;padding: 1em;">
                                                            
                                                            <label>{{ __('messages.mobile_money') }}</label>

                                                            <div class="row">
                                                                <div class="col-7">
                                                                    <select name="method">
                                                                        <option value="Mpesa">Mpesa</option>
                                                                        <option value="Tigopesa">Tigopesa</option>
                                                                        <option value="Airtel Money">Airtel Money</option>
                                                                        <option value="HaloPesa">HaloPesa</option>
                                                                        <option value="T-Pesa">T-Pesa</option>
                                                                        <option value="Ezy Pesa">Ezy Pesa</option>
                                                                    </select>
                                                                </div>

                                                                <div class="col-5">
                                                                    <button type="submit" class="btn btn-info">{{ __('messages.select_method') }}</button>
                                                                </div>
                                                                
                                                            </div>

                                                           
                                                            

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

                                                    <div class="col-md-12 col-12 mb-20 payMethod" id="showCard">

                                                        <div class="course" style="border: 1px solid #6b6b6b;padding: 1em;">
                                                            <form method="POST" action="/orderpost/mmoney" class="checkout-form">
                                                            @csrf
                                                             <input type="hidden" name="project_id" value="{{urlencode(base64_encode( (($proj_id*$sort_no)/$end_no) ))}}">
                                                             <input type="hidden" name="plot_id" value="{{urlencode(base64_encode( (($plot_id*$sort_no)/$end_no) ))}}">
                                                            <input type="hidden" name="project_name" value="{{$property->name}}">
                                                            <input type="hidden" name="plot_no" value="{{$plot->plotnumber}}">
                                                            <input type="hidden" name="property_owner" value="{{$property->propertyownername}}">
                                                            <input type="hidden" name="area_size" value="{{$plot->area_size}}">
                                                            <input type="hidden" name="land_use" value="{{$plot->landuse}}">
                                                            <input type="hidden" name="payment_type" value="{{$type}}">
                                                            <input type="hidden" name="fee" value="{{$payment}}">
                                                            <input type="hidden" name="via" value="card">
                                                            

                                                            <label>Pay With Card</label>

                                                            <div class="row">
                                                                <div class="col-7">
                                                                    <select name="method">
                                                                        <option value="mastercard">Mastercard</option>
                                                                        <option value="visa">Visa</option>
                                                                    </select>
                                                                </div>

                                                                <div class="col-5">
                                                                    <button type="submit" class="btn btn-info">{{ __('messages.select_method') }}</button>
                                                                </div>
                                                                
                                                            </div>

                                                        </form>

                                                           
                                                            

                                                        </div>
                                                    </div>

                                                    <div class="col-md-12 col-12 mb-20 payMethod" id="showPayLater">

                                                        <div class="course" style="border: 1px solid #6b6b6b;padding: 1em;">
                                                            
                                                            <label>Pay Later</label>

                                                            <div class="row">

                                                                <div class="col-4">
                                                                    <a href="/skip_to_myprofile" type="submit" class="btn btn-info" style="width:100%">Skip And Pay Later</a>
                                                                </div>
                                                                
                                                            </div>

                                                           
                                                            

                                                        </div>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>

                           

                        </div>

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

@endsection

@push('extrascripts')
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="/assets/js/jquery.steps.min.js"></script>
  <script src="/assets/js/bd-wizard.js"></script>

@endpush