<!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>
        *{
            letter-spacing: 0px;
            margin: 0px;
        }        
        main.container {
            position: relative;
            width: 100%;
            background-color: #ffffff;
            box-sizing: border-box;
            min-height: calc(0px + 100vh);
        }
        body{
            font-family: montserrat-regular !important;
        }
           
        /*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;
        }
        .title-nav{
            width: 100%;align-items: center;display: flex;
            font-weight: 600;
            font-size: 18px;
            line-height: 135%;
            font-family: Silka;
            color: #000000;
        }
        /*end navbar*/     
        .thumb{
            object-fit: cover;
            height: 100%;
            width: 100%;
            border-radius: 8px 8px 0px 0px;
        }            
        main{
            overflow-x: hidden;
        } 
        .titleh{
            font-family: montserrat-regular;
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 22px;
            color: #23B570;
            margin-bottom:0px !important;
        }       
        .judul{
            font-family: montserrat-regular;
            font-style: normal;
            font-weight: 600;
            font-size: 12px;
            line-height: 22px;
            color: #323232;
            margin-bottom:0px !important;
        }
        .subjudul{
            font-family: montserrat-regular; 
            font-style: normal;
            font-weight: 500;
            font-size: 13px;
            line-height: 25px;
            color: #828282;
            margin-top:4px;
            margin-bottom: 0px !important;
        }
        .subjudul2{
            font-family: montserrat-regular;             
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 22px;
            color: #969696;
            margin-bottom: 0px !important;
        }
        .subjudul3{
            font-family: montserrat-regular;     
            font-style: normal;
            font-weight: 600;
            font-size: 13px;
            line-height: 22px;
            color: #646464;
            margin-bottom: 0px !important;
        }
        .img-campaign{
            max-width: 180px;
            height:101px;
            border-radius: 8px;
            background-size:cover;

        }
        .mybox{
            padding-top:15px;
            border-bottom: 1px solid #D8D8D8;
        }
        .block2 {
            border-radius: 8px;
            display: block;
            width: 100%;
            border: none;
            background-color: #41B548;
            padding: 14px 16px 16px 16px;
            font-size: 16px;
            font-family: Silka;
            font-style: normal;
            font-weight: 900;
            font-size: 12px;
            line-height: 100%;
            color: #FFFFFF !important;
            cursor: pointer;
        }
        .box_status{
            width: max-content;
            border-radius:8px;
            padding: 6px 8px;
        }
        .font_status{
            font-family: montserrat-regular;
            font-style: normal;
            font-weight: 500;
            font-size: 11px;
            line-height: 15px;
            text-align: center;
        }

        .nav {
            height: 70px;   
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            background: #23B570 !important;
            border: 1px solid #23B570 !important;
            box-sizing: border-box !important;
           
        }
        .nav-pills .nav-link {
            font-family: montserrat-regular;
            font-weight: 500;
            font-size: 12px;
            line-height: 150%;
            border-radius: 8px !important;
            padding: 4px 16px !important;
            border: 1px solid #23B570;
            color: #F99C1E;
            margin-inline-end: auto;
        }


        @media  only screen and (max-width: 380px) {
            .nav-pills .nav-link {
                padding: 4px 10px !important;
            }
            .img-campaign {
                max-width: 150px;
                height: 90px;
                border-radius: 8px;
                background-size: cover;
            }
            .font_status{
                font-size: 11px;
            }
            .box_status{
                width: max-content;
                border-radius:12px;
                padding: 3px 12px;
            }
            .judul{
                font-size: 12px;
            }
        }

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

        .wrapper-category{
            width: 100%;
            overflow-x:scroll;
            display: flex;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            height: 26px;
        }

        .item-category{
            display: flex;
            align-items: center;
            color: #F99C1E;
            border: 1px solid #23B570;
            border-radius: 6px;
            font-weight: 500;
            font-size: 12px;
            margin: 0px 16px 0px 0px !important;
            line-height: 18px;
            /*padding: 5px 10px;*/
            background: white;
            white-space: nowrap;
            cursor: pointer;
        }
        .category-active{
            background: #41B548;
            color: #F2F2F2;
        }

        .wrapper-category::-webkit-scrollbar {
          display: none;
        }

        button:focus {
            outline: none;
        }

        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .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;
        }

    </style>
</head>

<body class="wrap-all-content">
<!-- <nav class="navbar fixed-top navbar-default px-1 py-0 mx-auto title ">
    <div class="container px-3" style="max-width: 480px !important;">           
        <div class="col-8 nomargin ">
            <span class="navbar-text title-navbar">
                    <a onclick="goBack();" class="navbar-text mr-2">  
                        <i class="fa fa-arrow-left ozan title"></i>
                    </a>
                <span class="pl-1"><b>Historys</b></span>
                
            </span>  
        </div>            
    </div>
</nav> -->
    <!-- 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">
                    <a onclick="goBack();" class="navbar-text back"> 
                        <i class="fa fa-arrow-left " style="color:#828282;"></i>
                    </a>
                    <span class="title-nav ml-3">History</span>
                </div>
            </div>
        </nav>
        <div style="padding: 85px 0px 90px 0px;">    
            <div style="padding: 5px 30px 0px 30px;" >

                <div class="tab-content">
                    <div class="tab-pane active pt-3" id="dns">
                        
                            <?php if($donasi) { ?>
                            <?php foreach($donasi as $don): ?>
                            <div style="padding: 0px 0px 16px 0px;"> 
                                <div onclick="location.href='tagihan-donasi/<?php echo $don['donasi_id']; ?>';" class="card" style="padding:16px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);border-radius: 4px;">
                                        <div>
                                            <p class="titleh">Donasi</p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div class="item">
                                                <p class="judul pr-1"><?php echo word_limiter($don['gd_judul'],3); ?></p>
                                            </div>
                                            <div class="item">
                                                <?php if($don['donasi_status'] == 1) { ?>
                                                    <div class="box_status" style=" background-color:#FBE5BC;color:#C77605; ">
                                                        <div class="font_status" style="color: #F4B740;">Pending</div>
                                                    </div>
                                                <?php }else { ?>
                                                    <div class="box_status" style=" background-color:#ccffb3;color:#C77605; ">
                                                        <div class="font_status" style="color: #4ce600;">Masuk</div>
                                                    </div>
                                                <?php } ?>
                                            </div>
                                        </div>
                                        <hr style="margin-top:7px;margin-bottom:7px;">
                                        <div class="d-flex justify-content-between">
                                            <div class="item">
                                                <p class="subjudul2 ">Tanggal donasi</p>
                                            </div>
                                            <div class="item">
                                                <p class="subjudul2">Donasi</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div class="item">
                                                <p class="subjudul3 "><?php echo date('d-m-Y', strtotime($don['donasi_tgl'])); ?></p>
                                            </div>
                                            <div class="item">
                                                <p class="subjudul3">Rp. <?php echo number_format($don['donasi_jml'],0,',','.'); ?></p>
                                            </div>
                                        </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                            <?php }else { ?>
                            <div style="padding: 100px 0px 90px 0px;">
                                <!-- <img class="card-img-top" src="https://m.benihbaik.com/img/icon/notif2.svg" alt="notif2"> -->
                                <img class="center" width="50%" style="padding-bottom:20px;" src="https://m.benihbaik.com/img/icon-bb/PengingatDonasi.png" alt="page">
                                <div style="padding: 10px 30px 0px 30px;">
                                    <div class="row">
                                        <div class="col-12">
                                            <p class="judul text-center" style="margin-bottom:15px;margin-top: 15px;"><strong>List donasi Kamu masih kosong</strong></p> 
                                            <p class="subjudul text-center" style="padding-bottom:20px;line-height: 22px;">Maaf tidak ada kabar pemberitahuan saat ini, mungkin karena belum ada aktivitas donasi.</p>
                                            <center style="margin-bottom: 20px;">
                                            <a href="donasi" class="text-center form-control btn btn-block font_benihbaik_judul block4">
                                                    Donasi Sekarang</a>
                                            </center>
                                        </div>
                                    </div>            
                                </div> 
                            </div>
                            <?php } ?>
                                              

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

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