@extends ('core.layouts.public_app')
@section ('title', $company['cname'])
@section ('icon',  $company['icon'])
@section('content')
    <style type="text/css">
        form {

            padding: 5rem !important;
            display: block;
        }

        label {
            height: 35px;
            position: relative;
            color: #8798AB;
            display: block;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        label > span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-weight: 300;
            line-height: 32px;
            color: #8798AB;
            border-bottom: 1px solid #586A82;
            transition: border-bottom-color 200ms ease-in-out;
            cursor: text;
            pointer-events: none;
        }

        label > span span {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0% 50%;
            transition: transform 200ms ease-in-out;
            cursor: text;
        }

        label .field.is-focused + span span,
        label .field:not(.is-empty) + span span {
            transform: scale(0.68) translateY(-36px);
            cursor: default;
        }

        label .field.is-focused + span {
            border-bottom-color: #34D08C;
        }

        .field {
            background: transparent;
            font-weight: 300;
            border: 0;
            color: white;
            outline: none;
            cursor: text;
            display: block;
            width: 100%;
            line-height: 32px;
            padding-bottom: 3px;
            transition: opacity 200ms ease-in-out;
        }

        .field::-webkit-input-placeholder {
            color: #8898AA;
        }

        .field::-moz-placeholder {
            color: #8898AA;
        }

        /* IE doesn't show placeholders when empty+focused */
        .field:-ms-input-placeholder {
            color: #424770;
        }

        .field.is-empty:not(.is-focused) {
            opacity: 0;
        }

        button {
            float: left;
            display: block;
            background: #34D08C;
            color: white;
            border-radius: 2px;
            border: 0;
            margin-top: 20px;
            font-size: 19px;
            font-weight: 400;
            width: 100%;
            height: 47px;
            line-height: 45px;
            outline: none;
        }

        button:focus {
            background: #24B47E;
        }

        button:active {
            background: #159570;
        }

        .outcome {
            float: left;
            width: 100%;
            padding-top: 8px;
            min-height: 20px;
            text-align: center;
        }

        .success, .error {
            display: none;
            font-size: 15px;
        }

        .success.visible, .error.visible {
            display: inline;
        }

        .error {
            color: #E4584C;
        }

        .success {
            color: #34D08C;
        }

        .success .token {
            font-weight: 500;
            font-size: 15px;
        }

        .ultimate.geopos {
            background-color: #525f7f;
        }

        .ultimate.geopos * {
            font-family: Quicksand, Open Sans, Segoe UI, sans-serif;
            font-size: 16px;
            font-weight: 600;
        }

        .ultimate.geopos .fieldset {
            margin: 0 15px 30px;
            padding: 0;
            border-style: none;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .ultimate.geopos .field {
            padding: 10px 20px 11px;
            background-color: #7488aa;
            border-radius: 20px;
            width: 100%;
        }

        .ultimate.geopos .field.half-width {
            width: calc(50% - (5px / 2));
        }

        .ultimate.geopos .field.third-width {
            width: calc(33% - (5px / 3));
        }

        .ultimate.geopos .field + .field {
            margin-top: 6px;
        }

        .ultimate.geopos .field.focus,
        .ultimate.geopos .field:focus {
            color: #424770;
            background-color: #f6f9fc;
        }

        .ultimate.geopos .field.invalid {
            background-color: #fa755a;
        }

        .ultimate.geopos .field.invalid.focus {
            background-color: #f6f9fc;
        }

        .ultimate.geopos .field.focus::-webkit-input-placeholder,
        .ultimate.geopos .field:focus::-webkit-input-placeholder {
            color: #cfd7df;
        }

        .ultimate.geopos .field.focus::-moz-placeholder,
        .ultimate.geopos .field:focus::-moz-placeholder {
            color: #cfd7df;
        }

        .ultimate.geopos .field.focus:-ms-input-placeholder,
        .ultimate.geopos .field:focus:-ms-input-placeholder {
            color: #cfd7df;
        }

        .ultimate.geopos input, .ultimate.geopos button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            border-style: none;
        }

        .ultimate.geopos input {
            color: #fff;
        }

        .ultimate.geopos input::-webkit-input-placeholder {
            color: #9bacc8;
        }

        .ultimate.geopos input::-moz-placeholder {
            color: #9bacc8;
        }

        .ultimate.geopos input:-ms-input-placeholder {
            color: #9bacc8;
        }

        .ultimate.geopos button {
            display: block;
            width: calc(100% - 30px);
            height: 40px;
            margin: 0 15px;
            background-color: #fcd669;
            border-radius: 20px;
            color: #525f7f;
            font-weight: 600;
            text-transform: uppercase;
            cursor: pointer;
        }

        .ultimate.geopos button:active {
            background-color: #f5be58;
        }

        .ultimate.geopos .error svg .base {
            fill: #fa755a;
        }

        .ultimate.geopos .error svg .glyph {
            fill: #fff;
        }

        .ultimate.geopos .error .message {
            color: #fff;
        }

        .ultimate.geopos .success .icon .border {
            stroke: #fcd669;
        }

        .ultimate.geopos .success .icon .checkmark {
            stroke: #fff;
        }

        .ultimate.geopos .success .title {
            color: #fff;
        }

        .ultimate.geopos .success .message {
            color: #9cabc8;
        }

        .ultimate.geopos .success .reset path {
            fill: #fff;
        }
    </style>
        <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
    <div class=" container-fluid">
        <div class="content-wrapper">
            <div id="notify" class="alert alert-success" style="display:none;">
                <a href="#" class="close" data-dismiss="alert">&times;</a>

                <div class="message"></div>
            </div>
            <section class="card">
                <div class="card-header">
                    <h4 class="card-title">{{trans('payments.secure_checkout')}}
                        ({{$general['bill_type']}} #{{$invoice['tid']}})</h4>
                </div>
                <div class="card-body m-2">
                    <div class="row">

                        <div class="col-md-6"><span class="display-block text-xs-center"><img class="bg-white round "
                                                                                              style="max-width:30rem;max-height:10rem"
                                                                                              src="{{ Storage::disk('public')->url('app/public/img/gateway_logo/' . $row['id'].'.png') }}"></span>
                            <div class="form-group">
                                <label for="cardNumber"> {{$general['bill_type']}}
                                    #{{$invoice['tid']}} {{trans('general.total')}}
                                    <input name="total_amount"
                                           value="