@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">Section</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>{{ $title }}</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

 <div class="form-container">
    <h2>{{ $title }}</h2>
    @include('alert')
    <form @if (empty($section['id'])) action="{{ url('admin/add-edit-section')}}" @else action="{{ url('admin/add-edit-section/'.$section['id']) }}" @endif enctype="multipart/form-data" method="post">
        @csrf
        <div class="form-group">
            <label for="first-name">Section Name *</label>
            <input type="text" id="first-name" placeholder="Enter section name" @if (!empty($section['name'])) value="{{ $section['name'] }}" @else value="{{ old('section_name') }}" @endif name="section_name"  required>
        </div>
        <div class="form-group">
            <label for="last-name">Section Image *</label>
            <input type="file" id="last-name"   name="section_image"  required>
            @if(!empty($section['image']))
            <a target="_blank" href="{{ url('admin/images/sectionphotos/'.$section['image'])}}">View image</a>
            <input type="hidden" name="current_section_image" value="{{ $section['image'] }}">
          @endif
        </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