@extends('Client.layouts.layout')
@section('title', __('trans.success')  )
@section('content')

    <div class="container" style="padding-bottom: 100px;">
        <div id='card' class="animated fadeIn">
          <div id='upper-side'>
                <div class="row text-center justify-content-center">
                    <img src="https://medad.bh/success-payment.jpg" class="img-cover" alt="payment" style="width: 100%;">
                </div>
            </h3>
          </div>
          <div id='lower-side'>
            <p id='message'>
              Congratulations, Your payment was successful! Thank you for your Payment.
            </p>
          </div>
        </div>
    </div>

@endsection

@push('css')
    <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
    <style>

        
        #card {
          border: 1px solid #8BC34A;
          border-radius: 10px;
          position: relative;
          top: 60px;
          max-width: 100%;
          width: 420px;
          display: block;
          margin: auto;
          text-align: center;
          font-family: 'Source Sans Pro', sans-serif;
        }
        
        #upper-side {
          padding: 1em;
          display: block;
          color: #fff;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
        }
        
        #checkmark {
          font-weight: lighter;
          fill: #fff;
          margin: -3.5em auto auto 20px;
        }
        
        #status {
          font-weight: lighter;
          text-transform: uppercase;
          letter-spacing: 2px;
          font-size: 1em;
          margin-top: -.2em;
          margin-bottom: 0;
        }
        
        #lower-side {
          padding: 2em 2em 2em 2em;
          background: #fff;
          display: block;
          border-bottom-right-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        
        #message {
          margin-top: -.5em;
          color: #757575;
          letter-spacing: 1px;
        }
        
        #contBtn {
          position: relative;
          top: 1.5em;
          text-decoration: none;
          background: #8bc34a;
          color: #fff;
          margin: auto;
          padding: .8em 3em;
          -webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          -moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          border-radius: 25px;
          -webkit-transition: all .4s ease;
        		-moz-transition: all .4s ease;
        		-o-transition: all .4s ease;
        		transition: all .4s ease;
        }
        
        #contBtn:hover {
          -webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          -moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          -webkit-transition: all .4s ease;
        		-moz-transition: all .4s ease;
        		-o-transition: all .4s ease;
        		transition: all .4s ease;
        }
    </style>
    
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-NSNW9H8Z');</script>
    <!-- End Google Tag Manager -->
@endpush
@push('js')
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NSNW9H8Z"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
@endpush