@extends('layouts.candidate-main')
@section('content')
    <h2 class="main-title">My Resume</h2>

    <div class="bg-white card-box border-20">
        <!-- <h4 class="dash-title-three">Resume Attachment</h4>
        <div class="dash-input-wrapper mb-20">
            <label for="">CV Attachment*</label>

            <div class="attached-file d-flex align-items-center justify-content-between mb-15">
                <span>MyCvResume.PDF</span>
                <a href="#" class="remove-btn"><i class="bi bi-x"></i></a>
            </div>
            <div class="attached-file d-flex align-items-center justify-content-between">
                <span>CandidateCV02.PDF</span>
                <a href="#" class="remove-btn"><i class="bi bi-x"></i></a>
            </div>
        </div> -->
        <!-- /.dash-input-wrapper -->
        <form method="POST" action="{{ route('resumeStore') }}" enctype="multipart/form-data">
        @csrf
        <div class="dash-btn-one d-inline-block position-relative me-3">
            <i class="bi bi-plus"></i>
            Upload CV
            <input type="file" id="uploadCV" name="uploadCV" placeholder="">
        </div>
        <small>Upload file .pdf, .doc, .docx</small>
    </div> 
    <!-- /.card-box -->

    <div class="bg-white card-box border-20 mt-40">
        <h4 class="dash-title-three">Intro & Overview</h4>
        <div class="dash-input-wrapper mb-35 md-mb-20">
            <label for="">Overview*</label>
            <textarea class="size-lg" name="overview" placeholder="Write something interesting about you....">{{ $my_experience->overview ?? '' }}</textarea>
            <div class="alert-text">Brief description for your resume. URLs are hyperlinked.</div>
        </div>

        <h4 class="dash-title-three">Add Intro Video Youtube Embed URL</h4>
        <div class="dash-input-wrapper mb-35 md-mb-20">
            <label for="">Intro Video URL </label>
            <input type="text" id="videoInput" placeholder="Add Youtube Video URL" name="video_url" value="{{ $my_experience->video_url ?? '' }}" >
            <div class="alert-text">Brief description for your resume. URLs are hyperlinked.</div>
        </div>
        <!-- /.dash-input-wrapper -->
        <!-- <div class="row">
            <div class="col-sm-6 d-flex">
                <div class="intro-video-post position-relative mt-20"
                    style="background-image: url('{{ asset('assets/images-admin/video_post.jpg') }}');">
                    <a class="fancybox rounded-circle video-icon tran3s text-center" data-fancybox=""
                        href="https://www.youtube.com/embed/aXFSJTjVjw0">
                        <i class="bi bi-play"></i>
                    </a>
                    <a href="#" class="close"><i class="bi bi-x"></i></a>
                </div>
            </div>
            <div class="col-sm-6 d-flex">
                <div class="intro-video-post position-relative empty mt-20">
                    <span>+ Add Intro Video</span>
                    <input type="file" id="uploadVdo" name="uploadVdo" placeholder="">
                </div>
            </div>
        </div> -->
    </div> 

    <!-- <div class="bg-white card-box border-20 mt-40">
        
</div> -->

    <!-- /.card-box -->
    
        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">Education</h4>

            <div class="accordion dash-accordion-one" id="accordionOne">
                <div class="accordion-item">
                    <div class="accordion-header" id="headingOne">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            Add Education*
                        </button>
                    </div>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                        data-bs-parent="#accordionOne">
                        <div class="accordion-body">
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Title*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <input name="educationTitle" type="text" value="{{$my_education->title ?? ''}}" placeholder="Product Designer (Google)">
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Academy*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <input name="academy" type="text" value="{{$my_education->academy ?? ''}}" placeholder="Google Arts Collage & University">
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Year*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="dash-input-wrapper mb-30">
                                                <select name="educationYearFrom" class="nice-select">
                                                    <option>2023</option>
                                                    <option>2022</option>
                                                    <option>2021</option>
                                                    <option>2020</option>
                                                    <option>2019</option>
                                                    <option>2018</option>
                                                </select>
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="dash-input-wrapper mb-30">
                                                <select name="educationYearTo" class="nice-select">
                                                    <option>2023</option>
                                                    <option>2022</option>
                                                    <option>2021</option>
                                                    <option>2020</option>
                                                    <option>2019</option>
                                                    <option>2018</option>
                                                </select>
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Description*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <textarea name="educationDiscription" class="size-lg"
                                            placeholder="Morbi ornare ipsum sed sem condimentum, et pulvinar tortor luctus. Suspendisse condimentum lorem ut elementum aliquam et pulvinar tortor luctus.">{{$my_education->description ?? ''}}</textarea>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div> <!-- /.dash-accordion-one -->
            {{-- <a href="#" class="dash-btn-one"><i class="bi bi-plus"></i> Add more</a> --}}
        </div>
        <!-- /.card-box -->


             <div class="bg-white card-box border-20 mt-40">
             <h4 class="dash-title-three">Skills & Experience</h4>
             <div class="dash-input-wrapper mb-40">
                    <label for="skills">Skills*</label>
                    @if(!empty($my_experience->skills))
                    @php
                    $skills = explode(',', $my_experience->skills);
                    $skillsString = implode(',', $skills);
                    @endphp
                    @endif
                    @if(!empty($my_experience->skills))

                    <input type="text" id="skillsInput" value="{{$skillsString}}" placeholder="Add Skills" name="skills[]" >
                    @else
                    <input type="text" id="skillsInput"  placeholder="Add Skills" name="skills[]" >
                    @endif

                    <div class="skill-input-data d-flex align-items-center flex-wrap">
                        <button type="button" onclick="addSkill('Design')">Design</button>
                        <button type="button" onclick="addSkill('UI')">UI</button>
                        <button type="button" onclick="addSkill('Digital')">Digital</button>
                        <button type="button" onclick="addSkill('Graphics')">Graphics</button>
                        <button type="button" onclick="addSkill('Developer')">Developer</button>
                        <button type="button" onclick="addSkill('Product')">Product</button>
                        <button type="button" onclick="addSkill('Microsoft')">Microsoft</button>
                        <button type="button" onclick="addSkill('Brand')">Brand</button>
                        <button type="button" onclick="addSkill('Photoshop')">Photoshop</button>
                        <button type="button" onclick="addSkill('Business')">Business</button>
                        <button type="button" onclick="addSkill('IT & Technology')">IT & Technology</button>
                        <button type="button" onclick="addSkill('Marketing')">Marketing</button>
                        <button type="button" onclick="addSkill('Article')">Article</button>
                        <button type="button" onclick="addSkill('Engineer')">Engineer</button>
                        <button type="button" onclick="addSkill('HTML5')">HTML5</button>
                        <button type="button" onclick="addSkill('Figma')">Figma</button>
                        <button type="button" onclick="addSkill('Automobile')">Automobile</button>
                        <button type="button" onclick="addSkill('Account')">Account</button>
                    </div>
                </div>
          

        <!-- <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">Skills & Experience</h4>
             <div class="dash-input-wrapper mb-40">
            <label for="">Add Skills*</label>

            <div class="skills-wrapper">

            
                <ul class="style-none d-flex flex-wrap align-items-center">
                    <li class="is_tag"><button>Figma <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>HTML5 <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>Illustrator <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>Adobe Photoshop <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>WordPress <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>jQuery <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>Web Design <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>Adobe XD <i class="bi bi-x"></i></button></li>
                    <li class="is_tag"><button>CSS <i class="bi bi-x"></i></button></li>
                    
                </ul>
            </div>
        </div>  -->
            <!-- /.dash-input-wrapper -->

            <div class="dash-input-wrapper mb-15">
                <label for="">Add Work Experience*</label>
            </div>
            <!-- /.dash-input-wrapper -->
            <div class="accordion dash-accordion-one" id="accordionTwo">
                <div class="accordion-item">
                    <div class="accordion-header" id="headingOneA">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOneA" aria-expanded="false" aria-controls="collapseOneA">
                            Experience *
                        </button>
                    </div>
                    <div id="collapseOneA" class="accordion-collapse collapse" aria-labelledby="headingOneA"
                        data-bs-parent="#accordionTwo">
                        <div class="accordion-body">
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Title*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <input type="text" name="experienceTitle"
                                            value ="{{$my_experience->title ?? ''}}" placeholder="Lead Product Designer ">
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Company*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <input name="company"  value ="{{$my_experience->company ?? ''}}" type="text" placeholder="Amazon Inc">
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Year*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="dash-input-wrapper mb-30">
                                                <select name="experienceYearFrom" class="nice-select">
                                                    <option>2023</option>
                                                    <option>2022</option>
                                                    <option>2021</option>
                                                    <option>2020</option>
                                                    <option>2019</option>
                                                    <option>2018</option>
                                                </select>
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="dash-input-wrapper mb-30">
                                                <select name="experienceYearTo" class="nice-select">
                                                    <option>2023</option>
                                                    <option>2022</option>
                                                    <option>2021</option>
                                                    <option>2020</option>
                                                    <option>2019</option>
                                                    <option>2018</option>
                                                </select>
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Expected Salary/Year*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <label>Minimum*</label>
                                            <div class="dash-input-wrapper mb-30">
                                                <input name="minimum_salary"  value ="{{$my_experience->minimum_salary ?? ''}}" type="number" placeholder="Enter Minimum Salary">
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                        <div class="col-sm-6">
                                            <label>Maximum*</label>
                                            <div class="dash-input-wrapper mb-30">
                                                <input name="maximum_salary"  value ="{{$my_experience->maximum_salary ?? ''}}" type="number" placeholder="Enter Maximum Salary">
                                            </div>
                                            <!-- /.dash-input-wrapper -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Experience*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                <div class="dash-input-wrapper mb-30">
                                    <select class="nice-select" name="experience">
                                        <option value="Intermediate" {{ old('experience') === 'Intermediate' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->experience === 'Intermediate') selected
                                        @endif>Intermediate </option>
                                        <option value="No-Experience" {{ old('experience') === 'No-Experience' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->experience === 'No-Experience') selected @endif>No-Experience </option>
                                        <option value="Expert" {{ old('experience') === 'Expert' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->experience === 'Expert') selected @endif>Expert</option>
                                    </select>
                                </div>
                                <!-- /.dash-input-wrapper -->
                            </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Location*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            <div class="col-lg-10">
                                <div class="dash-input-wrapper mb-30">
                                    <select class="nice-select" name="location">
                                        <option value="Washington DC" {{ old('location') === 'Washington DC' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->location === 'Washington DC') selected @endif>Washington DC</option>
                                        <option value="California, CA" {{ old('location') === 'California, CA' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->location === 'California, CA') selected @endif>California, CA</option>
                                        <option value="New York" {{ old('location') === 'New York' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->location === 'New York') selected @endif>New York</option>
                                        <option value="Miami" {{ old('location') === 'Miami' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->location === 'Miami') selected @endif>Miami</option>
                                    </select>
                                </div>
                                <!-- /.dash-input-wrapper -->
                            </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">English Fluency</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            <div class="col-lg-10">
                                <div class="dash-input-wrapper mb-30">
                                    <select class="nice-select" name="english_fluency">
                                        <option value="Basic" {{ old('english_fluency') === 'Basic' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->english_fluency === 'Basic') selected @endif>Basic</option>
                                        <option value="Conversational" {{ old('english_fluency') === 'Conversational' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->english_fluency === 'Conversational') selected @endif>Conversational</option>
                                        <option value="Fluent" {{ old('english_fluency') === 'Fluent' ? 'selected' : '' }} @if(isset($my_experience) && $my_experience->english_fluency === 'Fluent') selected @endif>Fluent</option>
                                        <option value="Native/Bilingual" {{ old('english_fluency') === 'Native/Bilingual' ? 'selected' : '' }}  @if(isset($my_experience) && $my_experience->english_fluency === 'Native/Bilingual') selected @endif>Native/Bilingual</option>
                                    </select>
                                </div>
                                <!-- /.dash-input-wrapper -->
                            </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="dash-input-wrapper mb-30 md-mb-10">
                                        <label for="">Description*</label>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                                <div class="col-lg-10">
                                    <div class="dash-input-wrapper mb-30">
                                        <textarea name="experienceDiscription" class="size-lg"
                                            placeholder="Morbi ornare ipsum sed sem condimentum, et pulvinar tortor luctus. Suspendisse condimentum lorem ut elementum aliquam et pulvinar tortor luctus.">{{$my_experience->description ?? ''}}</textarea>
                                    </div>
                                    <!-- /.dash-input-wrapper -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              
            </div> <!-- /.dash-accordion-one -->
            {{-- <a href="#" class="dash-btn-one"><i class="bi bi-plus"></i> Add more</a> --}}
        </div>
        <div class="button-group d-inline-flex align-items-center mt-30">
            <button type="submit" class="dash-btn-two tran3s me-3">Save</button>
            <a href="#" class="dash-cancel-btn tran3s">Cancel</a>
        </div>
        </form>
    </div>
       
        <!-- /.card-box -->

        {{-- <div class="bg-white card-box border-20 mt-40">
        <h4 class="dash-title-three">Portfolio</h4>
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="candidate-portfolio-block position-relative mb-25">
                    <a href="#" class="d-block">
                        <img src="{{ asset('assets/images/lazy.svg') }}"
                            data-src="{{ asset('assets/images-admin//portfolio_img_01.jpg') }}" alt=""
                            class="lazy-img w-100">
                    </a>
                    <a href="#"
                        class="remove-portfolio-item rounded-circle d-flex align-items-center justify-content-center tran3s"><i
                            class="bi bi-x"></i></a>
                </div>
                <!-- /.candidate-portfolio-block -->
            </div>
            <div class="col-lg-3 col-6">
                <div class="candidate-portfolio-block position-relative mb-25">
                    <a href="#" class="d-block">
                        <img src="{{ asset('assets/images/lazy.svg') }}"
                            data-src="{{ asset('assets/images-admin//portfolio_img_02.jpg') }}" alt=""
                            class="lazy-img w-100">
                    </a>
                    <a href="#"
                        class="remove-portfolio-item rounded-circle d-flex align-items-center justify-content-center tran3s"><i
                            class="bi bi-x"></i></a>
                </div>
                <!-- /.candidate-portfolio-block -->
            </div>
            <div class="col-lg-3 col-6">
                <div class="candidate-portfolio-block position-relative mb-25">
                    <a href="#" class="d-block">
                        <img src="{{ asset('assets/images/lazy.svg') }}"
                            data-src="{{ asset('assets/images-admin//portfolio_img_03.jpg') }}" alt=""
                            class="lazy-img w-100">
                    </a>
                    <a href="#"
                        class="remove-portfolio-item rounded-circle d-flex align-items-center justify-content-center tran3s"><i
                            class="bi bi-x"></i></a>
                </div>
                <!-- /.candidate-portfolio-block -->
            </div>
            <div class="col-lg-3 col-6">
                <div class="candidate-portfolio-block position-relative mb-25">
                    <a href="#" class="d-block">
                        <img src="{{ asset('assets/images/lazy.svg') }}"
                            data-src="{{ asset('assets/images-admin//portfolio_img_04.jpg') }}" alt=""
                            class="lazy-img w-100">
                    </a>
                    <a href="#"
                        class="remove-portfolio-item rounded-circle d-flex align-items-center justify-content-center tran3s"><i
                            class="bi bi-x"></i></a>
                </div>
                <!-- /.candidate-portfolio-block -->
            </div>
        </div>
        <a href="#" class="dash-btn-one"><i class="bi bi-plus"></i> Add more</a>
        </div> --}}
        <!-- /.card-box -->

        <div class="button-group d-inline-flex align-items-center mt-30">
            <button type="submit" class="dash-btn-two tran3s me-3">Save</button>
            <a href="#" class="dash-cancel-btn tran3s">Cancel</a>
        </div>
    
    </div>
    </div>
    <!-- /.dashboard-body -->
    <script>
    function addSkill(skill) {
        const skillsInput = document.getElementById('skillsInput');
        if (skillsInput.value === "") {
            skillsInput.value = skill;
        } else {
            skillsInput.value += `, ${skill}`;
        }
    }
</script>
@endsection