@extends('layout')

@section('title', 'CSR Generator Form')

{{--@section('meta:title', $page->title)--}}
{{--@section('meta:description', $page->meta_description)--}}

@section('content')
    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }     </style>
    @include('commons.banner')

    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card tabs-left style-default-light">
                        <ul class="card-head nav nav-tabs" data-toggle="tabs">
                            <li class="active"><a href="#generator">CSR Generator</a></li>
                            <li class=""><a href="#decoder">CSR Decoder</a></li>
                        </ul>
                        <div class="card-body tab-content style-default-bright">
                            <div class="tab-pane active" id="generator">
                                <form action="{{ route('csr.generate') }}" method="post"
                                      class="form form-validate form-validate-grecaptcha" role="form" novalidate>
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="country" id="country"
                                               placeholder="NP" required>
                                        <label for="feedback_name">Country</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="state" name="state" placeholder="3"
                                               required>
                                        <label for="feedback_email">State/Province</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="locality" id="locality"
                                               placeholder="Patan" required>
                                        <label for="feedback_subject">Locality</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="organization" id="organization"
                                               placeholder="AWT" required>
                                        <label for="feedback_message">Organization</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="organizationalUnit"
                                               id="organizationalUnit" placeholder="IT" required>
                                        <label for="feedback_message">Organizational Unit</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="commonName" id="commonName"
                                               placeholder="example.com" required>
                                        <label for="feedback_message">Common Name</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control" name="email" id="email"
                                               placeholder="test@example.com" required data-toggle="tooltip"
                                               data-placement="right"
                                               title="Please use: admin@domain.com  hostmaster@domain.com  webmaster@domain.com">
                                        <label for="feedback_message">Email Address</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="passkey" id="passkey"
                                               placeholder="Passkey/Secret">
                                        <label for="feedback_message">Passkey/Secret (Optional)</label>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="digestAlgo" name="digestAlgo">
                                            <option value="sha256" selected>sha256</option>
                                            <option value="sha384">sha384</option>
                                        </select>
                                        <label for="feedback_message">Example select</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio-btns">
                                            <label class="form-radio">
                                                <input type="radio" name="keySize" value="2048" checked>
                                                <i class="form-icon"></i> 2048
                                            </label>
                                            <label class="form-radio">
                                                <input type="radio" name="keySize" value="4096">
                                                <i class="form-icon"></i> 4096
                                            </label>
                                        </div>
                                        <label for="feedback_message">Key Size</label>
                                    </div>
                                    <div class="card-actionbar">
                                        <div class="card-actionbar-row">
                                            <button type="submit" class="btn btn-submit btn-accent ink-reaction">Generate
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="decoder">
                                <form id="csrDecode" method="post" action="javascript:void(0)" novalidate>
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <label for="exampleFormControlTextarea1">Enter CSR</label>
                                        <textarea class="form-control" id="CSR" name="CSR" rows="10"
                                                  required></textarea>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" id="submit" class="btn btn-primary">Decode</button>
                                    </div>
                                </form>
                            </div><!--end .card-body -->
                        </div><!--end .card -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modalContent"></div>
        </div>

    </div>
@stop


@push('scripts')
    <script type="text/javascript" src="{{ asset('js/libs/gmaps/gmaps.js') }}"></script>
    <script src="{{ asset('js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>
    <script>
        var modal = document.getElementById("myModal");
        var span = document.getElementsByClassName("close")[0];
        span.onclick = function () {
            modal.style.display = "none";
        }
        $('#csrDecode').on('submit', function (e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#submit').html('Please Wait...');
            $("#submit").attr("disabled", true);
            $.ajax({
                type: 'POST',
                url: '{{route('csr.decode')}}',
                data: $(this).serialize()
            })
                .done(function (data) {
                    // demonstrate the response
                    modal.style.display = "block";
                    if (typeof data.C !== "undefined") {
                        $('#modalContent').html(
                            '<span class="data">Country : ' + data.C + '</span><br>' +
                            '<span class="data">State/Province : ' + data.ST + '</span><br>' +
                            '<span class="data">Locality : ' + data.L + '</span><br>' +
                            '<span class="data">Organization : ' + data.O + '</span><br>' +
                            '<span class="data">Organizational Unit : ' + data.OU + '</span><br>' +
                            '<span class="data">Common Name/Domain : ' + data.CN + '</span><br>' +
                            '<span class="data">Email Address : ' + data.emailAddress + '</span>'
                        );
                    } else {
                        $('#modalContent').html(data.msg);
                    }

                })
                .fail(function () {
                    // if posting your form failed
                    alert("decoding failed. Try again with valid code");
                });
            $('#submit').html('Decode');
            $("#submit").attr("disabled", false);
        });
    </script>
@endpush