@extends('web.base')

@section('content')

<style>.card.text-white.bg-info {
    height: 158px;
}
.card.text-white.bg-warning {
    height: 158px;
}

.card.text-white.bg-danger{
   height: 158px;
}
#regiration_form fieldset:not(:first-of-type) {
    display: none;
}
.mp-create-pool-image {
    --aspect-ratio-width: 4;
    --aspect-ratio-height: 3;
    position: relative;
    /*min-height: 175px !important;*/
    background: none !important;
    height: auto !important; 
}

.mp-create-pool-image::before {
  content: '';
  display: block;
  padding-bottom: calc(calc(var(--aspect-ratio-height) / var(--aspect-ratio-width)) * 100%);
}
.mp-create-pool-image img, .mp-create-pool-image img.blah {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-position: center center;
  object-fit: cover;
  /*object-fit: contain;*/
}


i#w {
    width: auto;
    background-color: #d4cfcf;
    border-radius: 5px;
    height: auto;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 20px !important;
    display: inline-block;
    margin-top: 0 !important;
}
textarea{
    resize: none;
}

label#category_select-error {
    position: relative;
    top: 57px;
}
img.blah {
    width: 100%;
    /* min-height: 79px; */
    height: 176px;

    margin-bottom: 15px;
    border-radius: 5px;
}

.mp-create-pool-image-button.position-relative {
    margin-top: 17px;
}


.selected_1{
    border:3px solid #c1b4b4;
    box-shadow: inset 0 0 10px #000000;

}
.selected_2{
    border:3px solid #c1b4b4;
    box-shadow: inset 0 0 10px #000000;
}
.selected_3{
  border:3px solid #c1b4b4;
  box-shadow: inset 0 0 10px #000000;
}
.selected_4{
   border:3px solid #c1b4b4;
   box-shadow: inset 0 0 10px #000000;
}
.selected_5{
   border:3px solid #c1b4b4;
   box-shadow: inset 0 0 10px #000000;
}
.selected_6{
   border:3px solid #c1b4b4;
   box-shadow: inset 0 0 10px #000000;
}
.selected_7{
   border:3px solid #c1b4b4;
   box-shadow: inset 0 0 10px #000000;
}
.selected_8{
 border:3px solid #c1b4b4;
 box-shadow: inset 0 0 10px #000000;
}
.mp-add-image-modal-1 .test {
    display: flex;
    flex-wrap: wrap;
}
.mp-add-image-modal-1 .test ul.pagination {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}
.mp-add-image-modal-1 .test img {
    width: calc(25% - 16px);
    margin: 0 8px;
    margin-bottom: 8px;
    height: 150px;
    border: 1px solid #ddd;
    padding: 4px;
}


.mp-add-image-modal-2 .test {
    display: flex;
    flex-wrap: wrap;
}
.mp-add-image-modal-2 .test ul.pagination {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}
.mp-add-image-modal-2 .test img {
    width: calc(25% - 16px);
    margin: 0 8px;
    margin-bottom: 8px;
    height: 150px;
    border: 1px solid #ddd;
    padding: 4px;
}

label#option_id_C-error {
    /* display: flex; */
    /* width: 111%; */
    position: absolute;
    top: 55px;
    /* border: 0; */
}


label#option_id_D-error {
    /* display: flex; */
    /* width: 111%; */
    position: absolute;
    top: 55px;
    /* border: 0; */
}

.mp-add-image-modal-3 .test {
    display: flex;
    flex-wrap: wrap;
}
.mp-add-image-modal-3 .test ul.pagination {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}
.mp-add-image-modal-3 .test img {
    width: calc(25% - 16px);
    margin: 0 8px;
    margin-bottom: 8px;
    height: 150px;
    border: 1px solid #ddd;
    padding: 4px;
}





.mp-add-image-modal-4 .test {
    display: flex;
    flex-wrap: wrap;
}
.mp-add-image-modal-4 .test ul.pagination {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}
.mp-add-image-modal-4 .test img {
    width: calc(25% - 16px);
    margin: 0 8px;
    margin-bottom: 8px;
    height: 150px;
    border: 1px solid #ddd;
    padding: 4px;
}
/*// aman work*/
#errormsg1, #errormsg2, #errormsg3 ,#errormsg4{
  float: left;
  width: 100%;
}
/*aman work*/
.removediv {
    border: 1px soild red;
    /* margin-left: 63px; */
    /* width: 47%; */
    /* background-color: #d4cfcf; */
    border-radius: 5px;
    border: 1px solid red;
    cursor:pointer;
    border-radius: 50%;
    font-size: 14px;
    /* height: 60px; */
    background: red;
    padding: 3px 8px 5px 9px;
    /* margin-top: 12px!important; */

    /* margin-bottom: 20px!important; */
    position: absolute;
    top: 8px;
    left: auto;
    right: 8px;
    z-index: 99;
}
.yu {
    position: relative;
}
.mp-three-add-image {
    position: absolute;
    bottom: 180px;
    right: 0;
}
.bootstrap-datetimepicker-widget {
  width: 50% !important;

} 
.mp-create-pool-image-button a {
  text-decoration: none;
}
.mp-create-pool-image-button .image-btns {
  color: white;
  text-decoration: none;
}
#ulCategory a {
  text-decoration: none;
}
@media screen and (max-width: 991px) {
  .bootstrap-datetimepicker-widget {
      width: 80% !important;
  } 
}
.mp-poll-settings label {
  font-weight: normal !important;
} 
.c-app {
  padding: 0 !important;
}
.form-group .form-control {
    box-shadow: none;
}
</style>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container-fluid">
    <div class="fade-in">
      <div class="row">

         <div class="col-md-7 mp-dash-outer-center">
            <div class="mp-create-pool-head position-relative">
                Create a Poll
            </div>
            <form method="POST" id="regiration_form"  name="regiration_form" action="{{ url('user/store') }}" enctype="multipart/form-data">
                {{ csrf_field() }} 
                <fieldset  id="poll_information">
                  <h2 class="mp-create-pool-subhead">Poll Title</h2>
                  <div class="form-group row">


                   <input type="text" class="form-control" id="poll_title"   placeholder="Poll Title"  name="poll_title" value="">
               </div>
               <div class="form-group row">
                <textarea type="text" rows="2"  column="40" class="form-control" placeholder="Description" name="poll_desc" ></textarea> 


            </div>
            <div class="form-group row">
              <select id="category_select" name="category_select" class="form-control ">

                <option value="">Select Category</option>
                

          </select>
      </div>
      <h2 class="mp-create-pool-subhead">Options/Choices</h2>
      <div class="row position-relative" id="outer">
         <div class="col-md-6">
          <div class="mb-4">
           <div class="mp-create-pool-image main_div_1" >