@extends('frontend.master')
@section('content')
<div class="row">
    <div class="col">
        @include('frontend.include.backendAlert')
    </div>
</div>
<form class="researchInfoForm7 custom form needs-validation" name="researchInfo" id="applicationForm" method="POST" action="{{ route('testResearchSubmit') }}" enctype="multipart/form-data">
    @csrf
    <div class="row mt-3">
        <div class="col-lg-6 from-group">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="researchers_name" placeholder="Enter Your Email" value="kafi" required>
    </div>
        <div class="col-lg-6 from-group">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" name="researchers_email" placeholder="Enter Your Email" value="axis.kafi@gmail.com" >
        </div>

        <div class="col-lg-6 from-group">
                <label class="form-label">Contact Number</label>
                <input type="text" name="researchers_number" class="form-control"
                       placeholder="Enter Your Phone Number" value="2342323" >
        </div>
    </div>
    <ol id="researchOrganizationFile" class="researchFormUl" style="display: block;">
        <li>A cover letter</li>
        <li>A complete and detailed research proposal <br>
            <span style="color: crimson;">Combined attached file here for (1-2) in pdf format (Max: 10MB)</span>
             <input type="file" id="research_proposal_file" name="research_proposal_file" class="form-control" accept="application/pdf" aria-placeholder="Combined Attached File" onchange="uploadFile('research_proposal_file')">
            <input type="hidden" id="research_proposal_file_name" name="research_proposal_file_name">
        </li>
        <li>Full organizational profile describing experience and ability to implement the proposed research</li>
        <li>Evidence of experience and ability to implement the proposed research</li>
        <li>Full description of the research team for the proposed research</li>
        <li>Full CV of the PR and the Co-R evidencing experience and ability to implement the proposed research</li>
        <li>VAT and TIN certificates of the RO</li>
        <li>Copy of certificate of incorporation or registration from relevant government agencies</li>
        <li>Copy of the NID of Principal Researcher (PR) and the Co-Researcher (Co-R) of Research Organization</li>
        <li>Copy of evidence of employment or engagement with the Principal Researcher (PR) and the Co-Researcher (Co-R)<br>
            <span style="color: crimson;">Combined attached file here for (3-10) in pdf format (Max: 10MB)</span>
            <input type="file" id="agreement_paper_file" name="agreement_paper_file" class="form-control" accept="application/pdf" aria-placeholder="Combined Attached File" onchange="uploadFile('agreement_paper_file')"></li>
            <input type="hidden" id="agreement_paper_file_name" name="agreement_paper_file_name">
        
        </ol>
        <ol id="researchIndependentFile" class="researchFormUl" style="display: block;">
            <li>A cover letter</li>
            <li>A complete and detailed research proposal <br>
                <span style="color: crimson;">Combined attached file here for (1-2) in pdf format (Max: 10MB)</span>
                <input type="file" id="research_proposal01_file" name="research_proposal01_file" class="form-control" accept="application/pdf" aria-placeholder="Combined Attached File" onchange="uploadFile('research_proposal01_file')">
                    <input type="hidden" id="research_proposal01_file_name" name="research_proposal01_file_name">
            </li>
            <li>Full description of the research team for the proposed research</li>
            <li>Full CV of the PR and the Co-R evidencing experience and ability to implement the proposed research</li>
            <li>TIN certificates of the PR and the Co-R</li>
            <li>Copy of the NID of Principal Researcher (PR) and the Co-Researcher (Co-R)</li>
            <li>Evidence of employment and evidence of relevant experience<br>
                <span style="color: crimson;">Combined attached file here for (3-7) in pdf format (Max: 10MB)</span>
                <input type="file" id="experience_file" name="experience_file" class="form-control" accept="application/pdf" aria-placeholder="Combined Attached File" onchange="uploadFile('experience_file')"></li>
                <input type="hidden" id="experience_file_name" name="experience_file_name">
            
        </ol>

    <div class="col-md-12 pull-left">
    <button type="submit" class="g-recaptcha btn btn-success btn-lg pull-right px-5">Submit Form</button>
</div>
</form>
@endsection
@section('customScript')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    const MAX_FILE_SIZE_MB = 10;
    const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
    const allowedTypes = ['application/pdf'];

    // Validate a single file input
    function validateFile(inputId) {
        const fileInput = document.getElementById(inputId);
        if (!fileInput || fileInput.files.length === 0) return null; // No file selected

        const file = fileInput.files[0];

        if (!allowedTypes.includes(file.type)) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid File Type',
                html: `Only PDF files are allowed.<br><strong>File:</strong> ${file.name}`,
            });
            fileInput.value = '';
            return false;
        }

        if (file.size > MAX_FILE_SIZE_BYTES) {
            Swal.fire({
                icon: 'error',
                title: 'File Too Large',
                html: `<strong>${file.name}</strong> is too large.<br>Max allowed size is ${MAX_FILE_SIZE_MB}MB.`,
            });
            fileInput.value = '';
            return false;
        }

        return true;
    }

    $(document).ready(function () {
        const form = $('#applicationForm');

        form.on('submit', function (e) {
            let isValid = true;
            let fileUploaded = false;

            const fileFields = [
                'research_proposal_file',
                'agreement_paper_file',
                'research_proposal01_file',
                'experience_file'
            ];

            fileFields.forEach(function (fieldId) {
                const result = validateFile(fieldId);

                if (result === false) {
                    isValid = false; // invalid file
                } else if (result === true) {
                    fileUploaded = true; // valid file uploaded
                }
                // result === null means no file selected; do nothing
            });

            if (!fileUploaded) {
                Swal.fire({
                    icon: 'error',
                    title: 'File Required',
                    text: 'Please upload at least one PDF file.',
                });
                e.preventDefault();
                return;
            }

            if (!isValid) {
                e.preventDefault();
                return;
            }

            // All good, continue with reCAPTCHA
            e.preventDefault(); // prevent default until token
            grecaptcha.ready(function () {
                grecaptcha.execute('6Lc8YNkqAAAAAJbss6eNIUyY4LsUfu--01uzVZIU', { action: 'submit' }).then(function (token) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'g-recaptcha-response',
                        value: token
                    }).appendTo(form);

                    form.get(0).submit(); // submit after token
                }).catch(function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'reCAPTCHA Failed',
                        text: 'reCAPTCHA verification failed. Please try again.',
                    });
                });
            });
        });
    });
</script>
@endsection