@extends('front.practitioner.import.template.import')
@section('content')
<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />
<div class="container-fluid">
   <div class="row">
      <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
         <a class=" p-0" href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
         <a class="navbar-brand p-0 " href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
         <h1 class="page-title eagle-font font-400 "><span class="arca-font"> </span>Add team member</h1>

      </nav>
      <!-- @include( 'front.practitioner.import.include.navbar' ) -->
      <div class="brdr-bttm w-100"></div>
   </div>
</div>

<form method="POST" name="addTeamMemberForm" id="addTeamMemberForm" action="{{route('practitioner.business.store_new_member')}}">
   @csrf
   <input type="hidden" id="ser_cel_id" name="ser_cel_id" value="{{ Request::get('id') }}">
   <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
      <div class="add-team-member mb-5">
         <div class="boxwhite padd-sm mt-20">
            <div class="card ">

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label class="">Title</label>
                     </div>
                     <div class="col-lg-2 col-md-3 col-sm-2 col-4 customdroppdown gray-brdr line-dropdown teamMemberTitle">
                        <div class="form-group border-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                           <select id="name_prefix" name="name_prefix" class="form-control selectboxli">
                              <option hidden>Title</option>
                              <option value="Mr">Mr</option>
                              <option value="Mrs">Mrs</option>
                              <option value="Ms">Ms</option>
                              <option value="Miss">Miss</option>
                              <option value="Master">Master</option>
                              <option value="Doctor">Doctor</option>
                              <option value="None">None</option>
                              <option value="Other">Other</option>
                           </select>
                           <span class="invalid-feedback d-block"></span>
                        </div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>First name <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group ">
                           <input type="text" name="first_name" class="form-control mt-3" />
                        </div>
                        <span class="invalid-feedback d-block"></span>
                        <div id="div-first_name"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Last name <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="last_name" class="form-control mt-3">
                        </div>
                        <div id="div-last_name"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Email <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="email" class="form-control mt-3">
                        </div>
                        <span class="invalid-feedback d-block"></span>
                        <div id="div-email"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Timezone <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="">
                           <select id="timezone" name="timezone" class="form-control filter-dropdown-select2">
                              <option selected disabled>Select user's timezone</option>
                              @foreach( $timezone as $key => $val )
                              <option @if( $parentTimezone==$val ) Selected @endif value="{{$val}}">{{$val}}</option>
                              @endforeach
                           </select>
                        </div>
                        <div id="div-timezone"></div>
                     </div>
                  </div>
               </div>
               @if(base64_decode(Request::get('id')) != 'admin')
                  <div class="label-input" id="profession_section">
                     <div class="row align-items-center">
                        <div class="col-lg-4 col-md-6">
                           <label>Profession/s <span class="required_span">*</span></label>
                        </div>
                        <div class="col-lg-8 col-md-6">
                           <div class="select2-multiple-autoselect">
                              <select class="profession-dd" name="profession[]"  multiple="multiple">
                                 @foreach($professions as $profession)
                                 <option  value="{{$profession->id}}">{{$profession->name}}</option>
                                 @endforeach
                              </select>
                           </div>
                           <div id="div-profession"></div>
                        </div>
                     </div>
                  </div>
               @endif
               <div class="label-input define-role d-none">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label class="d-inline">Define role <span class="send-client-btn-geo client_access_file_btn cursor-pointer"><img src="{{asset('assets/images/information_icon_blue.svg')}}" alt="" class="img-fluid info-icon "></span></label>
                        <div class="send-client-box-geo client_access_file_toggle">
                           <div class="media">
                              <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2" alt="...">
                              <div class="media-body">
                                 <h5 class="mt-0 text-left text-navy">Admin will not be assigned their own calendar</h5>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="single-tittle">
                           <ul class="age-title p-0 d-sm-flex justify-content-sm-end">