@extends('layouts.app')
@section('content')
<div class="container mt-5">
    <div class="col-md-6 offset-md-3 mt-5">
        <div class="card card-outline card-primary card-widget widget-user shadow pb-5">
            <div class="card-body">
                <form id="password-form" action="{{route('post.validate.protected.form', ['id' => $submission_id])}}"
                        method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="text-center">
                                <i class="far fa-credit-card fa-2x"></i>
                            </h4>
                            <h4 class="text-center">
                                @lang('messages.this_form_is_payment_required')
                            </h4>
                            <p class="text-center form-text text-muted">
                                {{__('messages.form_payment_introduction')}}
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="input-group">
                                <div class="col-md-12">
                                    <label for="payment_name">
                                        @lang('messages.name')
                                        <span class="error">*</span>
                                    </label>
                                    <input type="text" class="form-control"
                                    name="payment_name" id="payment_name" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="payment_email">
                                        @lang('messages.email')
                                        <span class="error">*</span>
                                    </label>

                                    <input type="text" class="form-control"
                                    name="payment_email" id="payment_email" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="payment_phone">
                                        @lang('messages.phone')
                                        <span class="error">*</span>
                                    </label>

                                    <input type="text" class="form-control"
                                    name="payment_phone" id="payment_phone" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="payment_address">
                                        @lang('messages.address')
                                        <span class="error">*</span>
                                    </label>
                                    <input type="text" class="form-control"
                                    name="slug" id="payment_address" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="payment_amount">
                                        @lang('messages.amount')
                                        <span class="error">*</span>
                                    </label>
                                    <input type="text" class="form-control"
                                    name="payment_amount" id="payment_amount" required readonly value="{{ $amount}}">
                                </div>
                                <div class="col-md-8 pt-4">
                                    <div class="input-group-append ">
                                        <button type="submit" class="btn btn-sm bg-primary form-control">
                                            <i class="fas fa-money-check"></i> @lang('messages.continue')
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-4 pt-4">
                                    <div class="input-group-append ">
                                        <button type="button" class="btn btn-sm btn-default form-control">
                                            <i class="fas fa-minus-circle"></i> @lang('messages.cancel')
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="error-msg text-danger"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    $(function() {
        $("form#password-form").validate({
            submitHandler: function(form, e) {
                e.preventDefault();
                if ($('form#password-form').valid()) {
                    $(".error-msg").html('');
                    $.ajax({
                        method:"POST",
                        url: $("form#password-form").attr("action"),
                        data: {
                            password: $("#password").val()
                        },
                        dataType: "json",
                        success: function(response) {
                            if(response.success == true){
                                window.location = response.redirect;
                            } else {    
                                $(".error-msg").html(response.msg);
                            }
                        }
                    });
                }
            }
        });
    });
</script>
@endsection