@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_tik.png')}}" alt="Image 1" >____________________________
                    <img class="red" src="{{asset('assets/img/icon/green.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> 
            
    </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_tik.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/lock.png') }}" alt="Image 1" >___________________________
    @endif

    @if($userdetail->step >= 3)
        <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 >= 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 3: Course and Payment Details</h5>
                <table class="table">
                    <tr>
                        <th>
                            Program Type
                        </th>
                        <th>
                            Course
                        </th>
                        <th>
                            Fee
                        </th>
                        <th>
                            
                        </th>
                    </tr>
                    <tr>
                        <td>
                        <input type="hidden" name="program_id" value="{{$userdetail->program->id }}"> {{ $userdetail->program->name }}
                        </td>
                        <td>
                        <input type="hidden" name="course_id" value="{{ $userdetail->course->id }}"> {{ $userdetail->course->name }}
                       </td>

                        <td>
                            <!-- Rs. {{ $userdetail->course->fee }} -->
                            <input type="hidden" name="fees	" value="{{ $userdetail->course->fee }}">Rs. {{ $userdetail->course->fee }}
                        </td>
                        <td>
                            <a href="{{route('front.payment')}}" class="btn btn-success">Pay Now</a>
                        </td>
                    </tr>
                    
                </table>
            </div>
            
            
            <div class="row mt-3 p-2">
             <div class="col-md-6">
            <a href="{{ route('front.addredd_qualification')}}" class="btn btn-primary">Back</a>
        </div>
        <div class="col-md-6">
            <input type="hidden" name="step" value="3">
            <button class="btn btn-success" type="submit" style="float: right;" >
                Save & Continue
            </button>
        </div>
       </div>
        </form>
    </div>
</div>

@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 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 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>