@extends('backend.layouts.app')

@section('content')
    <style>
        /* Your existing CSS styles remain the same */
        .aiz-notify.alert.alert-danger button i,
        .aiz-notify.alert.alert-danger span[data-notify="message"] {
            color: white !important;
        }

        .icon-edit:before {
            color: white;
        }

        .total-val {
            overflow: hidden;
        }

        .plan-info {
            display: none;
        }

        .plan-info.active {
            display: block;
        }

        .step-count.ActiveStep {
            background-color: #d7282f;
            color: #fff;
        }

        .step-name.ActiveName {
            color: #d7282f;
            font-weight: 600;
            cursor: pointer;
        }

        .steps-box {
            display: flex;
            /* justify-content: space-between; */
            margin-bottom: 30px;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 15px;
        }

        .inner-step {
            text-align: center;
            cursor: pointer;
            /* flex: 1; */
            padding: 10px;
            position: relative;
        }

        .inner-step:not(:last-child):after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 50%;
            height: 2px;
            background: #ddd;
            z-index: 1;
        }

        .inner-step.completed:not(:last-child):after {
            background: #28a745;
        }

        .step-count {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ddd;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            /* margin: 0 auto 10px; */
            font-weight: bold;
            transition: all 0.3s ease;
            z-index: 2;
            position: relative;
        }

        .step-count.completed {
            background-color: #28a745;
            color: #fff;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }

        .nextBTN,
        .cancelBTN,
        .submitBTN {
            padding: 10px 30px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nextBTN {
            background: #d7282f;
            color: white;
        }

        .nextBTN:hover {
            background: #b92228;
        }

        .cancelBTN {
            background: #6c757d;
            color: white;
        }

        .cancelBTN:hover {
            background: #5a6268;
        }

        .submitBTN {
            background: #28a745;
            color: white;
        }

        .submitBTN:hover {
            background: #218838;
        }

        @media (max-width: 768px) {
            .steps-box {
                flex-wrap: wrap;
            }

            .inner-step {
                flex: 0 0 50%;
                margin-bottom: 15px;
            }

            .inner-step:nth-child(2n):not(:last-child):after {
                display: none;
            }
        }

        /* Hide the old form completely */
        .definePlan-content {
            display: none !important;
        }

        .section-tabs .tab-content>.tab-pane {
            display: none !important;
        }

        .section-tabs .tab-content>.tab-pane.active {
            display: block !important;
        }

        /* Error message styling */
        .error-message {
            color: #dc3545;
            font-size: 12px;
            margin-top: 5px;
            display: block;
        }

        .is-invalid {
            border-color: #dc3545 !important;
        }

        /* Custom styling for better layout */
        .info-box {
            background: #fff;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .info-box-right {
            position: sticky;
            top: 20px;
        }

        .main-heading {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            color: #333;
        }

        .heading {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }

        .helper-text {
            color: #666;
            margin-bottom: 20px;
        }

        .helper-text span {
            color: #d7282f;
            font-weight: 500;
        }

        .inner-step:after {
            display: none !important;
        }
    </style>

    <div class="feature-page">
        @if (isset($listPackages['id']))
            <h1 class="main-heading" style="margin-bottom:15px">Update a Plan</h1>
        @else
            <h1 class="main-heading" style="margin-bottom:15px">Create a New Plan</h1>
        @endif

        <!-- Add the form wrapper here -->
        <form id="saveFormsdata" method="POST" enctype="multipart/form-data">
            {{ csrf_field() }}
            <textarea name="json_data" id="storeJson" style="display: none;"></textarea>
            <textarea name="featureList" id="featureList" style="display: none;"></textarea>
            @if (isset($listPackages['id']))
                <input type="hidden" name="id" value="{{ $listPackages['id'] }}">
            @endif

            <!-- Multi-Step Wizard Container -->
            <div class="Create-plan">
                <!-- Step Indicators -->
                <div class="steps-box">
                    <div class="inner-step" data-step="0">
                        <div class="step-count ActiveStep">1</div>
                        <div class="step-name ActiveName">Plan Basics</div>
                    </div>
                    <div class="inner-step" data-step="1">
                        <div class="step-count @if (isset($listPackages['id'])) completed @endif">2</div>
                        <div class="step-name @if (isset($listPackages['id'])) ActiveName @endif">Messages</div>
                    </div>
                    <div class="inner-step" data-step="2">
                        <div class="step-count @if (isset($listPackages['id'])) completed @endif">3</div>
                        <div class="step-name @if (isset($listPackages['id'])) ActiveName @endif">Features</div>
                    </div>
                    <div class="inner-step" data-step="3">
                        <div class="step-count @if (isset($listPackages['id'])) completed @endif">4</div>
                        <div class="step-name @if (isset($listPackages['id'])) ActiveName @endif">Pricing & Billing</div>
                    </div>
                </div>

                <!-- STEP 1: Plan Basics - Always active and show data -->
                <div class="plan-info active" data-step="0">
                    <div class="row">
                        <!-- Left Column: Form Inputs -->
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <div class="info-box">
                                <div>
                                    <p class="heading">Plan Basics</p>
                                    <p class="helper-text">
                                        <span>Define the basic information</span> for your subscription plan
                                    </p>
                                </div>

                                <!-- Image Upload Section -->
                                <div class="upload-image mb-4">
                                    <div class="image-box">
                                        @if (isset($listPackages['icon']) and !empty($listPackages['icon']))
                                            <img id="previewImage" src="{{ url('/public/' . $listPackages['icon']) }}"
                                                alt=""
                                                style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                                        @else
                                            <img id="previewImage"
                                                src="{{ url('/public/assets/img/img/subscription-placeholder.svg') }}"
                                                alt=""
                                                style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                                        @endif
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="{{ $errors->has('icon') ? 'is-invalid' : '' }}"
                                            onclick="$('#myfileid').trigger('click'); return true;">
                                            <div class="upload-box d-flex align-items-center">
                                                <button type="button" class="upload-edit-btn mr-2">Choose File</button>
                                                <p class="mb-0">No File Chosen</p>
                                            </div>
                                            <p class="upload-helper mb-0"
                                                style="color: #666; font-size: 12px;font-style:italic">
                                                Please upload square image, size less than 100KB
                                            </p>
                                        </div>
                                    </div>
                                    <input type="file" name="icon" style="display:none;" id="myfileid"
                                        value="{{ $listPackages['icon'] ?? '' }}">
                                </div>

                                <!-- Form Fields -->
                                <div class="info-fields">
                                    <div class="fields mb-3">
                                        <p class="mb-1" style="font-weight: 500;">Define Plan Name <i
                                                class="icons icon-info" data-toggle="tooltip" data-placement="top"
                                                title="Maximum Limit of Characters 30"
                                                style="font-size: 12px;margin-left:1px;color:#9A9A9A"></i></p>
                                        <input type="text" name="name" id="plan_name"
                                            class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}"
                                            placeholder="Enter Plan Name" value="{{ $listPackages['name'] ?? '' }}"
                                            maxlength="31" />
                                        <span id="name_message" class="error-message"></span>
                                    </div>
                                    <div class="fields mb-3">
                                        <p class="mb-1" style="font-weight: 500;">Display Name <i class="icons icon-info"
                                                data-toggle="tooltip" data-placement="top"
                                                title="Maximum Limit of Characters 30"
                                                style="font-size: 12px;margin-left:1px;color:#9A9A9A"></i></p>
                                        <input type="text" id="display_name" name="display_name"
                                            class="form-control {{ $errors->has('display_name') ? ' is-invalid' : '' }}"
                                            placeholder="Enter Display Name"
                                            value="{{ $listPackages['display_name'] ?? '' }}" maxlength="31" />
                                        <span id="display_message" class="error-message"></span>
                                    </div>
                                    <div class="fields mb-4">
                                        <p class="mb-1" style="font-weight: 500;">Account Type</p>
                                        <select name="role"
                                            class="form-control aiz-selectpicker feature_type {{ $errors->has('role') ? ' is-invalid' : '' }}">
                                            <option value="seller"
                                                {{ isset($listPackages['role']) && $listPackages['role'] == 'seller' ? 'selected' : '' }}>
                                                Seller</option>
                                            <option value="buyer"
                                                {{ isset($listPackages['role']) && $listPackages['role'] == 'buyer' ? 'selected' : '' }}>
                                                Buyer</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Navigation Buttons -->
                                <div class="btn-group">
                                    <button type="button" class="cancelBTN">Cancel</button>
                                    <button type="button" class="nextBTN step-1-next">Next</button>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column: Preview Sidebar -->
                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="info-box-right">
                                <div class="row col-spacing">
                                    <!-- Plan Preview Card -->
                                    <div class="col-12">
                                        <div class="info-box">
                                            <div class="text-center">
                                                <p class="heading mb-2" id="sidebarPlanName3" style="text-align: left">
                                                    {{ $listPackages['name'] ?? 'Plan Name' }}</p>
                                                <p class="mb-3" id="sidebarPlanDesc3"
                                                    style="color: #666; font-size: 14px;text-align: left">
                                                    {{ $listPackages['description'] ?? 'Plan description will appear here' }}
                                                </p>
                                                <div class="plan-duration-box mb-3">
                                                    <p class="duration mb-0" id="sidebarDuration3"
                                                        style="color: #666; font-size: 14px;text-align: left">
                                                        Plan Duration: {{ $listPackages['billing_cycle'] ?? '0' }} Days
                                                    </p>
                                                </div>
                                                {{-- <div>
                                                    <button class="subscribeBTN" style="background: #d7282f; color: white; border: none; padding: 8px 30px; border-radius: 4px; font-weight: 500;">
                                                        Subscribe
                                                    </button>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Plan Summary Card -->
                                    <div class="col-12">
                                        <div class="info-box">
                                            <div>
                                                <p class="heading mb-3">Plan Summary</p>
                                            </div>
                                            <div class="summary-info-box">
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">No. of Features</p>
                                                    <p class="summary-list mb-0" id="sidebarFeatures2">0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Sub Totals</p>
                                                    <p class="summary-list mb-0" id="sidebarSubtotal2">$0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Subscription</p>
                                                    <p class="summary-list mb-0" id="sidebarSubscription2">0 Days</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-3">
                                                    <p class="summary-list mb-0" style="color: #666;">Discount</p>
                                                    <p class="summary-list mb-0" id="sidebarDiscount2">$0</p>
                                                </div>
                                                <hr class="w-100 mb-3">
                                                <div class="summary-data d-flex justify-content-between">
                                                    <p class="summary-list price mb-0"
                                                        style="font-weight: 600; color: #333;">Total</p>
                                                    <p class="summary-list price mb-0" id="sidebarTotal2"
                                                        style="font-weight: 600; color: #333;">$0</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 2: Messages -->
                <div class="plan-info" data-step="1">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <div class="info-box">
                                <div>
                                    <p class="heading">Message</p>
                                    <p class="helper-text">
                                        <span>Configure verification messages</span> for different business types
                                    </p>
                                </div>
                                @php
                                    $businessType = [
                                        'Manufacturer',
                                        'Agents and Representative',
                                        'Distributors',
                                        'Retailer',
                                        'Wholesaler',
                                        'Reseller',
                                        'Others',
                                    ];

                                    $badgeData = [];
                                    if (isset($listPackages['badge']) and !empty($listPackages['badge'])) {
                                        $badgeData = json_decode($listPackages['badge'], true);
                                    }
                                @endphp
                                <div class="business-type-boxes">
                                    <div class="row">
                                        @foreach ($businessType as $type)
                                            @php
                                                $verifiedMessage = '';
                                                $unverifiedMessage = '';

                                                // Find existing data for this business type
                                                if (!empty($badgeData)) {
                                                    foreach ($badgeData as $badge) {
                                                        if (
                                                            isset($badge['business_type']) &&
                                                            $badge['business_type'] == $type
                                                        ) {
                                                            $verifiedMessage = $badge['verified_message'] ?? '';
                                                            $unverifiedMessage = $badge['unverified_message'] ?? '';
                                                            break;
                                                        }
                                                    }
                                                }
                                            @endphp
                                            <div class="col-sm-12 col-md-6 lg-6 mb-3">
                                                <div class="business-type p-3 border rounded">
                                                    <div class="business-name mb-2" style="font-weight: 600;">
                                                        {{ $type }}</div>
                                                    <input type="hidden" name="badge[business_type][]"
                                                        value="{{ $type }}">
                                                    <div class="business-description mt-2">
                                                        <label class="mb-1"
                                                            style="font-size: 14px; color: #666;">Verified Message</label>
                                                        <textarea rows="2" name="badge[verified_message][]" cols="10" rows="3"
                                                            class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" style="font-size: 14px;">{{ $verifiedMessage }}</textarea>
                                                    </div>
                                                    <div class="business-description mt-2">
                                                        <label class="mb-1"
                                                            style="font-size: 14px; color: #666;">Un-verified
                                                            Message</label>
                                                        <textarea rows="2" name="badge[unverified_message][]" cols="10" rows="3"
                                                            class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" style="font-size: 14px;">{{ $unverifiedMessage }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="cancelBTN step-back">Back</button>
                                    <button type="button" class="nextBTN step-2-next">Next</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="info-box-right">
                                <div class="row col-spacing">
                                    <div class="col-12">
                                        <div class="info-box">
                                            <div class="text-center">
                                                <p class="heading mb-2" id="sidebarPlanName3" style="text-align: left">
                                                    {{ $listPackages['name'] ?? 'Plan Name' }}</p>
                                                <p class="mb-3" id="sidebarPlanDesc3"
                                                    style="color: #666; font-size: 14px;text-align: left">
                                                    {{ $listPackages['description'] ?? 'Plan description will appear here' }}
                                                </p>
                                                <div class="plan-duration-box mb-3">
                                                    <p class="duration mb-0" id="sidebarDuration3"
                                                        style="color: #666; font-size: 14px;text-align: left">
                                                        Plan Duration: {{ $listPackages['billing_cycle'] ?? '0' }} Days
                                                    </p>
                                                </div>
                                                {{-- <div>
                                                    <button class="subscribeBTN" style="background: #d7282f; color: white; border: none; padding: 8px 30px; border-radius: 4px; font-weight: 500;">
                                                        Subscribe
                                                    </button>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="info-box">
                                            <div>
                                                <p class="heading mb-3">Plan Summary</p>
                                            </div>
                                            <div class="summary-info-box">
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">No. of Features</p>
                                                    <p class="summary-list mb-0" id="sidebarFeatures2">0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Sub Totals</p>
                                                    <p class="summary-list mb-0" id="sidebarSubtotal2">$0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Subscription</p>
                                                    <p class="summary-list mb-0" id="sidebarSubscription2">0 Days</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-3">
                                                    <p class="summary-list mb-0" style="color: #666;">Discount</p>
                                                    <p class="summary-list mb-0" id="sidebarDiscount2">$0</p>
                                                </div>
                                                <hr class="w-100 mb-3">
                                                <div class="summary-data d-flex justify-content-between">
                                                    <p class="summary-list price mb-0"
                                                        style="font-weight: 600; color: #333;">Total</p>
                                                    <p class="summary-list price mb-0" id="sidebarTotal2"
                                                        style="font-weight: 600; color: #333;">$0</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 3: Features -->
                <div class="plan-info" data-step="2">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <div class="info-box">
                                <div>
                                    <p class="heading">Select Features</p>
                                    <p class="helper-text">
                                        <span>Choose the features</span> to include in this plan
                                    </p>
                                </div>
                                <div class="feature-table pt-0">
                                    <div class="admin-table" id="tableData1">
                                        <!-- Features table will be loaded here via AJAX -->
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="cancelBTN step-back">Back</button>
                                    <button type="button" class="nextBTN step-3-next">Next</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="info-box-right">
                                <div class="row col-spacing">
                                    <div class="col-12 ">
                                        <div class="info-box">
                                            <div class="text-center">
                                                <p class="heading mb-2" id="sidebarPlanName3" style="text-align: left">
                                                    {{ $listPackages['name'] ?? 'Plan Name' }}</p>
                                                <p class="mb-3" id="sidebarPlanDesc3"
                                                    style="color: #666; font-size: 14px;text-align: left">
                                                    {{ $listPackages['description'] ?? 'Plan description will appear here' }}
                                                </p>
                                                <div class="plan-duration-box mb-3">
                                                    <p class="duration mb-0" id="sidebarDuration3"
                                                        style="color: #666; font-size: 14px;text-align: left">
                                                        Plan Duration: {{ $listPackages['billing_cycle'] ?? '0' }} Days
                                                    </p>
                                                </div>
                                                {{-- <div>
                                                    <button class="subscribeBTN" style="background: #d7282f; color: white; border: none; padding: 8px 30px; border-radius: 4px; font-weight: 500;">
                                                        Subscribe
                                                    </button>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 ">
                                        <div class="info-box">
                                            <div>
                                                <p class="heading mb-3">Plan Summary</p>
                                            </div>
                                            <div class="summary-info-box">
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">No. of Features</p>
                                                    <p class="summary-list mb-0" id="sidebarFeatures3">0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Sub Totals</p>
                                                    <p class="summary-list mb-0" id="sidebarSubtotal3">$0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Subscription</p>
                                                    <p class="summary-list mb-0" id="sidebarSubscription3">0 Days</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-3">
                                                    <p class="summary-list mb-0" style="color: #666;">Discount</p>
                                                    <p class="summary-list mb-0" id="sidebarDiscount3">$0</p>
                                                </div>
                                                <hr class="w-100 mb-3">
                                                <div class="summary-data d-flex justify-content-between">
                                                    <p class="summary-list price mb-0"
                                                        style="font-weight: 600; color: #333;">Total</p>
                                                    <p class="summary-list price mb-0" id="sidebarTotal3"
                                                        style="font-weight: 600; color: #333;">$0</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 4: Pricing & Billing -->
                <div class="plan-info" data-step="3">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <div class="info-box">
                                <div>
                                    <p class="heading">Pricing & Billing</p>
                                    <p class="helper-text">
                                        <span>Configure pricing, billing, and other details</span> for your plan
                                    </p>
                                </div>
                                <div class="feature-table">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Billing
                                                    Cycle(Frequency)</p>
                                                <div>
                                                    <input id="billing_cycle" name="billing_cycle" type="number"
                                                        min="1" max="31" placeholder="Minimum 30 days"
                                                        class="form-control {{ $errors->has('billing_cycle') ? 'is-invalid' : '' }}"
                                                        value="{{ $listPackages['billing_cycle'] ?? '' }}"
                                                        oninput="this.value = this.value > 31 ? 31 : this.value; if(this.value.length > 2) this.value = this.value.slice(0, 2);" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Days Remaining</p>
                                                <div class="dropdown bootstrap-select form-control subs-input">
                                                    <button type="button" class="btn dropdown-toggle btn-light"
                                                        data-toggle="dropdown" role="combobox" aria-expanded="false">
                                                        <div class="filter-option">
                                                            <div class="filter-option-inner">
                                                                <div class="filter-option-inner-inner">Day(s)</div>
                                                            </div>
                                                        </div>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a href="#" class="dropdown-item">Day(s)</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Payment Gateway</p>
                                                <div class="dropdown bootstrap-select form-control subs-input">
                                                    <select name="gateway_name"
                                                        class="form-control aiz-selectpicker {{ $errors->has('gateway_name') ? ' is-invalid' : '' }}">
                                                        <option value="Power Cozmo"> Power Cozmo</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Discount Type</p>
                                                <select name="discount_type"
                                                    class="form-control aiz-selectpicker {{ $errors->has('discount_type') ? ' is-invalid' : '' }} marginbottom-billling">
                                                    <option value=""> Select</option>
                                                    <option value="percentage"
                                                        {{ isset($listPackages['discount_type']) && $listPackages['discount_type'] == 'percentage' ? 'selected' : '' }}>
                                                        Percentage</option>
                                                    <option value="fixed"
                                                        {{ isset($listPackages['discount_type']) && $listPackages['discount_type'] == 'fixed' ? 'selected' : '' }}>
                                                        Fixed</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Total Discount</p>
                                                <input type="number" id="discount_value" name="discount_value"
                                                    class="form-control {{ $errors->has('discount_value') ? ' is-invalid' : '' }}"
                                                    placeholder="" value="{{ $listPackages['discount_value'] ?? '0' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Sorting <i
                                                        class="icons icon-info" data-toggle="tooltip"
                                                        data-placement="top"
                                                        title="You can only write the number 0-99. According to list of plans. This will be reflect in frontend only."
                                                        style="font-size: 12px;color:#9A9A9A"></i>
                                                </p>
                                                <input type="number" name="sorting"
                                                    class="form-control {{ $errors->has('sorting') ? ' is-invalid' : '' }}"
                                                    placeholder="Enter Sorting Value"
                                                    value="{{ $listPackages['sorting'] ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Pick the Color<i
                                                        class="icons icon-info" data-toggle="tooltip"
                                                        data-placement="top" title="Default Color is black."
                                                        style="font-size: 12px;margin-left:4px;color:#9A9A9A"></i></p>
                                                <input type="color" placeholder="{{ translate('#9999') }}"
                                                    name="color" class="form-control"
                                                    value="{{ $listPackages['color'] ?? '#000000' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <div>
                                                <p class="field-label mb-1" style="font-weight: 500;">Plan Description</p>
                                                <div>
                                                    <textarea name="description" id="description" cols="10" rows="4" placeholder="Enter Plan Description"
                                                        class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}">{{ $listPackages['description'] ?? '' }}</textarea>
                                                    <span id="description_message" class="error-message"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <label class="mb-1" style="font-weight: 500;">Status</label>
                                            <div class="dropdown bootstrap-select form-control subs-input">
                                                <select name="status" class="form-control aiz-selectpicker">
                                                    <option value="enable"
                                                        {{ isset($listPackages['status']) && $listPackages['status'] == 'enable' ? 'selected' : '' }}>
                                                        Enable</option>
                                                    <option value="disable"
                                                        {{ isset($listPackages['status']) && $listPackages['status'] == 'disable' ? 'selected' : '' }}>
                                                        Disable</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="cancelBTN step-back">Back</button>
                                    <button id="formData" type="button" class="nextBTN submitBTN">
                                        @if (isset($listPackages['id']))
                                            Update Plan
                                        @else
                                            Create Plan
                                        @endif
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="info-box-right">
                                <div class="row col-spacing">
                                    <div class="col-12 ">
                                        <div class="info-box">
                                            <div class="text-center">
                                                <p class="heading mb-2" id="sidebarPlanName3" style="text-align: left">
                                                    {{ $listPackages['name'] ?? 'Plan Name' }}</p>
                                                <p class="mb-3" id="sidebarPlanDesc3"
                                                    style="color: #666; font-size: 14px;text-align: left">
                                                    {{ $listPackages['description'] ?? 'Plan description will appear here' }}
                                                </p>
                                                <div class="plan-duration-box mb-3">
                                                    <p class="duration mb-0" id="sidebarDuration3"
                                                        style="color: #666; font-size: 14px;text-align: left">
                                                        Plan Duration: {{ $listPackages['billing_cycle'] ?? '0' }} Days
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 ">
                                        <div class="info-box">
                                            <div>
                                                <p class="heading mb-3">Plan Summary</p>
                                            </div>
                                            <div class="summary-info-box">
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">No. of Features</p>
                                                    <p class="summary-list mb-0" id="sidebarFeatures4">0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Sub Totals</p>
                                                    <p class="summary-list mb-0" id="sidebarSubtotal4">$0</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-2">
                                                    <p class="summary-list mb-0" style="color: #666;">Subscription</p>
                                                    <p class="summary-list mb-0" id="sidebarSubscription4">0 Days</p>
                                                </div>
                                                <div class="summary-data d-flex justify-content-between mb-3">
                                                    <p class="summary-list mb-0" style="color: #666;">Discount</p>
                                                    <p class="summary-list mb-0" id="sidebarDiscount4">$0</p>
                                                </div>
                                                <hr class="w-100 mb-3">
                                                <div class="summary-data d-flex justify-content-between">
                                                    <p class="summary-list price mb-0"
                                                        style="font-weight: 600; color: #333;">Total</p>
                                                    <p class="summary-list price mb-0" id="sidebarTotal4"
                                                        style="font-weight: 600; color: #333;">$0</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Multi-Step Wizard -->
        </form>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        // Set up CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            const discountType = document.querySelector('select[name="discount_type"]');
            const discountValue = document.getElementById('discount_value');

            function handleDiscountType() {
                if (discountType.value === 'percentage') {
                    discountValue.setAttribute('max', '100');
                    if (discountValue.value > 100) {
                        discountValue.value = 100;
                    }
                } else {
                    discountValue.removeAttribute('max');
                }
            }

            // On change
            discountType.addEventListener('change', handleDiscountType);

            // On typing (extra safety)
            discountValue.addEventListener('input', function() {
                if (discountType.value === 'percentage') {
                    if (this.value > 100) this.value = 100;
                    if (this.value < 0) this.value = 0;
                }
            });

            // Run once on page load (update case)
            handleDiscountType();
        });

        document.addEventListener("DOMContentLoaded", function() {
            // ====================== STEP WIZARD LOGIC ======================
            const steps = document.querySelectorAll(".plan-info");
            const stepTabs = document.querySelectorAll(".inner-step");

            // Get plan ID if exists
            var planId = "{{ isset($listPackages['id']) ? $listPackages['id'] : '' }}";
            var isEditMode = planId !== '';

            let currentStep = 0;

            // Function to show step
            function showStep(index) {
                // Hide all steps
                steps.forEach(step => {
                    step.classList.remove("active");
                });

                // Show target step
                if (steps[index]) {
                    steps[index].classList.add("active");
                    currentStep = index;
                    updateStepIndicators(index);

                    // Update sidebar for this step
                    updateSidebarForStep(index);
                }
            }

            // Function to update step indicators
            function updateStepIndicators(step) {
                stepTabs.forEach((tab, i) => {
                    const stepCount = tab.querySelector(".step-count");
                    const stepName = tab.querySelector(".step-name");

                    // Reset all
                    stepCount.classList.remove("ActiveStep", "completed");
                    stepName.classList.remove("ActiveName");

                    if (i === step) {
                        // Current step
                        stepCount.classList.add("ActiveStep");
                        stepName.classList.add("ActiveName");
                    } else if (i < step || (isEditMode && i > 0)) {
                        // Completed steps (for create mode)
                        // OR all steps except first in edit mode
                        stepCount.classList.add("completed");
                    }
                });
            }

            // Initialize the wizard
            updateStepIndicators(0);
            showStep(0);

            // Next button handlers
            document.querySelectorAll('.step-1-next').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (validateStep1()) {
                        showStep(1);
                    }
                });
            });

            document.querySelectorAll('.step-2-next').forEach(btn => {
                btn.addEventListener('click', function() {
                    showStep(2);
                });
            });

            document.querySelectorAll('.step-3-next').forEach(btn => {
                btn.addEventListener('click', function() {
                    showStep(3);
                });
            });

            // Back button handlers
            document.querySelectorAll('.step-back').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (currentStep > 0) {
                        showStep(currentStep - 1);
                    }
                });
            });

            // Cancel button (first step only)
            document.querySelectorAll('.cancelBTN:not(.step-back)').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (confirm('Are you sure you want to cancel?')) {
                        // Redirect or reset form
                        window.location.href = "{{ url('/admin/subscriptions') }}";
                    }
                });
            });

            // Step indicator click
            stepTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const step = parseInt(this.getAttribute('data-step'));
                    // In edit mode, allow jumping to any step
                    if (isEditMode || step <= currentStep) {
                        showStep(step);
                    } else {
                        // In create mode, only allow next steps if previous are valid
                        let canNavigate = true;
                        for (let i = 0; i < step; i++) {
                            if (i === 0 && !validateStep1()) {
                                canNavigate = false;
                                showStep(0);
                                break;
                            }
                        }
                        if (canNavigate) {
                            showStep(step);
                        }
                    }
                });
            });

            // Validation for Step 1
            function validateStep1() {
                let isValid = true;
                const planName = document.getElementById('plan_name');
                const displayName = document.getElementById('display_name');

                // Clear previous errors
                planName.classList.remove('is-invalid');
                displayName.classList.remove('is-invalid');
                $('#name_message').text('').removeClass('text-danger');
                $('#display_message').text('').removeClass('text-danger');

                // Validate plan name
                if (!planName.value.trim()) {
                    planName.classList.add('is-invalid');
                    $('#name_message').text('Plan name is required').addClass('text-danger');
                    isValid = false;
                }

                // Validate display name
                if (!displayName.value.trim()) {
                    displayName.classList.add('is-invalid');
                    $('#display_message').text('Display name is required').addClass('text-danger');
                    isValid = false;
                }

                return isValid;
            }

            // ====================== SIDEBAR UPDATE FUNCTIONS ======================
            function updateSidebarForStep(step) {
                // Get values from form
                const planName = document.getElementById('plan_name').value ||
                    '{{ $listPackages['name'] ?? 'Plan Name' }}';
                const planDesc = document.getElementById('description').value ||
                    '{{ $listPackages['description'] ?? 'Plan description will appear here' }}';
                const duration = document.getElementById('billing_cycle').value ||
                    '{{ $listPackages['billing_cycle'] ?? '0' }}';

                // Update all sidebars for this step
                for (let i = 1; i <= 4; i++) {
                    const nameElement = document.getElementById(`sidebarPlanName${i}`);
                    const descElement = document.getElementById(`sidebarPlanDesc${i}`);
                    const durationElement = document.getElementById(`sidebarDuration${i}`);

                    if (nameElement) nameElement.textContent = planName;
                    if (descElement) descElement.textContent = planDesc;
                    if (durationElement) durationElement.textContent = `Plan Duration: ${duration} Days`;
                }

                // Update summary data
                updateSummaryData();
            }

            function updateSummaryData() {
                // Get values
                const discountType = $("select[name='discount_type']").val();
                const discountValue = parseFloat($("input[name='discount_value']").val()) || 0;
                const duration = $("#billing_cycle").val() || '{{ $listPackages['billing_cycle'] ?? '0' }}';

                // Calculate feature count and subtotal from loaded features
                let featureCount = 0;
                let subTotal = 0;

                // Check if features table is loaded
                if ($('#tableData1 tbody#getfields').length) {
                    $('tbody#getfields tr').each(function() {
                        if ($(this).find('input.permissionSet').is(':checked')) {
                            featureCount++;
                            const price = parseFloat($(this).find('input[name="price[]"]').val()) || 0;
                            subTotal += price;
                        }
                    });
                }

                // Calculate discount
                let discount = 0;
                let total = subTotal;

                if (discountType === "fixed") {
                    discount = discountValue;
                    total = Math.max(0, subTotal - discount);
                } else if (discountType === "percentage") {
                    discount = (discountValue / 100) * subTotal;
                    total = Math.max(0, subTotal - discount);
                }

                // Update all sidebars
                for (let i = 1; i <= 4; i++) {
                    const featuresEl = document.getElementById(`sidebarFeatures${i}`);
                    const subtotalEl = document.getElementById(`sidebarSubtotal${i}`);
                    const subscriptionEl = document.getElementById(`sidebarSubscription${i}`);
                    const discountEl = document.getElementById(`sidebarDiscount${i}`);
                    const totalEl = document.getElementById(`sidebarTotal${i}`);

                    if (featuresEl) featuresEl.textContent = featureCount;
                    if (subtotalEl) subtotalEl.textContent = `$${subTotal.toFixed(2)}`;
                    if (subscriptionEl) subscriptionEl.textContent = `${duration} Days`;
                    if (discountEl) discountEl.textContent = `$${discount.toFixed(2)}`;
                    if (totalEl) totalEl.textContent = `$${total.toFixed(2)}`;
                }
            }

            // Bind input events for real-time updates
            $('#plan_name, #description, #billing_cycle').on('input', function() {
                updateSidebarForStep(currentStep);
            });

            $("select[name='discount_type'], input[name='discount_value']").on('change input', function() {
                updateSummaryData();
            });

            // ====================== LOAD FEATURES FOR UPDATE ======================
            // Load features based on account type
            $('select.feature_type').change(function(e) {
                e.preventDefault();
                var data = $(this).val();
                var id = "{{ Request::segment(3) }}";
                if (id == "") {
                    id = "";
                }
                var url = "{{ url('/admin/featuretablelist') }}";
                listdata(data, id, url);
            });

            // Initial load of features
            $(document).ready(function() {
                var data = $('select.feature_type').val();
                var id = "{{ Request::segment(3) }}";
                var url;

                if (id == "") {
                    url = "{{ url('/admin/featuretablelist') }}";
                } else {
                    url = "{{ url('/admin/editfeaturetablelist') }}";
                }

                listdata(data, id, url);

                // Initialize sidebar with existing data
                updateSidebarForStep(0);
                updateSummaryData();

                // If editing, update submit button text
                if (isEditMode) {
                    $('#formData').text('Update Plan');
                }
            });

            // List data function
            function listdata(data, id, url) {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: {
                        'type': data,
                        'id': id
                    },
                    success: function(data) {
                        $('#tableData1').html(data);
                        updateSummaryData();

                        // Re-bind events for newly loaded checkboxes
                        $(document).off("click", "input:checkbox").on("click", "input:checkbox",
                            function() {
                                if ($(this).is(':checked')) {
                                    $(this).val('yes');
                                    var type = $(this).closest("tr").find('input[name="value[]"]')
                                        .is(':checkbox');
                                    if (type == true) {
                                        $(this).closest("tr").find('input[name="value[]"]').prop(
                                            'checked', true);
                                        var checkClass = $(this).closest("tr").find(
                                            'input[name="value[]"]').hasClass('free_16');
                                        if (checkClass) {
                                            $(this).closest("tr").find('td span.toggle-lbl').text(
                                                'Controlled');
                                        } else {
                                            $(this).closest("tr").find('td span.toggle-lbl').text(
                                                'Allowed');
                                        }
                                        $(this).closest("tr").find('input[name="value[]"]').val(
                                            'yes');
                                    }
                                } else {
                                    $(this).val('no');
                                    var type = $(this).closest("tr").find('input[name="value[]"]')
                                        .is(':checkbox');
                                    if (type == true) {
                                        var checkClass = $(this).closest("tr").find(
                                            'input[name="value[]"]').hasClass('free_16');
                                        if (checkClass) {
                                            $(this).closest("tr").find('td span.toggle-lbl').text(
                                                'Free');
                                        } else {
                                            $(this).closest("tr").find('td span.toggle-lbl').text(
                                                'Not Allowed');
                                        }
                                        $(this).closest("tr").find('input[name="value[]"]').prop(
                                            'checked', false);
                                        $(this).closest("tr").find('input[name="value[]"]').val(
                                            'no');
                                    }
                                }
                                updateSummaryData();
                            });
                    }
                });
            }

            // ====================== FORM SUBMISSION ======================
            $(document).on('click', '#formData', function(e) {
                e.preventDefault();

                // Validate all steps
                if (!validateStep1()) {
                    showStep(0);
                    return;
                }

                // Check if at least one feature is selected
                const selectedFeatures = $('.permissionSet:checked').length;
                if (selectedFeatures === 0) {
                    alert('Please select at least one feature');
                    showStep(2);
                    return;
                }

                // Prepare JSON data
                var SortedArray = [];
                var featureListArray = [];

                $('tbody#getfields tr').each(function(key, data) {
                    var getPrice = $(this).find('input[name="price[]"]').val();
                    var getValue = $(this).find('input[name="value[]"]').val();
                    var getIds = $(this).find('input[name="featurelist_id[]"]').val();
                    var permission = $(this).find('input[name="permission[]"]').val();
                    var price = 0;
                    if ($(this).find('input[name="price[]"]').val()) {
                        price = $(this).find('input[name="price[]"]').val();
                    }
                    var second_value = '';
                    if ($(this).find('input[name="2nd_value[]"]').val()) {
                        second_value = $(this).find('input[name="2nd_value[]"]').val();
                    }
                    if (getPrice == "") {
                        getPrice = 0;
                    }

                    SortedArray.push({
                        'permission': permission,
                        'value': getValue,
                        'featurelist_id': getIds,
                        '2nd_value': second_value,
                        'price': price,
                    });
                });

                $('tbody#getfields tr').each(function(key, data) {
                    featureListArray.push({
                        'feature_list': $(this).find('input[name="featurelist_id[]"]')
                            .val(),
                        'sub_total': $('#sidebarSubtotal1').text().replace('$', ''),
                        'days': $("#billing_cycle").val(),
                        'discount': $('#sidebarDiscount1').text().replace('$', ''),
                        'feature': $('#sidebarFeatures1').text(),
                        'totaldata': $('#sidebarTotal1').text().replace('$', ''),
                        'discount_value': $("#discount_value").val(),
                        'discount_type': $("select[name='discount_type']").val(),
                    });
                });

                // Store in hidden fields
                $('#storeJson').val(JSON.stringify(SortedArray));
                $('#featureList').val(JSON.stringify(featureListArray));

                // Get the form element
                var formElement = document.getElementById('saveFormsdata');

                if (!formElement) {
                    console.error('Form element #saveFormsdata not found!');
                    AIZ.plugins.notify('danger', 'Form not found. Please refresh the page.');
                    return;
                }

                // Debug: Check if form has CSRF token
                var csrfToken = $('input[name="_token"]', formElement).val();
                console.log('CSRF Token found:', csrfToken ? 'Yes' : 'No');

                var formData = new FormData(formElement);

                // Make sure JSON data is included
                formData.set('json_data', JSON.stringify(SortedArray));
                formData.set('featureList', JSON.stringify(featureListArray));

                // Determine the correct URL for create/update
                var submitUrl;
                if (isEditMode) {
                    submitUrl = "{{ url('/admin/saveFeatureTool') }}";
                } else {
                    submitUrl = "{{ url('/admin/saveFeatureTool') }}";
                }

                // For debugging: log FormData contents
                console.log('Submitting FormData to:', submitUrl);

                // Show loading indicator
                var submitBtn = $('#formData');
                var originalText = submitBtn.text();
                submitBtn.prop('disabled', true).text(isEditMode ? 'Updating...' : 'Creating...');

                // Submit via AJAX
                $.ajax({
                    url: submitUrl,
                    type: 'POST',
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    beforeSend: function(xhr) {
                        // Add CSRF token to header
                        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                    },
                    success: function(data) {
                        console.log('Response:', data);
                        submitBtn.prop('disabled', false).text(originalText);

                        if (data.success == false) {
                            if (data.errors) {
                                $.each(data.errors, function(index, value) {
                                    AIZ.plugins.notify('danger', value);
                                });
                            } else if (data.message) {
                                AIZ.plugins.notify('danger', data.message);
                            }
                        } else {
                            AIZ.plugins.notify('success', data.message);
                            setTimeout(function() {
                                if (data.link) {
                                    location.href = data.link;
                                } else {
                                    location.href =
                                        "{{ url('/admin/subscriptions') }}";
                                }
                            }, 2000);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error Status:', xhr.status);
                        console.error('AJAX Error Response:', xhr.responseText);
                        submitBtn.prop('disabled', false).text(originalText);

                        // Handle CSRF token mismatch (419 error in Laravel)
                        if (xhr.status === 419) {
                            AIZ.plugins.notify('danger',
                                'Session expired. Please refresh the page and try again.');
                            // Refresh page after 3 seconds
                            setTimeout(function() {
                                location.reload();
                            }, 3000);
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            AIZ.plugins.notify('danger', xhr.responseJSON.message);
                        } else if (xhr.responseText) {
                            // Try to parse the error response
                            try {
                                var errorResponse = JSON.parse(xhr.responseText);
                                if (errorResponse.message) {
                                    AIZ.plugins.notify('danger', errorResponse.message);
                                } else if (errorResponse.error) {
                                    AIZ.plugins.notify('danger', errorResponse.error);
                                }
                            } catch (e) {
                                AIZ.plugins.notify('danger', 'An error occurred: ' + error);
                            }
                        } else {
                            AIZ.plugins.notify('danger', 'An error occurred: ' + error);
                        }
                    }
                });
            });

            // Existing validation functions
            $(document).on('input', '#description', function() {
                var maxLength = 150;
                var length = $(this).val().length;
                var remainingCharacters = maxLength - length;

                if (remainingCharacters >= 0) {
                    $('#description_message').text('Remaining characters: ' + remainingCharacters);
                    $('#description_message').removeClass('text-danger');
                } else {
                    $('#description_message').text('Max Characters Limit Reached, Required 150 only');
                    $('#description_message').addClass('text-danger');
                }

                if (remainingCharacters === 0) {
                    $('#description_message').text('');
                }
            });

            $(document).on('input', '#plan_name', function() {
                var maxLength = 30;
                var length = $(this).val().length;
                var remainingCharacters = maxLength - length;

                if (remainingCharacters >= 0) {
                    $('#name_message').removeClass('text-danger');
                } else {
                    $('#name_message').text('Max Characters Limit Reached, Required 30 only');
                    $('#name_message').addClass('text-danger');
                }

                if (remainingCharacters === 0) {
                    $('#name_message').text('');
                }
            });

            $(document).on('input', '#display_name', function() {
                var maxLength = 30;
                var length = $(this).val().length;
                var remainingCharacters = maxLength - length;

                if (remainingCharacters >= 0) {
                    $('#display_message').removeClass('text-danger');
                } else {
                    $('#display_message').text('Max Characters Limit Reached, Required 30 only');
                    $('#display_message').addClass('text-danger');
                }

                if (remainingCharacters === 0) {
                    $('#display_message').text('');
                }
            });

            // File upload preview
            $(document).on('change', '#myfileid', function() {
                readURL(this);
            });

            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewImage').attr('src', e.target.result);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        });
    </script>
@endsection