@extends('layouts.landing')

@section('title', 'Build your visibility')

@section('content')
<div class="row mobile-mt-8">
    <div class="col-12">
        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-body p-0">
                <div class="row align-items-center justify-content-center">
                    <div class="col-12 col-lg-8 col-xl-8">
                        <h4>{{tenantSetting($_SERVER['HTTP_HOST'])->build_visibility ?? 'Build your visibility'}}</h4>
                        <form class="tab-content pb-4" action="{{route('visibility.create')}}" method="POST" enctype="multipart/form-data" id="wizardSteps">
                            @csrf
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="parent_id" value="{{Auth::user()->creatorId()}}">
                            <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">
                                <div class="">
                                    <div class="row">
                                        <div class="col">
                                            <div class="nav d-flex my-4">
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="badge-1 mr-2">1</span> Step 1  <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 opacity text-dark" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="badge-1 mr-2">2</span> Step 2 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 opacity text-dark" data-toggle="wizard" href="#wizardStepThree">
                                                    <span class="badge-1 mr-2">3</span> Step 3 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 opacity text-dark" data-toggle="wizard" href="#wizardStepFour">
                                                    <span class="badge-1 mr-2">4</span> Step 4
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group mb-4">
                                            <label class="form-label mb-1">
                                                Brag Line (Your elevator pitch: A statement that demonstrates your competency, career impact and expertise)
                                            </label>
                                            <textarea name="open_statement" class="form-control" id="open_statement" rows="5" placeholder="Your pitch">{{@old('open_statement')}}</textarea>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label class="form-label mb-1">
                                                Major Accomplishments in your Career
                                            </label>
                                            <input type="text" name="accomplishment[]" class="form-control mb-4" value="{{@old('accomplishment.0') }}">
                                            <div id="accomplishDisplay"></div>
                                            <span id="addAccomplishment" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                        </div>
                                        <div class="form-group my-5">
                                            <h6 class="mb-4"><i class="mdi mdi-bag text-color"></i> Companies You Have Worked For</h6>
                                            <label class="form-label mb-2">
                                                Add Work Experience
                                            </label>
                                            <div class="row">
                                                <div class="col-12 col-lg-6 col-xl-6">
                                                    <label class="form-label mb-2">Job Role</label>
                                                    <input type="text" name="work_experience[0][job_role][]" class="form-control mb-4" placeholder="Job role" value="{{@old('work_experience.0.job_role.0')}}">
                                                </div>
                                                <div class="col-12 col-lg-6 col-xl-6">
                                                    <label class="form-label mb-2">Company Name</label>
                                                    <input type="text" name="work_experience[0][company_name][]" class="form-control mb-4" placeholder="Company Name">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 col-lg-6 col-xl-6">
                                                    <label class="form-label mb-2">Start Date</label>
                                                    <input type="date" name="work_experience[0][start_date][]" style="height: 46px" class="form-control mb-4" placeholder="Start date">
                                                </div>
                                                <div class="col-12 col-lg-6 col-xl-6">
                                                    <label class="form-label mb-2">End Date</label>
                                                    <input type="date" name="work_experience[0][end_date][]"  style="height: 46px" class="form-control mb-4" placeholder="End date">
                                                </div>
                                            </div>
                                            <div id="workDisplay"></div>
                                            <span id="addWork" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Sectors
                                            </label>
                                            <select multiple name="sector[]" class="form-select w-100" data-choices='{"searchEnabled": true}'>
                                                <option value="">Add Sectors</option>
                                                @foreach($sectors as $sector)
                                                    <option value="{{$sector->name}}">{{$sector->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-5">
                                            <label class="form-label mb-1">
                                                Skills & Expertise
                                            </label>
                                            <input type="text" name="expertise[]" class="form-control mb-4">
                                            <div id="expertiseDisplay"></div>
                                            <span id="addExpertise" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                        </div>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <button class="btn btn-white d-none" type="reset">Cancel</button>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 1 of 4</h6>
                                        </div>
                                        <div class="col-auto">
                                            <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepTwo">Next <i class="mdi mdi-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="wizardStepTwo" role="tabpanel" aria-labelledby="wizardTabTwo">
                                <div class="">
                                    <div class="row">
                                        <div class="col">
                                            <div class="nav d-flex my-4">
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="badge-1 mr-2">1</span> Step 1  <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="badge-1 mr-2">2</span> Step 2 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 opacity text-dark" data-toggle="wizard" href="#wizardStepThree">
                                                    <span class="badge-1 mr-2">3</span> Step 3 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 opacity text-dark" data-toggle="wizard" href="#wizardStepFour">
                                                    <span class="badge-1 mr-2">4</span> Step 4
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Next Level Career Goal
                                            </label>
                                            <textarea name="career_goal" class="form-control" id="career_goal" rows="5" placeholder="What's your career goal?">{{@old('career_goal')}}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group mb-4">
                                        <label class="form-label mb-1">
                                            Keynote Topics (example: How to build visibility as a career person)
                                        </label>
                                        <input type="text" name="keynote_topic[]" class="form-control mb-4" value="{{ @old('keynote_topic.0') }}">
                                        <div id="keynoteDisplay"></div>
                                        <span id="addKeynote" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <a class="btn custom-btn-outline rounded-1" data-toggle="wizard" href="#wizardStepOne"><i class="mdi mdi-arrow-left"></i> Back</a>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 2 of 4</h6>
                                        </div>
                                        <div class="col-auto">
                                            <div class="col-auto">
                                                <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepThree">Next <i class="mdi mdi-arrow-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="wizardStepThree" role="tabpanel" aria-labelledby="wizardTabThree">
                                <div class="">
                                    <div class="row">
                                        <div class="col">
                                            <div class="nav d-flex my-4">
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="badge-1 mr-2">1</span> Step 1  <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="badge-1 mr-2">2</span> Step 2 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepThree">
                                                    <span class="badge-1 mr-2">3</span> Step 3 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 opacity text-dark" data-toggle="wizard" href="#wizardStepFour">
                                                    <span class="badge-1 mr-2">4</span> Step 4
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-4">
                                        <div class="form-group mb-5">
                                            <label class="form-label mb-1">
                                                My Articles
                                            </label>
                                            <input type="text" name="article[0][title][]" class="form-control mb-4" placeholder="Article Title">
                                            <input type="text" name="article[0][link][]" class="form-control mb-4" placeholder="Article Link">
                                            <textarea name="article[0][description][]" class="form-control" rows="5" placeholder="Your Article"></textarea>
                                            <div id="articleDisplay" class="mt-4"></div>
                                            <span id="addArticle" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                        </div>
                                        <div class="form-group mb-5">
                                            <label class="form-label mb-1">
                                                My Media Features
                                            </label>
                                            <input type="text" name="media_feature[0][title][]" class="form-control mb-4" placeholder="Title">
                                            <input type="text" name="media_feature[0][link][]" class="form-control mb-4" placeholder="Link">
                                            <textarea name="media_feature[0][description][]" class="form-control" rows="5" placeholder="Description"></textarea>
                                            <div id="mediaDisplay" class="mt-4"></div>
                                            <span id="addMedia" class="custom-btn cursor-pointer"><i class="mdi mdi-plus"></i> Add</span>
                                        </div>
                                        <div class="form-group mb-5">
                                            <label class="form-label mb-1">
                                                Link to Linkedin profile
                                            </label>
                                            <input type="text" name="linkedin" class="form-control mb-4" value="{{ @old('linkedin') }}">
                                        </div>
                                    </div>
                                    <div class="nav row pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <a class="btn custom-btn-outline rounded-1" data-toggle="wizard" href="#wizardStepTwo"><i class="mdi mdi-arrow-left"></i> Back</a>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 2 of 4</h6>
                                        </div>
                                        <div class="col-auto">
                                            <div class="col-auto">
                                                <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepFour">Next <i class="mdi mdi-arrow-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="wizardStepFour" role="tabpanel" aria-labelledby="wizardTabFour">
                                <div class="">
                                    <div class="row">
                                        <div class="col">
                                            <div class="nav d-flex my-4">
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="badge-1 mr-2">1</span> Step 1  <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="badge-1 mr-2">2</span> Step 2 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 mr-4 text-dark" data-toggle="wizard" href="#wizardStepThree">
                                                    <span class="badge-1 mr-2">3</span> Step 3 <span class="pl-2"><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a class="pt-2 text-dark" data-toggle="wizard" href="#wizardStepFour">
                                                    <span class="badge-1 mr-2">4</span> Step 4
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-4">
                                        <div class="form-group mb-4">
                                            <label class="form-label mb-1">
                                                Upload Flyers
                                            </label>
                                            <label for="actual-btn" style="cursor: pointer" class="w-100 custom-upload p-6 w-full text-center rounded-lg custom-border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload-outline font-lg"></i>
                                                <input type="file" name="flyer[]" multiple id="actual-btn" accept="image/jpeg,image/png,image/gif" class="hide-input"><br>
                                                <h6 class="text-lg" id="file-chosen">Upload images <br>
                                                    <small class="text-muted">JPG, PNG or PDF, file size no more than 10MB</small>
                                                </h6>
                                                <div class="d-flex">
                                                    <span>
                                                        <output id="output"></output>
                                                    </span>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Video Footage
                                            </label>
                                            <input type="text" name="video_footage[0][link]" class="form-control mb-4" placeholder="link">
                                            <label for="new_actual-btn" style="cursor: pointer" class="w-100 custom-upload p-6 w-full text-center rounded-lg custom-border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload-outline font-lg"></i>
                                                <input type="file" name="video_footage[0][image]" id="new_actual-btn" accept="image/jpeg,image/png,image/gif" onchange="loadPhoto(event)" class="hide-input"><br>
                                                <h6 class="text-lg" id="new-file-chosen">Upload video image cover<br>
                                                    <small class="text-muted">JPG, PNG or PDF, file size no more than 10MB</small>
                                                </h6>
                                                <img id="new_output">
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-check mt-1">
                                                <input type="hidden" name="consent" id="consent">
                                                <input class="form-check-input " name="consent_check" onclick="check('consent', this)" type="checkbox">
                                                <label for="consent" class="text-grey-500 font-xss">"I consent to my profile being shared on {{domain($_SERVER['HTTP_HOST'])->company_name}} for potential audience to contact me for leadership opportunities."</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nav row pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <a class="btn custom-btn-outline rounded-1" data-toggle="wizard" href="#wizardStepTwo"><i class="mdi mdi-arrow-left"></i> Back</a>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 2 of 4</h6>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                                <span class="button__text"><i class="mdi mdi-check"></i> Save</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('elements.add-category')
<script>
    var counter = 0;
    $("#addAccomplishment").click(function(e){
        var accomplishment =  '<div class="d-flex mb-4"><input type="text" name="accomplishment[]" class="form-control mr-2"><i class="mdi mdi-delete cursor-pointer text-red ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';
        $("#accomplishDisplay").append(accomplishment);
    });

    $("#addWork").click(function(e){
        counter = counter + 1;
        var workExperience =  `
            <div class="row">
                <div class="row border-top-xs pt-4">
                    <div class="col-12 col-lg-6 col-xl-6">
                        <label class="form-label mb-2">Job Role</label>
                        <input type="text" name="work_experience[${counter}][job_role][]" class="form-control mb-4" placeholder="Job role">
                    </div>
                    <div class="col-12 col-lg-6 col-xl-6">
                        <label class="form-label mb-2">Company Name</label>
                        <input type="text" name="work_experience[${counter}][company_name][]" class="form-control mb-4" placeholder="Company Name">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-lg-6 col-xl-6">
                        <label class="form-label mb-2">Start Date</label>
                        <input type="date" name="work_experience[${counter}][start_date][]" style="height: 46px" class="form-control mb-4" placeholder="Start date">
                    </div>
                    <div class="col-12 col-lg-6 col-xl-6">
                        <label class="form-label mb-2">End Date</label>
                        <input type="date" name="work_experience[${counter}][end_date][]"  style="height: 46px" class="form-control mb-4" placeholder="En date">
                    </div>
                </div>
                <p class="text-red cursor-pointer mb-4" onClick="deleteInput(this)" ><i style="color:red;" class="fa fa-trash ml-3 pt-2" aria-hidden="true" ></i> Remove</p>
            </div>
        `;
        $("#workDisplay").append(workExperience);
    });

    $("#addSector").click(function(e){
        var sector =  '<div class="d-flex mb-4"><input type="text" name="sector[]" class="form-control mr-2"><i class="mdi mdi-delete cursor-pointer text-red ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';
        $("#sectorDisplay").append(sector);
    });

    $("#addExpertise").click(function(e){
        var expertise =  '<div class="d-flex mb-4"><input type="text" name="expertise[]" class="form-control mr-2"><i class="mdi mdi-delete cursor-pointer text-red ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';
        $("#expertiseDisplay").append(expertise);
    });

    $("#addKeynote").click(function(e){
        var expertise =  '<div class="d-flex mb-4"><input type="text" name="keynote_topic[]" class="form-control mr-2"><i class="mdi mdi-delete cursor-pointer text-red ml-3 pt-2" aria-hidden="true" onClick="deleteInput(this)"></i></div>';
        $("#keynoteDisplay").append(expertise);
    });


    $("#addArticle").click(function(e){
        counter = counter + 1;
        var article =  `
            <div class="border-top-xs pt-4">
                <input type="text" name="article[${counter}][title][]" class="form-control mb-4" placeholder="Article Title">
                <input type="text" name="article[${counter}][link][]" class="form-control mb-4" placeholder="Article Link">
                <textarea name="article[${counter}][description][]" class="form-control" rows="5" placeholder="Your Article"></textarea>
                <p class="text-red cursor-pointer mb-4" onClick="deleteInput(this)" ><i class="mdi mdi-delete pt-2" aria-hidden="true"></i> Remove</p>
            </div>
        `;
        $("#articleDisplay").append(article);
    });

    $("#addMedia").click(function(e){
        counter = counter + 1;
        var media =  `
            <div class="border-top-xs pt-4">
                <input type="text" name="media_feature[${counter}][title][]" class="form-control mb-4" placeholder="Title">
                <input type="text" name="media_feature[${counter}][link][]" class="form-control mb-4" placeholder="Link">
                <textarea name="media_feature[${counter}][description][]" class="form-control" rows="5" placeholder="Description"></textarea>
                <p class="text-red cursor-pointer mb-4" onClick="deleteInput(this)" ><i class="mdi mdi-delete pt-2" aria-hidden="true"></i> Remove</p>
            </div>
        `;
        $("#mediaDisplay").append(media);
    });

    var loadPhoto = function(event) {
        var new_output = document.getElementById('new_output');
        var file_size = document.getElementById('new_actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        new_output.src = URL.createObjectURL(event.target.files[0]);
        new_output.onload = function() {
            URL.revokeObjectURL(new_output.src) // free memory
        }
    };

    if (window.File && window.FileList && window.FileReader) {
        var filesInput = document.getElementById("actual-btn");
        filesInput.addEventListener("change", function(event) {
            var files = event.target.files; //FileList object
            var output = document.getElementById("output");
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                //Only photos
                if (!file.type.match('image'))
                continue;
                var picReader = new FileReader();
                picReader.addEventListener("load", function(event) {
                var picFile = event.target;
                var div = document.createElement("div");
                div.innerHTML = "<img class='thumbnail d-flex pr-2' src='" + picFile.result + "'" +
                    "title='" + picFile.name + "' style='width: 200px'/><i class='mdi mdi-delete cursor-pointer text-red' onclick='removePhoto(this)'>";
                output.insertBefore(div, null);
                });
                //Read the image
                picReader.readAsDataURL(file);
            }
        });
    }

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

    function check(divId, event){
        if(event.checked == true){
            $("#"+ divId).val('agree');
        }else{
            $("#"+ divId).val('disagree');
        }
    }
</script>
@endsection