@extends('layout', ['page' => 'student'])
@section('title', 'Apply Course - ' . config('app.name'))

@section('content')
@if(isset($breadcrumb) && !empty($breadcrumb))
   @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
@endif

<section class="wrap">
    <div class="container">
        <div class="row">
            <div class="box-shadow">
                <div class="col-lg-12 col-md-12">
                    <div class="progress-container">
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" id="progressBar"></div>
                        </div>
                    </div>
                    <div class="candidates-resume-content">
                        <form
                            action="{{ route('user.course_apply', ['encodedId' => base64_encode($course->id)]) }}"
                            method="post"
                            class="resume-info m-4"
                            enctype="multipart/form-data"
                        >
                            @csrf
                            <h3 id="stepTitle">Step 1: Payment Details</h3>
                            <p>
                                <small>Please fill out the following fields to complete your payment.</small>
                            </p>

                            <!-- Step 1: Session Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-12 my-2" style="border-right: 0.5px solid gray;">
                                        <input type="hidden" id="payeeName" value="{{ $payeeName }}" />
                                        
                                        <div class="input-group mb-3">
                                            <input class="text-danger form-control boxss" id="copyupiaddress" style="text-align: center;" value="{{ $upiAddress }}" readonly disabled aria-describedby="basic-addon3">
                                            <span class="input-group-text btn btn-primary" id="basic-addon3" onclick="copyUpiAddress()">Copy</span>
                                        </div>

                                        <div class="d-flex justify-content-center my-4">
                                            <div class="text-center">
                                                <p><strong>Scan the QR Code or Copy the UPI ID to Make the Payment</strong></p>
                                                <p>After completing the payment, upload the transaction details and screenshot.</p>
                                                <div class="input_box text-center mt-3">
                                                    <a href="" class="upipaylink" onclick="copyUpiAddress()">
                                                        <img src="" style="width: 200px; height: 200px;" id="upiaddressqrcode" />
                                                    </a>
                                                    <br/>
                                                    <button class="downloadQrCode btn btn-primary btn-sm mt-2">Download QR Code</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-12 my-2 px-4">
                                        <div class="form-group mb-4">
                                            <label for="payment_amount"><strong>Course Fee (Amount to Pay)</strong></label>
                                            <input
                                                type="text"
                                                name="payment_amount"
                                                id='payment_amount'
                                                class="form-control boxss"
                                                readonly
                                                value="{{ $course->amount }}"
                                            >
                                            @error('payment_amount')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-4">
                                            <label for="payment_txn_id"><strong>Payment Transaction ID</strong></label>
                                            <input type="text" class="form-control boxss" name="payment_txn_id" placeholder="Enter Payment Reference Number" id="payment_txn_id" value="{{ old('payment_txn_id') }}" required>
                                            @error('payment_txn_id')
                                                <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group my-4">
                                            <label for="payment_screenshot"><strong>Upload Payment Receipt (Screenshot)</strong></label>
                                            <input
                                                type="file"
                                                name="payment_screenshot"
                                                id="payment_screenshot"
                                                class="form-control boxss"
                                                accept=".jpg,.png,.jpeg"
                                            >
                                            @error('payment_screenshot')
                                                <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr/>
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(0)">Next</button>
                                </div>
                            </div>

                            <!-- Step 2: Personal Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Name on Certificate</label>
                                            <input type="text" class="form-control boxss" name="name" value="{{ old('name', $student->name ?? auth()->user()?->name) }}" required>
                                            @error('name') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Father's Name</label>
                                            <input type="text" class="form-control boxss" name="father_name" value="{{ old('father_name', $student->father_name ?? '') }}" required>
                                            @error('father_name') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mother_name">Mother's Name</label>
                                            <input class="form-control boxss charector" type="text" name="mother_name" id="mother_name" placeholder="Mother's Name" value="{{ old('mother_name', $student->mother_name ?? '') }}" required>
                                            @error('mother_name')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                     <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select class="form-control boxss select2_single" name="gender" id="gender" required>
                                                <option value="">Select Gender</option>
                                                <option value="male" @if($student?->gender == 'male') selected @endif>Male</option>
                                                <option value="female" @if($student?->gender == 'female') selected @endif>Female</option>
                                                <option value="other" @if($student?->gender == 'other') selected @endif>Other</option>
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('gender')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="dob">Date of Birth</label>
                                            <input class="form-control boxss charector" type="date" name="dob" id="dob" placeholder="DOB" value="{{ old('dob', $student?->dob->format('Y-m-d') ?? '') }}" required>
                                            @error('dob')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mobile">Contact No.</label>
                                            <input class="form-control boxss charector"  type="number" name="mobile" id="mobile" placeholder="Contact No." value="{{ old('mobile', $student->mobile ?? auth()->user()?->mobile) }}" required>
                                            @error('mobile')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2"style="margin-top: 10px;">
                                        <div class="form-group">
                                            <label for="email">Email ID </label>
                                            <input class="form-control boxss"type="email" name="email" id="email" placeholder="Email" value="{{ old('email', $student->email ?? auth()->user()?->email) }}" required>
                                            @error('email')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr/>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary btn-style" onclick="prevStep()">Previous</button>
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(1)">Next</button>
                                </div>
                            </div>

                            <!-- Step 3: Address Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <select class="form-control boxss select2_single" id="state-dropdown" name="state" required>
                                                <option value="">-- Select State --</option>
                                                @foreach ($states as $state)
                                                <option value="{{$state->id}}" @if(!empty($student) && $student->state == $state->id) selected @endif>
                                                    {{$state->name}}
                                                </option>
                                                @endforeach
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('state')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <select class="form-control boxss select2_single" name="city" id="city-dropdown" required></select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('city')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="pincode">Pincode</label>
                                            <input class="form-control boxss number_only" type="number" name="pincode" id="pincode" placeholder="pincode" value="{{ old('pincode', $student->pincode ?? '') }}" required>
                                            @error('pincode')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <textarea class="form-control boxss charector"  name="address" id="address" placeholder="Address" required>{{ old('address', $student->address ?? '') }}</textarea>

                                            @error('address')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr/>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary btn-style" onclick="prevStep()">Previous</button>
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(2)">Next</button>
                                </div>
                            </div>

                             <!-- Step 4: Document Uploads -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="photo">Passport Photo</label>
                                            <input type="file" name="photo" id="photo" placeholder="photo" value="{{ old('photo', $student?->photo ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->photo) required @endif>

                                            @if($student?->photo)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->photo) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->photo) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('photo')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Signature</label>
                                            <input type="file" name="stud_sign" id="stud_sign" placeholder="signature" value="{{ old('stud_sign', $student?->stud_sign ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->stud_sign) required @endif>

                                            @if($student?->stud_sign)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->stud_sign) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->stud_sign) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('stud_sign')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>10th Marksheet</label>
                                            <input type="file" name="marksheet_10" id="marksheet_10" placeholder="marksheet_10" value="{{ old('marksheet_10', $student?->marksheet_10 ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->marksheet_10) required @endif>

                                            @if($student?->marksheet_10)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->marksheet_10) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->marksheet_10) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('marksheet_10')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>12th Marksheet (Optional)</label>
                                            <input type="file" name="marksheet_12" id="marksheet_12" placeholder="marksheet_12" value="{{ old('marksheet_12', $student?->marksheet_12 ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg">

                                            @if($student?->marksheet_12)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->marksheet_12) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->marksheet_12) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('marksheet_12')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="stud_caste">Caste Category</label>
                                            <select class="form-control boxss select2_single" name="stud_caste" id="stud_caste" required>
                                                <option value="">Select </option>
                                                <option value="general" @if($student?->stud_caste == 'general') selected @endif>General</option>
                                                <option value="sc" @if($student?->stud_caste == 'sc') selected @endif>SC</option>
                                                <option value="st" @if($student?->stud_caste == 'st') selected @endif>ST</option>
                                                <option value="obc" @if($student?->stud_caste == 'obc') selected @endif>OBC</option>
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('stud_caste')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2" id="upload_document">
                                        <div class="form-group">
                                             <label for="documents">Other Documents</label>
                                            <input type="file" class="form-control boxss"name="documents[]" id="documents" multiple placeholder="Upload Document" accept=".jpg,.png,.jpeg">
                                           @if(!empty($student?->documents) && !empty($student->documents))
                                                <div class="mt-2 d-flex">
                                                    @foreach($student->documents as $file)
                                                        <a href="{{ asset('storage/' . $file) }}" target="_blank" class="d-block text-primary">
                                                            <img src="{{ asset('storage/' . $file) }}" alt="Document" style="width: 30px; height: 30px; object-fit: cover; margin-right: 5px; border: 1px solid #ccc;">
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @endif

                                            @error('documents.*')
                                            <span class="text-danger mt-2">{{ $message }}</span><br>
                                            @enderror
                                            <small class="text-muted">Only image and multiple files are allowed (ex Aadhar, PAN Card, Certificates and etc.).</small>
                                        </div>
                                    </div>
                                </div>
                                <hr/>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary" onclick="prevStep()">Previous</button>
                                    <button type="submit" class="btn btn-primary my-4">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js')
<script>
    let currentStep = 0;
    const steps = document.querySelectorAll(".step");
     const progressBar = document.getElementById("progressBar");

    function showStep(index) {
        let state = document.getElementById("state-dropdown");
        steps.forEach((step, i) => {
            step.style.display = i === index ? "block" : "none";
            if (state.value) {

            }
        });
        progressBar.style.width = `${((index + 1) / steps.length) * 100}%`;

        // Update step title dynamically
        const stepTitles = [
            "Step 1: Payment Details",
            "Step 2: Personal Details",
            "Step 3: Address Details",
            "Step 4: Documents Details",
        ];
        document.getElementById('stepTitle').textContent = stepTitles[index];
    }

    function validateStep(stepIndex) {
        const currentFields = steps[stepIndex].querySelectorAll("input, select");
        let isValid = true;

        for (let i = 0; i < currentFields.length; i++) {
            const field = currentFields[i];
            const fieldName = field.getAttribute("name");
            const fieldValue = field.value.trim();

            // Check if the field is required and empty
            if (field.hasAttribute("required") && !fieldValue) {
                toastr.error(`${fieldName.replace("_", " ")} is required.`);
                field.focus();
                isValid = false;
                break;
            }

            if (!field.checkValidity()) {
                isValid = false;
                field.reportValidity();
                field.focus();
                break;
            }

            // Custom validations
            switch (fieldName) {
                case "dob":
                    if (fieldValue && isNaN(Date.parse(fieldValue))) {
                        toastr.error(`Invalid date format in ${fieldName.replace("_", " ")}`);
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;
                case "payment_txn_id":
                case "name":
                case "father_name":
                case "mother_name":
                    if (fieldValue.length < 3 || fieldValue.length > 255) {
                        toastr.error(`${fieldName.replace("_", " ")} must be between 3 and 255 characters`);
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;

                case "mobile":
                    if (!/^[6-9]\d{9}$/.test(fieldValue)) {
                        toastr.error("Mobile number must start with 6-9 and be 10 digits long.");
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;

                case "pincode":
                    if (!/^\d{6}$/.test(fieldValue)) {
                        toastr.error("Pincode must be exactly 6 digits.");
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;
            }
        }

        return isValid;
    }

    function nextStep(stepIndex) {
        if (validateStep(stepIndex)) {
            if (currentStep < steps.length - 1) {
                currentStep++;
                showStep(currentStep);
            }
        }
    }

    function prevStep() {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
        }
    }

    showStep(currentStep);
    $(document).ready(function () {
        function loadCities(idState, selectedCity = '') {
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ url('api/fetch-cities') }}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value.id + '"' + (value.id == selectedCity ? ' selected' : '') + '>' + value.name + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error here
                }
            });
        }

        // Trigger city loading on state change
        $('#state-dropdown').on('change', function () {
            let idState = this.value;
            loadCities(idState);
        });

        // if a state is already selected
        @if(!empty($student) && $student->state)
        loadCities("{{ $student->state }}", "{{ $student->city ?? '' }}");
        @endif
    });

   $(document).ready(function() {
      const tr = new Date().getTime();
      amount = document.getElementById('payment_amount').value;
      const payAddress = document.getElementById('copyupiaddress').value;
      const payeeName = document.getElementById('payeeName').value;

      const upiStr = `upi://pay?pa=${payAddress}&pn=${payeeName}&am=${amount}&tr=${tr}`;
      $('.upipaylink').attr('href', upiStr);
      const qrcodeelement = document.getElementById('upiaddressqrcode');
      qrcodeelement.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(upiStr);

      $('.downloadQrCode').click(function() {
            var a = $("<a>")
               .attr("href", "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(upiStr))
               .attr("download", "qrcode.png")
               .attr('target', '_blank')
               .appendTo("body");

            a[0].click();

            a.remove();
      });
   });

   // copy upi address
   function copyUpiAddress() {
      var copyText = document.getElementById("copyupiaddress");

      copyText.select();
      copyText.setSelectionRange(0, 99999);

      navigator.clipboard.writeText(copyText.value);

      toastr.info('Copied');
   }
</script>
@endpush