@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">Document Upload</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>Document Upload</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

 <div class="form-container">
    <h2>Document Upload</h2>
    @include('alert')
    <form action="{{ route('save-vendor-document') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="first-name">Type *</label>
            <select name="type" class="form-control select" id="sectionId">
                <option value="">choose document type</option>
                <option value="NIN" @if($document) {{ "NIN" == $document->type ? 'selected' : '' }} @endif>NIN</option>
                <option value="DRIVER'S LICENSE" @if($document) {{ "DRIVER'S LICENSE" == $document->type ? 'selected' : '' }}  @endif>DRIVER'S LICENSE</option>
                <option value="OTHER" @if($document) {{ "OTHER" == $document->type ? 'selected' : '' }}  @endif>OTHER</option>
            </select>
        </div>
        <div class="form-group"  @if($document && $document->specify) @else style="display:none;" @endif id="optionsField">
            <label for="first-name"></label>
            <input type="text" id="first-name"  name="specify" @if($document && $document->specify) value="{{ $document->specify }}" @endif placeholder="specify document">
        </div>
        <div class="form-group">
            <label for="last-name">Front *</label>
            <input type="file" id="last-name"  name="front" id="uploadFront" accept=".jpg, .jpeg, .png, image/jpeg, image/png">
            <div id="image-preview-container1" class="image-preview-container mt-2">
                <!-- Preview images will be displayed here -->
                <img id="imageFront" @if($document && $document->front) src="{{ $document->front }}"  @else src="" style="display:none" @endif  alt="Image Preview" style="width: 100px; height: 100px" />
            </div>
        <div class="form-group">
            <label for="last-name">Back *</label>
            <input type="file" id="last-name"  id="uploadBack"  name="back" accept=".jpg, .jpeg, .png, image/jpeg, image/png">
            <div id="image-preview-container1" class="image-preview-container mt-2">
                <!-- Preview images will be displayed here -->
                <img id="imageBack" @if($document && $document->back) src="{{ $document->front }}"  @else src="" style="display:none" @endif  alt="Image Preview" style="width: 100px; height: 100px" />
            </div>
        </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
@section('scripts')
<script>
    // alert('here')
    // document.getElementById('holderField').style.display = 'block';
    document.getElementById('sectionId').addEventListener('change', function() {
        if (this.value === 'OTHER') {
            document.getElementById('optionsField').style.display = 'block';
            // document.getElementById('holderField').style.display = 'none';
        } else {
            document.getElementById('optionsField').style.display = 'none';
            // document.getElementById('holderField').style.display = 'block';
        }
    });

    document.getElementById('uploadFront').addEventListener('change', function(event) {
        var imagePreview = document.getElementById('imageFront');
        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
        }
    });
    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