@include('./util/header')

<div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Open a New Group</h4>
                                        <p class="card-title-desc">Fill out this form to open a new group. Once submitted, your new group will immediately be ready to begin collecting Assessments.</p>
                                    </div>
                                    <div class="card-body">
                                        <form method="post" role="form" action="/create-group-request" name="editForm" id="editForm">
                                        @csrf
                                                <div class="row">
                                                    <div class="col-md-9">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="groupName">Name or Title of Group</label>
                                                                    <input type="text" class="form-control" name="groupName" id="groupName" placeholder="Enter group name" maxlength="100" required data-minlength="10" data-error="Minimum 10 characters" tabindex="1">
                                                                    <div class="invalid-feedback">
                                                                        Please enter a group name (minimum 10 characters)
                                                                    </div>
                                                                    <div class="valid-feedback">
                                                                        Looks good!
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="companyName">Organization Name Associated with Group</label>
                                                                    <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Enter company name" maxlength="50" required data-minlength="3" tabindex="2">
                                                                    <div class="invalid-feedback">
                                                                        Please enter the organization name (minimum 3 characters)
                                                                    </div>
                                                                    <div class="valid-feedback">
                                                                        Looks good!
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="accountNotes">Group Description</label>
                                                                <textarea class="form-control" name="accountNotes" id="accountNotes" placeholder="Enter group description" required data-minlength="30" data-error="Please enter at least 30 characters" tabindex="3"></textarea>
                                                                <div class="invalid-feedback">
                                                                    Please provide a group description (minimum 30 characters)
                                                                </div>
                                                                <div class="valid-feedback">
                                                                    Looks good!
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                    
                                                
                                                    <label class="form-label">View Results Instantly</label>
                                                    <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" name="resultsAccess" id="resultsAccess" value="true" tabindex="4">
                                                            <label class="form-check-label" for="resultsAccess">Yes, participants will view their results online </label>
                                                    </div>
                                                    <label class="form-label">Group Rate: which best describes your group?</label>
                                                    <select class="form-select" name="orderTypeID" required tabindex="5">
                                                        <option value="">Select group rate</option>
                                                        @foreach ($orderTypes as $orderType)
                                                            <option value="{{ $orderType->orderTypeID }}">
                                                                {{ $orderType->orderType }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    </br>
                                                    <div class="col-md-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="dateEnd">End Date</label>
                                                                <input type="date" class="form-control" name="dateEnd" id="dateEnd" required tabindex="6">
                                                                <div class="valid-feedback">
                                                                    Looks good!
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="underwear" class="control-label">Group Type 
                                                            <span class="btn-link" data-toggle="popover" data-trigger="hover" title="Group Types" data-content="There are two types of groups: Standard and 360.<br /><br />A Standard group consists of at least one of the following: ASI, OASI, ASSET, Aspirational ASI, or Aspirational ASI OASI.<br /><br />A 360 group contains a focal person and one or more evaluators." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></span>
                                                        </label> 
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="grpType" id="grpTypeASI" class="form-check-input" value="grpASI" tabindex="7" onClick="chgGrp('grpASI');"  required>
                                                                Standard (ASI, OASI, ASSET, or Aspirational ASI/OASI)
                                                            </label>
                                                        </div>
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="grpType" id="grpType360" class="form-check-input" value="grp360" tabindex="8" onClick="chgGrp('grp360');" >
                                                                360 (360 Focus Group or Aspirational 360 Group)
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div id="grpASI" style="display:none">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="panel panel-default">
                                                                <div class="panel-heading">Standard Assessment Type (ASI, OASI, ASSET, or Aspirational ASI/OASI)</div>
                                                                <div class="panel-body">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Expected number of participants
                                                                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment. If you do not wish to use a particular Assessment type, leave it blank." data-html="true" data-placement="auto">
                                                                                <span class='glyphicon glyphicon-info-sign'></span>
                                                                            </a>
                                                                            <div class="form-group">
                                                                                <input type="hidden" id="grpTypeStdExpTotal" class="form-control" data-minlength="1" data-error="Please put in at least one expected participant for this group">
                                                                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                                                                <div class="help-block with-errors text-left"></div>
                                                                            </div>
                                                                        </label>
                                                                    </div>

                                                                    <div class="row">
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="asiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="9">
                                                                        <div class="help text-center">ASI</div>
                                                                    </div>
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="oasiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="10">
                                                                        <div class="help text-center">OASI</div>
                                                                    </div>
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="aspAsiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="11">
                                                                        <div class="help text-center">A-ASI</div>
                                                                    </div>
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="aspOasiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="12">
                                                                        <div class="help text-center">A-OASI</div>
                                                                    </div>
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="assetPosUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="13">
                                                                        <div class="help text-center">ASSET Position</div>
                                                                    </div>
                                                                    <div class="col-sm-2">
                                                                        <input type="number" name="assetTaskUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="14">
                                                                        <div class="help text-center">ASSET Task</div>
                                                                    </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            <div id="grp360" style="display:none" >
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading" style="background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);padding:10px">
                                                                <div class="checkbox">
                                                                    <div class="form-group">
                                                                        <label>
                                                                            <input type="checkbox" class="grpType360Selector" name="grpType360Chkbx" id="grpType360Chkbx" value="1" tabindex="4" data-error="You have chosen a 360 group type; therefore, you must check this box and/or the Aspirational 360 Focus Group box to proceed."> 360 Focus Group
                                                                        </label>
                                                                        <div class="help-block with-errors"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="panel-body panel-body-13EF hidden" style="padding:10px;">
                                                                <div class="row">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Expected number of participants
                                                                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of evaluators for this Assessment." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                                                                        </label>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-3">
                                                                        <div class="form-group">
                                                                        <input type="text" name="asi360Users" class="form-control text-center" value="1" readonly>
                                                                        <div class="help text-center">ASI</div>
                                                                            <div class="valid-feedback">
                                                                                Required (Fixed at 1)
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="form-group">
                                                                            <input type="number" name="fp360Users" id="fp360Users" class="form-control text-center groupCount360 requiredFor360 expectedInput" tabindex="15" min="1">
                                                                            <div class="help text-center">Evaluators</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter number of evaluators (minimum 1)
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row" style="margin-top:20px;">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Focal Person Info
                                                                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                                                                        </label>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <select name="fpgender" tabindex="16" class="form-control requiredFor360">
                                                                                <option value="">Select Gender</option>
                                                                                <option value="F">Female</option>
                                                                                <option value="M">Male</option>
                                                                            </select>
                                                                            <div class="help text-left">Gender</div>
                                                                            <div class="invalid-feedback">
                                                                                Please select gender
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <input type="text" name="fpfirstName" id="fpfirstName" tabindex="17" maxlength="30" class="form-control requiredFor360" data-minlength="1">
                                                                            <div class="help text-left">First name</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter first name
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <input type="text" name="fplastName" id="fplastName" tabindex="18" maxlength="30" class="form-control requiredFor360" data-minlength="1">
                                                                            <div class="help text-left">Last name</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter last name
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row" style="margin-top:20px;">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Is the focal person familiar with the Achieving Styles Model / or has previously taken an Achieving Styles Inventory? Please provide relevant information.
                                                                            <textarea type="textarea" name="fpinfo" tabindex="19" class="form-control" id="fpinfo"></textarea>
                                                                            <div class="invalid-feedback">
                                                                                Please provide information about the focal person's familiarity with the Achieving Styles Model
                                                                            </div>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- The rest of the panel and form -->
                                                    <div class="col-sm-6">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading" style="background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);padding:10px">
                                                                <div class="checkbox">
                                                                    <div class="form-group">
                                                                        <label>
                                                                            <input type="checkbox" class="grpType360Selector" name="grpTypeAsp360Chkbx" id="grpTypeAsp360Chkbx" value="1" tabindex="4" data-error="You have chosen a 360 group type; therefore, you must check this box and/or the Aspirational 360 Focus Group box to proceed." checked> Aspirational 360 Focus Group 
                                                                        </label>
                                                                        <div class="help-block with-errors"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="panel-body panel-body-13AEF hidden" style="padding:10px;">
                                                                <div class="row">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Expected number of participants
                                                                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of aspirational evaluators for this Assessment. If you do not wish to use this particular Assessment, leave it blank or 0" data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                                                                        </label>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-3">
                                                                        <div class="form-group">
                                                                            <input type="text" name="aspFp360Users" class="form-control text-center" value="1" readonly>
                                                                        <div class="help text-center">A-ASI</div>
                                                                            <div class="valid-feedback">
                                                                                Required (Fixed at 1)
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="form-group">
                                                                            <input type="number" name="aspAsi360Users" id="aspAsi360Users" class="form-control text-center groupCount360 requiredForAsp360 expectedInput" tabindex="20" min="1">
                                                                            <div class="help text-center">A-Evaluators</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter number of aspirational evaluators (minimum 1)
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row" style="margin-top:20px;">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Aspirational Focal Person Info
                                                                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                                                                        </label>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <select name="aspfpgender" tabindex="21" class="form-control requiredForAsp360">
                                                                                <option value="">Select Gender</option>
                                                                                <option value="F">Female</option>
                                                                                <option value="M">Male</option>
                                                                            </select>
                                                                            <div class="help text-left">Gender</div>
                                                                            <div class="invalid-feedback">
                                                                                Please select gender
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <input type="text" name="aspfpfirstName" id="aspfpfirstName" tabindex="22" maxlength="30" class="form-control requiredForAsp360" data-minlength="1">
                                                                            <div class="help text-left">First name</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter first name
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-4">
                                                                        <div class="form-group">
                                                                            <input type="text" name="aspfplastName" id="aspfplastName" tabindex="23" maxlength="30" class="form-control requiredForAsp360" data-minlength="1">
                                                                            <div class="help text-left">Last name</div>
                                                                            <div class="invalid-feedback">
                                                                                Please enter last name
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row" style="margin-top:20px;">
                                                                    <div class="form-group">
                                                                        <label class="col-sm-12">Is the aspirational focal person familiar with the Achieving Styles Model / or has previously taken an Achieving Styles Inventory? Please provide relevant information.
                                                                            <textarea type="textarea" name="aspfpinfo" tabindex="24" class="form-control" id="aspfpinfo"></textarea>
                                                                            <div class="invalid-feedback">
                                                                                Please provide information about the aspirational focal person's familiarity with the Achieving Styles Model
                                                                            </div>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                

                                            <button class="btn btn-primary" type="submit" id="btnSubmit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">Create New Group</button>
                                        </form>
                                    </div>
                                </div>
                                <!-- end card -->
                            </div> <!-- end col -->

                            <style>
                            .hidden {
                                display: none !important;
                            }
                            
                            /* Dark Mode Styles for Create Group Page */
                            body[data-layout-mode="dark"] .form-label,
                            body[data-layout-mode="dark"] label,
                            body[data-layout-mode="dark"] .control-label {
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-control,
                            body[data-layout-mode="dark"] .form-select {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-control:focus,
                            body[data-layout-mode="dark"] .form-select:focus {
                                background-color: #2a3042 !important;
                                border-color: #6c9bff !important;
                                color: #e9ecef !important;
                                box-shadow: 0 0 0 0.2rem rgba(108, 155, 255, 0.25);
                            }
                            
                            body[data-layout-mode="dark"] .form-control::placeholder {
                                color: #6c757d !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-control[readonly] {
                                background-color: #323849 !important;
                                color: #adb5bd !important;
                            }
                            
                            /* Radio Buttons Dark Mode */
                            body[data-layout-mode="dark"] .form-check-input[type="radio"] {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-check-input[type="radio"]:checked {
                                background-color: #6c9bff !important;
                                border-color: #6c9bff !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-check-input[type="radio"]:focus {
                                border-color: #6c9bff !important;
                                box-shadow: 0 0 0 0.2rem rgba(108, 155, 255, 0.25);
                            }
                            
                            body[data-layout-mode="dark"] .radio label {
                                color: #e9ecef !important;
                            }
                            
                            /* Checkboxes Dark Mode */
                            body[data-layout-mode="dark"] .form-check-input[type="checkbox"] {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-check-input[type="checkbox"]:checked {
                                background-color: #6c9bff !important;
                                border-color: #6c9bff !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-check-input[type="checkbox"]:focus {
                                border-color: #6c9bff !important;
                                box-shadow: 0 0 0 0.2rem rgba(108, 155, 255, 0.25);
                            }
                            
                            body[data-layout-mode="dark"] .form-check-label,
                            body[data-layout-mode="dark"] .checkbox label {
                                color: #e9ecef !important;
                            }
                            
                            /* Panels Dark Mode */
                            body[data-layout-mode="dark"] .panel-default {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                            }
                            
                            body[data-layout-mode="dark"] .panel-heading {
                                background-color: #323849 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] .panel-heading[style*="background-image"],
                            body[data-layout-mode="dark"] .panel-heading[style*="linear-gradient"] {
                                background: #323849 !important;
                                background-image: none !important;
                            }
                            
                            body[data-layout-mode="dark"] .panel-body {
                                background-color: #2a3042 !important;
                                color: #e9ecef !important;
                            }
                            
                            /* Help Text Dark Mode */
                            body[data-layout-mode="dark"] .help,
                            body[data-layout-mode="dark"] .help-block,
                            body[data-layout-mode="dark"] .text-center.help {
                                color: #adb5bd !important;
                            }
                            
                            /* Form Group Dark Mode */
                            body[data-layout-mode="dark"] .form-group label {
                                color: #e9ecef !important;
                            }
                            
                            /* Invalid/Valid Feedback Dark Mode */
                            body[data-layout-mode="dark"] .invalid-feedback {
                                color: #ff6b6b !important;
                            }
                            
                            body[data-layout-mode="dark"] .valid-feedback {
                                color: #51cf66 !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-control.is-invalid {
                                border-color: #dc3545 !important;
                            }
                            
                            body[data-layout-mode="dark"] .form-control.is-valid {
                                border-color: #28a745 !important;
                            }
                            
                            /* Textarea Dark Mode */
                            body[data-layout-mode="dark"] textarea.form-control {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] textarea.form-control:focus {
                                background-color: #2a3042 !important;
                                border-color: #6c9bff !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] textarea.form-control::placeholder {
                                color: #6c757d !important;
                            }
                            
                            /* Select Dropdown Dark Mode */
                            body[data-layout-mode="dark"] select.form-control,
                            body[data-layout-mode="dark"] select.form-select {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] select.form-control option,
                            body[data-layout-mode="dark"] select.form-select option {
                                background-color: #2a3042 !important;
                                color: #e9ecef !important;
                            }
                            
                            /* Date Input Dark Mode */
                            body[data-layout-mode="dark"] input[type="date"] {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] input[type="date"]:focus {
                                background-color: #2a3042 !important;
                                border-color: #6c9bff !important;
                                color: #e9ecef !important;
                            }
                            
                            /* Number Input Dark Mode */
                            body[data-layout-mode="dark"] input[type="number"] {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] input[type="number"]:focus {
                                background-color: #2a3042 !important;
                                border-color: #6c9bff !important;
                                color: #e9ecef !important;
                            }
                            
                            /* Links in Forms Dark Mode */
                            body[data-layout-mode="dark"] .btn-link {
                                color: #6c9bff !important;
                            }
                            
                            body[data-layout-mode="dark"] .btn-link:hover {
                                color: #8bb3ff !important;
                            }
                            
                            /* Glyphicon Dark Mode */
                            body[data-layout-mode="dark"] .glyphicon {
                                color: #adb5bd !important;
                            }
                            
                            /* Popover Dark Mode */
                            body[data-layout-mode="dark"] .popover {
                                background-color: #2a3042 !important;
                                border-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] .popover-title {
                                background-color: #323849 !important;
                                border-bottom-color: #3a4052 !important;
                                color: #e9ecef !important;
                            }
                            
                            body[data-layout-mode="dark"] .popover-content {
                                color: #e9ecef !important;
                            }
                            
                            /* Override inline styles with light backgrounds */
                            body[data-layout-mode="dark"] [style*="background-image:linear-gradient"],
                            body[data-layout-mode="dark"] [style*="background-image: linear-gradient"] {
                                background: #323849 !important;
                                background-image: none !important;
                            }
                            
                            body[data-layout-mode="dark"] [style*="#f5f5f5"],
                            body[data-layout-mode="dark"] [style*="#e8e8e8"] {
                                background: #323849 !important;
                            }
                            </style>

                            <script type="text/javascript">

                            function chgGrp(groupType) {
                                var grpASIElement = document.getElementById('grpASI');
                                var grp360Element = document.getElementById('grp360');

                                if(groupType=="grpASI"){
                                    grpASIElement.style.display = 'block';
                                    grp360Element.style.display = 'none';
                                }else{
                                    grpASIElement.style.display = 'none';
                                    grp360Element.style.display = 'block';
                                }
                            }

                            function update360PanelVisibility() {
                                // Handle 360 Focus Group panel
                                if ($('#grpType360Chkbx').prop('checked')) {
                                    $(".panel-body-13EF").removeClass('hidden').show();
                                    // Clear any validation errors when showing
                                    $(".panel-body-13EF input, .panel-body-13EF textarea, .panel-body-13EF select").removeClass('is-invalid');
                                } else {
                                    $(".panel-body-13EF").addClass('hidden').hide();
                                    // Clear validation errors and values when hidden
                                    $(".panel-body-13EF input, .panel-body-13EF textarea, .panel-body-13EF select").val('').removeClass('is-invalid').removeAttr('data-validate');
                                }
                                
                                // Handle Aspirational 360 Focus Group panel
                                if ($('#grpTypeAsp360Chkbx').prop('checked')) {
                                    $(".panel-body-13AEF").removeClass('hidden').show();
                                    // Clear any validation errors when showing
                                    $(".panel-body-13AEF input, .panel-body-13AEF textarea, .panel-body-13AEF select").removeClass('is-invalid');
                                } else {
                                    $(".panel-body-13AEF").addClass('hidden').hide();
                                    // Clear validation errors and values when hidden
                                    $(".panel-body-13AEF input, .panel-body-13AEF textarea, .panel-body-13AEF select").val('').removeClass('is-invalid').removeAttr('data-validate');
                                }
                            }

                            // Form validation function
                            function validateForm() {
                                var isValid = true;
                                var selectedGroupType = $('input[name="grpType"]:checked').val();
                                
                                // Debug logging
                                console.log('Selected group type:', selectedGroupType);
                                console.log('360 checkbox checked:', $('#grpType360Chkbx').prop('checked'));
                                console.log('Asp360 checkbox checked:', $('#grpTypeAsp360Chkbx').prop('checked'));
                                
                                // Clear previous validation states
                                $('.form-control').removeClass('is-valid is-invalid');
                                $('.grpType360Selector').removeClass('is-valid is-invalid');
                                $('.invalid-feedback').remove(); // Remove all error messages
                                
                                // Mark readonly fields as valid (they have fixed values)
                                $('input[readonly]').addClass('is-valid');
                                
                                // Validate common required fields (always required regardless of group type)
                                $('#groupName, #companyName, #accountNotes, #dateEnd, select[name="orderTypeID"]').each(function() {
                                    var $field = $(this);
                                    var value = $field.val().trim();
                                    
                                    if (!value) {
                                        $field.addClass('is-invalid');
                                        isValid = false;
                                    } else {
                                        $field.addClass('is-valid');
                                    }
                                });
                                
                                // Validate minimum length for text fields
                                $('input[data-minlength], textarea[data-minlength]').each(function() {
                                    var $field = $(this);
                                    var value = $field.val().trim();
                                    var minLength = parseInt($field.attr('data-minlength'));
                                    
                                    if (value && value.length < minLength) {
                                        $field.addClass('is-invalid');
                                        isValid = false;
                                    }
                                });
                                
                                // Check if group type is selected
                                if (!selectedGroupType) {
                                    $('input[name="grpType"]').addClass('is-invalid');
                                    isValid = false;
                                } else {
                                    $('input[name="grpType"]').removeClass('is-invalid').addClass('is-valid');
                                }
                                
                                // Group type specific validation
                                if (selectedGroupType === 'grpASI') {
                                    // Validate Standard group fields
                                    var hasStandardAssessment = false;
                                    $('.groupCountStd').each(function() {
                                        var value = parseInt($(this).val()) || 0;
                                        if (value > 0) {
                                            hasStandardAssessment = true;
                                        }
                                    });
                                    
                                    if (!hasStandardAssessment) {
                                        $('.groupCountStd').addClass('is-invalid');
                                        isValid = false;
                                        // Show error message
                                        if (!$('.groupCountStd').next('.invalid-feedback').length) {
                                            $('.groupCountStd').first().after('<div class="invalid-feedback">Please enter at least one participant for Standard assessments</div>');
                                        }
                                    } else {
                                        $('.groupCountStd').addClass('is-valid');
                                        $('.groupCountStd').next('.invalid-feedback').remove();
                                    }
                                    
                                } else if (selectedGroupType === 'grp360') {
                                    // Validate 360 group fields
                                    var has360Assessment = false;
                                    var is360FocusChecked = $('#grpType360Chkbx').prop('checked');
                                    var isAsp360Checked = $('#grpTypeAsp360Chkbx').prop('checked');
                                    
                                    console.log('360 Focus checked:', is360FocusChecked);
                                    console.log('Asp360 checked:', isAsp360Checked);
                                    
                                    // Check if at least one 360 checkbox is selected
                                    if (is360FocusChecked || isAsp360Checked) {
                                        has360Assessment = true;
                                        // Clear any existing error messages when valid selection is made
                                        $('.grpType360Selector').removeClass('is-invalid').addClass('is-valid');
                                        $('.grpType360Selector').next('.invalid-feedback').remove();
                                        
                                        // Validate 360 Focus Group fields if selected
                                        if (is360FocusChecked) {
                                            console.log('Validating 360 Focus Group...');
                                            var fp360Users = parseInt($('#fp360Users').val()) || 0;
                                            console.log('360 Focus evaluators value:', fp360Users);
                                            
                                            if (fp360Users < 1) {
                                                $('#fp360Users').addClass('is-invalid');
                                                isValid = false;
                                                console.log('360 Focus evaluators validation failed');
                                            } else {
                                                $('#fp360Users').addClass('is-valid');
                                                console.log('360 Focus evaluators validation passed');
                                            }
                                            
                                            // Validate focal person info if evaluators > 0
                                            if (fp360Users > 0) {
                                                console.log('Validating 360 Focus focal person fields...');
                                                $('#fpfirstName, #fplastName, select[name="fpgender"], #fpinfo').each(function() {
                                                    var $field = $(this);
                                                    var value = $field.val().trim();
                                                    console.log('360 Focus field:', $field.attr('name'), 'Value:', value);
                                                    
                                                    if (!value) {
                                                        $field.addClass('is-invalid');
                                                        isValid = false;
                                                        console.log('360 Focus focal person field validation failed:', $field.attr('name'));
                                                    } else {
                                                        $field.addClass('is-valid');
                                                    }
                                                });
                                            }
                                        }
                                        
                                        // Validate Aspirational 360 Focus Group fields if selected
                                        if (isAsp360Checked) {
                                            console.log('Validating Aspirational 360 Focus Group...');
                                            var aspAsi360Users = parseInt($('#aspAsi360Users').val()) || 0;
                                            console.log('Asp360 evaluators value:', aspAsi360Users);
                                            
                                            if (aspAsi360Users < 1) {
                                                $('#aspAsi360Users').addClass('is-invalid');
                                                isValid = false;
                                                console.log('Asp360 evaluators validation failed');
                                            } else {
                                                $('#aspAsi360Users').addClass('is-valid');
                                                console.log('Asp360 evaluators validation passed');
                                            }
                                            
                                            // Validate aspirational focal person info if evaluators > 0
                                            if (aspAsi360Users > 0) {
                                                console.log('Validating Asp360 focal person fields...');
                                                $('#aspfpfirstName, #aspfplastName, select[name="aspfpgender"], #aspfpinfo').each(function() {
                                                    var $field = $(this);
                                                    var value = $field.val().trim();
                                                    console.log('Asp360 field:', $field.attr('name'), 'Value:', value);
                                                    
                                                    if (!value) {
                                                        $field.addClass('is-invalid');
                                                        isValid = false;
                                                        console.log('Asp360 focal person field validation failed:', $field.attr('name'));
                                                    } else {
                                                        $field.addClass('is-valid');
                                                    }
                                                });
                                            }
                                        }
                                    } else {
                                        // No 360 assessment selected
                                        $('.grpType360Selector').addClass('is-invalid');
                                        isValid = false;
                                        console.log('No 360 assessment type selected');
                                        // Show error message
                                        $('.grpType360Selector').next('.invalid-feedback').remove(); // Remove existing error messages
                                        $('.grpType360Selector').first().after('<div class="invalid-feedback">Please select at least one 360 assessment type</div>');
                                    }
                                }
                                
                                // Validate number fields
                                $('input[type="number"]').each(function() {
                                    var $field = $(this);
                                    var value = parseInt($field.val());
                                    var min = parseInt($field.attr('min'));
                                    
                                    if ($field.val() && (isNaN(value) || (min && value < min))) {
                                        $field.addClass('is-invalid');
                                        isValid = false;
                                    }
                                });
                                
                                return isValid;
                            }

                            $(document).ready(function(){
                                // Initialize panel visibility
                                update360PanelVisibility();

                                // Handle form submission
                                $('#editForm').on('submit', function (e) {
                                    if (!validateForm()) {
                                        e.preventDefault();
                                        alert('Please fill in all required fields correctly.');
                                        return false;
                                    }
                                    $("#btnSubmit").button('loading');
                                })
                                
                                // Real-time validation on input change
                                $('input, textarea, select').on('blur', function() {
                                    var $field = $(this);
                                    var value = $field.val().trim();
                                    
                                    // Mark readonly fields as valid
                                    if ($field.attr('readonly')) {
                                        $field.addClass('is-valid');
                                    } else if ($field.attr('required') && !value) {
                                        $field.addClass('is-invalid');
                                    } else if (value) {
                                        $field.addClass('is-valid');
                                    }
                                });
                                
                                // Initialize readonly fields as valid
                                $('input[readonly]').addClass('is-valid');
                                
                                // Handle group type selection
                                $("#grpTypeASI").click(function(){
                                    $(".panel-body-13EF").addClass('hidden').hide();
                                    $(".panel-body-13AEF").addClass('hidden').hide();

                                    $( ".groupCountStd" ).change(function() {
                                    var total = 0;
                                        $('input.groupCountStd').each(function() {
                                        var num = parseInt(this.value, 10);
                                        if (!isNaN(num)) {
                                            total += num;
                                        }
                                    });

                                    $("#grpTypeStdExpTotal").val(total);
                                    });
                                });

                                $("#grpType360").click(function(){
                                    update360PanelVisibility();
                                });

                                // Add direct event handlers for the checkboxes
                                $('#grpType360Chkbx, #grpTypeAsp360Chkbx').on('change', function() {
                                    update360PanelVisibility();
                                    // Clear error messages when checkboxes are changed
                                    $('.grpType360Selector').removeClass('is-invalid').addClass('is-valid');
                                    $('.grpType360Selector').next('.invalid-feedback').remove();
                                });

                                $( ".grpType360Selector" ).change(function() {
                                    // Update panel visibility first
                                    update360PanelVisibility();
                                });

                                // prevent the user from putting in negative values or 0 in the expected field
                                $( ".expectedInput" ).change(function() {
                                    var value = $( this ).val();

                                    if (value.indexOf('-') > -1)
                                    {
                                        $( this ).val("")
                                    }
                                    
                                    //prevent user from entering 0
                                    if (value == 0)
                                    {
                                        $( this ).val("")
                                    }		
                                });
                            });

                            // Date picker functionality removed to avoid dependency issues

                            </script>
 
@include('./util/footer')