@extends('frontend.layout.master')
@section('content')
<div class="container pt-5 pb-5">
    <div class="row pt-5 pb-5">
        @if (count($errors) > 0)
                <div class="alert alert-danger flashalert" role="alert">
                    <b>Error:</b><br>
                    @foreach ($errors->all() as $error) {{ $error }} <br>
                    @endforeach
                </div>
            @endif
        <div class="col-md-6">
            <form method="POST" class="login100-form validate-form" action="{{route('web.customer.profileupdate',$userDetail->id)}}" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <span class="login100-form-title mb-5">{{__('translation.updateprofile')}}</span>
                                @method('PUT')
                                <div class="col-md-12">
                                    <input type="text" name="name" placeholder="{{ app()->getLocale()  == 'ar' ? 'اسم' : 'Name'}}" class="input100" value="{{$userDetail->name}}">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <input type="text" name="phone" placeholder="{{ app()->getLocale()  == 'ar' ? 'رقم التليفون' : 'Phone Number'}}" class="input100" value="{{$userDetail->phone}}">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <input type="text" name="email" placeholder="{{ app()->getLocale()  == 'ar' ? 'بريد إلكتروني' : 'Email'}}" class="input100" class="input100" value="{{$userDetail->email}}">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="mt-3 text-left"><button class="login100-form-btn" type="submit">{{__('translation.saveprofile')}}</button></div>
                            </form>
            
        </div>
        <div class="col-md-6">
            <!--Change Password Form-->
             <form method="POST" class="login100-form validate-form" action="{{route('web.customer.passwordupdate',$userDetail->id)}}" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <span class="login100-form-title mb-5">{{__('translation.changepassword')}}</span>
                                @method('PUT')
                                <div class="col-md-12">
                                    <input type="text" name="old_password" placeholder="{{ app()->getLocale()  == 'ar' ? 'كلمة المرور القديمة' : 'Old Password'}}" class="input100">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <input type="text" name="password" placeholder="{{ app()->getLocale()  == 'ar' ? 'كلمة المرور' : 'Password'}}" class="input100">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <input type="text" name="password_confirmation" placeholder="{{ app()->getLocale()  == 'ar' ? 'تأكيد كلمة المرور' : 'Confirm Password'}}" class="input100">
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="mt-3 text-left"><button class="login100-form-btn" type="submit">{{__('translation.updatepassword')}}</button></div>
                            </form>
            
        </div>
    </div>
</div>
@endsection
@push('custom-css')
<style>
    /* Login Page
*************************************/
.login100-form-title {
    font-size: 40px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    display: block;
}
.input100 {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 68px;
        outline: none;
    border: none;
}
.focus-input100 {
    display: block;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0 0;
    color: #00308F;
}
.symbol-input100 {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 25px;
    bottom: 32px;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}
.login100-form-btn {
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #00308F;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
        outline: none !important;
    border: none;
}
form.login100-form.validate-form {
    border-radius: 10px;
    padding: 50px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 12%), 0 6px 20px 0 rgb(0 0 0 / 11%);
}
.input100:focus+.focus-input100 {
    -webkit-animation: anim-shadow .5s ease-in-out forwards;
    animation: anim-shadow .5s ease-in-out forwards;
}
textarea:focus, input:focus {
    border-color: transparent !important;
}
.input100:focus+.focus-input100+.symbol-input100 {
    color: #00308F;
    padding-left: 28px;
}
.login100-form-btn:hover {
    background: #333;
    box-shadow: 0px 0px 20px 0px rgb(0 191 0 / 23%), 0 6px 20px 0 rgb(0 191 0 / 17%);
}
@keyframes  anim-shadow {
  100% {
    box-shadow: 0 0 70px 25px;
    opacity: 0;
}
}
</style>
@endpush
@push('custom-script')
@endpush