@extends('admin.layouts.master')
@section('title', 'Edit Profile')
@section('content')
<style type="text/css">
.profileimage{
   height: 146px;
   width: 152px;
   object-fit: fill;
   }
.uploadbtn{
  margin-left: -8px !important;
}
</style>
<div class="page-content-wrapper">
   <div class="page-content">
    <div class="py-4">
    <div class="container">
    <form method="POST" action="{{route('admin.seller.profile.update')}}" enctype='multipart/form-data'>
        <div class="row">

            <main class="col-md-12">
                <div class="border  bg-white mb-3">
                <div class="box-title border-bottom p-3">
                    <h6 class="m-0">Edit Basic Info</h6>
                    </p>
                    <div class="alert alert-danger alert-dismissible fade" role="alert" style="color:white">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <strong>Error! </strong>
                    </div>
                </div>
                <div class="color-border-bottom-edit"></div>
                <div class="box-body p-3">
                    <form class="js-validate" action="{{ route('seller.profile.update') }}" novalidate="novalidate" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <!-- Input -->

                            <input type="hidden" name="user_id" value="{{ $data->id }}">
                            <div class="col-sm-12 mb-4">
                            <div class="js-form-message">
                                <label id="nameLabel" class="form-label">
                                Full Name
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="full_name" value="{{ $data->full_name }}" placeholder="Enter your name" aria-label="Enter your name" required="" aria-describedby="nameLabel" data-msg="Please enter your name." data-error-class="u-has-error" data-success-class="u-has-success">
                                            <p class="text-danger">@error('full_name') {{$message}} @enderror</p>
                                </div>
                            </div>
                            </div>
                            <!-- End Input -->
                        </div>
                        <div class="row">
                            <!-- Input -->
                            <input type="hidden" name="id" value="">
                            <div class="col-sm-12 mb-4">
                            <div class="js-form-message">
                                <label id="address" class="form-label">
                                Address 
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="full_address"  value="{{ $data->address }}" placeholder="Enter your address" aria-label="Enter your address" required="" aria-describedby="addressLabel" data-msg="Please enter your address." data-error-class="u-has-error" data-success-class="u-has-success">
                                            <p class="text-danger">@error('full_address') {{$message}} @enderror</p>
                                </div>
                            </div>
                            </div>
                            <!-- End Input -->
                        </div>
                        <div class="row">
                            <!-- Input -->
                            <div class="col-sm-6 mb-2">
                            <div class="js-form-message">
                                <label id="emailLabel" class="form-label">
                                Email address
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                    <input type="email" class="form-control" name="email" value="{{ $data->email }}" placeholder="Enter your email address" aria-label="Enter your email address" required="" aria-describedby="emailLabel" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success" readonly>
                                            <p class="text-danger">@error('email') {{$message}} @enderror</p>
                                </div>
                            </div>
                            </div>
                            <!-- End Input -->
                            <!-- Input -->
                            <div class="col-sm-6 mb-2">
                            <div class="js-form-message">
                                <label id="phoneNumberLabel" class="form-label">
                                Phone number
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                    <input class="form-control" type="tel" name="phone_number" value="{{ $data->phone_number }}"  placeholder="Enter your phone number" aria-label="Enter your phone number" required="" aria-describedby="phoneNumberLabel" data-msg="Please enter a valid phone number" data-error-class="u-has-error" data-success-class="u-has-success">
                                            <p class="text-danger">@error('phone_number') {{$message}} @enderror</p>

                                </div>
                            </div>
                            <!-- <a class="d-inline-block u-text-muted" href="#">
                            <span class="mr-1">+</span>
                            Add phone number
                            </a> -->
                            </div>
                            <!-- End Input -->
                        </div>
                        <label class="form-label">
                        Birth date
                        <span class="text-danger">*</span>
                        </label>
                        <div class="row">
                            <!-- Input -->
                            <div class="col-md-6 mb-3 mb-sm-6">
                            <div class="js-form-message">
                                <div class="form-group">
                                    <input class="form-control" type="date" name="birt_date" value="{{ $data->birth_date}}" placeholder="Enter your phone number" aria-label="Enter your phone number" required="" aria-describedby="phoneNumberLabel" data-msg="Please enter a valid phone number" data-error-class="u-has-error" data-success-class="u-has-success">
                                            <p class="text-danger">@error('birt_date') {{$message}} @enderror</p>

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

                            <!-- End Input -->
                        </div>
                        <div class="row">
                            <!-- Input -->
                            <div class="col-sm-6 mb-2">
                            <div class="js-form-message">
                                <label id="identifyproof" class="form-label">
                                    Identify Proof
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                <input type="text" class="form-control" name="identifyproof" value="{{ $data->id_prof}}" placeholder="Enter your identify proof name" aria-label="Enter your identify proof name" required="" aria-describedby="identify proof" data-msg="Please enter your identify proof name" data-error-class="u-has-error" data-success-class="u-has-success">
                                </div>
                            </div>
                            </div>
                            <!-- End Input -->
                            <!-- Input -->
                            <div class="col-sm-6 mb-2">
                            <div class="js-form-message">
                                <label id="service offered" class="form-label">
                                    Service Offered
                                <span class="text-danger">*</span>
                                </label>
                                <div class="form-group">
                                    <input class="form-control" type="text" name="service_offered"  value="{{ $data->service_offer}}" placeholder="Enter your service offered" aria-label="Enter your service offered" required="" aria-describedby="serviceofferedlabel" data-msg="Password enter a valid position" data-error-class="u-has-error" data-success-class="u-has-success">
                                </div>
                            </div>
                            </div>
                            <!-- End Input -->
                        </div>
                    </form>
                </div>
                </div>
                
                
                <div class="border  bg-white mb-3">
                    
                <div class="color-border-bottom-edit"></div>
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="qualification-container">
                        
                        @if(isset($data->Qualifications) && count($data->Qualifications)>0)
                            @foreach ($data->Qualifications as $qualifcation )  
                                <input type="hidden" value="{{ $qualifcation->id }}" name="qualifaction_id[]"> 
                            <div class="qualification">
                                <button type="button" id="qual" class="close d-none">×</button>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <label id="FROM" class="form-label">Qualification</label>
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="major[]" value="{{ $qualifcation->major }}"  placeholder="Senior offshore Structural Engineer" required>
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="q_institution_name[]" value="{{ $qualifcation->institution_name }}" placeholder="Hamad bin khalifa University">
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="degree[]" value="{{ $qualifcation->degree }}" placeholder="Master's programmes">
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                        <div class="col-sm-6 mb-4">
                                        <div class="row">
                                            <div class="col-sm-4 mb-2">
                                                <label id="positionLabel" class="form-label" >Passing Year</label>
                                            </div>
                                            <div class="col-sm-8 mb-4">
                                                <!-- Input -->
                                                <div class="input-group">
                                                    <input type="date" class="form-control" name="passing_year[]" value="{{ $qualifcation->passing_year }}" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                                </div>
                                            </div>
                                                <!-- End Input -->
                                        </div>
                                        </div>
                                </div>
                                <hr>
                            </div>
                            @endforeach
                        @else 
                            <div class="qualification">
                            <div class="row">
                                <div class="col-sm-6 mb-4">

                                    <label id="FROM" class="form-label">Qualification</label>
                                </div>
                                                                <button type="button" id="cer" class="close d-none">×</button>

                                <div class="col-sm-6 mb-4">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                    <input type="text" class="form-control" name="major[]" value=""  placeholder="Senior offshore Structural Engineer" required>
                                    </div>
                                    <!-- End Input -->
                                </div>
                                <div class="col-sm-6 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="q_institution_name[]" value="" placeholder="Hamad bin khalifa University">
                                    </div>
                                    <!-- End Input -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                    <input type="text" class="form-control" name="degree[]" value="" placeholder="Master's programmes">
                                    </div>
                                    <!-- End Input -->
                                </div>
                                    <div class="col-sm-6 mb-4">
                                        <div class="row">
                                        <div class="col-sm-4 mb-2">
                                            <label id="positionLabel" class="form-label" >Passing Year</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                            <!-- Input -->
                                            <div class="input-group">
                                                <input type="date" class="form-control" name="passing_year[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                            </div>
                                        </div>
                                            <!-- End Input -->
                                        </div>
                                    </div>
                            </div>
                            <hr>
                            </div>
                        @endif
                    </div>
                    <div class="row">
                        <div class="col-sm-10 mb-6">
                        </div>
                        <div class="col-sm-2 mb-2">
                            <button type="button" class="btn btn-theme btn-sm" id="qualification-add">ADD NEW <i class="feather-plus"></i></button>
                        </div>
                        <!-- End Input -->
                    </div>
                </div>
                </div>
                
            
                <div class="border  bg-white mb-3">
                <div class="box-title border-bottom p-3">
                    <h6 class="m-0">Experience
                    </h6>
                    <p class="mb-0 mt-0 small">Tell about your work, job and other experience.
                    </p>
                </div>
                <div class="color-border-bottom-edit"></div>
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="experiance-container">
                            @if(isset($data->experiences) && count($data->experiences)>0)
                            @foreach ($data->experiences as $experienc )  
                                <input type="hidden" value="{{ $experienc->id }}" name="experiences_id[]"> 
                                <div class="experiance">
                                <button type="button" id="exp" class="close d-none">×</button>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <label id="FROM" class="form-label">Experience</label>
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="company_name[]" value="{{ $experienc->company_name }}" placeholder="Lamprell Energy Ltd" required >
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="role[]" value="{{ $experienc->role }}" placeholder="Project Site Engineer">
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="text" class="form-control" name="address[]" value="{{ $experienc->address }}" placeholder="Dubai-United Arab Emirates">
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 mb-4">
                                        <div class="row">
                                        <div class="col-sm-4 mb-2">
                                            <label id="positionLabel" class="form-label">From</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                            <!-- Input -->
                                            <div class="input-group">
                                            <input type="date" class="form-control" name="from[]" value="{{ $experienc->from }}" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                            </div>
                                        </div>
                                            <!-- End Input -->
                                        </div>
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <div class="row">
                                        <div class="col-sm-4 mb-2">
                                            <label id="positionLabel" class="form-label">To</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                            <!-- Input -->
                                            <div class="input-group">
                                            <input type="date" class="form-control" name="to[]" value="{{ $experienc->to }}" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                            </div>
                                        </div>
                                            <!-- End Input -->
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            @endforeach
                        @else 
                        <div class="experiance">
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <button type="button" id="cer" class="close d-none">×</button>

                                <label id="FROM" class="form-label">Experience</label>
                            </div>
                            <div class="col-sm-6 mb-4">
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                <input type="text" class="form-control" name="company_name[]" value="" placeholder="Lamprell Energy Ltd" required >
                                </div>
                                <!-- End Input -->
                            </div>
                            <div class="col-sm-6 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                <input type="text" class="form-control" name="role[]" value="" placeholder="Project Site Engineer">
                                </div>
                                <!-- End Input -->
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-12 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                <input type="text" class="form-control" name="address[]" value="" placeholder="Dubai-United Arab Emirates">
                                </div>
                                <!-- End Input -->
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">From</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="from[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">To</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="to[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            </div>
                            <hr>
                        </div>
                        @endif
                            {{-- <div class="experiance">
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <label id="FROM" class="form-label">Experience</label>
                                </div>
                                <div class="col-sm-6 mb-4">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <!-- Input -->
                                    <input type="hidden" name="experience_id[]" >
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="company_name[]" placeholder="Lamprell Energy Ltd" required>
                                    </div>
                                    <!-- End Input -->
                                </div>
                                <div class="col-sm-6 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="role[]" placeholder="Project Site Engineer">
                                    </div>
                                    <!-- End Input -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="address[]" placeholder="Dubai-United Arab Emirates">
                                    </div>
                                    <!-- End Input -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <div class="row">
                                        <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">From</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                            <input type="date" class="form-control" name="from[]" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-4">
                                    <div class="row">
                                        <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">To</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                            <input type="date" class="form-control" name="to[]" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                            </div>
                            <hr>
                            </div> --}}
                    </div>
                    <div class="row">
                        <div class="col-sm-10 mb-6">
                        </div>
                        <div class="col-sm-2 mb-2">
                            <button type="button" id="experiance-add" class="btn btn-theme btn-sm">ADD NEW <i class="feather-plus"></i></button>
                        </div>
                        <!-- End Input -->
                    </div>
                </div>
                </div>  
                
                <div class="border  bg-white mb-3">
                <div class="box-title border-bottom p-3">
                    <h6 class="m-0">Certificates
                    </h6>
                    <p class="mb-0 mt-0 small">Tell about your work, job and other certificates.
                    </p>
                </div>
                <div class="color-border-bottom-edit"></div>
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="certificate-container">
                        @if(isset($data->certificates) && count($data->certificates)>0)
                        @foreach ($data->certificates as $certificate )  
                            <div class="certificate">
                            <button type="button" id="cer" class="close d-none">×</button>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <label id="FROM" class="form-label">Certificates</label>
                                </div>
                                <div class="col-sm-6 mb-4">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb-4">
                                    <!-- Input -->
                                    <input type="hidden" value="{{ $certificate->id }}" name="certificate_id[]"> 
                                    <div class="input-group">
                                    <input type="text" class="form-control" name="course_name[]" value="{{ $certificate->course_name }}" placeholder="Steel Structural Engineer" required>
                                    </div>
                                    <!-- End Input -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4 mb-4">
                                    <!-- Input -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="institution[]" value="{{ $certificate->institution }}" placeholder="College of North Atlantic Qatar">
                                    </div>
                                    <!-- End Input -->
                                </div>
                                <div class="col-sm-6 mb-4">
                                    <div class="form-group row"> 
                                        <label class="col-sm-5 mb-3" for="">Upload Certificate</label>
                                        <!-- <div class=""> -->
                                        <input type="file" name="course_image[]"  class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn">
                                        <!-- </div> -->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-4">
                                    <div class="row">
                                        <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">From</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                            <input type="date" class="form-control" name="institution_from[]" value="{{ $certificate->institution_from }}" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-4">
                                    <div class="row">
                                        <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">To</label>
                                        </div>
                                        <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                            <input type="date" class="form-control" name="institution_to[]" value="{{ $certificate->institution_to }}" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                        </div>
                                        <!-- End Input -->
                                    </div>
                                </div>
                            </div>
                            <hr>
                            </div>
                            
                        @endforeach
                        @else 
                        <div class="certificate">
                            <button type="button" id="cer" class="close d-none">×</button>

                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <label id="FROM" class="form-label">Certificates</label>
                            </div>
                            <div class="col-sm-6 mb-4">
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-12 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                <input type="text" class="form-control" name="course_name[]" value="" placeholder="Steel Structural Engineer" required>
                                </div>
                                <!-- End Input -->
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-4 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                    <input type="text" class="form-control" name="institution[]" value="" placeholder="College of North Atlantic Qatar">
                                </div>
                                <!-- End Input -->
                            </div>
                            <div class="col-sm-6 mb-4">
                                <div class="form-group row"> 
                                    <label class="col-sm-5 mb-3" for="">Upload Certificate</label>
                                    <!-- <div class=""> -->
                                        <input type="file" name="course_image[]" class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn" required>
                                    <!-- </div> -->
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">From</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="institution_from[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel" required>
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">To</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="institution_to[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel" required>
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            </div>
                            <hr>
                        </div>
                        
                        @endif
                        {{-- <div class="certificate">
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <label id="FROM" class="form-label">Certificates</label>
                            </div>
                            <div class="col-sm-6 mb-4">
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-12 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                <input type="text" class="form-control" name="course_name[]" value="" placeholder="Steel Structural Engineer" required>
                                </div>
                                <!-- End Input -->
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-4 mb-4">
                                <!-- Input -->
                                <div class="input-group">
                                    <input type="text" class="form-control" name="institution[]" value="" placeholder="College of North Atlantic Qatar">
                                </div>
                                <!-- End Input -->
                            </div>
                            <div class="col-sm-6 mb-4">
                                <div class="form-group row"> 
                                    <label class="col-sm-5 mb-3" for="">Upload Certificate</label>
                                    <!-- <div class=""> -->
                                        <input type="file" name="course_image[]" class="btn btn-primary btn-sm col-sm-7 mb-3 w-50 uploadbtn">
                                    <!-- </div> -->
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">From</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="institution_from[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            <div class="col-sm-6 mb-4">
                                <div class="row">
                                    <div class="col-sm-4 mb-2">
                                        <label id="positionLabel" class="form-label">To</label>
                                    </div>
                                    <div class="col-sm-8 mb-4">
                                        <!-- Input -->
                                        <div class="input-group">
                                        <input type="date" class="form-control" name="institution_to[]" value="" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                                        </div>
                                    </div>
                                        <!-- End Input -->
                                </div>
                            </div>
                            </div>
                            <hr>
                        </div> --}}
                    </div>
                    <div class="row">
                        <div class="col-sm-10 mb-6">
                        </div>
                        <div class="col-sm-2 mb-2">
                            <button type="button" id="certificate-add" class="btn btn-theme btn-sm">ADD NEW <i class="feather-plus"></i></button>
                        </div>
                        <!-- End Input -->
                    </div>
                </div>
                </div>
                {{-- <div class="border  bg-white mb-3">
                <div class="box-title border-bottom p-3">
                    <h6 class="m-0">Update Passwords
                    </h6>
                    <p class="mb-0 mt-0 small">Update your password
                    </p>
                </div>
                <div class="color-border-bottom-edit"></div>
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="row">
                        <div class="col-sm-6 mb-4">
                            <!-- Input -->
                            <div class="input-group">
                            <input type="password" name="password" class="form-control" placeholder="Password">
                            </div>
                            <!-- End Input -->
                        </div>
                        <div class="col-sm-6 mb-4">
                            <!-- Input -->
                            <div class="input-group">
                            <input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password">
                            </div>
                            <!-- End Input -->
                        </div>
                    </div>
                </div>
                </div> --}}

                <div class="border  bg-white mb-3">
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="row">
                        <div class="col-sm-8 mb-6">
                        </div>
                        {{-- <div class="col-sm-2 mb-2">
                            <button type="submit" class="btn btn-primary btn-lg">Cancel</button>
                        </div> --}}
                        <div class="col-sm-2 mb-2">
                            <button type="submit" class="btn btn-theme btn-md">Update Info</button>
                        </div>
                        <!-- End Input -->
                    </div>
                </div>
                </div> 

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

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

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

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

                }
            });
      function readURL(input) {
         if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function(e) {
               $('.profileimage').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]); // convert to base64 string
         }
      }

      $("#fileAttachmentBtn").change(function() {
      readURL(this);
      });

      function previewImages() {
        var $preview = $('#preview').empty();
        if (this.files) $.each(this.files, readAndPreview);

           function readAndPreview(i, file) {
            
             if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
               return alert(file.name +" is not an image");
              } // else...
            
              var reader = new FileReader();

              $(reader).on("load", function() {
                 $preview.append($("<img/>", {src:this.result, height:100}));
               });

               reader.readAsDataURL(file);
            }
         }

         $('#file-input').on("change", previewImages);
   })
</script>
@endsection