<?php
/**
 * @package WordPress
 * @subpackage Campoal
 */

global $campoal_options;
global $current_user;

// get category object
$cat_taxonomies = array('petition_category');
$cat_args = array(
    'orderby'           => 'name', 
    'order'             => 'ASC',
    'hide_empty'        => false
);
$cat_terms = get_terms($cat_taxonomies, $cat_args);


// get topcis object
$type_taxonomies = array('petition_topics');
$type_args = array(
    'orderby'           => 'name', 
    'order'             => 'ASC',
    'hide_empty'        => false
);
$type_terms = get_terms($type_taxonomies, $type_args);

// get petition fields option
$receiver_step = isset($campoal_options['conikal_receiver_step_field']) ? $campoal_options['conikal_receiver_step_field'] : 1;
$fundraising_step = isset($campoal_options['conikal_fundraising_step_field']) ? $campoal_options['conikal_fundraising_step_field'] : 0;
$editor_style = isset($campoal_options['conikal_editor_style_field']) ? $campoal_options['conikal_editor_style_field'] : 'markdown';
$p_category = isset($campoal_options['conikal_p_category_field']) ? $campoal_options['conikal_p_category_field'] : 1;
$p_category_r = isset($campoal_options['conikal_p_category_r_field']) ? $campoal_options['conikal_p_category_r_field'] : 1;
$maximum_category = isset($campoal_options['conikal_maximum_category_field']) ? $campoal_options['conikal_maximum_category_field'] : 1;
$p_topics = isset($campoal_options['conikal_p_topics_field']) ? $campoal_options['conikal_p_topics_field'] : 1;
$p_topics_r = isset($campoal_options['conikal_p_topics_r_field']) ? $campoal_options['conikal_p_topics_r_field'] : 1;
$maximum_topics = isset($campoal_options['conikal_maximum_topics_field']) ? $campoal_options['conikal_maximum_topics_field'] : 5;
$p_city = isset($campoal_options['conikal_p_city_field']) ? $campoal_options['conikal_p_city_field'] : 1;
$p_city_r = isset($campoal_options['conikal_p_city_r_field']) ? $campoal_options['conikal_p_city_r_field'] : 1;
$p_coordinates = isset($campoal_options['conikal_p_coordinates_field']) ? $campoal_options['conikal_p_coordinates_field'] : 1;
$p_coordinates_r = isset($campoal_options['conikal_p_coordinates_r_field']) ? $campoal_options['conikal_p_coordinates_r_field'] : 1;
$p_address = isset($campoal_options['conikal_p_address_field']) ? $campoal_options['conikal_p_address_field'] : 1;
$p_address_r = isset($campoal_options['conikal_p_address_r_field']) ? $campoal_options['conikal_p_address_r_field'] : 1;
$p_neighborhood = isset($campoal_options['conikal_p_neighborhood_field']) ? $campoal_options['conikal_p_neighborhood_field'] : 1;
$p_neighborhood_r = isset($campoal_options['conikal_p_neighborhood_r_field']) ? $campoal_options['conikal_p_neighborhood_r_field'] : 1;
$p_zip = isset($campoal_options['conikal_p_zip_field']) ? $campoal_options['conikal_p_zip_field'] : 1;
$p_zip_r = isset($campoal_options['conikal_p_zip_r_field']) ? $campoal_options['conikal_p_zip_r_field'] : 1;
$p_state = isset($campoal_options['conikal_p_state_field']) ? $campoal_options['conikal_p_state_field'] : 1;
$p_state_r = isset($campoal_options['conikal_p_state_r_field']) ? $campoal_options['conikal_p_state_r_field'] : 1;
$p_country = isset($campoal_options['conikal_p_country_field']) ? $campoal_options['conikal_p_country_field'] : 1;
$p_country_r = isset($campoal_options['conikal_p_country_r_field']) ? $campoal_options['conikal_p_country_r_field'] : 1;
$p_receiver = isset($campoal_options['conikal_p_receiver_field']) ? $campoal_options['conikal_p_receiver_field'] : 1;
$p_receiver_r = isset($campoal_options['conikal_p_receiver_r_field']) ? $campoal_options['conikal_p_receiver_r_field'] : 1;
$p_position = isset($campoal_options['conikal_p_position_field']) ? $campoal_options['conikal_p_position_field'] : 1;
$p_position_r = isset($campoal_options['conikal_p_position_r_field']) ? $campoal_options['conikal_p_position_r_field'] : 1;
$p_goal = isset($campoal_options['conikal_p_goal_field']) ? $campoal_options['conikal_p_goal_field'] : 0;
$p_goal_r = isset($campoal_options['conikal_p_goal_r_field']) ? $campoal_options['conikal_p_goal_r_field'] : 1;
$p_goal_d = isset($campoal_options['conikal_p_goal_default_field']) ? $campoal_options['conikal_p_goal_default_field'] : 5000;
$p_photo_video_r = isset($campoal_options['conikal_p_photo_video_r_field']) ? $campoal_options['conikal_p_photo_video_r_field'] : 1;
$p_media_upload = isset($campoal_options['conikal_p_media_upload_field']) ? $campoal_options['conikal_p_media_upload_field'] : 1;
$recaptcha_submit_petition = isset($campoal_options['conikal_google_recaptcha_submit_petition_field']) ? $campoal_options['conikal_google_recaptcha_submit_petition_field'] : 1;
$button_labels_selection = isset($campoal_options['conikal_button_labels_field']) ? $campoal_options['conikal_button_labels_field'] : '';
$verification_email = isset($campoal_options['conikal_verification_email_field']) ? $campoal_options['conikal_verification_email_field'] : 0;
$force_verify_field = isset($campoal_options['conikal_force_verify_field']) ? $campoal_options['conikal_force_verify_field'] : 0;

// get location of user by GeoIp
$geoip_info = function_exists('conikal_client_geoip_info') ? conikal_client_geoip_info() : false;

$account_activation = get_user_meta($current_user->ID, 'is_activated', true);

$goal_format_selection = array('amount' => esc_html__('Amount', 'campoal'), 'percentage' => esc_html__('Percentage', 'campoal'));
$close_form_selection = array('enabled' => esc_html__('Enable', 'campoal'), 'disabled' => esc_html__('Disable', 'campoal'));
?>

<div id="wrapper" class="wrapper read petition">
    <div class="ui container submit-petition">
        <div class="ui center aligned header submit-petition-title">
            <div class="content">
                <?php the_title() ?>
            </div>
        </div>

        <!-- STEP BY STEP TITLE -->
        <div class="ui centered left aligned grid tablet computer only"> 
            <div class="sixteen wide mobile sixteen wide tablet thirteen wide computer column">
                <div class="ui five top ordered steps">
                    <div class="active step" id="step-one">
                        <div class="content">
                          <a href="#" class="title" data-tab="step-one"><?php esc_html_e('Title', 'campoal') ?></a>
                        </div>
                    </div>
                    <?php if ($receiver_step) : ?>
                    <div class="disabled step" id="step-two">
                        <div class="content">
                          <a href="#" class="title" data-tab="step-two"><?php esc_html_e('Receiver', 'campoal') ?></a>
                        </div>
                    </div>
                    <?php endif; ?>
                    <div class="disabled step" id="step-three">
                        <div class="content">
                          <a href="#" class="title" data-tab="step-three"><?php esc_html_e('Problem', 'campoal') ?></a>
                        </div>
                    </div>
                    <div class="disabled step" id="step-four">
                        <div class="content">
                          <a href="#" class="title" data-tab="step-four"><?php esc_html_e('Photo', 'campoal') ?></a>
                        </div>
                    </div>
                    <?php if (class_exists('Give') && $fundraising_step) : ?>
                    <div class="disabled step" id="step-five">
                        <div class="content">
                          <a href="#" class="title" data-tab="step-five"><?php esc_html_e('Fundraising', 'campoal') ?></a>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- STEP BY STEP CONTENT -->
        <div class="ui centered left aligned grid">
            <div class="sixteen wide mobile fourteen wide tablet ten wide computer column">
                <div id="save-response" class="respon-message"></div>
                <form class="ui form submit-petition">
                    <?php wp_nonce_field('submit_petition_ajax_nonce', 'securitySubmitPetition', true); ?>
                    <input type="hidden" id="current_user" name="current_user" value="<?php echo esc_attr($current_user->ID); ?>">
                    <input type="hidden" id="new_id" name="new_id" value="">
                    <input type="hidden" id="sendinblue_list" name="sendinblue_list" value="">
                    <input type="hidden" name="new_status" id="new_status" value="0">
                    <input type="hidden" id="petition_id" name="petition_id" value="">

                    <!-- STEP ONE -->
                    <div class="ui active tab step-one" data-tab="step-one">
                        <h2 class="ui header">
                            <div class="content">
                                <?php esc_html_e('Write your petition title', 'campoal') ?>
                                <div class="sub header">
                                    <?php esc_html_e('This is the first thing people will see about your petition. Get their attention with a short title that focuses on the change you’d like them to support.', 'campoal') ?>
                                </div>
                            </div>
                        </h2>

                        <div class="required field">
                            <label><?php esc_html_e('Title', 'campoal') ?></label>
                            <div class="ui large fluid input">
                                <input type="text" id="new_title" name="new_title" placeholder="<?php esc_attr_e('What do you want to achieve?', 'campoal'); ?>" value="" required>
                            </div>
                        </div>

                        <?php if ($p_goal != '' && $p_goal == 1) { ?>
                            <div class="two fields">
                                <div class="<?php echo esc_attr($p_goal_r == 1 ? 'required ' : '') ?>field">
                                    <label><?php esc_html_e('Goal', 'campoal') ?></label>
                                    <div class="ui large fluid input">
                                        <input type="text" id="new_goal_d" name="new_goal_d" value="<?php echo esc_attr($p_goal_d ? $p_goal_d : $p_goal_d) ?>" placeholder="<?php esc_attr_e('Number of signature goal?', 'campoal'); ?>"<?php echo esc_attr($p_goal_r == 1 ? ' required' : '') ?>>
                                    </div>
                                </div>
                        <?php } else { ?>
                                <input type="hidden" id="new_goal_d" name="new_goal_d" value="<?php echo esc_attr($p_goal_d); ?>">
                        <?php } ?>

                        <?php if ($p_category != '' && $p_category == 1) { ?>
                            <div class="<?php echo esc_attr($p_category_r == 1 ? 'required ' : '') ?>field">
                                <label><?php esc_html_e('Category', 'campoal') ?></label>                        
                                <select class="ui dropdown large fluid input category-select" name="new_category" id="new_category"<?php echo esc_attr($maximum_category > 1 ? ' multiple' : '') ?><?php echo esc_attr($p_category_r == 1 ? ' required' : '') ?>>
                                    <option value=""><?php esc_html_e('Select a category', 'campoal') ?></option>
                                    <?php foreach ($cat_terms as $cat_term) { ?>
                                        <option value="<?php echo esc_attr($cat_term->term_id); ?>"><?php echo esc_html($cat_term->name); ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <?php if ($p_goal != '' && $p_goal == 1) { ?>
                                </div>
                            <?php } ?>
                        <?php } ?>

                        <?php if(!$receiver_step && $p_address != '' && $p_address == 1) { ?>
                            <div class="<?php echo esc_attr($p_address_r == 1 ? 'required ' : '') ?>field">
                                <label><?php esc_html_e('Add a place', 'campoal') ?></label>
                                <div class="ui large fluid input">
                                    <input type="text" id="new_address" name="new_address" value="" placeholder="<?php esc_attr_e('Add a neighborhood, state, city or country', 'campoal'); ?>" value=""<?php echo esc_attr($p_address_r == 1 ? ' required' : '') ?>>
                                </div>
                            </div>

                            <?php if($p_city != '' && $p_city == 1) { ?>
                                <input type="hidden" id="new_city" name="new_city" value="<?php echo esc_attr($geoip_info ? $geoip_info->city->name : '') ?>">
                            <?php } ?>
                            <?php if($p_state != '' && $p_state == 1) { ?>
                                <input type="hidden" id="new_state" name="new_state" value="<?php echo esc_attr($geoip_info ? $geoip_info->mostSpecificSubdivision->name : '') ?>">
                            <?php } ?>
                            <?php if($p_neighborhood != '' && $p_neighborhood == 1) { ?>
                                <input type="hidden" id="new_neighborhood" name="new_neighborhood" value="">
                            <?php } ?>
                            <?php if($p_country != '' && $p_country == 1) { ?>
                                <input type="hidden" id="new_country" name="new_country" value="<?php echo esc_attr($geoip_info ? $geoip_info->country->isoCode : '') ?>">
                            <?php } ?>
                            <?php if($p_zip != '' && $p_zip == 1) { ?>
                                <input type="hidden" id="new_zip" name="new_zip" value="">
                            <?php } ?>
                            <?php if($p_coordinates != '' && $p_coordinates == 1) { ?>
                                <input type="hidden" id="new_lat" name="new_lat" value="<?php echo esc_attr($geoip_info ? $geoip_info->location->latitude : '') ?>">
                                <input type="hidden" id="new_lng" name="new_lng" value="<?php echo esc_attr($geoip_info ? $geoip_info->location->longitude : '') ?>">
                            <?php } ?>
                        <?php } ?>

                        <div class="ui hidden divider"></div>
                        
                        <div class="ui accordion">
                            <div class="title">
                                <h3 class="ui header">
                                <i class="dropdown icon"></i>
                                <?php esc_html_e('How to write a great title?', 'campoal') ?>
                                </h3>
                            </div>
                            <div class="content">
                                <div class="ui large bulleted list">
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Keep it short and to the point', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Example: "Buy organic, free-range eggs for your restaurants".', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Focus on the solution', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Example: "Raise the minimum wage in Minneapolis to $15 an hour".', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Communicate urgency', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Example: "Approve life-saving medication for my daughter’s insurance before it’s too late".', 'campoal') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <?php if ($receiver_step) : ?>
                    <!-- STEP TWO -->
                    <div class="ui tab step-two" data-tab="step-two">
                        <h2 class="ui header">
                            <div class="content">
                                <?php esc_html_e('Choose a decision maker', 'campoal') ?>
                                <div class="sub header">
                                    <?php esc_html_e('This is the person, organization, or group that can make a decision about your petition. We will send them updates on your petition and encourage a response.', 'campoal') ?>
                                </div>
                            </div>
                        </h2>
                            <div class="input-fields-wrap" id="new-decision-makers">
                                <div class="ui grid search decision-search">
                                    <?php if ($p_receiver != '' && $p_receiver == 1) { ?>
                                    <div class="sixteen wide mobile eight wide tablet eight wide computer column">
                                        <div class="<?php echo esc_attr($p_receiver_r == 1 ? 'required ' : '') ?>field">
                                            <label><?php esc_html_e('Full name', 'campoal') ?></label>
                                            <div class="ui large fluid input">
                                                <input class="prompt" type="text" id="new_receiver" name="new_receiver[]" placeholder="<?php esc_attr_e('Who can make this happen?', 'campoal'); ?>" value=""<?php echo esc_attr($p_receiver_r == 1 ? ' required' : '') ?>>
                                                <input class="new_decisionmakers" type="hidden" name="new_decisionmakers[]" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <?php } ?>
                                    <?php if ($p_position != '' && $p_position == 1) { ?>
                                    <div class="sixteen wide mobile eight wide tablet eight wide computer column">
                                        <div class="<?php echo esc_attr($p_position_r == 1 ? 'required ' : '') ?>field">
                                            <?php if (!wp_is_mobile()) { ?>
                                                <label><?php esc_html_e('Title or organization', 'campoal') ?></label>
                                            <?php } ?>
                                            <div class="ui large fluid input">
                                                <input class="decision-title" type="text" id="new_position" name="new_position[]" placeholder="<?php esc_attr_e('What is their position?', 'campoal'); ?>" value=""<?php echo esc_attr($p_position_r == 1 ? ' required' : '') ?>>
                                            </div>
                                        </div>
                                    </div>
                                    <?php } ?>
                                    <div class="results"></div>
                                </div>
                            </div>
                            <div class="ui vertical basic segment">
                                <button class="ui primary tiny right floated button add-field-button"><i class="plus icon"></i><?php esc_html_e('Add', 'campoal') ?></button>
                            </div>
                            
                            <?php if($p_address != '' && $p_address == 1) { ?>
                            <div class="<?php echo esc_attr($p_address_r == 1 ? 'required ' : '') ?>field">
                                <label><?php esc_html_e('Add a place', 'campoal') ?></label>
                                <div class="ui large fluid input">
                                    <input type="text" id="new_address" name="new_address" value="" placeholder="<?php esc_attr_e('Add a neighborhood, state, city or country', 'campoal'); ?>" value=""<?php echo esc_attr($p_address_r == 1 ? ' required' : '') ?>>
                                </div>
                            </div>
                            <?php } ?>

                            <?php if($p_city != '' && $p_city == 1) { ?>
                                <input type="hidden" id="new_city" name="new_city" value="<?php echo esc_attr($geoip_info ? $geoip_info->city->name : '') ?>">
                            <?php } ?>
                            <?php if($p_state != '' && $p_state == 1) { ?>
                                <input type="hidden" id="new_state" name="new_state" value="<?php echo esc_attr($geoip_info ? $geoip_info->mostSpecificSubdivision->name : '') ?>">
                            <?php } ?>
                            <?php if($p_neighborhood != '' && $p_neighborhood == 1) { ?>
                                <input type="hidden" id="new_neighborhood" name="new_neighborhood" value="">
                            <?php } ?>
                            <?php if($p_country != '' && $p_country == 1) { ?>
                                <input type="hidden" id="new_country" name="new_country" value="<?php echo esc_attr($geoip_info ? $geoip_info->country->isoCode : '') ?>">
                            <?php } ?>
                            <?php if($p_zip != '' && $p_zip == 1) { ?>
                                <input type="hidden" id="new_zip" name="new_zip" value="">
                            <?php } ?>
                            <?php if($p_coordinates != '' && $p_coordinates == 1) { ?>
                                <input type="hidden" id="new_lat" name="new_lat" value="<?php echo esc_attr($geoip_info ? $geoip_info->location->latitude : '') ?>">
                                <input type="hidden" id="new_lng" name="new_lng" value="<?php echo esc_attr($geoip_info ? $geoip_info->location->longitude : '') ?>">
                            <?php } ?>
                        <!--<div data-tags-input-name="decision-maker" id="decision-maker"></div>-->

                        <div class="ui hidden divider"></div>

                        <div class="ui accordion">
                            <div class="title">
                                <h3 class="ui header">
                                <i class="dropdown icon"></i>
                                <?php esc_html_e('How to find the right decision maker?', 'campoal') ?>
                                </h3>
                            </div>
                            <div class="content">
                                <div class="ui large bulleted list">
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Choose someone who can give you what you want', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('You might need to do some research to find the right person who can make or influence the decision.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Do not go straight to the top', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('You might see faster results if you choose a more junior person who is petitioned less often than more recognizable figures.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Choose someone you can work with', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Your petition is most likely to win by reaching an agreement with your decision maker.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- STEP THREE -->
                    <div class="ui tab step-three" data-tab="step-three">
                        <h2 class="ui header">
                            <div class="content">
                                <?php esc_html_e('Explain the problem', 'campoal') ?>
                                <div class="sub header">
                                    <?php esc_html_e('People are more likely to support your petition if it’s clear why you care. Explain how this change will impact you, your family, or your community.', 'campoal') ?>
                                </div>
                            </div>
                        </h2>
                        <div class="required field">
                            <label><?php esc_html_e('Content', 'campoal') ?></label>
                            
                            <div id="isDesc">
                            <?php 
                            $html_content = isset($edit_content) ? $edit_content : '';
                            if ($editor_style == 'classic') {
                                    $settings = array(
                                        'media_buttons'         => $p_media_upload,
                                        'textarea_rows'         => 10,
                                        'drag_drop_upload'      => true,
                                        'quicktags'             => false,
                                        'dfw'                   => true,
                                        'tinymce'               => true,
                                    );
                                    wp_editor($html_content, 'new_content', $settings);
                                ?>
                            <?php } else { ?>
                                <textarea id="new_content" name="new_content" required><?php echo esc_textarea($html_content) ?></textarea>
                            <?php } ?>
                            </div>
                        </div>
                        <?php if($p_topics != '' && $p_topics == 1) { ?>
                        <div class="<?php echo esc_attr($p_topics_r == 1 ? 'required ' : '') ?>field">
                            <label><?php esc_html_e('Add topics', 'campoal') ?></label>
                            <div class="ui fluid multiple search selection large dropdown" id="topics-search">
                                <input name="new_topics" id="new_topics" type="hidden"<?php echo esc_attr($p_topics_r == 1 ? ' required' : '') ?>>
                                <i class="dropdown icon"></i>
                                <div class="default text"><?php esc_html_e('Keywords related this petition', 'campoal') ?></div>
                                <div class="menu">
                                </div>
                            </div>
                        </div>
                        <?php } ?>
                        <div class="ui hidden divider"></div>

                        <div class="ui accordion">
                            <div class="title">
                                <h3 class="ui header">
                                <i class="dropdown icon"></i>
                                <?php esc_html_e('How to inspire your readers to action?', 'campoal') ?>
                                </h3>
                            </div>
                            <div class="content">
                                <div class="ui large bulleted list">
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Describe the people involved and the problem they are facing', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Readers are most likely to take action when they understand who is affected.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Describe the solution', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Explain what needs to happen and who can make the change. Make it clear what happens if you win or lose.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Make it personal', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Readers are more likely to sign and support your petition if it’s clear why you care.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Respect others', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Don’t bully, use hate speech, threaten violence or make things up.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP FOUR -->
                    <div class="ui tab step-four" data-tab="step-four">
                        <h2 class="ui header">
                            <div class="content">
                                <?php esc_html_e('Add a photo or video', 'campoal') ?>
                                <div class="sub header">
                                    <?php esc_html_e('Petitions with a photo or video receive six times more signatures than those without. Include one that captures the emotion of your story.', 'campoal') ?>
                                </div>
                            </div>
                        </h2>
                        <?php get_template_part('templates/gallery-upload'); ?>
                        
                        <div class="ui hidden divider"></div>

                        <div class="ui accordion">
                            <div class="title">
                                <h3 class="ui header">
                                <i class="dropdown icon"></i>
                                <?php esc_html_e('Tips for adding a photo or video', 'campoal') ?>
                                </h3>
                            </div>
                            <div class="content">
                                <div class="ui large bulleted list">
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Choose a photo that captures the emotion of your petition', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Photos of people or animals work well.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Try to upload photos that are 1600 x 900 pixels or larger', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Large photos look good on all screen sizes.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Keep it friendly for all audiences', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Make sure your photo doesn’t include graphic violence or sexual content.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php if (conikal_show_google_reCaptcha() && $recaptcha_submit_petition == 1) {
                            if (!class_exists('Give') || $fundraising_step == 0) { ?>
                            <p>
                                <?php get_template_part('templates/google', 'recaptcha'); ?>
                            </p>
                        <?php }
                        } ?>
                    </div>

                    <?php if (class_exists('Give') && $fundraising_step) :
                        // get currency format
                        $currency_position = give_get_option( 'currency_position', 'before' );
                        $currency_symbol = give_currency_symbol(); ?>

                    <!-- STEP FIVE -->
                    <div class="ui tab step-five" data-tab="step-five">
                        <h2 class="ui header">
                            <div class="content">
                                <?php esc_html_e('Create the donation package', 'campoal') ?>
                                <div class="sub header">
                                    <?php esc_html_e('Perks are incentives offered to backers in exchange for their support. You may edit your perk details until the perk is claimed.', 'campoal') ?>
                                </div>
                            </div>
                        </h2>
                        <div class="two fields">
                            <div class="required field">
                                <label><?php esc_html_e('Goal', 'campoal') ?></label>
                                <div class="ui <?php echo esc_attr($currency_position == 'after' ? 'right' : 'left') ?> labeled large input">
                                    <?php if ($currency_position == 'before') { ?>
                                        <label for="set_goal" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                    <?php } ?>
                                        <input type="number" placeholder="<?php esc_attr_e('Amount of Goal', 'campoal') ?>" name="set_goal" id="set_goal" value="0" required>
                                    <?php if ($currency_position == 'after') { ?>
                                        <label for="set_goal" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="field">
                                <label><?php esc_html_e('Goal format', 'campoal') ?></label>
                                <select class="ui dropdown large fluid input" name="goal_format" id="goal_format">
                                    <?php foreach ($goal_format_selection as $key => $format) { ?>
                                        <option value="<?php echo esc_attr($key) ?>"><?php  echo esc_html($format) ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="input-fields-wrap" id="new-donate-level">
                            <div class="ui grid search">
                                <div class="sixteen wide mobile eight wide tablet eight wide computer column">
                                    <div class="required field">
                                        <label><?php esc_html_e('Amount', 'campoal') ?></label>
                                        <div class="ui large fluid <?php echo esc_attr($currency_position == 'after' ? 'right' : 'left') ?> labeled input">
                                            <?php if ($currency_position == 'before') { ?>
                                               <label for="amount_level" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                            <?php } ?>
                                                <input type="number" id="amount_level" name="amount_level[]" placeholder="<?php esc_attr_e('Amount of level', 'campoal'); ?>" value="" required>
                                            <?php if ($currency_position == 'after') { ?>
                                                <label for="amount_level" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                            <?php } ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="sixteen wide mobile eight wide tablet eight wide computer column">
                                    <div class="required field">
                                        <?php if (!wp_is_mobile()) { ?>
                                            <label><?php esc_html_e('Title', 'campoal') ?></label>
                                        <?php } ?>
                                        <div class="ui large fluid input">
                                            <input type="text" id="name_level" name="name_level[]" placeholder="<?php esc_attr_e('Level name', 'campoal'); ?>" value="" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="sixteen wide column field">
                                    <label><?php esc_html_e('Description', 'campoal') ?></label>
                                    <textarea name="description_level[]" id="description_level" placeholder="<?php esc_attr_e('Description of level', 'campoal'); ?>" rows="3" required><?php echo esc_textarea(isset($donation_levels[0]['_give_description']) ? $donation_levels[0]['_give_description'] : ''); ?></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="ui vertical basic segment">
                            <button class="ui primary tiny right floated button add-level-button"><i class="plus icon"></i><?php esc_html_e('Add', 'campoal') ?></button>
                        </div>

                        <div class="required field">
                            <label><?php esc_html_e('Minimum', 'campoal') ?></label>
                            <div class="ui <?php echo esc_attr($currency_position == 'after' ? 'right' : 'left') ?> labeled large input">
                                <?php if ($currency_position == 'before') { ?>
                                    <label for="custom_amount_minimum" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                <?php } ?>
                                  <input type="number" placeholder="<?php esc_attr_e('Amount of minimum', 'campoal') ?>" name="custom_amount_minimum" id="custom_amount_minimum" value="1" required>
                                <?php if ($currency_position == 'after') { ?>
                                    <label for="custom_amount_minimum" class="ui label"><?php echo esc_html($currency_symbol) ?></label>
                                <?php } ?>
                            </div>
                        </div>

                        <div class="two fields">
                            <div class="field">
                                <label><?php esc_html_e('Button label', 'campoal') ?></label>
                                <select class="ui dropdown large fluid input" name="button_label" id="button_label">
                                    <?php if ($button_labels_selection) {
                                    foreach ($button_labels_selection as $label) { ?>
                                        <option value="<?php echo esc_attr($label) ?>"><?php echo esc_html($label) ?></option>
                                    <?php }
                                    } ?>
                                </select>
                            </div>
                            <div class="field">
                                <label><?php esc_html_e('Close when met goal', 'campoal') ?></label>
                                <select class="ui dropdown large fluid input" name="close_form_when_goal_achieved" id="close_form_when_goal_achieved">
                                    <?php foreach ($close_form_selection as $key => $option) { ?>
                                        <option value="<?php echo esc_attr($key) ?>"><?php echo esc_html($option) ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>

                        <div class="ui hidden divider"></div>

                        <div class="ui accordion">
                            <div class="title">
                                <h3 class="ui header">
                                <i class="dropdown icon"></i>
                                <?php esc_html_e('How to create a great contribute perks?', 'campoal') ?>
                                </h3>
                            </div>
                            <div class="content">
                                <div class="ui large bulleted list">
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Set the right price for perk', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('This amount should represent how much you want to receive for all the items included in this perk.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Write a clear title for perk', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Create a title that best describes the contents of what this perk is offering.', 'campoal') ?></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="content">
                                            <div class="header"><?php esc_html_e('Items are you offering to backers who claim this perk', 'campoal') ?></div>
                                            <div class="description"><?php esc_html_e('Items could be physical, digital, experiences, or even just a thank you. You can specify how many you are offering in this perk..', 'campoal') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php if (conikal_show_google_reCaptcha() && $recaptcha_submit_petition == 1) { ?>
                            <p>
                                <?php get_template_part('templates/google', 'recaptcha'); ?>
                            </p>
                        <?php } ?>
                    </div>
                    <?php wp_nonce_field('submit_contribute_ajax_nonce', 'securitySubmitContribute', true); ?>
                    <?php endif; ?>
                </form>
                <div class="ui hidden divider"></div>
                
                <div class="ui grid">
                    <div class="eight wide left aligned column">
                        <button class="ui left labeled icon large button display none" id="back-one"><i class="arrow left icon"></i><?php esc_html_e('Back', 'campoal') ?></button>
                        <button class="ui left labeled icon large button display none" id="back-two"><i class="arrow left icon"></i><?php esc_html_e('Back', 'campoal') ?></button>
                        <button class="ui left labeled icon large button display none" id="back-three"><i class="arrow left icon"></i><?php esc_html_e('Back', 'campoal') ?></button>
                        <?php if (class_exists('Give') && $fundraising_step == 1) : ?>
                            <button class="ui left labeled icon large button display none" id="back-four"><i class="arrow left icon"></i><?php esc_html_e('Back', 'campoal') ?></button>
                        <?php endif; ?>
                    </div>
                    <div class="eight wide right aligned column">
                        <?php if ($receiver_step) : ?>
                            <button class="ui primary right labeled icon large button" id="next-two"><?php esc_html_e('Next', 'campoal') ?><i class="arrow right icon"></i></button>
                            <button class="ui primary right labeled icon large button display none" id="next-three"><?php esc_html_e('Next', 'campoal') ?><i class="arrow right icon"></i></button>
                        <?php else : ?>
                            <button class="ui primary right labeled icon large button" id="next-three"><?php esc_html_e('Next', 'campoal') ?><i class="arrow right icon"></i></button>
                        <?php endif; ?>
                            <button class="ui primary right labeled icon large button display none" id="next-four"><?php esc_html_e('Next', 'campoal') ?><i class="arrow right icon"></i></button>
                        <?php if (class_exists('Give') && $fundraising_step == 1) : ?>
                            <button class="ui primary right labeled icon large button display none" id="next-five"><?php esc_html_e('Next', 'campoal') ?><i class="arrow right icon"></i></button>
                        <?php endif; ?>
                            <button class="ui primary right labeled icon large button display none" id="finish-btn"><?php esc_html_e('Finish', 'campoal') ?><i class="paper plane icon"></i></button>
                    </div>
                </div>
                <?php if (empty($account_activation) && $verification_email != 0 && $force_verify_field == 1) : ?>
                    <div class="ui icon warning message">
                        <i class="user times icon"></i>
                        <div class="content">
                            <div class="header">
                                <?php esc_html_e('Your account has not been activated!', 'campoal') ?>
                            </div>
                            <p><?php esc_html_e('You cannot submit the petition because your email has not been verified.', 'campoal') ?></p>
                        </div>
                    </div>
                <?php endif; ?>
                <div class="ui hidden section divider"></div>
            </div>
        </div>
    </div>
</div>