@extends('out.auth_master')

@section('styles')
<style type="text/css">
  /*  body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f9fa;
  margin: 0;
}*/
.form-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
}
h2 {
  text-align: center;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #f58025;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.submit-btn:hover {
  background-color: #d86b1b;
}

@media only screen and (max-width: 449px) {
.logo img {
margin-left: -10px;
}
.logo {
min-width: 1.4rem;
margin-right: 2rem;
}
#search {
display: block;
width: 100%;
min-height: 2.7rem;
}
}

@media (max-width: 575px) {

[class^="w-icon-"], [class*=" w-icon-"] {
font-family: "wolmart" !important;
speak: never;
font-style: normal;
font-size: 1.4rem;

}
.nav-link  [class^="w-icon-"]{
color: orange;
font-weight: 400;
padding-right: 3px;
}
.tab-vertical .nav-link {
position: relative;
padding-left: 2.2rem;
padding-right: 2rem;
text-align: left;
width: 100%;
margin-bottom: 0.5rem;
font-size: 13px;
font-weight: 400;
}
#fa-style{
color: orange;
padding-right: 3px;
}

}
@media (max-width: 479px) {
.sticky-footer {
padding: 0;
background: #f4f4f4;
}
.form-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
margin-left: 5%;
margin-top: 50px;
margin-bottom: 80px;
}

}
.breadcrumb li:not(:last-child)::after {

padding-top: 10px;
padding-bottom: 10px;

}
.header-bottom:not(.fixed) .category-dropdown > a {
background-color: #f1f1f166;
}
@media (min-width: 700px) {
#mobile-nav{
display: none;
}
#kontainer{
display: none;
}
.form-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
align-items: anchor-center;
margin-left: 35%;
margin-top: 50px;
margin-bottom: 80px;
}
}

#scroll-top i {
color: #fff;
opacity: 1;
background-color: orange;
border: 2px solid orange;
}

@media (max-width: 500px) {
.dashboard-container{
display: none;
}
}



/*Mobilw navigations*/
.kontainer {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: white;
}


.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.botin {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
 box-shadow: 0 0 5px rgb(0 0 0 / 13%);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  text-align: left;
  font-weight: 400;

}
.botin i {
  margin-left: 4px;
  padding-right: 2px;
  color: orange;
}
.botin img {
  width: 20px;
}
@media (max-width: 400px) {
  .grid {
      grid-template-columns: repeat(2, 1fr);
  }
  a:hover {
color: #19191a;
}
}
</style>
@endsection
@section('content')
<main class="main">
  <!-- Start of Page Header -->
  <div class="page-header">
    <div class="container">
      <h1 class="page-title mb-0">My Account</h1>
    </div>
  </div>
  <!-- End of Page Header -->

  <!-- Start of Breadcrumb -->
  <nav class="breadcrumb-nav">
    <div class="container">
      <ul class="breadcrumb account-breadcrumb">
        <li><a href="/admin/dashboard">Home</a></li>
        <li>My account</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

 <div class="form-container">
    <h2>Update {{ $slug }} details</h2>
    @include('alert')
    <form action="{{ url("admin/update-vendor-details/".$slug)}}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" value="{{ Auth::guard('admin')->user()->email }}" readonly required>
        </div>
        <div class="form-group">
            <label for="first-name">First Name *</label>
            <input type="text" id="first-name" value="{{ Auth::guard('admin')->user()->first_name }}" name="first_name"  required>
        </div>
        <div class="form-group">
            <label for="last-name">Last Name *</label>
            <input type="text" id="last-name"  value="{{ Auth::guard('admin')->user()->last_name }}" name="last_name"  required>
        </div>
        <div class="form-group">
            <label for="mobile">Mobile *</label>
            <input type="text" id="mobile" value="{{ Auth::guard('admin')->user()->mobile }}" name="mobile" class="phone" required>
            <span id="phoneError" style="color: red; display: none;">Invalid phone number</span>
        </div>
        @if($slug == "personal" || $slug == "marketer" || $slug == "affiliate")
        <div class="form-group">
            <label for="mobile">Photo </label>
            <input type="file" id="uploadBack" accept=".jpg, .jpeg, .png, image/jpeg, image/png" name="avatar" >
            <div id="image-preview-container1" class="image-preview-container mt-2">
              <!-- Preview images will be displayed here -->
              <img id="imageBack" @if(Auth::guard('admin')->user()->avatar) src="{{ Auth::guard('admin')->user()->avatar }}"  @else src="" style="display:none" @endif  alt="Image Preview" style="width: 100px; height: 100px" />
          </div>
        </div>
        @endif
        <button type="submit" class="submit-btn">Submit</button>
    </form>
</div>

  <!-- Start of PageContent -->
<div class="page-content pt-2">

  </div>
  <!-- End of PageContent -->
</main>
@include('out.other_footer')
  @endsection
  @section('scripts')
  @include('phone_js')
<script>
    // alert('here')
    document.getElementById('uploadBack').addEventListener('change', function(event) {
        var imagePreview = document.getElementById('imageBack');
        var file = event.target.files[0];

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block'; // Show the preview image
            };
            reader.readAsDataURL(file); // Convert the file to a data URL
        }
    });
</script>
@endsection