{% extends "superadmin/base_superadmin.html" %}

{% block title %}Add New Group{% endblock %}

{% block content %}
<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
    <!-- Breadcrumb -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h2 class="text-title-md2 font-semibold text-black dark:text-white">
            Add New Group
        </h2>
        <nav>
            <ol class="flex items-center gap-2">
                <li>
                    <a href="{{ url_for('superadmin_dashboard') }}" class="font-medium">Dashboard</a>
                </li>
                <li>
                    <a href="{{ url_for('superadmin_groups') }}" class="font-medium">Groups</a>
                </li>
                <li class="font-medium text-primary">/ Add Group</li>
            </ol>
        </nav>
    </div>

    <!-- Add Group Form -->
    <div class="grid grid-cols-1 gap-9 sm:grid-cols-1">
        <div class="flex flex-col gap-9">
            <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                <div class="border-b border-stroke py-4 px-6.5 dark:border-strokedark">
                    <h3 class="font-medium text-black dark:text-white">
                        Group Information
                    </h3>
                </div>
                <form action="{{ url_for('superadmin_add_group') }}" method="POST" class="p-6.5">
                    <div class="mb-4.5 flex flex-col gap-6 xl:flex-row">
                        <div class="w-full xl:w-1/2">
                            <label class="mb-2.5 block text-black dark:text-white">
                                Group Name <span class="text-meta-1">*</span>
                            </label>
                            <input
                                type="text"
                                name="name"
                                required
                                placeholder="Enter group name"
                                class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                            />
                        </div>

                        <div class="w-full xl:w-1/2">
                            <label class="mb-2.5 block text-black dark:text-white">
                                Group Code <span class="text-meta-1">*</span>
                            </label>
                            <input
                                type="text"
                                name="group_code"
                                required
                                placeholder="e.g., GRP001"
                                class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                            />
                        </div>
                    </div>

                    <div class="mb-4.5">
                        <label class="mb-2.5 block text-black dark:text-white">
                            Description
                        </label>
                        <textarea
                            rows="4"
                            name="description"
                            placeholder="Enter group description"
                            class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                        ></textarea>
                    </div>

                    <div class="mb-6">
                        <label class="mb-2.5 block text-black dark:text-white">
                            Currency <span class="text-meta-1">*</span>
                        </label>
                        <select
                            name="currency_id"
                            required
                            class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                        >
                            <option value="">Select Currency</option>
                            {% for currency in currencies %}
                            <option value="{{ currency.id }}" {% if currency.is_default %}selected{% endif %}>
                                {{ currency.name }} ({{ currency.symbol }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Group Admin Section -->
                    <div class="mb-6 border-t border-stroke pt-6 dark:border-strokedark">
                        <h4 class="mb-4 text-lg font-semibold text-black dark:text-white">
                            Assign Group Administrator (Optional)
                        </h4>
                        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                            Create a dedicated admin for this group who can manage members and contributions independently.
                        </p>
                        
                        <div class="mb-4.5 flex flex-col gap-6 xl:flex-row">
                            <div class="w-full xl:w-1/2">
                                <label class="mb-2.5 block text-black dark:text-white">
                                    Admin Username
                                </label>
                                <input
                                    type="text"
                                    name="admin_username"
                                    placeholder="e.g., admin_grp001"
                                    class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                                />
                            </div>

                            <div class="w-full xl:w-1/2">
                                <label class="mb-2.5 block text-black dark:text-white">
                                    Admin Password
                                </label>
                                <input
                                    type="password"
                                    name="admin_password"
                                    placeholder="Enter secure password"
                                    class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                                />
                            </div>
                        </div>

                        <div class="mb-4.5 flex flex-col gap-6 xl:flex-row">
                            <div class="w-full xl:w-1/2">
                                <label class="mb-2.5 block text-black dark:text-white">
                                    Admin Full Name
                                </label>
                                <input
                                    type="text"
                                    name="admin_full_name"
                                    placeholder="Administrator's full name"
                                    class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                                />
                            </div>

                            <div class="w-full xl:w-1/2">
                                <label class="mb-2.5 block text-black dark:text-white">
                                    Admin Email
                                </label>
                                <input
                                    type="email"
                                    name="admin_email"
                                    placeholder="admin@example.com"
                                    class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="flex gap-4">
                        <button
                            type="submit"
                            class="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:bg-opacity-90"
                        >
                            Create Group
                        </button>
                        <a
                            href="{{ url_for('superadmin_groups') }}"
                            class="flex justify-center rounded border border-stroke py-2 px-6 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
                        >
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}