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

@section('content')

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

@php
    $regNo = request()->has('id') ? base64_decode(request()->get('id')) : '';
@endphp

<section class="wrap">
    <div class="container">
        <div class="row">
            <div class="box-shadow">
                <div class="col-lg-12 col-md-12">
                    <div class="candidates-resume-content p-4">
                        <h3>Certificate Verification</h3>

                        {{-- Form Section --}}
                        <div id="verification-form-div">
                            <form id="verificationForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="enroll_id">Reg No.</label>
                                            <input type="text" class="form-control boxss" name="enroll_id" id="enroll_id" value="{{ old('enroll_id', $regNo ) }}" required>
                                            <small class="form-text text-muted d-block">
                                                Please enter your Reg No. (e.g. <strong>SSE-RJ-001</strong>).
                                            </small>
                                            <span class="text-danger mt-2" id="error-msg"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 d-flex justify-content-end">
                                    <button type="submit" class="default-btn">Submit</button>
                                </div>
                            </form>
                        </div>

                        {{-- Student Details Section --}}
                        <div id="student-details" style="display: none;">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td height="33" width="220px">Course</td>
                                            <td valign="top" colspan="3" id="student-course"></td>
                                            <td align="center" valign="top" rowspan="5">
                                                <img id="student-photo" border="0" src="{{ asset('assets/images/default-photo.png') }}" alt="No Photo" class="img-thumbnail" style="width: 150px;">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="33" width="220px">Session</td>
                                            <td valign="top" colspan="3" id="student-session"></td>
                                        </tr>
                                        <tr>
                                            <td height="33" width="220px">Reg. No.</td>
                                            <td valign="top" colspan="3" id="student-reg"></td>
                                        </tr>
                                        <tr>
                                            <td height="33" width="220px">Name</td>
                                            <td valign="top" colspan="3"  id="student-name"></td>
                                        </tr>
                                        <tr>
                                            <td height="33" width="220px">Father Name</td>
                                            <td valign="top" colspan="3"  id="student-father"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" align="center"><img border="0" src="{{ asset('assets/images/verify-pic.png') }}" alt="Verified" width="80px"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" align="center">
                                                <div id="view-result-link" style="cursor:hand;">click here to View Result</div>
                                            </td>
                                        </tr>
                                        <tr id="result-row" style="display: none; overflow: hidden;">
                                            <td colspan="3" align="center">
                                                <strong id="passOrFail"></strong>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-12 d-flex justify-content-end">
                                <button class="default-btn" id="reset-form">Verify Another</button>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function() {
    $('#verificationForm').submit(function(event) {
        event.preventDefault();
        let regNo = $('#enroll_id').val();
        $('#error-msg').text('');
        $('#student-details').hide();
        $('#verification-form-div').show();

        $.ajax({
            url: "{{ route('certificate_verification') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                enroll_id: regNo
            },
            success: function(response) {
                if (response.success) {
                    let student = response.data;
                    
                    // Update student details
                    $('#student-course').text(student.course);
                    $('#student-session').text(student.session);
                    $('#student-reg').text(student.enroll_id);
                    $('#student-name').text(student.name);
                    $('#student-father').text(student.father_name);
                    if (student.passOrFail === 'PASS') {
                        $('#passOrFail').text(student.passOrFail).addClass('text-success').removeClass('text-danger');
                    } else {
                        $('#passOrFail').text(student.passOrFail).addClass('text-danger').removeClass('text-success');
                    }

                    $('#student-photo').attr("src", student.photo ? student.photo : "{{ asset('assets/images/default-photo.png') }}");

                    // Hide form, show details
                    $('#verification-form-div').hide();
                    $('#student-details').show();
                } else {
                    $('#error-msg').text(response.message ?? '');
                }
            },
            error: function(xhr) {
                $('#error-msg').text(xhr.responseJSON.message || "Something went wrong.");
            }
        });
    });

    $("#view-result-link").click(function(){
        $("#result-row").toggle();
    });

    $('#reset-form').click(function() {
        $('#verification-form-div').show();
        $('#student-details').hide();
        $('#verificationForm')[0].reset();
        $('#error-msg').text('');
        $('#student-photo').attr("src", "{{ asset('assets/images/default-photo.png') }}");
    });
});
</script>

@endsection