@extends('layout.main')

@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-10 col-xl-8">
        <h2 class="h3 mb-4 page-title">Settings</h2>
        <div class="my-4">
          <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
            {{-- <li class="nav-item">
              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Profile</a>
            </li> --}}
            {{-- <li class="nav-item">
              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Security</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Notifications</a>
            </li> --}}
          </ul>
          <form action="{{route('users.update_profile')}}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row mt-5 align-items-center">
              <div class="col-md-3 text-center mb-5">
                <div class="avatar avatar-xl">
                  <img height="100px" src="@if($user->avatar){{Storage::url($user->avatar)}} @else{{asset('dashboard/assets/avatars/face-1.jpg')}}@endif" alt="..." class="avatar-img rounded-circle">
                </div>
              </div>
              <div class="col">
                <div class="row align-items-center">
                  <div class="col-md-7">
                    <h4 class="mb-1">{{$user->name}}</h4>
                    {{-- <p class="small mb-3"><span class="badge badge-dark">New York, USA</span></p> --}}
                  </div>
                </div>
                <div class="row mb-4">
                  <div class="col-md-7">
                    <p class="small mb-0 text-muted">{{$user->username}}</p>
                    <p class="small mb-0 text-muted">{{$user->email}}</p>
                    <p class="small mb-0 text-muted">{{$user->phone}}</p>
                  </div>
                  <div class="col">
                   
                    {{-- <p class="small mb-0 text-muted">(537) 315-1481</p> --}}
                  </div>
                </div>
              </div>
            </div>
            <hr class="my-4">
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="inputEmail4">{{__('nav.full_name')}}</label>
                    <input type="text" value="{{ old('name',$user->name)}}" name="name" class="form-control @error('name')error-message @enderror" id="inputEmail5">
                    @error('name')<div class="invalid-feedback">  {{$message}}</div>@enderror
                  </div>
            </div>
            <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputPassword4">{{__('nav.username')}}</label>
                <input type="text" value="{{ old('username',$user->username)}}" name="username" class="form-control  @error('username')error-message @enderror" id="inputPassword5">
                @error('username')<div class="invalid-feedback">  {{$message}}</div>@enderror
              </div>
              <div class="form-group col-md-6">
                  <label for="inputEmail4">{{__('nav.email')}}</label>
                  <input type="email" value="{{ old('email',$user->email)}}"  name="email" class="form-control @error('email')error-message @enderror" id="inputEmail5">
                  @error('email')<div class="invalid-feedback">  {{$message}}</div>@enderror
              </div>
              <div class="form-group col-md-6">
              <label for="inputAddress">{{__('nav.phone')}}</label>
              <input type="text" value="{{ old('phone',$user->phone)}}" name="phone" class="form-control @error('phone')error-message @enderror" id="inputAddress5" placeholder="+25_____">
              @error('phone')<div class="invalid-feedback">  {{$message}}</div>@enderror
              </div> 
              <div class="form-group col-md-6">
                <div class="card border-0 bg-transparent">
                  <label for="inputAddress2">{{__('nav.profile')}}</label>
                  <input 
                  name="avatar"
                  accept="image/*"
                  onchange="document.getElementById('image_3').src = window.URL.createObjectURL(this.files[0])"
                class="form-control mb-3" id="formFileSm" type="file">
                  <img id="image_3" src="@if($user->avatar){{ Storage::url($user->avatar)}} @else{{asset('dashboard/assets/products/p4.jpg')}}@endif" width="150px" alt="..." aria-hidden="true" class="rounded">
                </div>
              </div>
            </div>
            <hr class="my-4">
            <div class="row mb-4">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="inputPassword4">Old Password</label>
                  <input type="password" class="form-control  @error('current_password')error-message @enderror" id="inputPassword5" name="current_password">
                  @error('current_password')<div class="invalid-feedback">  {{$message}}</div>@enderror
                </div>
                <div class="form-group">
                  <label for="inputPassword5">New Password</label>
                  <input type="password" class="form-control  @error('password') error-message @enderror" id="inputPassword5" name="password">
                  @error('password')<div class="invalid-feedback">  {{$message}}</div>@enderror
                </div>
                <div class="form-group">
                  <label for="inputPassword6">Confirm Password</label>
                  <input type="password" class="form-control @error('confirm-password')error-message @enderror" id="inputPassword6" name="confirm-password">
                  @error('confirm-password')<div class="invalid-feedback">  {{$message}}</div>@enderror
                </div>
              </div>
              <div class="col-md-6">
                {{-- <p class="mb-2">Password requirements</p>
                <p class="small text-muted mb-2"> To create a new password, you have to meet all of the following requirements: </p>
                <ul class="small text-muted pl-4 mb-0">
                  <li> Minimum 8 character </li>
                  <li>At least one special character</li>
                  <li>At least one number</li>
                  <li>Can’t be the same as a previous password </li>
                </ul> --}}
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Save Change</button>
          </form>
        </div> <!-- /.card-body -->
      </div> <!-- /.col-12 -->
    </div> <!-- .row -->
  </div> <!-- .container-fluid -->

@endsection