<?php
$url_segment = $this->uri->segment(1);
$app_gallery_count=dt_get_gallery(1);
$app_news_count=dt_get_news(1);
$app_causes_count=dt_get_causes(1);
$app_project_count=dt_get_project(1);
$app_event_count=dt_get_event(1);
$app_team_count=dt_get_team(1);
$menu_per=get_menu_permission();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo dt_get_CompanyName(); ?> <?php echo (isset($title) && $title!="")?"| ".$title:""; ?></title>
    <meta charset="utf-8">

    <link rel="icon" type="image/x-icon" href="<?php echo dt_get_fevicon(); ?>"/>
    <meta name="description" content="<?php echo dt_get_content('seo_description'); ?>">
    <meta name="keywords" content="<?php echo dt_get_content('seo_keyword'); ?>">
    <meta name="author" content="<?php echo dt_get_CompanyName(); ?>">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Overpass:300,400,400i,600,700" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/open-iconic-bootstrap.min.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/animate.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/owl.carousel.min.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/owl.theme.default.min.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/magnific-popup.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/aos.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/ionicons.min.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/flaticon.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/icomoon.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/theme1/css/style.css'); ?>">
    <style>
        / workaround
        .intl-tel-input {
            display: table-cell;
        }
        .intl-tel-input .selected-flag {
            z-index: 4;
        }
        .intl-tel-input .country-list {
            z-index: 5;
        }
        .input-group .intl-tel-input .form-control {
            border-top-left-radius: 4px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 0;
        }
    </style>
</head>
<body>
<?php
$get_current_currency = dt_get_current_currency();
$app_site_setting=dt_app_site_setting();


$is_breadcrumb_enabled=dt_get_content('is_breadcrumb_enabled');
$banner_content=dt_get_content_image('donation_background');
$banner_image_path = base_url() . img_path . "/donation.jpg";

if (isset($banner_content) && $banner_content!= "") {
    if (file_exists(FCPATH .uploads_path.'/'.$banner_content)) {
        $banner_image_path = base_url() . uploads_path . '/' .$banner_content;
    }
}

?>
<style>
    .amount{
        padding: 5px 13px 6px 20px;
        border-radius: 0.375rem;
        box-shadow: rgba(0, 0, 0, 0.15) 0rem 0rem 0.625rem;
        margin: 10px;
    }

    .card-amount{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .paypal-card{
        border: 1px solid #dbd8d0;
        padding: 50px;
        border-radius: 0.75rem;
        box-shadow: rgba(0, 0, 0, 0.15) 0rem 0rem 0.625rem;
    }
    .amount p{
        width: 67px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px 12px;
    }
    .card-fees{
        display: flex;
        align-items: center;
    }
    .checkbox {
        width: 25px;
        height: 25px;
        margin-right: 15px;
    }
    @media only screen and (max-width: 768px) {
        .card-amount{
            justify-content: flex-start;
        }
    }
    @media only screen and (max-width: 450px) {
        .card-amount{
            justify-content: center;
        }
    }
    .amount:hover,
    .active {
        background: rgb(0, 48, 135) !important;
        color: white !important;
        cursor: pointer;
    }
    .paypal-button ,.credit-card{
        width: 100%;
        background: #f9d401;
        border-radius: 24px;
        padding: 7px 0px;
        font-size: 17px;
        font-weight: 700;
    }
    .credit-card{
        background: #fff;
    }
    .paypal-box{
        width: 100%;
    }
    .paypal-button img{
        width: 15px;
    }
    .form-check-input{
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }
</style>
<input type="hidden" id="get_current_currency_hidden" value="<?php echo $get_current_currency['code']; ?>" />
<input type="hidden" id="get_stripepublish" value="<?php echo dt_get_Stripepublish(); ?>" />
<div class="container pt-5"></div>
<section id="asdn">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <?php
                $attributes = array('id' => 'donationForm', 'name' => 'donationForm', 'method' => "post");
                echo form_open('donate-action', $attributes);
                ?>
                <input type="hidden" id="phone_code" name="phone_code">
                <input type="hidden" id="donation_fee" name="donation_fee" value="<?php echo isset($fees_data)?$fees_data:0; ?>">
                <div class="paypal-card">
                    <div class="card-header text-center" style="background-color: #fff;border-bottom: none">
                        <p class="m-0">Donate to</p>
                        <h2><?php echo dt_get_CompanyName(); ?></h2>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="payment_section">
                            <div class="card-amount">
                                <?php if (isset($amount_option) && count($amount_option)>0): ?>
                                    <?php foreach ($amount_option as $am):?>
                                        <div class="amount" onclick="calculate_donation_fee(this)" data-price="<?php echo $am['amount']; ?>">
                                            <p class="m-0">$<?php echo $am['amount']; ?> USD</p>
                                        </div>
                                    <?php endforeach;?>
                                <?php endif;?>
                                <div class="amount">
                                    <p class="m-0">Other</p>
                                </div>
                            </div>
                            <div>
                                <div class="card-fees my-4">
                                    <input type="checkbox" name="" id="" class="checkbox">
                                    <p class="m-0">Add <b id="calculated_donation_fee">$0.00</b> USD to help cover the fees.</p>
                                </div>
                                <div class="card-fees my-4">
                                    <div class="form-check form-check-inline">
                                        <input checked class="form-check-input" onchange="change_donation_payment_type(this)" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="onetime">
                                        <label class="form-check-label" for="inlineRadio1">Onetime</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" onchange="change_donation_payment_type(this)" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="recurring">
                                        <label class="form-check-label" for="inlineRadio2">Recurring</label>
                                    </div>
                                </div>
                            </div>

                            <div id="recurring_section" class="d-none">
                                <div class="card-fees my-4">
                                    <div class="form-check form-check-inline">
                                        <input checked class="form-check-input" type="radio" name="recurring_type" id="monthly_rec" value="monthly">
                                        <label class="form-check-label" for="monthly_rec">Monthly</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="recurring_type" id="monthly_quarterly" value="quarterly">
                                        <label class="form-check-label" for="monthly_quarterly">Quarterly</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="recurring_type" id="monthly_yearly" value="yearly">
                                        <label class="form-check-label" for="monthly_yearly">Yearly</label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="paypal-box">
                                    <button style="cursor: pointer" type="button" onclick="show_next_section()" class="paypal-button">Next</button>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-12 d-none" id="information_section">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control" type="text" name="first_name" id="first_name" placeholder="<?php echo dt_translate('first_name') ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control" type="text" name="last_name" id="last_name" placeholder="<?php echo dt_translate('last_name') ?>" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" data-msg-email="<?php echo dt_translate('enter_valid_email'); ?>"  class="form-control" type="email" name="email" id="email" placeholder="<?php echo dt_translate('email') ?>" required>
                                    </div>
                                </div>

                                <div class="col-md-6">


                                    <div class="form-group">
                                        <input autocomplete="off"  data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control phone_input_with_code" maxlength="10" type="tel"  onkeypress='validatePhone(event)'  id="phone" name="phone" placeholder="<?php echo dt_translate('phone') ?>" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control" type="text" maxlength="50" id="city" name="city" placeholder="<?php echo dt_translate('city') ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control" type="text" maxlength="50" id="state" name="state" placeholder="State" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <span class="input-symbol-euro">
                                             <input autocomplete="off" data-msg-required="<?php echo dt_translate('this_field_is_required'); ?>" class="form-control" type="number" min="1" id="amount" name="amount" placeholder="Zip" required>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control" id="country" name="country" required>
                                            <option value="USA">United States</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="paypal-box">
                                    <button style="cursor: pointer" type="submit" class="paypal-button">Submit</button>
                                </div>
                                <div class="paypal-box mt-3">
                                    <button style="cursor: pointer" type="button" onclick="donation_go_back()" class="credit-card">Go Back</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <?php echo form_close(); ?>
            </div>
        </div>

    </div>
</section>
<?php
$app_site_setting=dt_app_site_setting();
?>
<!-- loader -->
<script type="text/javascript"  src="<?php echo base_url('assets/global/js/jquery-3.4.1.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery-migrate-3.0.1.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/global/js/popper.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/global/js/bootstrap.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/global/js/jquery.validate.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery.easing.1.3.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery.waypoints.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery.stellar.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/owl.carousel.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery.magnific-popup.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/aos.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/jquery.animateNumber.min.js'); ?>"></script>
<script type="text/javascript"  src="<?php echo base_url('assets/theme1/js/scrollax.min.js'); ?>"></script>
</body>
</html>
<?php
include VIEWPATH . 'validation_js_message.php';
?>
<script src="<?php echo base_url('assets/global/js/front_custom.js'); ?>"></script>