@extends('layouts.landing')

@section('title', 'Become a mentor')

@section('content')
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <h4>Apply to be a mentor</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl p-4">
                    <div class="row mb-4">
                        <div class="col">
                            <h6 class="fw-600">Step 2 of 2</h6>
                            <div class="nav d-flex">
                                <a class="btn-line pt-2">
                                    <span class="line">-</span>
                                </a>
                                <a class="btn-line pt-2 ml-2">
                                    <span class="line">-</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <form action="{{ route('mentor.apply.step.two.post') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-12">
                                <h4 class="my-4">Journals published</h4>
                                <div class="form-group">
                                    <label for="actual-btn" style="cursor: pointer" class="cursor-pointer">
                                        <input type="file" name="journals_published_pdf" multiple id="actual-btn" accept=".pdf,.doc,.docx" onchange="loadFile(event)" class="hide-input"><br>
                                        <a class="btn custom-btn"><i class="mdi mdi-cloud-upload"></i> Upload pdf file of your published Journals</a>
                                    </label>
                                    <p id="file-chosen"></p>
                                </div>
                                <h4>Academic qualifications </h4>
                                <div class="form-group">
                                    <label for="school_name">School Name</label>
                                    <input type="text" name="academic_qualifications[0][school_name]" id="school_name" class="form-control" placeholder="Enter School Name">
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="school_start_date">Start Date</label>
                                            <input type="date" name="academic_qualifications[0][school_start_date]" id="school_start_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="school_end_date">End Date</label>
                                            <input type="date" name="academic_qualifications[0][school_end_date]" id="school_end_date" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="school_degree">Degree</label>
                                    <input type="text" name="academic_qualifications[0][school_degree]" id="school_degree" class="form-control" placeholder="Enter Degree">
                                </div>
                                <div class="form-group">
                                    <label for="school_area_of_study">Area of Study</label>
                                    <input type="text" name="academic_qualifications[0][school_area_of_study]" id="school_area_of_study" class="form-control" placeholder="Enter area of Study">
                                </div>
                                <div class="row" id="displayAcademicQualification"></div>
                                <div class="form-group">
                                    <button id="addAcademicQualificationBtn" type="button" class="btn gt-btn-blue-outline w-100">Add more Academic qualifications</button>
                                </div>
                                <h4 class="mt-4">Certifications </h4>
                                <div class="row">
                                    <div class="col-9">
                                        <div class="form-group">
                                            <label for="certificate">Certificate</label>
                                            <input type="text" name="certifications[0][name]" id="cases_handled"  placeholder="Enter Certificate Name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="certificate">Year</label>
                                            <input type="text" name="certifications[0][year]" id="cases_handled"  placeholder="Enter year obtained" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="inputDisplay"></div>
                                <div class="form-group">
                                    <button id="addInputBtn" type="button" class="btn gt-btn-blue-outline w-100">Add more certificates</button>
                                </div>
                                <div class="form-group text-right">
                                    <button  type="submit" class="btn gt-btn-blue pl-5 pr-5">Submit </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('js_after')
<script>
    var counter = 0;
    var certCounter = 0;

    $("#addInputBtn").click(function(e){
        certCounter = certCounter + 1;

        var casesHandled =  `<div class="row"> <div class="col-md-9 mb-3"><label for="certificate">Certificate</label><input type="text" name="certifications[${certCounter}][name]" id="cases_handled"  placeholder="Enter Certificate Name" class="form-control"></div><div class="col-md-3"><label for="certificate">Year</label><input type="text" name="certifications[${certCounter}][year]" id="cases_handled"  placeholder="Enter year obtained" class="form-control"></div><p style="color:red; cursor: pointer;" onClick="deleteInput(this)" >Remove</p></div>`;

        $("#inputDisplay").append(casesHandled);
    });


    $("#addAcademicQualificationBtn").click(function(e){
    counter = counter + 1;
    var workExperience =  `<div class="row"> <div class="col-md-12 mb-3"> <hr>
                                    <label for="school_name">School  Name</label>
                                   <input type="text" name="academic_qualifications[${counter}][school_name]" id="school_name" class="form-control" placeholder="Enter School Name">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="school_start_date">Start Date</label>
                                   <input type="date" name="academic_qualifications[${counter}][school_start_date]" id="school_start_date" class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="school_end_date">End Date</label>
                                   <input type="date" name="academic_qualifications[${counter}][school_end_date]" id="school_end_date" class="form-control">
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="school_degree">Degree</label>
                                   <input type="text" name="academic_qualifications[${counter}][school_degree]" id="school_degree" class="form-control" placeholder="Enter Degree">
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="school_area_of_study">Area of Study</label>
                                   <input type="text" name="academic_qualifications[${counter}][school_area_of_study]" id="school_area_of_study" class="form-control" placeholder="Enter area of Study">
                                </div> <p style="color:red; cursor: pointer;" onClick="deleteInput(this)" ><i style="color:red;" class="fa fa-trash ml-3 pt-2" aria-hidden="true" ></i> Remove</p></div>`;
    $("#displayAcademicQualification").append(workExperience);
});


    function deleteInput(e)
    {
        e.parentElement.remove();
    }




    var loadFile = function(event) {
        var new_output = document.getElementById('new_output');
        var file_size = document.getElementById('actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        new_output.src = URL.createObjectURL(event.target.files[0]);
        document.getElementById('show-photo').style.display = 'block';
        new_output.onload = function() {
            URL.revokeObjectURL(new_output.src) // free memory
            if (file >= 1024) {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file >= 1024000) {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> GB';
            } else {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> KB';
            }
        }
    };

    const actualBtn = document.getElementById('actual-btn');

    const fileChosen = document.getElementById('file-chosen');

    actualBtn.addEventListener('change', function(){
        fileChosen.textContent = this.files[0].name
    });


    function deleteFile(e)
    {
        e.parentElement.remove();
    }
</script>
@endsection