@extends('layouts.teacher')

@section('content')
    <!--App-Content-->
    <!--Section-->
    <section class="bg-primary">
        <div class="sptb-2 bannerimg">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="text-center text-white py-7">
                        <h1 class="">{{auth()->user()->first_name . ' ' .auth()->user()->last_name}}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Section-->
    <!-- Shape Start -->
    <div class="relative">
        <div class="shape overflow-hidden text-white">
            <svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#f5f4f9"></path>
            </svg>
        </div>
    </div>
    <!--Shape End-->
    <div class="app-content my-3 my-md-5">
        <!--User Profile-->
		<section class="sptb  profile-1">
			<div class="container">
				<div class="row">
                    @include('admin.errors.form-errors')
					<div class="col-lg-3">
						<div class="card">
							<div class="card-body pattern-3">
								<div class="wideget-user">
									<div class="row">
										<div class="col-lg-12 col-md-12">
											<div class="wideget-user-desc text-center">
												<div class="wideget-user-img">
                                                    @if (auth()->user()->image)
                                                        <img class="thumbnail me-3 w-100" alt="{{auth()->user()->first_name}}"
                                                            src="{{ auth()->user()->getImage(auth()->user()->image) }}">
                                                    @else
                                                        <img class="brround" alt="avatra-img"
                                                            src="{{ env('SECURE_ASSETS').'/images/users/user_profile.png' }}">
                                                    @endif
												</div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
                        <div class="text-center">
						  <a href="javascript:void(0)" 
                            class="btn btn-primary btn-small text-light modal-effect"
                            data-bs-effect="effect-sign" data-bs-toggle="modal"
                            data-bs-original-title="Edit" data-bs-target="#edit-profile-image"> 
                            <i class=""></i> Image
                          </a>
                          <a href="#edit-password"
                          class="btn btn-danger btn-small text-light" id="show-edit-password-form"
                          data-bs-effect="effect-sign" data-bs-toggle="modal"
                          data-bs-original-title="Edit" 
                          > 
                          <i class=""></i> Reset Password
                          </a>
                          
                        </div>
					</div>
					<div class="col-lg-9">
						<div class="border-0">
							<div class="">
                                {{-- Personal Data --}}
								<div class="">
									<div class="card mb-0">
										<div class="card-body">
											<div class="profile-log-switch">
												<div class="media-heading">
													<h3 class="card-title mb-3 font-weight-bold">Personal Details</h3>
												</div>
												<ul class="usertab-list mb-3">
													{{-- Name --}}
													<li>
                                                        <a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Full Name :</span> <span class="user-1"> {{auth()->user()->first_name .' '.  auth()->user()->middle_name . ' ' . auth()->user()->last_name}}</span></a>
                                                        <button type="button"
                                                            class="modal-effect btn btn-outline-white btn-sm ms-3 waves-effect waves-light"
                                                            data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit Name" data-bs-target="#edit_name">
                                                            <i class="fa fa-edit fs-16"></i>
                                                        </button>
                                                    </li>
                                                    {{-- Location --}}
													<li>
                                                        <a href="javascript:void(0)">
                                                            <span class="font-weight-bold text-default-dark">Location :</span> <span class="user-1"> {{auth()->user()->country->nicename}}</span></a>
                                                            <button type="button"
                                                                class="modal-effect btn btn-outline-white btn-sm ms-3 waves-effect waves-light"
                                                                data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit_location">
                                                                <i class="fa fa-edit fs-16"></i>
                                                            </button>
                                                    </li>
                                                    {{-- Email --}}
													<li>
                                                        <a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Email :</span> <span class="user-1"> {{auth()->user()->email}} </span></a>
                                                    </li>
                                                    {{-- phone --}}
													<li>
                                                        <a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Phone :</span> <span class="user-1">{{auth()->user()->phone}} </span></a>
                                                        <button type="button"
                                                            class="modal-effect btn btn-outline-white btn-sm ms-3 waves-effect waves-light"
                                                            data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit_phone">
                                                            <i class="fa fa-edit fs-16"></i>
                                                        </button>
                                                    </li>												
                                                    {{-- date of birth --}}
													<li>
                                                        <a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Data of birth :</span> <span class="user-1"> {{auth()->user()->date_of_birth->format('Y-m-d')}} </span></a>
                                                        <button type="button"
                                                            class="modal-effect btn btn-outline-white btn-sm ms-3 waves-effect waves-light"
                                                            data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit_date_of_birth">
                                                            <i class="fa fa-edit fs-16"></i>
                                                        </button>
                                                    </li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
    </div>
    </div>
    </div>
    {{-- Edit profile image modal --}}
    <div class="modal fade" id="edit-profile-image">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Profile Image</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.editProfileImage')}}" id="image_form_update" name="imageform"  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label mt-2" for="profile_image_update">Image</label>
                                </div>
                                <div class="col-md-9">
                                    <div class="control-group form-group">
                                        <div class="input-group file-browser">
                                            <input type="text"
                                                class="form-control border-end-0 browse-file bg-transparent"
                                                placeholder="Upload Image" readonly="">
                                            <label class="input-group-btn">
                                                <span class="btn btn-primary br-bs-0 br-ts-0">
                                                    Browse <input type="file" id="profile_image_update" name="image" style="display: none;" accept="image/*" onchange="return fileValidation('profile_image_update')" required>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Edit passowrd --}}
    <div class="modal fade" id="edit-password">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Password</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.resetPassword')}}" id="reset_password" name=""  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <!-- Old Password-->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="old_password" class="form-control-label">Old Password: <span class="text-danger">*</span>
                                    </label>
                                    <input id="old_password" type="password" class="form-control @error('old_password') is-invalid @enderror"
                                        name="old_password" placeholder="12A_#$" required autocomplete="old_password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <!-- New Password-->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="password" class="form-control-label">New Password: <span class="text-danger">*</span>
                                    </label>
                                    <input id="new_password" type="password" class="form-control @error('password') is-invalid @enderror"
                                        name="new_password" placeholder="12A_#$" required autocomplete="new-password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <!-- Confirm password -->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="password_confirm" class="form-control-label">@lang('auth.confirm'): <span
                                            class="text-danger">*</span> </label>
                                    <input id="password_confirm" type="password" class="form-control" name="password_confirmation" required
                                        autocomplete="new-password" placeholder="12A_#$">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Edit Phone --}}
    <div class="modal fade" id="edit_phone">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Phone</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.editPhone')}}" id="" name=""  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <label class="form-control-label">@lang('auth.whatsapp'):</label>
                                <div class="col-md-5 col-lg-5 mb-4">
                                    <!-- country codes (ISO 3166) and Dial codes. -->
                                    <select name="phoneCountryCode" id="phoneCountryCode" name="phoneCountryCode"
                                        class="form-control select2-show-search">
                                        @foreach ($countries as $country)   
                                         <option data-countryCode="{{$country->iso}}" value="{{$country->phonecode}}">{{$country->nicename}} ({{$country->phonecode}})</option>
                                        @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <input id="phone"  placeholder="12373202736" type="phone"
                                        class="form-control  @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}"
                                        required autocomplete="phone" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
                                    @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{-- Edit Name --}}
    <div class="modal fade" id="edit_name">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Name</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.editName')}}" id="" name=""  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <!--First Name -->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="first_name" class="form-control-label">First Name: <span
                                            class="text-danger">*</span> </label>
                                    <input id="first_name" type="text" class="form-control" name="first_name" required autocomplete >
                                </div>
                                <!--Middle Name -->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="middle_name" class="form-control-label">Middle Name: <span
                                            class="text-danger">*</span> </label>
                                    <input id="middle_name" type="text" class="form-control" name="middle_name" required autocomplete >
                                </div>
                                <!--Last Name -->
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for="last_name" class="form-control-label">Last Name: <span
                                            class="text-danger">*</span> </label>
                                    <input id="last_name" type="text" class="form-control" name="last_name" required autocomplete >
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Edit Location --}}
    <div class="modal fade" id="edit_location">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Location</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.editLocation')}}" id="" name=""  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label class="form-control-label">@lang('auth.country'):</label>
                                    <select class="form-control select2-flag-search @error('country') is-invalid @enderror" name="country"
                                        data-placeholder="Select Country" required>
                                        @foreach ($countries as $country)     
                                        <option value="{{$country->iso}}">{{$country->nicename}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Edit date of birth --}}
    <div class="modal fade" id="edit_date_of_birth">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Date Of Birth</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('teacher.account-settings.editDateOfBirth')}}" id="" name=""  enctype="multipart/form-data">
                        @csrf
                        <div class="form-group ">
                            <div class="row">
                                <div class="col-md-12 col-lg-12 mb-4">
                                    <label for='date_of_birth' class="form-control-label">@lang('auth.birthday'): <span
                                        class="tx-danger">*</span></label>
                                <!-- Fc-datepicker -->
                                <input type="date" id="date_of_birth" class="form-control @error('date_of_birth') is-invalid @enderror"
                                    name="date_of_birth" value="{{ old('date_of_birth') }}" required autocomplete="date_of_birth">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('teacher-js')
<script>
    $('#reset_password').on('submit',function(e){
        if($('#password_confirm').val() != $('#new_password').val()){
            e.preventDefault()
            $(this).val('')
            notif({
                        type: "error",
                        msg: "the passwords should match",
                        position: "center",
                        opacity: 0.8,
                        autohide: true,
                        multiline:true,
                        fade:true,
                        });      
        }else{
            return true;
        }
    })
</script>
@endsection