@extends('web.layout.login_header')
@section('title', 'Home')
@section('content')
<style>
  body {
      background-image: url(img/background.jpg);
      background-size: cover;
      background-attachment: fixed;
  }

  body:before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      height: 100%;
      left: 0px;
  }

  .bg-inner {
      background-color: white !important;
      border: white solid 1px !important;
      border-radius: 3px !important;
  }

  .heading {
      position: relative !important;
      z-index: 10 !important;
      top: 47px !important;
      font-weight: 400 !important;
  }

  .profile {
      width: 5rem !important;
      top: 47px !important;
      left: 43% !important;
      right: 40% !important;
      z-index: 11 !important;
      position: relative !important;
  }

  .innerup::after {
      border-radius: 0rem !important;
      content: "" !important;
      background: #6d0000b8 !important;
      position: absolute !important;
      top: -2px;
      left: -16px;
      right: -16px;
      bottom: 0 !important;
      border-bottom-left-radius: 138px !important;
      border-bottom-right-radius: 149px !important;
      height: 12rem;
      border-top-left-radius: 4px !important;
      border-top-right-radius: 3px !important;
  }

  .imgProfile {
      border-radius: 50% !important;
      width: 6rem;
      height: 5rem !important;
      margin-top: 9px;
  }

  .headingContainer {
      left: 43% !important;
      right: 40% !important;
      color: white !important;
  }

  /* floating label */
  .form-control {
        border: none !important;
        outline: none !important;
        border-bottom:  1px solid #6d0000b8 !important;
    }

    .form-control:focus {
        border: none !important;
        outline: none !important;
        border-bottom: 1px solid #9f9f9f !important;
        box-shadow: none;
    }

  .form-group {
      position: relative !important;
      margin-bottom: 1.5rem !important;
  }

  .form-control-placeholder {
      position: absolute !important;
      top: 0 !important;
      padding: 7px 0 0 13px !important;
      transition: all 200ms !important;
      opacity: 0.5 !important;
  }

  .form-control:focus+.form-control-placeholder,
  .form-control:valid+.form-control-placeholder {
      font-size: 90% !important;
      transform: translate3d(0, -100%, 0) !important;
      opacity: 1 !important;
  }

  .onoverlay {
      position: absolute !important;
      top: -1px !important;
      height: 11rem !important;
      right: -9px !important;
      bottom: 0px !important;
      width: 102.5% !important;
      border-top-right-radius: 0px !important;
      border-top-left-radius: 0px !important;
      border-bottom-right-radius: 123px !important;
      border-bottom-left-radius: 123px !important;
  }

  .headerTop {
      margin-top: -11rem !important;
      z-index: 10;
      color: white;
  }

  .display-5 {
      font-weight: 700;
  }

  .card-padding {
      width: 18rem;
      padding-top: 1px;
      border: 0px !important;
      padding-left: 1px;
      padding-right: 1px;
  }

  .text-simple {
      color: white;
      font-weight: normal;
      font-size: 1.2rem;
      word-spacing: 5px;
      font-stretch: ultra-expanded;
  }
  }

  .text-huge {
      font-size: 2.5rem;
  }

  .imgHeader {
      height: 11.8rem;
      margin-left: -31px;
      max-width: 1108px;
      width: 100%;
      min-width: 570px;
      border-bottom-left-radius: 141px;
      border-bottom-right-radius: 149px;
  }

  .maingo {
      padding: 28px;
      padding-left: 50px;
      padding-right: 50px;
  }
  .btn-danger {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}

.btn-danger:hover {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}
.bg-danger {
    background-color: #6d0000!important;
}
a {
    color: #6d0000;
    font-weight: 700;
}
a:hover {
    color: #6d0000b8;
    font-weight: 700;
}
  @media only screen and (min-width: 767px) {
      body {
          min-height: 100%;
          background-size: cover;
          box-shadow: inset 15px 33px 18px 2088px rgb(228 216 223 / 60%);
          margin-top: -48px;
          padding-top: 100px;
          padding-bottom: 100px !important;
      }
  }

  /* floating label // */

</style>
    <div class="container">
      <div class="row mt-5">
          <div class="col-md-6 m-auto bg-inner">
              <div class="container">
                  <div class="row">
                      <div class="col-md-12 text-center" style="height: 95px;">
                          <img class="card-img-top imgHeader" src="{{ asset('assets/web/img/background.jpg') }}"
                              alt="Card image cap">
                          <div class="innerup card-img-top"></div>
                          <div class="row">
                              <div class="col-md-8 m-auto text-center headerTop">
                                  <div class="col-md-12">
                                      <div class="headingContainer">
                                      </div>
                                      <h2 class="display-5 text-huge">JOIN <br> House Runs For Me</h2>
                                  </div>
                                  <div class="col-md-12 pt-3">
                                      <p class="text-simple">Make the most of your professional life</p>
                                  </div>
                                  <img src="{{ asset('assets/web/img/profile.png') }}" alt="profile"
                                      class="imgProfile shadow">
                              </div>
                          </div>
                      </div>
                  </div>
                  <form id="sellerForm" method="post" enctype="multipart/form-data" action="">
                    <div class="row mt-5">
                      <div class="col-md-11 ml-4 text-center">
                          <h5><b></b></h5>
                      </div>
                  </div>
                  <div class="form-group mt-5 row">
                      <div class="col-md-12 mt-5">
                          <input type="hidden" name="register_as" value="long_buyer">
                          <input type="hidden" name="role_id" value="3">
                          <label><b>Full Name</b></label>
                          <input type="text" class="form-control" required name="full_name">
                          <span class="text-danger"></span>
                      </div>
                  </div>
                  <div class="form-group row">
                      <div class="col-md-12">
                          <label><b>Address</b></label>
                          <input type="text" class="form-control" required name="address">
                          <span class="text-danger"></span>
                      </div>
                  </div>
                  <div class="form-group row">
                      <div class="col-md-12">
                          <label><b>Email</b></label>
                          <input type="email" class="form-control" required name="email">
                          <span class="text-danger"></span>
                      </div>
                  </div>
                  <div class="form-group row">
                      <div class="col-md-12">
                          <label><b>Phone Number</b></label>
                          <input type="number" class="form-control" required name="phoneNumber">
                          <span class="text-danger"></span>
                      </div>
                  </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label><b>Identify Proof</b></label>
                            <input type="number" class="form-control" required name="identifyProof">
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label><b>Password</b></label>
                            <input type="password" class="form-control" required name="password">
                            <span class="text-danger"></span>
                
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label><b>Confirm Password</b></label>
                            <input type="password" class="form-control" required name="confirm_password">
                            <span class="text-danger"></span>
                
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-white">
                            <div class="bg-danger p-2">
                                <h4>Profession Information</h4>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mt-5">
                        <div class="col-md-12">
                            <label><b>Qualification</b></label>
                        </div>
                        <div class="col-md-12 qualification-container">
                            <div class="qualification">
                              <button type="button" class="close d-none" id="qc" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                                <input type="text" class="form-control" placeholder="Degree" required name="degree[]">
                                <span class="text-danger"></span>
                
                                <input type="text" class="form-control" placeholder="Institution Name" required
                                    name="q_institution_name[]">
                                <span class="text-danger"></span>
                
                                <input type="text" class="form-control" placeholder="Major" required name="major[]">
                                <span class="text-danger"></span>
                
                                <input type="date" class="form-control" placeholder="Passing Year" required
                                    name="passing_year[]">
                                <span class="text-danger"></span>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="float-right w-30">
                                <a id="qualification-add" href="" class="btn btn-danger">ADD NEW</a>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label><b>Experience</b></label>
                        </div>
                        <div class="col-md-12 experiance-container">
                            <div class="experiance">
                              <button type="button" class="close d-none" id="ec" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                                <input type="text" class="form-control" placeholder="Company Name" required
                                    name="company_name[]">
                                <span class="text-danger"></span>
                
                                <input type="text" class="form-control" placeholder="Role" required name="role[]">
                                <span class="text-danger"></span>
                
                                <input type="text" class="form-control" placeholder="Adress" required name="address[]">
                                <span class="text-danger"></span>
                
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" placeholder="From" required
                                            name="from[]">
                                        <span class="text-danger"></span>
                
                                    </div>
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" placeholder="TO" required name="to[]">
                                        <span class="text-danger"></span>
                                    </div>
                                    <div class="col-md-12 mt-5">
                                      <label class="btn btn-danger">
                                        Choose File <input type="file" hidden required 
                                        onchange="$('#upload-file-info-ec').text(this.files[0].name)">
                                      </label>
                                      <span class='label label-info' id="upload-file-info-ec"></span>
                                      <span class="text-danger"></span>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="float-right w-30">
                                <a href="" id="experiance-add" class="btn btn-danger">ADD NEW</a>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label><b>Certificates</b></label>
                        </div>
                        <div class="col-md-12 certificate-container">
                            <div class="certificate">
                              <button type="button" class="close d-none" id="cc" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                                <input type="text" class="form-control" placeholder="Course/ Training Name" required
                                    name="course_name[]">
                                <span class="text-danger"></span>
                                <input type="text" class="form-control" placeholder="Institution Name" required
                                    name="institution[]">
                                <span class="text-danger"></span>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" placeholder="From" required
                                            name="institution_from[]">
                                        <span class="text-danger"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" placeholder="TO" required
                                            name="institution_to[]">
                                        <span class="text-danger"></span>
                                    </div>
                                    <div class="col-md-12 mt-5">
                                      <label class="btn btn-danger">
                                        Choose File <input type="file" hidden required 
                                        onchange="$('#upload-file-info-cc').text(this.files[0].name)">
                                      </label>
                                      <span class='label label-info' id="upload-file-info-cc"></span>
                                      <span class="text-danger"></span>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="float-right w-30">
                                <a href="" id="certificate-add" class="btn btn-danger">ADD NEW</a>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-danger btn-block">Submit</button>
                        </div>
                    </div>
                </form>
                  <div class="row form-group">
                      <div class="col-md-9 offset-md-3" style="text-align: end;">
                          Already on House Runs For Me? <span class="text-primary"><a href="{{url('signIn')}}">Sign
                                  in</a></span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $("#qualification-add").click(function(e) {
                e.preventDefault();
                $("#qc").removeClass("d-none");
                let qualification = $("div.qualification").eq(0).clone();
                qualification.find('input').val("");
                qualification.appendTo('div.qualification-container');
            });
            $(document).on('click','#qc',function(){
              if ($('div.qualification').length > 1) {
                $(this).parents('div.qualification').remove();
                } else {
                $("#qc").addClass("d-none");

                }
            });
            $("#experiance-add").click(function(e) {
                e.preventDefault();
                $("#ec").removeClass("d-none");
                let experiance = $("div.experiance").eq(0).clone();
                experiance.find('input').val("");
                experiance.find('input').name("");
                experiance.appendTo('div.experiance-container');
            });
            $(document).on('click','#ec',function(){
              if ($('div.experiance').length > 1) {
                $(this).parents('div.experiance').remove();
                } else {
                $("#ec").addClass("d-none");

                }
            });
            $("#certificate-add").click(function(e) {
                e.preventDefault();
                $("#cc").removeClass("d-none");
                let certificate = $("div.certificate").eq(0).clone();
                certificate.find('input').val("");
                certificate.appendTo('div.certificate-container');
            });
            $(document).on('click','#cc',function(){
              if ($('div.certificate').length > 1) {
                $(this).parents('div.certificate').remove();
                } else {
                $("#cc").addClass("d-none");

                }
            });
            
        });

    </script>
    <script>
        // var certificates = document.getElementById("certificateArea");
        // var projects = document.getElementById("projectArea");
        // var services = document.getElementById("serviceArea");
        // function duplicateCertificate() {
        //   var certifictes = certificates.cloneNode(true)
        //   var attrC = certifictes.querySelectorAll("input")
        //   for (let i = 0; i < attrC.length; i++) {
        //     attrC[i].value = null
        //   }
        //   document.getElementById("certificatesMain").appendChild(certifictes)
        // }
        // function duplicateProject() {
        //   var project = projects.cloneNode(true)
        //   var attrP = project.querySelectorAll("input")
        //   for (let i = 0; i < attrP.length; i++) {
        //     attrP[i].value = null
        //   }
        //   document.getElementById("projectMain").appendChild(project)
        // }
        // function duplicateService() {
        //   var service = services.cloneNode(true)
        //   var attrS = service.querySelectorAll("input")
        //   for (let i = 0; i < attrS.length; i++) {
        //     attrS[i].value = null
        //   }
        //   document.getElementById("serviceMain").appendChild(service)
        // }

    </script>
@endsection