@extends('buyers_sellers.layout2.master')
@section('title', 'Edit Profile')
@section('content')
    <style type="text/css">
        .profileimage {
            height: 146px;
            width: 152px;
            object-fit: fill;
        }

        .uploadbtn {
            margin-left: -8px !important;
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
        }
        .row.upload-photo {
    height: 45px;
    padding: 7px 30px;
    border-radius: 10px;
    margin-left: 2px;
    width: 100%;
    border-color: grey;
    /* border: 1px solid grey; */
    border: 1px solid #ccc;
    /* width: 325px; */
}
    </style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <div class=" pull-left">
                        <div class="page-title">Service Provider Profile Edit</div>
                    </div>
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ route('seller.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        {{-- <li><a class="parent-item" href="">UI Elements</a>&nbsp;<i class="fa fa-angle-right"></i> --}}
                        </li>
                        <li class="active">Profile Edit</li>
                    </ol>
                </div>
            </div>
            <div class="py-4">
                <div class="container">
                    <form method="POST" action="{{ route('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">
                                        <header class="m-0 bold">Edit Basic Info</header>
                                        </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">
                                            <div class="col-md-6">
                                                <div class="p-4 d-flex align-items-center">
                                                    @if (Auth::user()->profile == null)
                                                        <img src="{{ asset('assets/buyers_sellers/img/p13.png') }}"
                                                            class="img-fluid-circle profileimage border"
                                                            alt="Responsive image">
                                                    @else
                                                        <img src="{{ asset('Seller/Profile/' . Auth::user()->profile) }}"
                                                            class="img-fluid-circle profileimage border"
                                                            alt="Responsive image">
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                            <div class="form-group m-5">
                                                    <label for="selectservice" class="bold">Profile Image (jpg,
                                                        png)</label><br>
                                                    <input type="file" accept="image/jpg" name="profile_image"
                                                        class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn" />
                                                    <p class="text-danger"><b></b></p>
                                            </div>
                                            </div>
                                        </div>
                                <!-- <div  class="form-group col-md-3">
                                    <label for="selectservice" class="bold">Select Nearest
                                        Town</label>
                                    <select class="custom-select form-control" name="Town">
                                        <option value="">Select Town</option>
                                        @foreach ($towns as $town)
                                            <option value="{{ $town->id }}">{{ $town->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <p class="text-danger"><b>@error('Town') {{ $message }}
                                            @enderror</b></p>
                                </div> -->

                                        <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 bold">
                                                        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">
                                                        <small class="form-text text-muted">Displayed on Your public
                                                            profile, notifications and other places.</small>
                                                    </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 bold">
                                                        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">
                                                        <small class="form-text text-muted">Displayed on Your public
                                                            profile, notifications and other places.</small>
                                                    </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 bold">
                                                        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>
                                                        <small class="form-text text-muted">We'll never share Your email
                                                            with anyone else.</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Input -->
                                            <!-- Input -->
                                            <div class="col-sm-6 mb-2">
                                                <div class="js-form-message">
                                                    <label id="phoneNumberLabel" class="form-label bold">
                                                        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">
                                                    </div>
                                                </div>
                                                <!-- <a class="d-inline-block u-text-muted" href="#">
                                        <span class="mr-1">+</span>
                                        Add phone number
                                        </a> -->
                                            </div>
                                            <!-- End Input -->
                                        </div>

                                        <div class="row">
                                            <!-- Input -->
                                            <!-- <div class="col-sm-6 mb-2">
                                                <div class="js-form-message">
                                                    <label id="date_of_birth" class="form-label bold">
                                                        Date of Birth
                                                        <span class="text-danger">*</span>
                                                    </label>
                                                    <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" 
                                                            aria-describedby="phoneNumberLabel"
                                                            data-msg="Please enter a valid phone number"
                                                            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="comment" class="form-label bold">
                                                    Enter your comment
                                                        <span class="text-danger">*</span>
                                                    </label>
                                                    <div class="form-group">
                                                        <input class="form-control" type="text" name="comment"
                                                            value="{{ $data->comment }}"
                                                            placeholder="5 years experience in.."
                                                            aria-label="Enter Your comment" 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>
                                        <div class="row">
                                            <!-- Input -->
                                            <div class="col-sm-6 mb-2">
                                                <div class="js-form-message">
                                                    <label id="identifyproof" class="form-label bold">
                                                        Identify Proof
                                                        <span class="text-danger">*</span>
                                                    </label>
                                                    <div class="form-group">
                                                        <div class="row upload-photo" >
                                      

                                        
                                                            <div class="col-md-4"> 
                                                        <p><button type="button" class="bton" onclick="browseclick();" style="border-radius: 25px;">Choose File</button></p>
                                                         <input type="file" class="form-control file" name="proofs[]" id="getfile"  style="margin-top: 20px !important;display:none;" 
                                                          multiple >
                                                        <span class="text-danger" style="color: red;" >{{ $errors->first('proofs') }}</span>
                                                      </div>
                                                      <div class="col-md-8 ">
                                                         <b style="color:#737373"> Upload Photo ID</b>
                                                       </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <p id="imagename"></p>
                                                      </div>
                                                        {{-- <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 bold">
                                                        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">
                                                        <div class="row">
                                                            <div class="col-sm-6 mb-4">
                                                                <label id="FROM"
                                                                    class="form-label bold">Qualification</label>
                                                                <span class="text-danger">*</span>
                                                            </div>
                                                            <div class="col-sm-6 mb-4 text-right">
                                                                <a id="qual" class="btn btn-danger d-none"><i
                                                                        class="fa fa-trash"></i></a>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 mb-4">
                                                                <div class="form-group">
                                                                    <label for="major" class="bold">Major Subject</label>
                                                                    <input type="text" class="form-control" name="major[]"
                                                                        value="{{ $qualifcation->major }}"
                                                                        placeholder="Enter Your Major Subject" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6 mb-4">
                                                                <div class="form-group">
                                                                    <label for="institute" class="bold">Institute
                                                                        Name</label>
                                                                    <input type="text" class="form-control"
                                                                        name="q_institution_name[]"
                                                                        value="{{ $qualifcation->institution_name }}"
                                                                        placeholder="Enter Your Institute Name">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 mb-4">
                                                                <div class="form-group">
                                                                    <label for="degree" class="bold"> Degree</label>
                                                                    <input type="text" class="form-control" name="degree[]"
                                                                        value="{{ $qualifcation->degree }}"
                                                                        placeholder="Enter Your Degree Name">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6 mb-4">
                                                                <div class="form-group">
                                                                    <label id="positionLabel"
                                                                        class="form-label bold">Passing Year</label>
                                                                    <input type="date" class="form-control"
                                                                        name="passing_year[]"
                                                                        value="{{ $qualifcation->passing_year }}"
                                                                        placeholder="Enter Your Passing Year"
                                                                        aria-label="Enter Your Passing Year"
                                                                        aria-describedby="positionLabel">
                                                                </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 bold">Qualification</label>
                                                            <span class="text-danger">*</span>
                                                        </div>
                                                        <div class="col-sm-6 mb-4 text-right">
                                                            <a id="qual" class="btn btn-danger d-none"><i
                                                                    class="fa fa-trash"></i></a>
                                                        </div>
                                                    </div>
                                                </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>
                                        </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">
                                                        <div class="row">
                                                            <div class="col-sm-6 mb-4">
                                                                <label id="FROM" class="form-label bold">Experience</label>
                                                                <span class="text-danger">*</span>
                                                            </div>
                                                            <div class="col-sm-6 mb-4 text-right">
                                                                <a id="exp" class="btn btn-danger d-none"><i
                                                                        class="fa fa-trash"></i></a>
                                                            </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="Enter Your Company Name" 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="Enter Your Role">
                                                                </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="Enter Your Company Adress">
                                                                </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 bold">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="" aria-label=""
                                                                                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 bold">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="" aria-label=""
                                                                                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">
                                                            <label id="FROM" class="form-label bold">Experience</label>
                                                            <span class="text-danger">*</span>
                                                        </div>
                                                        <div class="col-sm-6 mb-4 text-right">
                                                            <a id="exp" class="btn btn-danger d-none"><i
                                                                    class="fa fa-trash"></i></a>
                                                        </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="Enter Your Company Name" 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="Enter Your Role">
                                                            </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="Enter Your Company Address">
                                                            </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 bold">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=""
                                                                            aria-label="" 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 bold">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="" aria-label=""
                                                                            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">
                    <h3 class="m-0 bold">Certificates
                    </h3>
                    <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">
                                                        <div class="row">
                                                            <div class="col-sm-6 mb-4">
                                                                <label id="FROM"
                                                                    class="form-label bold">Certificates</label>
                                                                <span class="text-danger">*</span>
                                                            </div>
                                                            <div class="col-sm-6 mb-4 text-right">
                                                                <a id="cer" class="btn btn-danger d-none"><i
                                                                        class="fa fa-trash"></i></a>
                                                            </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="Enter Your Course Name">
                                                                </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="Enter Your College Name">
                                                                </div>
                                                                <!-- End Input -->
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group d-flex">
                                                                    <label for="selectservice" class="bold">Upload
                                                                        Certificate (jpg,
                                                                        png)</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 bold">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="" aria-label=""
                                                                                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 bold">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="" aria-label=""
                                                                                aria-describedby="positionLabel">
                                                                        </div>
                                                                    </div>
                                                                    <!-- End Input -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                    </div>

                                                @endforeach
                                            @else
                                                <div class="certificate">
                                                    <div class="row">
                                                        <div class="col-sm-6 mb-4">
                                                            <label id="FROM" class="form-label bold">Certificates</label>
                                                            <span class="text-danger">*</span>
                                                        </div>
                                                        <div class="col-sm-6 mb-4 text-right">
                                                            <a id="cer" class="btn btn-danger d-none"><i
                                                                    class="fa fa-trash"></i></a>
                                                        </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="Enter Your Course Name">
                                                            </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="Enter Your College Name">
                                                            </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 bold">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="" aria-label=""
                                                                            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 bold">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=""
                                                                            aria-label="" aria-describedby="positionLabel"
                                                                            >
                                                                    </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);
        })
        function browseclick(){
    var fileinput = document.getElementById("getfile");  // use input file id here
    fileinput.click();
    // console.log(fileinput.value);
    // document.getElementById('imagename').innerText(fileinput.value); 
}
$(document).ready(function(){
    $('#getfile').on('change',function(){
        var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
        $('#imagename').text(filename);
    });
});
    </script>
@endsection