@extends('layouts.master')
@section('title', 'Verify Code | Ajolla Inc')
@section('links')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<style>
    .input-group-text {
        height: 100%;
    }

    .ajolla-btn-primary {
        background-color: #6045FB;
        color: white;
    }

    .form-control::placeholder {
        color: #b4b4b4;
    }
</style>
@stop
@section('content')
<div class="container">
    <div class="row ajolla-row-1">
        <div class="col-md-8 mx-auto">
            <h1 class="text-center">Verify a Donation Code</h1>
            <h5 class="text-center text-muted">Please enter the validation key to verify this donation code.</h5>
        </div>
    </div>

    <div class="row ajolla-row-4">
        <div class="col-md-8 content-center mx-auto">
            @csrf
            <div class="row xs-submit-wraper ajolla-row-6">
                <div class="col-md-7 mx-auto">
                    <h4 class="text-center">Code: <b><span id="donation-code">{{$code}}</span></b></h4>
                </div>
            </div>
            <div class="row xs-margin-0 xs-mb-30">
                <div class="col-md-6 xs-padding-0 xs-pr-15 mx-auto">
                    <div class="xs-input-group">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                            </div>
                            <input type="password" name="validation-key" class="form-control form-control-lg" id="validation-key" placeholder="Validation key">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row xs-submit-wraper ajolla-row-5">
                <div class="col-md-3 mx-auto">
                    <button name="submit" id="xs_contact_submit" class="form-control btn ajolla-btn-primary">VALIDATE</button>
                </div>
            </div>
        </div>
    </div>
</div>

@stop
@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
    $('#xs_contact_submit').click(function() {
        var donation_code = $('#donation-code').text();
        var validation_key = $('#validation-key').val();
        if (donation_code && validation_key) {
            var submitURL = "http://127.0.0.1:8000/api/validate/qr-code";
            // var submitURL = "{{env('APP_URL') . '/validate/qr-code'}}";
            var formdata = new FormData();
            formdata.append('donation_code', donation_code);
            formdata.append('validation_key', validation_key);
            var requestOptions = {
                method: 'POST',
                body: formdata,
                redirect: 'follow'
            };
            fetch(
                submitURL, requestOptions
            ).then(data => {
                return data.json();
            }).then(
                result => {
                    if(result.status_code == 200){
                        toastr.success(result.data)
                    }else if(result.errors){
                        toastr.error(result.errors)
                    }else{
                        toastr.error(result.message)
                    }
                    console.log(result)
                }
            );
        } else {
            toastr.error('Error! All fields are required');
        }
    });
</script>
@stop