<!--start content -->
<section id="multiple-column-form">
    <div class="package-container">

        <!-- Names Section -->
        <div class="package-section">
            <div class="package-info-grid">
                <% languages.forEach((lang)=>{ %>
                    <div class="package-info-card">
                        <div class="package-info-label">
                            <i class="fas fa-<%= lang.value === 'en' ? 'globe' : 'language' %>"></i>
                            <%= i18n.__("packages.name_"+lang.value) %>
                        </div>
                        <div class="package-info-value" dir="<%= lang.value === 'ar' ? 'rtl' : 'ltr' %>">
                            <%= package.name[lang.value] %>
                        </div>
                    </div>
                <% }) %>
            </div>
        </div>

        <!-- Description Section -->
        <div class="package-section">
            <div class="package-info-grid">
                <% languages.forEach((lang)=>{ %>
                    <div class="package-info-card">
                        <div class="package-info-label">
                            <i class="fas fa-align-left"></i>
                            <%= i18n.__("packages.description_"+lang.value) %>
                        </div>
                        <div class="package-info-value" dir="<%= lang.value === 'ar' ? 'rtl' : 'ltr' %>">
                            <%= package.description?.[lang.value] || '-' %>
                        </div>
                    </div>
                <% }) %>
            </div>
        </div>

        <!-- Flag text Section -->
        <div class="package-section">
            <div class="package-info-grid">
                <% languages.forEach((lang)=>{ %>
                    <div class="package-info-card">
                        <div class="package-info-label">
                            <i class="fas fa-flag"></i>
                            <%= i18n.__("packages.flagetext_"+lang.value) %>
                        </div>
                        <div class="package-info-value" dir="<%= lang.value === 'ar' ? 'rtl' : 'ltr' %>">
                            <%= package.flagetext?.[lang.value] || '-' %>
                        </div>
                    </div>
                <% }) %>
            </div>
        </div>

        <!-- Price & Duration Section -->
        <div class="package-section">
            <div class="pricing-info-grid">
                <div class="package-info-card price-card highlight">
                    <div class="package-info-label">
                        <i class="fas fa-coins"></i>
                        <%= i18n.__("packages.price") %>
                    </div>
                    <div class="package-info-value">
                        <% if (package.isFree) { %>
                            <span class="badge bg-success fs-6 px-3 py-2"><%= i18n.__('packages.isFree') %></span>
                        <% } else { %>
                            <%= Number(package.price) %>
                            <%= i18n.__('common.currency') %>
                        <% } %>
                    </div>
                </div>

                <div class="package-info-card duration-card highlight">
                    <div class="package-info-label">
                        <i class="fas fa-calendar-alt"></i>
                        <%= i18n.__("packages.duration") %>
                    </div>
                    <div class="package-info-value">
                        <%= package.duration %>
                    </div>
                </div>
            </div>
        </div>

        <!-- Type & Status Section -->
        <div class="package-section">
            <div class="pricing-info-grid">

                <div class="package-info-card highlight">
                    <div class="package-info-label">
                        <i class="fas fa-clock"></i>
                        <%= i18n.__("packages.type") %>
                    </div>
                    <div class="package-info-value justify-content-center">
                        <% if (package.presentation.daily) { %>
                            <span class="badge bg-secondary fs-6 px-3 py-2">
                                <%= i18n.__('packages.daily') %>
                            </span>
                        <% } else if (package.presentation.monthly) { %>
                            <span class="badge bg-primary fs-6 px-3 py-2">
                                <%= i18n.__('packages.monthly') %>
                            </span>
                        <% } else if (package.presentation.yearly) { %>
                            <span class="badge bg-dark fs-6 px-3 py-2">
                                <%= i18n.__('packages.yearly') %>
                            </span>
                        <% } else { %>
                            <span class="badge bg-light text-dark fs-6 px-3 py-2"><%= package.type %></span>
                        <% } %>
                    </div>
                </div>

                <div class="package-info-card highlight">
                    <div class="package-info-label">
                        <i class="fas fa-toggle-on"></i>
                        <%= i18n.__("common.status") %>
                    </div>
                    <div class="package-info-value justify-content-center">
                        <% if (package.presentation.active) { %>
                            <span class="badge bg-success fs-6 px-3 py-2">
                                <i class="fas fa-check-circle me-1"></i>
                                <%= i18n.__('common.active') %>
                            </span>
                        <% } else { %>
                            <span class="badge bg-danger fs-6 px-3 py-2">
                                <i class="fas fa-times-circle me-1"></i>
                                <%= i18n.__('common.inActive') %>
                            </span>
                        <% } %>
                    </div>
                </div>

            </div>
        </div>

        <!-- Features Section -->
        <div class="package-section">
            <div class="package-info-card highlight">
                <div class="package-info-label">
                    <i class="fas fa-list-check"></i>
                    <%= i18n.__('packages.packageFeatures') %>
                </div>
                <div class="package-info-value" style="flex-direction: column; align-items: flex-start; gap: 8px;">
                    <%
                      const showLang = typeof lang !== 'undefined' ? lang : 'ar';
                      const featureList = Array.isArray(package.features) ? package.features : [];
                    %>
                    <% if (!featureList.length) { %>
                        <span>—</span>
                    <% } else { %>
                        <ul class="mb-0 ps-3">
                            <% featureList.forEach((f) => { %>
                                <li><%= f.name?.[showLang] || f.name?.ar || f.name?.en || f %></li>
                            <% }) %>
                        </ul>
                    <% } %>
                </div>
            </div>
        </div>

        <div class="text-center mt-4">
            <a class="btn btn-lg btn-label-dribbble waves-effect" href="<%=referer%>"
                style="min-width: 200px; font-size: 1.1rem; padding: 0.875rem 2rem;">
                <i class="fas fa-arrow-<%= lang === 'ar' ? 'right' : 'left' %> me-2"></i>
                <%= i18n.__('common.referer') %>
            </a>
        </div>

    </div>
</section>

<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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
    .package-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .package-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .package-info-card {
        background: var(--bs-card-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: 16px;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
        box-shadow: var(--bs-box-shadow-sm);
    }

    .package-info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #0d6efd, #0850c4);
    }

    [dir="rtl"] .package-info-card::before {
        left: auto;
        right: 0;
    }

    .package-info-card.highlight {
        border: 2px solid #0d6efd;
    }

    .package-info-label {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0d6efd !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .package-info-value {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--bs-body-color) !important;
        line-height: 1.6;
        padding: 1rem;
        background: var(--bs-card-bg);
        border-radius: 12px;
        border: 1px solid var(--bs-border-color);
        min-height: 56px;
        display: flex;
        align-items: center;
    }

    .price-card .package-info-value {
        font-size: 2.2rem;
        font-weight: 700;
        color: #0d6efd !important;
        justify-content: center;
        border: 2px solid #0d6efd;
    }

    .duration-card .package-info-value {
        font-size: 2rem;
        font-weight: 700;
        color: #198754 !important;
        justify-content: center;
        border: 2px solid #198754;
    }

    .pricing-info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-bottom: 2rem;
    }

    @media (max-width: 767.98px) {
        .pricing-info-grid {
            grid-template-columns: 1fr !important;
            gap: 1rem;
        }
    }

    .package-section {
        margin-bottom: 2rem;
    }
</style>

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