@include('front.header')


    <div class="main_content_iner" id="step1">
        <div class="container-fluid plr_30 body_white_bg pt_30">
            <div class="menu">
               <a href="{{route('front.application')}}" class="menu">
                    <i class="back-arrow-icon">&larr;</i> Back
                </a>
           
               <div class="dn">
                    <a href="#" class="dn-menu">My Profile</a>
                        <div class="dn-content">
                            <div class="dn-row">
                                <span>Name: {{ $userdetail->user['name'] ?? '' }}</span>
                                <span class="mkoi">Email Id: {{ $userdetail->user['email'] ?? ''}}</span>
                            </div>
                            <div class="dn-row">
                                <span>Application no: TORIX{{ $userdetail->id ?? ''}}</span>
                                <span class="mkoi">Mobile: {{ $userdetail->user['mobile']}}</span>
                            </div>
                        </div>
                </div>

                <!-- Course Applied Dropdown -->
                <div class="dn">
                    <a href="#" class="dn-menu">Course Applied</a>
                    <div class="dn-content">
                        <div class="dn-row">
                            <span>Program Type:</span>
                            <span>Course</span>
                        </div>
                        <div class="dn-row">
                            <span>{{$userdetail->program->name}}</span>
                            <span class=""> {{$userdetail->course->name}} </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <hr class="sa">
            <div class="o">
                    <img class="red" src="{{asset('assets/img/icon/green_tik.png')}}" alt="Image 1" >___________________________
                    <img class="red" src="{{asset('assets/img/icon/green.png')}}" alt="Image 1" >____________________________
                    <img class="red" src="{{asset('assets/img/icon/lock.png')}}" alt="Image 1" >___________________________
                    <img class="redd" src="{{asset('assets/img/icon/lock.png')}}" alt="Image 1" >___________________________
                    <img class="redd" src="{{asset('assets/img/icon/lock.png')}}" alt="Image 1" >
                    
                    <p class="ss">
                        <a href="{{ route('front.application_1')}}">
                            Step 1 Program And Applicant Details 
                        </a>
                        <a href="{{ route('front.addredd_qualification')}}">
                            <span class="step">Step 2  Address and Academic Qualifications</span>
                        </a>
                        <a href="{{ route('front.payment_details')}}">
                            <span class="step1">Step 3 Application Payment Deatils </span>
                        </a>
                        <a href="{{ route('front.upload_documents')}}">
                            <span class="step2">Step 4  Upload and Documents Details</span>
                        </a>
                        <a href="{{ route('front.registration_details')}}">
                            <span class="step3">Step 5 Registration Payment Details</span>
                        </a>
                    </p>
            </div> -->
            <hr class="sa">
<div class="o">
    @if($userdetail->step >= 1)
        <img class="red" src="{{ asset('assets/img/icon/green_tik.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/lock.png') }}" alt="Image 1" >___________________________
    @endif

    @if($userdetail->step >= 2)
        <img class="red" src="{{ asset('assets/img/icon/green.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/green.png') }}" alt="Image 1" >___________________________
    @endif

    @if($userdetail->step >= 3)
        <img class="red" src="{{ asset('assets/img/icon/green_tik.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/lock.png') }}" alt="Image 1" >___________________________
    @endif

    @if($userdetail->step >= 4)
        <img class="red" src="{{ asset('assets/img/icon/green_tik.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/lock.png') }}" alt="Image 1" >___________________________
    @endif

    @if($userdetail->step >= 5)
        <img class="red" src="{{ asset('assets/img/icon/green_tik.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/lock.png') }}" alt="Image 1" >___________________________
    @endif

    <p class="ss">
        <a href="{{ route('front.application_1') }}">
            Step 1 Program And Applicant Details 
        </a>
        <a href="{{ route('front.addredd_qualification') }}">
            <span class="step">Step 2 Address and Academic Qualifications</span>
        </a>
        <a href="{{ route('front.payment_details') }}">
            <span class="step1">Step 3 Application Payment Details </span>
        </a>
        <a href="{{ route('front.upload_documents') }}">
            <span class="step2">Step 4 Upload and Documents Details</span>
        </a>
        <a href="{{ route('front.registration_details') }}">
            <span class="step3">Step 5 Registration Payment Details</span>
        </a>
    </p>
</div>





<form action="{{ route('front.application_submit') }}" method="POST">
    @csrf

<div class="Details">
    <h5>
        Step 2: Address and Academic Qualifications

        <i class="about-us-icon fas fa-info-circle"></i>
    </h5>
<div class="frame-set show">
    <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggleAddressDetails()">
        <span>&#94;</span>
        <span>&nbsp;&nbsp;</span>Premanent Address
    </button>

       <div class="row custom-frame-set" id="AddressDetailsSection" style="display: none;">
        <div class="row">
            <div class="col-md-4 ap-form-group disabled">
             <input type="text" class="form-control" name="address" placeholder="Enter Address*" value="{{ $userdetail->address}}">
         </div>

            <div class="col-md-4 ap-form-group disabled">
                <input type="text" name="country" class="form-control" placeholder="Enter Country" value="{{ $userdetail->country ?? ''}}">
                 <!--  <select id="programTypeDropdownn" class="form-control" name="country">
                    <option value="" selected disabled hidden>Coutry*</option>
                    <option value="Andoora">Andoora</option>
                    <option value="Algeria">Algeria</option>
                    <option value="Belize">Belize</option>
                    <option value="Belize">India</option>
                </select> -->
            </div>
             <div class="col-md-4 ap-form-group disabled">
                <input type="text" name="state" class="form-control" placeholder="Enter State" value="{{ $userdetail->state ?? ''}}">
                <!-- <select id="programTypeDropdown" class="form-control" name="state">
                    <option value="" selected disabled hidden>State*</option>
                    <option value="Andhra Pradhesh">Andhra Pradhesh</option>
                    <option value="Arunachal Pradhesh">Arunachal Pradhesh</option>
                    <option value="Assam">Assam</option>
                    <option value="Bihar">Bihar</option>
                    <option value="Karnataka">Karnataka</option>
                </select> -->
            </div>
        </div>

        <div class="row">
           



        <div class="col-md-4 ap-form-group disabled">
                <input type="text" name="district" class="form-control" placeholder="Enter District" value="{{ $userdetail->district ?? ''}}">
                 
            </div>
            <div class="col-md-4 ap-form-group disabled">
                <input type="text" name="city" class="form-control" placeholder="Enter City" value="{{ $userdetail->city ?? ''}}">
            </div>

             <div class="col-md-4 ap-form-group disabled">
                 <input type="text" name="pincode" class="form-control" placeholder="Enter Pincode" value="{{ $userdetail->pincode ?? ''}}">
            </div>
        </div> 
          <div class="row">
             
            
        </div>
    </div>
</div>


   
</div>


<div class="frame-set show">
    <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggleclassDetails()">
        <span>&#94;</span>
        <span>&nbsp;&nbsp;</span>Class 10th Details
    </button>

    <div class="row custom-frame-set" id="classDetailsSection" style="display: none;">
       
    
        <div class="row">
            <div class="col-md-4 ap-form-group">
               <select id="programTypeDropdown" class="form-control" name="tenth_exam_board">
                    <option value="" selected disabled hidden>Board*</option>
                    <option value="CBSE" @if($userdetail->tenth_exam_board == "CBSE") selected @endif>CBSE</option>
                    <option value="ICSE" @if($userdetail->tenth_exam_board == "ICSE") selected @endif>ICSE</option>
                    <option value="State Board" @if($userdetail->tenth_exam_board == "State Board") selected @endif>State Board</option>
                    <option value="Others" @if($userdetail->tenth_exam_board == "Others") selected @endif>Others</option>
                </select>
            </div>
                             
            <div class="col-md-4 ap-form-group disabled">
                <input type="text" id="middleNameInput" class="form-control" name="school_name" placeholder=" School Name*">
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 ap-form-group">
                <input type="text" name="tenth_passing_year" class="form-control" placeholder="Enter Year Of Passing" value="{{ $userdetail->tenth_passing_year ?? ''}}">

            </div>
            <div class="col-md-4 ap-form-group">    
                <select id="programTypeDropdownn" class="form-control" name="pursued_after">
                    <option value="" selected disabled hidden>What have you pursued after 10th? *</option>  
                    <option value="PUC/XII/EQUIVALENT Details" @if($userdetail->pursued_after == "PUC/XII/EQUIVALENT Details") selected @endif>PUC/XII/EQUIVALENT Details</option>
                    <option value="Diploma Details" @if($userdetail->pursued_after == "Diploma Details") selected @endif>Diploma Details</option>
                </select>
             </div>
             <div class="row">
            <div class="col-md-4 ap-form-group">
                <input type="text" name="tenth_evalution" class="form-control"
                 placeholder="Evaluation Type" value="{{ $userdetail->tenth_evalution}}">
            </div>
            <div class="col-md-4 ap-form-group">
                <input type="text" name="tenth_marks" class="form-control"
                 placeholder="X Percentage/Grade" value="{{ $userdetail->tenth_marks}}">
            </div>
</div>
        </div>
    </div>
        
        


    <div class="frame-set show">
        <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggleclassesDetails()">
            <span>&#94;</span>
            <span>&nbsp;&nbsp;</span>Class 12th Details
        </button>

        <div class="row custom-frame-set" id="classesDetailsSection" style="display: none;">    

            <div class="row">
                <div class="col-md-4 ap-form-group">
                    <select id="programTypeDropdown" class="form-control" name="puc_exam_board">
                        <option value="" selected disabled hidden>Board*</option>
                        <option @if($userdetail->puc_exam_board == "CBSE") selected @endif>CBSE</option>
                        <option @if($userdetail->puc_exam_board == "ICSE") selected @endif>ICSE</option>
                        <option @if($userdetail->puc_exam_board == "State Board") selected @endif>State Board</option>
                        <option @if($userdetail->puc_exam_board == "Others") selected @endif>Others</option>
                    </select>
                </div>
                              
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="college_name" placeholder="College Name*" value="{{ $userdetail->college_name ?? ''}}">
                </div>
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="puc_place" placeholder="Place*"
                     value="{{ $userdetail->puc_place}}">
                </div>
            </div>
            <div class="row">
            <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="puc_evalution"
                     placeholder="Evaluation Type" value="{{ $userdetail->puc_evalution}}">
                </div>
                              
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="puc_marks"
                     placeholder="X Percentage/Grade" value="{{ $userdetail->puc_marks}}">
                </div>
            </div>
                    
            <div class="row">
                <div class="col-md-4 ap-form-group">
                    <input type="text" name="puc_passing_year" class="form-control" 
                    placeholder="Enter Year Of Passing" value="{{ $userdetail->puc_passing_year ?? ''}}">

                    

                    <div class="ras">
                        <label for="resultStatus">What is the status of your result?</label>
                    
                        <input type="radio" name="what_is_the_status_of_your_result" value="Declared" @if($userdetail->what_is_the_status_of_your_result == "Declared") checked @endif>
                        <label for="resultDeclared">Declared</label>

                        <input type="radio" name="what_is_the_status_of_your_result" value="Awaited" @if($userdetail->what_is_the_status_of_your_result == "Awaited") checked @endif>
                        <label for="resultAwaited">Awaited</label>
                    </div>
                </div>
              </div>
        </div>
    </div>


    <div class="frame-set show">
        <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggledegreeDetails()">
            <span>&#94;</span>
            <span>&nbsp;&nbsp;</span>Degree Details
        </button>

        <div class="row custom-frame-set" id="degreeDetailsSection" style="display: none;">    

            <div class="row">
                <div class="col-md-4 ap-form-group">
                <input type="text" class="form-control" name="degree_college" 
                placeholder="Name of Institute"
                     value="{{ $userdetail->degree_college}}">
                </div>
                
                              
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="degree_place"
                     placeholder="Place*" value="{{ $userdetail->degree_place}}">
                </div>
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="degree" placeholder="Degree*"
                     value="{{ $userdetail->degree}}">
                </div>
            </div>
            <div class="row">
            <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="specialization"
                     placeholder="Area Of Specialization" value="{{ $userdetail->specialization}}">
                </div>
                              
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="degree_year"
                     placeholder="Year of Passing" value="{{ $userdetail->degree_year}}">
                </div>
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="degree_study"
                     placeholder="Mode Of Study" value="{{ $userdetail->degree_study}}">
                </div>
            </div>
            <div class="row">
            <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="university"
                     placeholder="University" value="{{ $userdetail->university}}">
                </div>
                              
                <div class="col-md-4 ap-form-group disabled">
                    <input type="text" class="form-control" name="degree_exam"
                     placeholder="Exam Type" value="{{ $userdetail->degree_exam}}">
                </div>
                <div class="col-md-4 ap-form-group">
                    <input type="text" name="degree_result" class="degree_result" 
                    placeholder="Result Status" value="{{ $userdetail->degree_result}}">
          </div>
                
            </div>
                    
            <div class="row">
    <table style="border:82px; margin-left:11px;text-align:center;">
        <tr>
            <th>Year 1</th>
            <th>Year 2</th>
            <th>Year 3</th>
            <th>Year 4</th>
            <th>Aggregate</th>
        </tr>
        <tr>
            <td><input type="number" name="year1" value="{{ $userdetail->year1 }}" contenteditable="true"></td>
            <td><input type="number" name="year2" value="{{ $userdetail->year2 }}" contenteditable="true"></td>
            <td><input type="number" name="year3" value="{{ $userdetail->year3 }}" contenteditable="true"></td>
            <td><input type="number" name="year4" value="{{ $userdetail->year4 }}" contenteditable="true"></td>
            <td><input type="number" name="year_aggregate" value="{{ $userdetail->year_aggregate}}" contenteditable="true"></td>
        </tr>
    </table>
</div>

<div class="row">
<div class="row">
    <table style="border:82px; margin-left:11px;text-align:center;">
        <tr>
            <th style="width:10px;">Semester</th>
            <th style="width:10px;">Semester 1</th>
            <th style="width:10px;">Semester 2</th>
            <th style="width:10px;">Semester 3</th>
            <th style="width:10px;">Semester 4</th>
            <!-- <th style="width:10px;">Semester 5</th>
            <th style="width:10px;">Semester 6</th>
            <th style="width:10px;">Semester 7</th>
            <th style="width:10px;">Semester 8</th>
            <th style="width:10px;">Aggregate</th> -->
        </tr>
        <tr>
            <td>1</td>
            <td><input type="number" name="sem1" value="{{ $userdetail->sem1 }}" contenteditable="true"></td>
            <td><input type="number" name="sem2" value="{{ $userdetail->sem2 }}" contenteditable="true"></td>
            <td><input type="number" name="sem3" value="{{ $userdetail->sem3 }}" contenteditable="true"></td>
            <td><input type="number" name="sem4" value="{{ $userdetail->sem4 }}" contenteditable="true"></td>
           
        </tr>
    </table>
</div>
<div class="row">
    <table style="border:82px; margin-left:11px;text-align:center;">
        <tr>
        <th >Semester 5</th>
        <th >Semester 6</th>
            <th >Semester 7</th>
            <th >Semester 8</th>
            <th >Aggregate</th>
        </tr>
        <tr>
            <td><input type="number" name="sem5" value="{{ $userdetail->sem5 }}" contenteditable="true"></td>
            <td><input type="number" name="sem6" value="{{ $userdetail->sem6 }}" contenteditable="true"></td>
            <td><input type="number" name="sem7" value="{{ $userdetail->sem7 }}" contenteditable="true"></td>
            <td><input type="number" name="sem8" value="{{ $userdetail->sem8 }}" contenteditable="true"></td>
            <td><input type="number" name="sem_aggregate" value="{{ $userdetail->sem_aggregate }}" contenteditable="true"></td>
        </tr>
     </table>
    </div>
  </div>
 </div>
</div>
       

                                                <div class="frame-set show">
                                                        <button type="button" class="btn-frameset btn btn-outline-primary" onclick="togglentranceDetails()">
                                                            <span>&#94;</span>
                                                            <span>&nbsp;&nbsp;</span>Entrance Test
                                                        </button>

                                                        <div class="row custom-frame-set" id="entranceDetailsSection" style="display: none;">
                                                        <div class="row">
                                                        <div class="col-md-4 ap-form-group disabled">
                                                            <div class="rass">
                                                                <label for="resultStatus">Have you appeared for any entrance exam?</label>
                                                                <br>
                                                                <input type="radio" id="resultDeclared" name="entrance_exam" value="Yes">
                                                                <label for="resultDeclared">Yes</label>

                                                                <input type="radio" id="resultAwaited" name="entrance_exam" value="No">
                                                                <label for="resultAwaited">No</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                <div class="col-md-4 ap-form-group disabled">
                                                    <div class="rasss">
                                                        <label for="resultStatus">Click to add the details of entrance exams you have appeared for. *</label>
                                                        <table class="tt" border="1">
                                                            <tr>
                                                                <td>Entrance Exam Name</td>
                                                                <td>Score/Rank Obtained</td>
                                                                <td>Test Date & Year</td>
                                                                <td></td>
                                                            </tr>
                                                            <tr>
                                                                <td><input type="text" name="exam_name" value="{{ $userdetail->exam_name }}" contenteditable="true"></td>
                                                                <td><input type="text" name="rank" value="{{ $userdetail->rank }}" contenteditable="true"></td>
                                                                <td><input type="text" name="exam_date" value="{{ $userdetail->exam_date }}" contenteditable="true"></td>
                                                                
                                                            </tr>
                                                            <tr>
                                                                <td><input type="text" name="exam_name1" contenteditable="true"></td>
                                                                <td><input type="text" name="score" contenteditable="true"></td>
                                                                <td><input type="text" name="test_date" contenteditable="true"></td>
                                                                
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                      </div>
                                        
                                        </div>
                                    </div>
                                </div>
                            </div>
                
            </div>
                        </div>
                    </div>
                </div>
            </div> 


<!--     <div class="frame-set show">
    <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggleWorkDetails()">
        <span>&#94;</span>
        <span>&nbsp;&nbsp;</span>Work Experience (If Any)
    </button>

    <div class="row custom-frame-set" id="workDetailsSection" style="display: none;">
        <div class="col-md-4 ap-form-group disabled">
            <div class="rass">
                <label for="workExperience">Do you have work experience?</label>
                <input type="radio" id="workExperienceYes" name="work_experience" value="Yes">
                <label for="workExperienceYes">Yes</label>
                <input type="radio" id="workExperienceNo" name="work_experience" value="No">
                <label for="workExperienceNo">No</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 ap-form-group disabled">
            <div class="rasss">
                <label for="workExperienceDetails">Click to add the details related to your work experience. *</label>
                <table class="ttt" border="1">
                    <tr class="ttt">
                        <td>Organization Name</td>
                        <td>Designation</td>
                        <td>From Date</td>
                        <td>To Date</td>
                        <td>Experience (in months)</td>
                        <td class="tr"></td>
                    </tr>
                    <tr>
                        <td contenteditable="true" name="organization_name" placeholder="Enter organization name"></td>
                        <td contenteditable="true" name="designation" placeholder="Enter designation"></td>
                        <td contenteditable="true" name="from_date" placeholder="Enter from date"></td>
                        <td contenteditable="true" name="to_date" placeholder="Enter to date"></td>
                        <td contenteditable="true" name="experience" placeholder="Enter experience"></td>
                        <td class="tr" contenteditable="true">
                            <span class="edit-icon" onclick="editFunction()">&#9998;</span>
                            <span class="delete-icon" onclick="deleteFunction()">&#128465;</span>
                        </td>
                    </tr>
                </table>
                <button class="ws">ADD DETAILS</button>
            </div>
        </div>
    </div>
</div> -->

    <div class="row mt-3 p-2">
        <div class="col-md-6">
            <a href="{{ route('front.application_1')}}" class="btn btn-primary">Back</a>
        </div>
        <div class="col-md-6">
            <input type="hidden" name="step" value="2">
            <button class="btn btn-success" type="submit" style="float: right;" >
                Save & Continue
            </button>
        </div>
    </div>

</form>


<!-- end step2 -->











@include('front.footer')
<script>
    function toggleFrameSet() {
      var customFrameSet = document.querySelector('.custom-frame-set');
      customFrameSet.style.display = (customFrameSet.style.display === 'none' || customFrameSet.style.display === '') ? 'block' : 'none';
    }
  </script>
  <script>
    function togglentranceDetails() {
        var entranceDetailsSection = document.getElementById('entranceDetailsSection');
        entranceDetailsSection.style.display = (entranceDetailsSection.style.display === 'none' || entranceDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>

  <script>
    function toggleApplicantDetails() {
        var applicantDetailsSection = document.getElementById('applicantDetailsSection');
        applicantDetailsSection.style.display = (applicantDetailsSection.style.display === 'none' || applicantDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
 <script>
    function toggleclassDetails() {
        var classDetailsSection = document.getElementById('classDetailsSection');
        classDetailsSection.style.display = (classDetailsSection.style.display === 'none' || classDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
 <script>
    function toggleclassesDetails() {
        var classesDetailsSection = document.getElementById('classesDetailsSection');
        classesDetailsSection.style.display = (classesDetailsSection.style.display === 'none' || classesDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggledegreeDetails() {
        var degreeDetailsSection = document.getElementById('degreeDetailsSection');
        degreeDetailsSection.style.display = (degreeDetailsSection.style.display === 'none' || degreeDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleFatherDetails() {
        var fatherDetailsSection = document.getElementById('fatherDetailsSection');
        fatherDetailsSection.style.display = (fatherDetailsSection.style.display === 'none' || fatherDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleFamilyDetails() {
        var familyDetailsSection = document.getElementById('familyDetailsSection');
        familyDetailsSection.style.display = (familyDetailsSection.style.display === 'none' || familyDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleAddressDetails() {
        var AddressDetailsSection = document.getElementById('AddressDetailsSection');
        AddressDetailsSection.style.display = (AddressDetailsSection.style.display === 'none' || AddressDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleentranceDetails() {
        var entranceDetailsSection = document.getElementById('entranceDetailsSection');
        entranceDetailsSection.style.display = (entranceDetailsSection.style.display === 'none' || entranceDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleppDetails() {
        var ppDetailsSection = document.getElementById('ppDetailsSection');
        ppDetailsSection.style.display = (ppDetailsSection.style.display === 'none' || ppDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleworkDetails() {
        var workDetailsSection = document.getElementById('workDetailsSection');
        workDetailsSection.style.display = (workDetailsSection.style.display === 'none' || workDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function togglettDetails() {
        var ttDetailsSection = document.getElementById('ttDetailsSection');
        ttDetailsSection.style.display = (ttDetailsSection.style.display === 'none' || ttDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function toggleddDetails() {
        var ddDetailsSection = document.getElementById('ddDetailsSection');
        ddDetailsSection.style.display = (ddDetailsSection.style.display === 'none' || ddDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>
<script>
    function togglepoDetails() {
        var poDetailsSection = document.getElementById('poDetailsSection');
        poDetailsSection.style.display = (poDetailsSection.style.display === 'none' || poDetailsSection.style.display === '') ? 'block' : 'none';
    }
</script>


<script>
  function showStep(stepId) {
    document.getElementById('step1').style.display = 'none';
    document.getElementById('step2').style.display = 'none';
    document.getElementById('step3').style.display = 'none';
     document.getElementById('step4').style.display = 'none';
      document.getElementById('step5').style.display = 'none';
   

    document.getElementById(stepId).style.display = 'block';
  }
</script>