@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_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">
            <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>
            @if ($paymentMade)
                <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>
            @else
               
                <span class="step2 locked">Step 4 Upload and Documents Details (Locked)</span>
                <span class="step3 locked">Step 5 Registration Payment Details (Locked)</span>
            @endif
        </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_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_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.png') }}" alt="Image 1" >___________________________
    @else
        <img class="red" src="{{ asset('assets/img/icon/green.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>
            @if ($paymentMade)
                <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>
            @else
               
                <span class="step2 locked">Step 4 Upload and Documents Details (Locked)</span>
                <span class="step3 locked">Step 5 Registration Payment Details (Locked)</span>
            @endif
        </p>
        </div>
</div>
 
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif


        
        <form action="{{ route('front.application_submit') }}"  enctype="multipart/form-data", method="POST">
            @csrf  
        <div class="Details">
            <h5>
                Step 4: Upload and Documents Details
                <i class="about-us-icon fas fa-info-circle"></i>
            </h5>  
        </div>

        <div class="frame-set show">
            <button type="button" class="btn-frameset btn btn-outline-primary" onclick="toggleddDetails()">
                <span>&#94;</span>
                <span>&nbsp;&nbsp;</span>Documents
            </button>
            <div class="row custom-frame-set" id="ddDetailsSection" style="display: none;">
                <div class="row">
                    <ul class="yui">
                        <li>Note :</li>
                        <li>1) Only images (.png, .jpeg, .jpg) for uploading your photograph.</li>
                        <li>2) For other documents only .pdf format will be allowed.</li>
                        <li>3) The Name of the upload file / document should be short and easy to Identify.</li>
                        <li>4) Each file must be smaller than 2 MB.</li>
                    </ul>      
                </div>

                <div class="row">
                    <div class="col-md-6 ap-form-group">
                        <label for="passportPhotoInput">Profile Photo *</label>
                        <input type="file" id="passportPhotoInput" name="images" class="form-control" required>
                    </div>
                    <div class="col-md-6 ap-form-group">
                        <label for="idProofInput">Aadhar Proof *</label>
                        <input type="file" id="idProofInput" name="id_proof" class="form-control" required>
                       
                    </div>
                </div>

                    <div class="row">
                        <div class="col-md-6 ap-form-group">
                            <label for="class10Input">Class 10th (Marksheet or Pass Certificate) *</label>
                            <input type="file" id="class10Input" name="tenth_certificate" va class="form-control">
                        </div>
                   


                    <div class="col-md-6 ap-form-group">
                        <label for="class12Input">Class 12th / Diploma (Marksheet or Pass Certificate)</label>
                        <input type="file" id="class12Input" name="twelth_certificate" class="form-control"required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 ap-form-group">
                        <label for="migrationCertInput">Degree (Marksheet or Pass Certificate)</label>
                        <input type="file" id="migrationCertInput" name="degree_certificate" class="form-control"required>
                    </div>
                    <div class="col-md-6 ap-form-group">
                        <label for="transferCertInput">Signature</label>
                        <input type="file" id="transferCertInput" name="signature" class="form-control"required>
                    </div>
                </div>

                 <div class="row">
                    <div class="col-md-6 ap-form-group">
                        <label for="migrationCertInput">Migration Certificate</label>
                        <input type="file" id="migrationCertInput" name="migration_certificate" class="form-control">
                    </div>
                

                    <div class="col-md-6 ap-form-group">
                        <label for="transferCertInput">Transfer Certificate</label>
                        <input type="file" id="transferCertInput"  name="transfter_certificate" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3 p-2">
            <div class="col-md-6">
                <a href="{{ route('front.payment_details')}}" class="btn btn-primary">Back</a>
            </div>
            <div class="col-md-6">
                <input type="hidden" name="step" value="4">
                <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>


<!-- <script>
    Dropzone.options.tenthCertificateDropzone = {
    url: '{{ route('admin.student-details.storeMedia') }}',
    maxFilesize: 4, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 4
    },
    success: function (file, response) {
      $('form').find('input[name="tenth_certificate"]').remove()
      $('form').append('<input type="hidden" name="tenth_certificate" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="tenth_certificate"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($studentDetail) && $studentDetail->tenth_certificate)
      var file = {!! json_encode($studentDetail->tenth_certificate) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="tenth_certificate" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.twelthCertificateDropzone = {
    url: '{{ route('admin.student-details.storeMedia') }}',
    maxFilesize: 3, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 3
    },
    success: function (file, response) {
      $('form').find('input[name="twelth_certificate"]').remove()
      $('form').append('<input type="hidden" name="twelth_certificate" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="twelth_certificate"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($studentDetail) && $studentDetail->twelth_certificate)
      var file = {!! json_encode($studentDetail->twelth_certificate) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="twelth_certificate" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.transfterCertificateDropzone = {
    url: '{{ route('admin.student-details.storeMedia') }}',
    maxFilesize: 4, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 4
    },
    success: function (file, response) {
      $('form').find('input[name="transfter_certificate"]').remove()
      $('form').append('<input type="hidden" name="transfter_certificate" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="transfter_certificate"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($studentDetail) && $studentDetail->transfter_certificate)
      var file = {!! json_encode($studentDetail->transfter_certificate) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="transfter_certificate" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.migrationCertificateDropzone = {
    url: '{{ route('admin.student-details.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="migration_certificate"]').remove()
      $('form').append('<input type="hidden" name="migration_certificate" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="migration_certificate"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($studentDetail) && $studentDetail->migration_certificate)
      var file = {!! json_encode($studentDetail->migration_certificate) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="migration_certificate" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script> -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get the alert element
        var alert = document.querySelector('.alert');

        // If the alert element exists, show it
        if (alert) {
            alert.style.display = 'block';
        }
    });
</script>