@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 align-items-center justify-content-center">
                        <div class="col-12 col-lg-8 col-xl-8">
                            <div class="row mb-4">
                                <div class="col">
                                    <h6 class="fw-600">Step 1 of 2</h6>
                                    <div class="nav d-flex">
                                        <a class="btn-line pt-2">
                                            <span class="line">-</span>
                                        </a>
                                        <a class="btn-line-1 pt-2 ml-2">
                                            <span class="line">-</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <form action="{{route('mentor.apply.step.one.post')}}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="bio">What's your designation/Expertise</label>
                                    <input type="text" name="designation" id="designation" class="form-control" placeholder="Lead product designer">
                                </div>
                                <div class="form-group">
                                    <label for="bio">Tell us about yourself</label>
                                    <textarea name="bio" id="bio" class="form-control" rows="5" placeholder="Enter bio"></textarea>
                                </div>
                                <h4 class="mt-4">Work Experience </h4>
                                <div class="form-group">
                                    <label for="company_name">Company Name</label>
                                    <input type="text" name="work_experience[0][company_name]" id="company_name" class="form-control">
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="start_date">Start Date</label>
                                            <input type="date" name="work_experience[0][start_date]" id="start_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="end_date">End Date</label>
                                            <input type="date" name="work_experience[0][end_date]" id="work_experience" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="inputDisplayWorkExperience"></div>
                                <div class="form-group">
                                    <button id="addWorkExperienceBtn" type="button" class="btn custom-btn-outline rounded-1 w-100">Add more work experience</button>
                                </div>
                                <h4 class="mt-4">Cases handled</h4>
                                <div class="form-group">
                                    <input type="text" name="cases_handled[]" id="cases_handled"  placeholder="Enter cases name" class="form-control">
                                </div>
                                <div class="row" id="inputDisplay"></div>
                                <div class="form-group">
                                    <button id="addInputBtn" type="button" class="btn custom-btn-outline rounded-1 w-100">Add more cases</button>
                                </div>
                                <h4 class="mt-4">Articles published </h4>
                                <div class="form-group">
                                    <input type="text" name="articles_published[]" id="articles_published"  placeholder="Enter link to Articles published" class="form-control">
                                </div>
                                <div class="row" id="inputDisplay2"></div>
                                <div class="form-group">
                                    <button id="addInputBtn2" type="button" class="btn custom-btn-outline rounded-1 w-100">Add more link </button>
                                </div>

                                <div class="form-group text-right">
                                    <button  type="button" class="btn custom-btn-outline rounded-1 pl-5 pr-5">Back </button>

                                    <button  type="submit" class="btn custom-btn pl-5 pr-5 button_load" onclick="this.classList.toggle('button--loading')">
                                        <span class="button__text">Next</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

@endsection


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

    $("#addInputBtn").click(function(e){

        var casesHandled =  '<div class="col-12 mb-3 d-flex justify-content-between"><input type="text" name="cases_handled[]" id="cases_handled"  placeholder="Enter cases name" class="form-control"><i style="color:red;" class="fa fa-trash ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';


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

    $("#addInputBtn2").click(function(e){
        var articlesPublished =  '<div class="col-12 mb-3 d-flex justify-content-between"><input type="text" name="articles_published[]" id="articles_published"  placeholder="Enter link to Articles published" class="form-control"><i style="color:red;" class="fa fa-trash ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';

        $("#inputDisplay2").append(articlesPublished);
    });

    $("#addWorkExperienceBtn").click(function(e){
        counter = counter + 1;
        var workExperience =  `<div class="row"><div class="col-md-12 mb-3"> <hr>
                                    <label for="company_name">Company Name</label>
                                   <input type="text" name="work_experience[${counter}][company_name]" id="company_name" class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="start_date">Start Date</label>
                                   <input type="date" name="work_experience[${counter}][start_date]" id="start_date" class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="end_date">End Date</label>
                                   <input type="date" name="work_experience[${counter}][end_date]" id="work_experience" class="form-control">
                                </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>`;
        $("#inputDisplayWorkExperience").append(workExperience);
    });

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