{$_promo_id = waRequest::request("promo_id", null)}
{$_start_date = waRequest::request("start_date", null)}
{$_finish_date = waRequest::request("finish_date", null)}

{if !empty($_promo_id)}
    {$expense.type = "promo"}
    {$expense.name = $_promo_id}

    {if !empty($_start_date)}
        {$expense.start = $_start_date}
    {/if}
    {if !empty($_finish_date)}
        {$expense.end = $_finish_date}
    {/if}
{/if}

<div class="box js-edit-costs-form-section">

    <div class="flexbox middle custom-mt-24">
        <h3 class="custom-mb-0 wide">{if $expense.id}[`Modify expense`]{else}[`Add expense`]{/if}</h3>
        {if $expense.id}
            <div class="cost-edit-controls">
                <button href="javascript:void" class="js-delete-expense-link button small light-gray rounded">
                    <i class="fas fa-trash-alt text-red"></i>
                    [`Delete expense`]
                </button>
            </div>
        {/if}
    </div>

    <form class="fields" action="{$wa_app_url}?module=marketingCostSave">
        <div class="fields-group">

            <input type="hidden" name="expense_id" value="{$expense.id|escape}">

            <div class="field custom-mt-0">
                <div class="name for-input">[`Amount`]</div>
                <div class="value">
                    <input type="text" name="expense[amount]" class="bold large number" value="{if !empty($expense.amount)}{$expense.amount|floatval}{/if}" style="max-width: 155px; min-width: auto; width: auto;">
                    <b>{$def_cur}</b>
                </div>
            </div>
            <div class="field">
                <div class="name">[`Channel`]</div>
                <div class="value" id="channel_controls">
                    <div class="flexbox wrap space-8">
                    <div class="wa-select small">
                        <select class="channel-selector" name="channel_selector">
                            <option></option>
                            {if !empty($promos)}
                                <option disabled>--- [`Promos`] ---</option>
                                {foreach $promos as $p}
                                    <option value="{$p.name|escape}" data-channel-type="promo" data-color="{$p.color}"{if $expense.type == 'promo' && $expense.name == $p.name} selected{/if}>{$p.label|escape}</option>
                                {/foreach}
                            {/if}
                            <option disabled>--- [`Sources`] ---</option>
                            {foreach $sources as $ch}
                                <option value="{$ch.name|escape}" data-channel-type="source" data-color="{$ch.color}"{if $expense.type == 'source' && $expense.name == $ch.name} selected{/if}>{$ch.label|escape}</option>
                            {/foreach}
                            <option value="" data-channel-type="source"{if $expense.type == 'source' && empty($expense.name)} selected{/if}>[`Enter domain name...`]</option>
                            <option disabled>--- [`Campaigns`] ---</option>
                            {foreach $campaigns as $ch}
                                <option value="{$ch.name|escape}" data-channel-type="campaign" data-color="{$ch.color}"{if $expense.type == 'campaign' && $expense.name == $ch.name} selected{/if}>{$ch.label|escape}</option>
                            {/foreach}
                            <option value="" data-channel-type="campaign"{if $expense.type == 'campaign' && empty($expense.name)} selected{/if}>[`Enter UTM campaign ID...`]</option>
                        </select>
                    </div>
                    <input type="hidden" name="expense[color]" value="{$expense.color|escape}">
                    <input type="hidden" name="expense[type]" value="{$expense.type|escape}">
                    <input type="text" name="expense[name]" value="{$expense.name|escape}" style="display:none">
                    <span class="js-color s-color-picker large" style="color: #ff6c00;">
                        <i class="fas fa-circle"></i>
                    </span>

                    <div class="js-colorpicker" style="display:none"></div>
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="name">[`Storefront`]</div>
                <div class="value">
                    <div class="wa-select small">
                        <select name="expense[storefront]">
                            <option value="">[`Not specified`]</option>
                            {foreach $storefronts as $s}
                                <option value="{$s|escape}"{if $expense.storefront == $s} selected{/if}>{$s|escape}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="name for-checkbox">[`Payment term`]</div>
                <div class="value">
                    <ul>
                        <li>
                            <label>
                                <span class="wa-radio">
                                    <input type="radio" name="expense_period_type" value="one_time"{if $expense.start == $expense.end} checked{/if}>
                                    <span></span>
                                </span>
                                [`One-time`]
                            </label>
                            <span class="custom-ml-4 state-with-inner-icon right">
                                <input type="text" class="small s-datepicker" name="expense_period_single" value="{$expense.start|escape}" style="min-width: 10rem;">
                                <span class="icon"><i class="fas fa-calendar-alt"></i></span>
                            </span>
                        </li>
                        <li>
                            <label>
                                <span class="wa-radio">
                                    <input type="radio" name="expense_period_type" value="timeframe"{if $expense.start != $expense.end} checked{/if}>
                                    <span></span>
                                </span>
                                [`Time frame`]
                            </label>
                            <div class="hint">[`The amount will be gradually distributed by day over the entire period, which allows you to estimate ROI more precisely.`]</div>
                            <div class="custom-mt-8">
                                <span class="state-with-inner-icon right">
                                    <input type="text" class="small s-datepicker" name="expense_period_from"  value="{$expense.start|escape}" style="min-width: 10rem;">
                                    <span class="icon"><i class="fas fa-calendar-alt"></i></span>
                                </span>
                                    &mdash;
                                <span class="state-with-inner-icon right">
                                    <input type="text" class="small s-datepicker" name="expense_period_to"  value="{$expense.end|escape}" style="min-width: 10rem;">
                                    <span class="icon"><i class="fas fa-calendar-alt "></i></span>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="field">
                <div class="name">[`Note`]</div>
                <div class="value">
                    <textarea name="expense[note]" placeholder="[`optional`]" class="smaller">{$expense.note|escape}</textarea>
                </div>
            </div>
            <div class="field">
                <div class="value submit">
                    <button type="submit" class="button orange">[`Save`]</button>
                    <a href="javascript:void(0)" class="cancel-button button light-gray">[`Cancel`]</a>
                </div>
            </div>
        </div>
    </form>
</div>