{{-- MODAL TO ADD PACKAGE BY SUPER ADMIN --}}


<div class="modal fade" id="superAdminPackageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen p-9">
        <div class="modal-content rounded">
            <div class="modal-header">
                <div class="fs-1 fw-boldest">
                    <h4>Add Subscription</h4>
                </div>
                <button type="button" onclick="closePost()" class="close mr-2" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="mdi mdi-close text-gray-500"></i></span>
                </button>
            </div>
            <div class="modal-body scroll-y">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <form class="" action="{{ route('sub.store-package') }}" method="POST">
                                @csrf
                                <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel"
                                    aria-labelledby="wizardTabOne">
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            <div class="row">
                                                <div class="col">
                                                    <label>
                                                        Package Category
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <small class="text-muted">
                                                        <a href="" data-toggle="modal"
                                                            data-target="#addPackageCategory"
                                                            class="custom-button cursor text-color"> <i
                                                                class="mdi mdi-plus"></i> Add Category</a>
                                                    </small>
                                                </div>
                                            </div>
                                        </label>
                                        <select name="package_category_id" class="form-select">
                                            @forelse($package_categories as $package_category)
                                                <option value="{{ $package_category->id }}">
                                                    {{ $package_category->name }}</option>
                                            @empty
                                                <option value="">No category found</option>
                                            @endforelse
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            Name of Package
                                        </label>
                                        <input type="text" name="name" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            Description
                                        </label>
                                        <textarea name="description" rows="5" class="form-control" placeholder="Enter description"></textarea>
                                    </div>
                                    <div class="form-group priceamount">
                                        <label class="form-label mb-1">
                                            Price <span class="text-red">* If this is a free plan, leave as 0</span>
                                        </label>
                                        <input type="number" name="price" class="form-control" value="0">
                                        <span class="curr">₦</span>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                    Validity
                                                </label>
                                                <select name="validity" class="form-select">
                                                    <option value="Days">Days</option>
                                                    <option value="Months">Months</option>
                                                    <option value="Years">Years</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                    Duration
                                                </label>
                                                <input type="number" name="duration" placeholder="e.g 30"
                                                    class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group border-top-xs pt-2">
                                            <label class="form-label mb-1">
                                                Package Features
                                            </label>
                                        </div>
                                        <div class="row">


                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Feeds
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="feed_feature" id="feed_feature">
                                                            <input type="checkbox" name="feed_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('feed_feature', 'feed_label', this)">
                                                            <label for="feed_feature" id="feed_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Network
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="network_feature"
                                                                id="network_feature">
                                                            <input type="checkbox" name="feed_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('network_feature', 'network_label', this)">
                                                            <label for="network_feature" id="network_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Profile
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="profile_feature"
                                                                id="profile_feature">
                                                            <input type="checkbox" name="profile_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('profile_feature', 'profile_label', this)">
                                                            <label for="profile_feature" id="profile_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Search
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="search_feature"
                                                                id="search_feature">
                                                            <input type="checkbox" name="search_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('search_feature', 'search_label', this)">
                                                            <label for="search_feature" id="search_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Chat
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="chat_feature"
                                                                id="chat_feature">
                                                            <input type="checkbox" name="chat_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('chat_feature', 'chat_label', this)">
                                                            <label for="chat_feature" id="chat_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Mentorship
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="mentorship_feature"
                                                                id="mentorship_feature">
                                                            <input type="checkbox" name="mentorship_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('mentorship_feature', 'mentorship_label', this)">
                                                            <label for="mentorship_feature" id="mentorship_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Forum
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="forum_feature"
                                                                id="forum_feature">
                                                            <input type="checkbox" name="forum_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('forum_feature', 'forum_label', this)">
                                                            <label for="forum_feature" id="forum_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Elearning
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="elearning_feature"
                                                                id="elearning_feature">
                                                            <input type="checkbox" name="elearning_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('elearning_feature', 'elearning_label', this)">
                                                            <label for="elearning_feature" id="elearning_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Announcement
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="announcement_feature"
                                                                id="announcement_feature">
                                                            <input type="checkbox" name="announcement_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('announcement_feature', 'announcement_label', this)">
                                                            <label for="announcement_feature" id="announcement_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Job Post
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="job_feature"
                                                                id="job_feature">
                                                            <input type="checkbox" name="job_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('job_feature', 'job_label', this)">
                                                            <label for="job_feature" id="job_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Donation
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="donation_feature"
                                                                id="donation_feature">
                                                            <input type="checkbox" name="donation_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('donation_feature', 'donation_label', this)">
                                                            <label for="donation_feature" id="donation_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Referral
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="referral_feature"
                                                                id="referral_feature">
                                                            <input type="checkbox" name="referral_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('referral_feature', 'referral_label', this)">
                                                            <label for="referral_feature" id="job_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Subscription
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="subscription_feature"
                                                                id="subscription_feature">
                                                            <input type="checkbox" name="subscription_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('subscription_feature', 'subscription_label', this)">
                                                            <label for="subscription_feature" id="subscription_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label class="form-label mb-1 mr-4">
                                                            Verification
                                                        </label>
                                                        <div class="form-check form-switch">
                                                            <input type="hidden" name="verify_feature"
                                                                id="verify_feature">
                                                            <input type="checkbox" name="verify_check"
                                                                class="form-check-input"
                                                                onclick="enableFeature('verify_feature', 'verify_label', this)">
                                                            <label for="verify_feature" id="verify_label"
                                                                class="form-check-label">Off</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        @if (Auth::user()->isSuperAdmin())
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Goal
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="goal_feature"
                                                                    id="goal_feature">
                                                                <input type="checkbox" name="goal_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('goal_feature', 'goal_label', this)">
                                                                <label for="goal_feature" id="goal_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Build Visibility
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="visibility_feature"
                                                                    id="visibility_feature">
                                                                <input type="checkbox" name="visibility_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('visibility_feature', 'visibility_label', this)">
                                                                <label for="visibility_feature" id="visibility_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Resource
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="resource_feature"
                                                                    id="resource_feature">
                                                                <input type="checkbox" name="resource_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('resource_feature', 'resource_label', this)">
                                                                <label for="resource_feature" id="resource_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Savings
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="saving_feature"
                                                                    id="saving_feature">
                                                                <input type="checkbox" name="saving_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('saving_feature', 'saving_label', this)">
                                                                <label for="saving_feature" id="saving_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Poll
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="poll_feature"
                                                                    id="poll_feature">
                                                                <input type="checkbox" name="poll_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('poll_feature', 'poll_label', this)">
                                                                <label for="poll_feature" id="poll_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between">
                                                            <label class="form-label mb-1 mr-4">
                                                                Investment
                                                            </label>
                                                            <div class="form-check form-switch">
                                                                <input type="hidden" name="investment_feature"
                                                                    id="investment_feature">
                                                                <input type="checkbox" name="investment_check"
                                                                    class="form-check-input"
                                                                    onclick="enableFeature('investment_feature', 'investment_label', this)">
                                                                <label for="investment_feature" id="investment_label"
                                                                    class="form-check-label">Off</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="form-group border-top-xs pt-2">
                                            <label class="form-label mb-3">
                                                Feature List
                                            </label><br>
                                            <label class="form-label mb-1">
                                                1. Feature
                                            </label>
                                            <input type="text" name="features[]" class="form-control">
                                        </div>
                                        <div id="add_field"></div>
                                        <div class="justify-content-end mb-3">
                                            <a type="button" id="more_fields" class="text-color"
                                                onclick="addFields()"><i class="mdi mdi-plus"></i> Add Feature</a>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Make this package active
                                            </label>
                                            <select name="is_active" class="form-select">
                                                <option value="1">Active</option>
                                                <option value="0">Not active</option>
                                            </select>
                                        </div>
                                    </div>
                                    <hr class="my-5">
                                    <div class="nav row align-items-center">
                                        <button type="submit" onclick="this.classList.toggle('button--loading')"
                                            class="button_load custom-btn">
                                            <span class="button__text">Create Package</span>
                                        </button>
                                    </div>
                                </div>
                                <input hidden name="created_by" value="super_admin" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var feature_no = 1;

    function addFields() {
        feature_no++;
        var objTo = document.getElementById('add_field')
        var divcreate = document.createElement("div");
        divcreate.innerHTML = '<div class="form-group"><label class="form-label mb-1">' + feature_no +
            '. Feature</label><input type="text" name="features[]" class="form-control"></div>';
        objTo.appendChild(divcreate);
        initMCEall();
    }

    function enableFeature(divId, label, event) {
        if (event.checked == true) {
            $("#" + divId).val(1);
            $("#" + label).html('On');
        } else {
            $("#" + divId).val(0);
            $("#" + label).html('Off');
        }
    }
</script>