<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" lang="id">

<head>
    <base href="<?php echo base_url(); ?>"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="">
    <meta name="keywords" content="<?php echo $title; ?> - <?php echo $profil['nama']; ?>"/>
    
    <link rel="icon" type="image/ico" sizes="32x32" href="assets/admin/img/<?php echo $profil['favicon']; ?>">

    <title><?php echo $title; ?> - <?php echo $profil['nama']; ?></title>

    <!-- Bootstrap core CSS -->

    <link href="assets/home/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/home/css/engine.css" rel="stylesheet">

    <!-- CSS OWL -->
    <link rel="stylesheet" href="assets/home/css/owl/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/home/css/owl/owl.theme.default.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/home/fontawesome/css/all.css">

    <!-- Css Global Benihbaik -->
    <link href="assets/home/css/cssGlobalBenihBaik/newBenihbaike5bf.css?v=12" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <!-- Css Global Benihbaik ScrollBarApple -->
    <link href="assets/home/css/cssGlobalBenihBaik/scrollBarApple.css?v=4" rel="stylesheet"> 

    <!-- DatePicker Benihbaik -->
     <link href="assets/home/unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
     <!-- <link href="assets/home/css/gijgo.min.css" rel="stylesheet" type="text/css" /> -->

    <!-- Dropify -->
    <link rel="stylesheet" href="assets/home/plugin/dropify/dist/css/dropify.min.css">
    <!-- End Dropify -->
    <link href="assets/home/css/cssGlobalBenihBaik/inputBenihbaik.css" rel="stylesheet">
    <style>
        
        main.container {
            position: relative;
            width: 100%;
            background-color: #ffffff;
            box-sizing: border-box;
            min-height: calc(0px + 100vh);
        }
        body{
            font-family: montserrat-regular !important;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #41B548;
        !important: ;
            background-color: #fff !important;
        }
        .navbar > .container > .navbar-text > span {
            color: #666666;
        }

        .title-box{
           font-family: montserrat-semibold !important;
           color: #4F4F4F;
           font-weight: bold;
           font-size: 14px;
           min-width: 300px;
        }

        .box-wrap{
            margin: 24px 0 0 0;
        }

        button:focus,input:focus{
            outline: none;
        }
        .title-rowcut {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /*navbar*/
        .nav-wrapper{
            max-width: 480px !important;
            margin: 35px 30px 24px 30px;
            width: 100%;
        }

        .box-nav{
            width: 100%;display: flex;align-items: center;height: 27px;justify-content: center;
        }
        .title-nav{
            width: 100%;align-items: center;display: flex;justify-content: center;
            font-weight: 600;
            font-size: 18px;
            line-height: 135%;
            font-family: Silka;
            color: #000000;
        }
        .navstxt {
            font-family: Silka;
            font-style: normal;
            font-weight: 600;
            font-size: 17px;
        }
        /*end navbar*/        
        .judul{
            font-family: 'montserrat-semibold';
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: #323232;
            margin-bottom:0px !important;
        }
        .subjudul{
            font-family: 'montserrat-semibold';
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 25px;
            color: #4F4F4F;
            opacity: 0.8;
            margin-top: 8px;
            margin-bottom: 0px !important;
        }
        .subjudul2{
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 22px;
            color: #646464;
            margin-bottom: 0px !important;
        }
        .subjudul3{
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;
            color: #6D6D6D;
            margin-bottom: 0px !important;
        }
        .subjudul4{
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: 500;
            font-size: 13px;
            line-height: 22px;
            color: #646464;
            margin-bottom: 0px !important;
        }
        .nameacc{
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: #6D6D6D;
            margin-bottom: 0px !important;
        }
        .acount{
            font-family: Silka;
            font-style: normal;
            font-weight: 600;
            font-size: 18px;
            line-height: 28px;
            color: #101010;
            margin-bottom:0px !important;
        }

        .nominal{
            font-family: Silka;
            font-style: normal;
            letter-spacing: 1px;
            font-weight: 600;
            font-size: 18px;
            line-height: 20px;
            color: #101010;
            margin-bottom:0px !important;
        }
        
        .cardkn{
            background: #FFE7B8;
            width: 100%;
            border: 1px solid #FFE7B8 !important;
            border-radius: 4px;
            color: #646464;
        }
        button, input, optgroup, select, textarea {
            margin: 0;
            font-family: 'montserrat-regular';
            font-size: 14px;
            line-height: 18px;
        }
        .btn {
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 0px;
        }
        .card{
            box-shadow: 0 0px 0px rgb(0 0 0 / 0%), 0 0px 0px rgb(0 0 0 / 0%);
            
        }
        .btnsalin{
            padding: 2px 13px 2px 13px;
            border: none;
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 26px;
            align-items: center;
            color: #23B570;
            background: #FCFCFC;
            border-radius: 4px;
            border: 1px solid #23B570;
        }
        .btn.bb-primary {
            font-family: 'montserrat-semibold';
            font-size: 14px;
            font-weight:600;
            color: #FFFFFF !important;
            line-height: 1.2;
            display: flex;
            font-weight: 600;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            min-width: 100%;
            height: 55px;
            background-color: #23B570;
            transition: all .4s;
            border-radius: 8px;
        }
        
        @media  only screen and (max-width: 480px) {
            .acount{
                font-size: 4vw;
            }
        }

    </style>
</head>

<body class="wrap-all-content">
    <!-- Main -->
<main role="main" class="container with-navbar" style="padding:0px 0px 0px 0px; max-width: 480px !important;">
        <!-- Content -->
                <nav class="container navbar fixed-top navbar-default p-0 title benihbaik_solid" style="max-width: 480px;">
            <div class="nav-wrapper">
                <div class="navbar-text title-navbar box-nav">
                    <span class="navstxt">  
                        Invoice Donasi
                    </span>
                </div>
            </div>
        </nav>        
      
        <div style="padding: 90px 30px 10px 30px;">                 
            <div class="d-flex" >
                <div class="item" style="padding-left: 0px; padding-top:7px;">
                    <p class="nameacc">Bank <?php echo strtoupper($donasi['donasi_bank']); ?></p>
                </div>                  
            </div> 
            <div class="d-flex mt-4">
                <div class="card cardkn">
                    <div style="padding: 15px"> 
                        <div class="d-flex">
                            <div class="item">
                                <img src="assets/home/img/image_sementara/mi_circle-information12.png" style="max-width:30px; padding-right:10px;" alt="icon info">
                            </div>
                            <div class="item"> 
                                <p class="subjudul2" style="margin-top: 2px;">
                                    Mohon untuk menggunakan nomor vitual account di bawah untuk berdonasi
                                </p>
                            </div>  
                        </div>  
                    </div> 
                </div>     
            </div>
            <div class="d-flex" style="padding-top: 17px;">
                <div class="card" style="width: 100%; background-color: #F4F4F4; padding:20px 20px 15px 20px;    border-radius: 4px;">
                    <div class="d-flex">
                        <div class="item">
                            <div class="d-flex flex-column">
                                <div class="item pb-1">
                                    <p id="myInput" class="acount"><?php echo $donasi['donasi_va']; ?></p>
                                </div> 
                            </div> 
                        </div>
                        <div class="item" style="margin-left: auto">
                            <button class="btnsalin" onclick="myFunctionCopyBank()">
                                Salin <img style="margin-left: 3px;" src="assets/home/img/image_sementara/akar-icons_copy.png" alt="icon copy">
                            </button>
                        </div>
                    </div>                   
                </div>                   
            </div>
           
        </div>
        <div style="padding: 10px 30px 10px 30px; border-top: 10px solid #f7f7f7;margin-top: 10px;">
            <div class="d-flex mb-3 mt-2">
                <div class="item">
                    <p class="judul">Total Nominal Transfer</p>
                </div>   
            </div>
            <div class="d-flex">
                <div class="card" style="width: 100%; background-color: #F4F4F4; padding:20px 20px 15px 20px;    border-radius: 4px;">
                    <div class="d-flex">
                        <div class="item">
                            <div class="d-flex flex-column">
                                <div class="item pt-1">
                                    <input type="hidden" id="debit" value="<?php echo $donasi['donasi_jml']; ?>" readonly>
                                    <p class="nominal">Rp. <?php echo number_format($donasi['donasi_jml'],0,',','.'); ?></p>
                                </div> 
                            </div> 
                        </div>
                        <div class="item" style="margin-left: auto;margin-top: -5px;">
                            <button class="btnsalin" onclick="myFunctionCopyNominal()">
                                Salin <img style="margin-left: 3px;" src="assets/home/img/image_sementara/akar-icons_copy.png" alt="icon copy">
                            </button>
                        </div>
                    </div>                   
                </div>                   
            </div>
            <div class="d-flex mt-3">
                <p class="subjudul4">
                    Terima kasih sudah membuat segalanya menjadi lebih baik. Semoga kebaikan Anda berbuah pahala.
                </p> 
            </div>        
        </div>

        <div style="padding: 10px 30px 10px 30px; border-top: 10px solid #f7f7f7;margin-top: 10px;">

            <div class="mb-3 mt-4">
                <div class="row">
                    <div class="col">
                        <a href="user/dashboard" style="text-decoration: none;color:black;"><button class="btn bb-primary btn-block" >Dashboard</button></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Content -->
    </main>
    <!-- Main --> 