@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>View Report Added To {{ $help->vendor->first_name}}'s Request</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

 <div class="form-container">
    <h2>View Report Added To {{ $help->vendor->first_name}}'s Request</h2>
    @include('alert')
    <form action="{{ route('save-request-report')}}" method="post">
        @csrf
        <input type="hidden" name="request_id" value="{{ $help->id }}">
        <div class="form-group">
            <label for="first-name">Vendor's Name</label>
            <input type="text" id="first-name" value="{{ $help->vendor->last_name }} {{ $help->vendor->first_name }}" disabled readonly>
        </div>
        <div class="form-group">
            <label for="last-name">Vendor's Phone</label>
            <input type="text" id="last-name" value="{{ $help->vendor->mobile }}" disabled  required>
        </div>
        <div class="form-group">
            <label for="email">Sub Admin's Name</label>
            <input type="text" id="email" value="{{ $help->admin->last_name }} {{ $help->admin->first_name }}" disabled readonly   required>
        </div>
        <div class="form-group">
            <label for="mobile">Sub Admin's Email</label>
            <input type="text" value="{{ $help->admin->email }}" disabled readonly required>
        <div class="form-group">
            <label for="mobile">Complaint</label>
            <select name="type" value="{{ $help->reports[0]->type ?? ""}}" disabled readonly required class="form-control form-maker">
                <option value="Payment" {{ $help->reports[0]->type == "Payment" ? "selected" : "" }}>Payment</option>
                <option value="Ads Approval" {{ $help->reports[0]->type == "Ads Approval" ? "selected" : "" }}>Ads Approval</option>
                <option value="Ads Performance" {{ $help->reports[0]->type == "Ads Performance" ? "selected" : "" }}>Ads Performance</option>
                <option value="Others" {{ $help->reports[0]->type == "Others" ? "selected" : "" }}>Others</option>
            </select>
        </div>
        <div class="form-group">
            <label for="mobile">Description</label>
            <textarea class="form-group" disabled readonly name="description" id="" cols="30" rows="10">{{ $help->reports[0]->description ?? "" }}</textarea>
        </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>
@include('out.other_footer')
  @endsection