<!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['nama']; ?>">

    <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>

        body{
            /* background-color: #ffffff !important; */
        }

        footer{
            background-color: #ffffff !important;
        }

        main.container {
            background-color: #ffffff !important;
        }

        .navbar > .container > .navbar-text > a {
            color: #9f9f9f !important;
        }

        .navbar > .container > .navbar-text > span {
            color: #9f9f9f !important;
        }

        .image-one {
            position: absolute;
        }

        .border-success-nominal{
            border: 1px solid green;
        }

        .block2 {
            font-family: montserrat-regular;
            font-size: 15px; 
            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: #41B548; 
            transition: all .4s;
            border-radius: 8px; 
        }

        .block2:hover {
            background-color: #236445;
            color: #FFFFFF;
        }

        .ukuran-font-nominal{
            font-size:22px; 
        }

        .ukuran-gambar-nominal{
            width: 10%;
        }

        .ukuran-padding-nominal{
            padding: 10px 5px 10px 15px;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1032; /* 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 */
        .modal-content {
            position: fixed;
            bottom:0px;
            border: none !important;
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 100%;
            border-radius: 24px 24px 0px 0px;
        }

        .judulmodal{
            font-family: Silka;
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 28px;
            color: #323232;
            margin-bottom:0px !important;
        }

        .title7{
            font-family: montserrat-regular !important;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;
            color: #646464;
        }

        @media  only screen and (max-width: 480px) {

            .fixed-bottom {
                position: unset !important;
            }

            .ukuran-padding-nominal{
                padding: 10px 10px 10px 10px;
            }

            .ukuran-font-nominal{
                font-size:15px;
            }

            .ukuran-gambar-nominal{
                width: 10%;
            }

            .setWidth{
                max-width: 480px;
                left: 0%;
                margin-top: 0px; /* Negative half of height. */
                margin-left: 0px; /* Negative half of width. */
            }

            .gambar-modal{
                width: 65px;
                height: 38px;
            }

            .ukuran-font-modal{
                font-size: 13px;
            }

        }

        @media  only screen and (min-width: 500px) {

            .fixed-bottom {
                position: fixed !important;
            }

            .gambar-modal{
                width: 115px;
                height: 71px;
            }

            .setWidth{
                max-width: 480px;
                left: 51%;
                margin-top: -100px; /* Negative half of height. */
                margin-left: -250px; /* Negative half of width. */
            }



        }

        .block4 {
            font-family: montserrat-regular;
            font-size: 15px;
            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: #41B548;
            transition: all .4s;
            border-radius: 8px;
        }

        .block4:hover {
            background-color: #236445;
            color: #FFFFFF;
        }

        .block6 {
            font-family: montserrat-regular;
            font-size: 15px;
            color: #666666 !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: #ebebeb !important;
            transition: all .4s;
            border-radius: 8px;
            border: 0px solid #999999 !important;
        }

        .block6:hover {
            background-color: #cccccc !important;
            color: #666666 !important;
        }

        .box1{
            border: 1px solid #D8D8D8;border-radius:4px;padding:18px;margin-bottom:16px;
        }

    </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;background: #ffffff !important;">
        <div style="max-width: 480px !important; margin: 0px 30px;height: 100%;width: 100%; display: flex; align-items: center;">
            <span class="navbar-text title-navbar">
                <a onclick="goBack();" class="navbar-text mr-2">
                        <i class="fa fa-arrow-left title " style="color:black;"></i>
                    </a>
                
                <span class="title-nav"><b>Donasi</b></span>
            </span>
        </div>
    </nav>

    <div class="container">
        <div class="row">

            <div class="col-12 p-0">
                <div class="container" style="padding: 60px 15px 0px 15px;" id="Nominal">
                        <p class="font_benihbaik_judul" style="font-weight: 600;font-family:montserrat-regular !important;margin-bottom: 25px; color: #323232; text-align:justify">
                        Pilih nominal donasi kamu
                        </p>

                        <div class="row mb-2">
                            <div class="col-6 pr-1">
                                <div class="card-body rounded nominal1 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment1" value="25000">
                                    
                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 25.000</label>
                                    </div>

                                </div>
                            </div>
                            <div class="col-6 pl-1">
                                <div class="card-body rounded nominal2 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment2" value="50000">


                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 50.000</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-6 pr-1">
                                <div class="card-body rounded nominal3 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment3" value="100000">

                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 100.000</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 pl-1">
                                <div class="card-body rounded nominal4 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment4" value="250000">

                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 250.000</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-6 pr-1">
                                <div class="card-body rounded nominal5 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment5" value="500000">

                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 500.000</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 pl-1">
                                <div class="card-body rounded nominal6 unv-gtm ukuran-padding-nominal" style="background-color:#F4F4F4 !important;background-color: #ffffff; border: 1px solid #D8D8D8;">
                                    <input type="hidden" id="nominal-payment6" value="1000000">

                                    <div class="d-flex my-1 mr-sm-2 justify-content-between">  
                                        <label class="mb-0 header-title align-self-center ukuran-font-nominal" style="font-family:silka !important;color: #969696;font-weight: 600;">Rp 1.000.000</label>
                                    </div> 
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:45px;">
                            <div class="col-12">
                                <p class="font_benihbaik_judul" style="font-weight: 600;font-family:montserrat-regular !important;margin-bottom: 25px; color: #323232; text-align:justify">
                                    Nominal donasi lainnya
                                </p>
                                    <form method="post" action="">
                                        <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                                        <input type="hidden" name="url" value="<?php echo $galang['gd_id']; ?>">

                                        <div class="col-12 my-1" style="padding-left:0px;padding-right:0px;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text" style="padding: 12px 24px;background-color: #F2F2F2;border: 0px solid #ced4da;font-size:20px;font-family:montserrat-bold !important;">Rp</div>
                                                </div>
                                                <input autocomplete="off" type="number" name="amount" class="form-control" id="jumlah-donasi" style="border: 0px solid #ced4da;text-align:right;background-color: #F2F2F2;font-size:27px !important;font-family:montserrat-bold !important;" placeholder="0" min="10000">
                                            </div>
                                            <p style="font-size:14px;padding: 10px 0px 0px 0px; color: #969696;font-family:montserrat-regular !important;margin-bottom: 0px;">Minimal donasi Rp 10.000</p>
                                            <p style="font-size:14px;padding: 10px 0px 0px 0px; color: #969696;font-family:montserrat-regular !important;margin-bottom: 0px;">Do'a atau harapan (optional)</p>

                                            <div class="input-group">
                                                <input type="text" name="doa" class="form-control" style="border: 0px solid #ced4da;background-color: #F2F2F2;font-size:27px !important;font-family:montserrat-bold !important;">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="container mt-4 fixed-bottom py-0" style="background-color:#ffffff; max-width: 480px;padding-left: 0px;padding-right: 0px;">
                                                <div class="col-12">
                                                        <button id="donasiSubmit" type="submit" class="form-control font_benihbaik_judul block2">Selanjutnya</button>
                                                </div>
                                            </div>
                                        </div>

                                    </form>
                            </div>
                        </div>
                    </div>
            </div>

        </div>
    </div>

            <!-- Content -->
    </main>
    <!-- Main -->