@extends('layouts.course')
@section('content')
<section class="newpage">
  <div class="innermenu">
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <div class="link-path">
            <ul>
              <li>Dashboard</li>
              <li><span>/</span></li>
              <li class="active">Trainee Profile</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="fullpage">
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
          <div class="user-main-info">
            <div class="user-info">
              <div class="user-pic">
                <img src="{{asset('images/userprofile.jpg')}}">
                <button class="no-effect" type="button" data-toggle="modal" data-target="#editpic">
                  <i class="far fa-edit"></i>
                </button>
              </div>
              <div class="user-name">
                <h5>Ravi Kumar</h5>
                <p>Lorem ipsum.</p>

              </div>
            </div>
            <div class="user-otherinfo pt-10">
              <div class="editall trainee-edit">
                <button class="no-effect" type="button" data-toggle="modal" data-target="#userdetailes">
                  <i class="far fa-edit"></i>
                </button>
              </div>

              <div class="user-email ">
                <div class="email-icon">
                  <img src="{{asset('images/email.svg')}}">
                </div>
                <div class="email-id ptd-10 email-id-pl">
                  <p>Email</p>
                  <span>email@email.com</span>
                </div>
              </div>
              <div class="user-email">
                <div class="email-icon">
                  <img src="{{asset('images/phone.svg')}}">
                </div>
                <div class="email-id ptd-10 email-id-pl">
                  <p>Phone</p>
                  <span>+91234567890</span>
                </div>
              </div>
              <div class="user-email">
                <div class="email-icon">
                  <img src="{{asset('images/location.svg')}}">
                </div>
                <div class="email-id ptd-10 email-id-pl">
                  <p>Location</p>
                  <span>Hyderabad</span>
                </div>
              </div>
              <div class="user-email">
                <div class="email-icon">
                  <img src="{{asset('images/hat.svg')}}">
                </div>
                <div class="email-id ptd-10 email-id-pl">
                  <p>Education Level</p>
                  <span>Hyderabad</span>
                </div>
              </div>
              <div class="user-email">
                <div class="email-icon">
                  <img src="{{asset('images/bag.svg')}}">
                </div>
                <div class="email-id ptd-10 email-id-pl">
                  <p>Experience</p>
                  <span>7 Years</span>
                </div>
              </div>
            </div>
          </div>

          <div class="user-main-info">

            <div class="editall">
              <button class="no-effect" type="button" data-toggle="modal" data-target="#sociallinks">
                <i class="far fa-edit"></i> <span>Edit</span>
              </button>
            </div>

            <div class="user-otherinfo">
              <div class="user-email user-de-bb">
                <div class="email-id email-id2">
                  <span>Social Links</span>
                  <p>Lorem Ipsum is simply dummy text</p>
                </div>
              </div>
              <div class="user-email">
                <div class="email-id ptd-10 email-id-link">
                  <span>Facebook</span>
                  <p>https://preview.uxpin.com/faca….</p>
                </div>
              </div>
              <div class="user-email">
                <div class="email-id ptd-10 email-id-link">
                  <span>Twitter</span>
                  <p>https://preview.uxpin.com/faca….</p>
                </div>
              </div>
              <div class="user-email">
                <div class="email-id ptd-10 email-id-link">
                  <span>Linked In</span>
                  <p>https://preview.uxpin.com/faca….</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
          <div class="user-education">
            <ul class="nav nav-tabs" role="tablist">
              <li>
                <a class="active" data-toggle="tab" href="#tabs-1" role="tab">Overview</a>
              </li>
              <li>
                <a data-toggle="tab" href="#tabs-2" role="tab">Courses</a>
              </li>
              <li>
                <a data-toggle="tab" href="#tabs-3" role="tab">Awards</a>
              </li>

            </ul>
          </div>
          <div class="tabs_list">
            <div class="row">
              <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                <div class="all-in-tabs">
                  <div class="tab-content">
                    <div class="tab-pane active" id="tabs-1" role="tabpanel">
                      <div class="tabs_content">
                        <div class="editall">
                          <button class="no-effect" type="button" data-toggle="modal" data-target="#introduction">
                            <i class="far fa-edit"></i> <span>Edit</span>
                          </button>
                        </div>
                        <div class="tabs-otherinfo">
                          <div class="tab-email user-de-bb">
                            <div class="tab-id email-id2 pl-0">
                              <span>Introduction</span>
                              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book. It has
                                survived not only five centuries, but also the leap into electronic typesetting,
                                remaining essentially unchanged. It was popularised in the 1960s with the release of
                                Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>

                    <div class="tab-pane " id="tabs-2" role="tabpanel">
                      <div class="tabs_content">
                        <div class="editall">
                          <button class="no-effect" type="button">
                            <i class="fa fa-plus"></i> <span>Add Course</span>
                          </button>
                        </div>
                        <div class="tabs-otherinfo">
                          <div class="tab-email user-de-bb">
                            <div class="tab-id email-id2 pl-0">
                              <span>Courses</span>
                              <p>Lorem Ipsum is simply dummy text</p>
                            </div>

                          </div>
                          <div class="searchbar2">
                            <form>
                              <div class="form-inline search-form">

                                <input class="form-control mr-sm-2" type="search" placeholder="Search By Course"
                                  aria-label="Search">
                                <div class="search-button">
                                  <button type="submit">
                                    <img src="{{asset('images/search.png')}}" class="search-one">
                                  </button>
                                </div>
                              </div>
                            </form>
                          </div>

                          <div class="trainee-course-content">

                            <div class="trainee-box">
                              <div class="editall trainee-course">
                                <button class="no-effect" type="button">
                                  <i class="fa fa-edit"></i>
                                </button>
                              </div>
                              <div class="row">
                                <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
                                  <div class="tab-email border-right-trainee">
                                    <div class="tab-icon">
                                      <img src="{{asset('images/books.svg')}}">
                                    </div>
                                    <div class="tab-id ">
                                      <span>List of GST Fundamentals
                                        <p class="trainee-ratings"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                          <i class="fa fa-star"></i>
                                          <span class="rating-disabled"> <i class="fa fa-star"></i> <i
                                              class="fa fa-star"></i> </span>
                                        </p>
                                      </span>
                                      <p class="bachelors-bold">Headrun Technologies</p>
                                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                  <div class="trainee-right"></div>
                                  <div class="right-price">
                                    <span> Rs. 5000 </span>
                                  </div>
                                  <div class="right-content">
                                    <div class="applybut">Buy Now</div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="trainee-box">
                              <div class="editall trainee-course">
                                <button class="no-effect" type="button">
                                  <i class="fa fa-edit"></i>
                                </button>
                              </div>
                              <div class="row">
                                <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
                                  <div class="tab-email border-right-trainee">
                                    <div class="tab-icon">
                                      <img src="{{asset('images/books.svg')}}">
                                    </div>
                                    <div class="tab-id ">
                                      <span>List of GST Fundamentals
                                        <p class="trainee-ratings"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                          <i class="fa fa-star"></i>
                                          <i class="fa fa-star"></i>
                                          <span class="rating-disabled"> <i class="fa fa-star"></i> </span>
                                        </p>
                                      </span>
                                      <p class="bachelors-bold">Headrun Technologies</p>
                                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                  <div class="trainee-right"></div>
                                  <div class="right-price">
                                    <span> Rs. 5000 </span>
                                  </div>
                                  <div class="right-content">
                                    <div class="applybut">Buy Now</div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="trainee-box">
                              <div class="editall trainee-course">
                                <button class="no-effect" type="button">
                                  <i class="fa fa-edit"></i>
                                </button>
                              </div>
                              <div class="row">
                                <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
                                  <div class="tab-email border-right-trainee">
                                    <div class="tab-icon">
                                      <img src="{{asset('images/books.svg')}}">
                                    </div>
                                    <div class="tab-id ">
                                      <span>List of GST Fundamentals
                                        <p class="trainee-ratings"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                          <i class="fa fa-star"></i>
                                          <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                        </p>
                                      </span>
                                      <p class="bachelors-bold">Headrun Technologies</p>
                                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                  <div class="trainee-right"></div>
                                  <div class="right-price">
                                    <span> Rs. 5000 </span>
                                  </div>
                                  <div class="right-content">
                                    <div class="applybut">Buy Now</div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="trainee-box">
                              <div class="editall trainee-course">
                                <button class="no-effect" type="button">
                                  <i class="fa fa-edit"></i>
                                </button>
                              </div>
                              <div class="row">
                                <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
                                  <div class="tab-email border-right-trainee">
                                    <div class="tab-icon">
                                      <img src="{{asset('images/books.svg')}}">
                                    </div>
                                    <div class="tab-id ">
                                      <span>List of GST Fundamentals
                                        <p class="trainee-ratings"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                          <span class="rating-disabled"> <i class="fa fa-star"></i> <i
                                              class="fa fa-star"></i> <i class="fa fa-star"></i> </span>
                                        </p>
                                      </span>
                                      <p class="bachelors-bold">Headrun Technologies</p>
                                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                  <div class="trainee-right"></div>
                                  <div class="right-price">
                                    <span> Rs. 5000 </span>
                                  </div>
                                  <div class="right-content">
                                    <div class="applybut">Buy Now</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="tab-pane " id="tabs-3" role="tabpanel">
                      <div class="tabs_content">
                        <div class="editall">
                          <button class="no-effect" type="button">
                            <i class="fa fa-edit"></i><span>Edit</span>
                          </button>
                        </div>
                        <div class="tabs-otherinfo">
                          <div class="tab-email user-de-bb">
                            <div class="tab-id email-id2 pl-0">
                              <span>Awards</span>
                              <p>Lorem Ipsum is simply dummy text</p>
                            </div>
                          </div>
                          <div class="tab-email">
                            <div class="tab-icon">
                              <img src="{{asset('images/location.svg')}}">
                            </div>
                            <div class="tab-id">
                              <span>Award</span>
                              <p class="bachelors-bold">2008</p>
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at consequuntur
                                dolores earum, minus veniam?</p>
                            </div>
                          </div>
                          <div class="tab-email">
                            <div class="tab-icon">
                              <img src="{{asset('images/location.svg')}}">
                            </div>
                            <div class="tab-id">
                              <span>Award</span>
                              <p class="bachelors-bold">2008</p>
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at consequuntur
                                dolores earum, minus veniam?</p>
                            </div>
                          </div>
                          <div class="tab-email">
                            <div class="tab-icon">
                              <img src="{{asset('images/location.svg')}}">
                            </div>
                            <div class="tab-id">
                              <span>Award</span>
                              <p class="bachelors-bold">2008</p>
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at consequuntur
                                dolores earum, minus veniam?</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="user-main-info">
                  <div class="user-otherinfo">
                    <div class="user-email user-de-bb">
                      <div class="email-id email-id2">
                        <span>Ravi's Linked Accounts</span>

                      </div>
                    </div>
                    <div class="user-email">
                      <div class="email-id ptd-10 email-id-link">
                        <span>{{ config('global.SITE_NAME') }}'s Profile</span>
                        <p>https://preview.uxpin.com/faca….</p>
                      </div>
                    </div>
                    <div class="user-email">
                      <div class="email-id ptd-10 email-id-link">
                        <span>Trainer Profile</span>
                        <p>https://preview.uxpin.com/faca….</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="user-main-info">
                  <div class="user-otherinfo">
                    <div class="user-email user-de-bb">
                      <div class="email-id email-id2">
                        <span>Similar Profiles</span>
                        <p>Lorem Ipsum is simply dummy text</p>
                      </div>
                    </div>
                    <div class="user-info-1">
                      <div class="user-pic-1">
                        <img src="{{asset('images/userprofile.jpg')}}">
                      </div>
                      <div class="user-name-1">
                        <h5>Ravi Kumar</h5>
                        <h6>Jr. Accountant</h6>
                        <p>Hyderabad</p>
                      </div>
                    </div>
                    <div class="user-info-1">
                      <div class="user-pic-1">
                        <img src="{{asset('images/userprofile.jpg')}}">
                      </div>
                      <div class="user-name-1">
                        <h5>Ravi Kumar</h5>
                        <h6>Jr. Accountant</h6>
                        <p>Hyderabad</p>
                      </div>
                    </div>
                    <div class="user-info-1">
                      <div class="user-pic-1">
                        <img src="{{asset('images/userprofile.jpg')}}">
                      </div>
                      <div class="user-name-1">
                        <h5>Ravi Kumar</h5>
                        <h6>Jr. Accountant</h6>
                        <p>Hyderabad</p>
                      </div>
                    </div>
                    <div class="user-info-1">
                      <div class="user-pic-1">
                        <img src="{{asset('images/userprofile.jpg')}}">
                      </div>
                      <div class="user-name-1">
                        <h5>Ravi Kumar</h5>
                        <h6>Jr. Accountant</h6>
                        <p>Hyderabad</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Profile Picture</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="addmodule">
          <div class="edit-user">
            <label>Choose Profile pic</label>
            <div class="file">
              <input type="file" accept="image/*" (change)="onSelectedFilesChanged($event)">
            </div>
          </div>

          <div class="add_but"><button type="button" class="btn btn-primary">Upload </button></div>

        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="userdetailes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="edit-user">
          <div class="floating-label">
            <input class="floating-input" type="text" placeholder=" " Value="99999999">
            <label>Phone <span>*</span></label>
          </div>

          <div class="floating-label newselect1">
            <label>Location <span>*</span></label>
            <div class="add-authors">
              <select class="selectpicker">
                <option value="">Hyderbad</option>
                <option value="">Banglore</option>
              </select>
            </div>
          </div>

          <div class="floating-label">
            <input class="floating-input" type="text" placeholder=" " Value="7 years">
            <label>Experience <span>*</span></label>
          </div>
          <div class="add_but"><button type="button" class="btn btn-primary">Update </button></div>
        </div>
      </div>

    </div>
  </div>
</div>



<div class="modal fade" id="sociallinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Social Links</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="addmodule">
          <div class="edit-user">
            <div class="floating-label1">
              <input class="floating-input" type="text" placeholder=" " Value="99999999">
              <label>Facebook <span>*</span></label>
            </div>

            <div class="floating-label1">
              <input class="floating-input" type="text" placeholder=" " Value="99999999">
              <label>Twitter <span>*</span></label>
            </div>

            <div class="floating-label1">
              <input class="floating-input" type="text" placeholder=" " Value="99999999">
              <label>Linked In <span>*</span></label>
            </div>

            <div class="add_but"><button type="button" class="btn btn-primary">Update </button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="introduction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Introduction</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="addmodule">
          <div class="edit-user">
            <div class="floating-label1">
              <textarea name="name" rows="8" cols="50"></textarea>
            </div>




            <div class="add_but"><button type="button" class="btn btn-primary">Update </button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection