@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">Review {{ $vendor->first_name }} {{ $vendor->last_name }}</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="/">Home</a></li>
          <li>Review</li>
        </ul>
      </div>
    </nav>
    <!-- End of Breadcrumb -->
  
   <div class="form-container">
      <h2>Review {{ $vendor->first_name }} {{ $vendor->last_name }}</h2>
      @include('alert')
      <form action="{{ route('save-customer-review') }}" method="post">
          @csrf
          <input type="hidden" name="vendor_id" value="{{ $vendor->id }}">
          <div class="form-group">
              <label for="email">Full Name *</label>
              <input type="text" id="email" name="reviewer"  placeholder="enter full name" required>
          </div>
          <div class="form-group">
              <label for="first-name">Description *</label>
              <textarea name="description" placeholder="Message" required></textarea>
              {{-- <input type="text" id="first-name"  name="description"  required> --}}
          </div>
          <button type="submit" class="submit-btn">Submit</button>
      </form>
  </div>
  
    <!-- Start of PageContent -->
  <div class="page-content pt-2">
  
    </div>
    <!-- End of PageContent -->
  </main>
@endsection