@extends('front.layouts.app')
@section('content')

<main>
<style>

.contact::after {
    content: unset;
}
h5.card-title {
    margin-bottom: 10px;
    color: #000;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
}

.cnx form {
    margin-top: 35px;
    position: relative;
    left: 60px;
}
.contact .btn-div a{
    margin-left: 138px;
}

.cnx {
    padding: 100px 0 70px;
    margin-top: 80px;
}

.contact .h33 {
    margin-bottom: 0;
    color: #000;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
}

.contact p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    margin: 21px 0 45px;
    line-height: 31px !important;
    color: #000 !important;
    padding: 0 !important;
}
.paymentCard {
    margin: 0 20px;
}
.paymentCard img {
    width: 100%;
    height: 45px;
    object-fit: contain;
    border-radius: 30px;
    margin-top: 25px;
}
.card-body {
    padding: 40px 18px 35px 18px;
}

span.text-danger {
    font-size: 14px;
}

p.card-text {
    margin: 20px 0 0px 0;
    font-size: 14px !important;
}

h5.card-title {
    font-size: 23px !important;
    margin-bottom: 16px !important;
}
.diss.text-center {
    margin-top: 120px;
}

.pok {
    margin-bottom: 118px !important;
}
span#error_msg1, span#error_msg2 {
    color: red;
    font-size: 13px;
    font-family: 'Poppins';
}

</style>
<main>


    <section class="about contact cnx paypage">
        <div class="container">
            <div class="row justify-content-center">

                <div class="col-12 col-lg-12">
                    <div class="ab-con-div ">
                        <h3 class="h3 h33">Fee for Submissions – Purpose</h3>
                        <p class="pok">The purpose and need for the requested fee for submissions ($10) is primarily to discourage
                            fabricated submissions, or those with ulterior agendas/motives, in our attempt to ensure the
                            validity of submissions and the integrity of the Website. It is also to allow not only for
                            the administrative needs and furthering of the Website and our Mission, but also to provide
                            assistance whenever and wherever possible, to those who have suffered.
                        </p>
                    </div>


                </div>

               
                <div class="col-12 col-lg-12">
                       <div class="row justify-content-center">
                        
                        <div class="col-12 col-md-5 col-lg-5 panel">
                        <div class="card paymentCard h-100" style="width: 80%;">
                            <div class="card-body">
                                
                                <h5 class="card-title">Pay With Paypal</h5>
                                <!--<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>-->
                                <span class="text-danger">Note: Minimum review payment is $10, but you can pay more than that if you want.</span>
                                <p class="card-text">Please enter the amount.</p>
                                <input type="number" class="form-control" value="10.00" id="myInput1">
                                <span id="error_msg1"></span>
                                
                                <a href="javascript:;" class="" onclick="validateInput1()"> <img src="{{ asset('assets/front/images/paypal.png') }}" /></a>
                            </div>
                        </div>
                        </div>
                        <div class="col-12 col-md-5 col-lg-5 panel">
                        <div class="card paymentCard h-100" style="width: 80%;">
                            <div class="card-body">
                                <h5 class="card-title">Pay With Stripe</h5>
                                <!--<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>-->
                                <span class="text-danger">Note: Minimum review payment is $10, but you can pay more than that if you want.</span>
                                <p class="card-text">Please enter the amount.</p>
                               <input type="number" class="form-control" value="10.00"  id="myInput2" >
                               <span id="error_msg2"></span>
                                
                                <a href="javascript:;" class="" onclick="validateInput2()"><img src="{{ asset('assets/front/images/stripe.png') }}" style="background: #6772e5;"/></a>
                            </div>
                        </div>
                        </div>
                        
                    </div>
                </div>

                <div class="col-12">
                    <div class="diss text-center">
                        <h3 class="h3 h33">Disclaimer:</h3>

                        <ul class="sync">
                            <li>This Website is not responsible for the content in submissions, other than those that
                                have been verified/witnessed by DC.US Staff, and as such we are not responsible for
                                erroneous or falsified submissions. We ask that submissions be valid and truthful and
                                any misrepresentation of truth or fact is the sole responsibility of the submitter(s).
                                VOICE OF FREEDOM LLC
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

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


<script>
  function validateInput1() {
        // Get the input element
        var inputElement = document.getElementById("myInput1");

        var inputValue = parseFloat(inputElement.value).toFixed(2);

        if (inputValue < 10.00) {
            document.getElementById('error_msg1').innerHTML = "Amount should be $10 or maximum.";
        } else {
           document.getElementById('error_msg1').innerHTML = "";
           inputElement.value = inputValue;
           var url1 = "/lousylawyers/public/process-transaction/" + encodeURIComponent(inputValue);

           window.location.href = url1;
        }
    }
      function validateInput2() {
        var inputElement = document.getElementById("myInput2");

        var inputValue = parseFloat(inputElement.value).toFixed(2);

        if (inputValue < 10.00) {
            // If it is less than 10.00, set the value to 10.00
            document.getElementById('error_msg2').innerHTML = "Amount should be $10 or maximum." ;
        } else {
            document.getElementById('error_msg2').innerHTML = "";
          inputElement.value = inputValue;
          
          var url2 = "/lousylawyers/public/create-payment-link/" + encodeURIComponent(inputValue);

           window.location.href = url2;
        }
    }
</script>

</main>

@endsection