<link rel="stylesheet" type="text/css" href="/admin/app-assets/css/plugins/forms/validation/form-validation.css">
<link rel="stylesheet" href="/admin/assets/libs/select2/select2.css" />

<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <form id="editPremiumPackage" method="POST" enctype="multipart/form-data"
                            action="/dashboard/premiumPackages/edit/<%= package._id %>"
                            class="form-horizontal needs-validation" novalidate>

                            <%- include('../components/input.ejs', inputAttrs={ type:"hidden", name:"_csrf",
                                value:csrfToken, classes:"", ids:"" }) %>

                            <div class="form-body">

                                <!-- Names -->
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="ti ti-forms"></i>
                                        <%= i18n.__('premiumPackages.name') %>
                                    </div>
                                    <div class="two-col">
                                        <% languages.forEach((l)=>{ %>
                                            <div>
                                                <%- include('../components/input.ejs', inputAttrs={
                                                    type:"text",
                                                    name:`name.${l.value}`,
                                                    label:i18n.__("premiumPackages.name_"+l.value),
                                                    value: package.name?.[l.value] || "",
                                                    invalidMsg:i18n.__('common.{{field}}Required',{field:i18n.__("premiumPackages.name_"+l.value)}),
                                                    placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__("premiumPackages.name_"+l.value)}),
                                                    required:true, classes:["form-control"], ids:"",
                                                    oninput:"validateInput(this)"
                                                }) %>
                                            </div>
                                        <% }) %>
                                    </div>
                                </div>

                                <!-- Descriptions -->
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="ti ti-align-left"></i>
                                        <%= i18n.__('premiumPackages.description') %>
                                    </div>
                                    <div class="two-col">
                                        <% languages.forEach((l)=>{ %>
                                            <div>
                                                <label class="form-label" for="description_<%= l.value %>">
                                                    <%= i18n.__("premiumPackages.description_"+l.value) %>
                                                </label>
                                                <textarea
                                                    name="description.<%= l.value %>"
                                                    id="description_<%= l.value %>"
                                                    class="form-control"
                                                    rows="3"
                                                    required
                                                    placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('premiumPackages.description_'+l.value)}) %>"
                                                    oninput="validateInput(this)"
                                                    dir="<%= l.value === 'ar' ? 'rtl' : 'ltr' %>"
                                                ><%= package.description?.[l.value] || '' %></textarea>
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('premiumPackages.description_'+l.value)}) %>
                                                </div>
                                            </div>
                                        <% }) %>
                                    </div>
                                </div>

                                <!-- Price, Duration, Type -->
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="ti ti-settings"></i>
                                        <%= i18n.__('premiumPackages.packageInformation') %>
                                    </div>
                                    <div class="three-col">
                                        <div>
                                            <%- include('../components/input.ejs', { inputAttrs: {
                                                type: "number", name: "price", label: i18n.__('premiumPackages.price'),
                                                value: package.price || "",
                                                invalidMsg: i18n.__('common.{{field}}Required',{field:i18n.__('premiumPackages.price')}),
                                                placeholder: "0.00", required: true,
                                                classes: ["form-control"], ids: "price",
                                                min: "0", step: "0.01", inputmode: "decimal",
                                                oninput: "validateInput(this)"
                                            } }) %>
                                        </div>
                                        <div>
                                            <%- include('../components/input.ejs', { inputAttrs: {
                                                type: "number", name: "duration", label: i18n.__('premiumPackages.duration'),
                                                value: package.duration || "",
                                                invalidMsg: i18n.__('common.{{field}}Required',{field:i18n.__('premiumPackages.duration')}),
                                                placeholder: "1", required: true,
                                                classes: ["form-control"], ids: "duration",
                                                min: "1", step: "1", inputmode: "numeric",
                                                oninput: "validateInput(this)"
                                            } }) %>
                                        </div>
                                        <div>
                                            <label class="form-label" for="type">
                                                <%= i18n.__('premiumPackages.type') %>
                                            </label>
                                            <select name="type" id="type" class="form-select select2" required>
                                                <option value="monthly" <%=package.presentation.monthly?'selected':''%>><%= i18n.__('premiumPackages.monthly') %></option>
                                                <option value="daily" <%=package.presentation.daily?'selected':''%>><%= i18n.__('premiumPackages.daily') %></option>
                                                <option value="yearly" <%=package.presentation.yearly?'selected':''%>><%= i18n.__('premiumPackages.yearly') %></option>
                                            </select>
                                            <div class="invalid-feedback">
                                                <%= i18n.__('premiumPackages.typeInvalid') %>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="ti ti-toggle-right"></i>
                                        <%= i18n.__('common.status') %>
                                    </div>
                                    <div style="max-width: 300px;">
                                        <select name="status" id="status" class="form-select select2">
                                            <option value="active" <%=package.presentation.active?'selected':''%>><%= i18n.__('common.active') %></option>
                                            <option value="inActive" <%=package.presentation.inactive?'selected':''%>><%= i18n.__('common.inActive') %></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="pt-4 d-flex justify-content-center align-items-center mt-2">
                                    <button type="submit"
                                        class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit_button">
                                        <%= i18n.__('common.edit') %>
                                    </button>
                                    <a class="btn btn-label-dribbble waves-effect" href="<%= referer %>">
                                        <%= i18n.__('common.referer') %>
                                    </a>
                                </div>

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

<%- include('includes.ejs') %>
