@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 {
  
    min-height: 175px !important;
    background: none !important;
 
}



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;
}





.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;
}

.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: 0px;
    left: auto;
    right: 15px;
    z-index: 99;
  }



.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;
}
.mp-three-add-image {
    position: absolute;
    bottom: 260px;
    right: 0;
}

</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">
            Edit a Poll
          </div>
         
         <form method="POST" id="regiration_form"  name="regiration_form" action="{{ url('user/updatePoll') }}" enctype="multipart/form-data">
                    {{ csrf_field() }} 
                    <input type="hidden" name="poll_id" value="{{$pollgeneraInfo->id}}">
                     <input type="hidden" name="poll_setting_id" value="{{$poll_Setting->id}}">
  <fieldset  id="poll_information">
              <h2 class="mp-create-pool-subhead">Question</h2>
            <div class="form-group row">
              
              
               <input type="text" class="form-control" id="poll_title"   placeholder="Poll Title"  name="poll_title" value="{{$pollgeneraInfo->poll_title}}">
            </div>
          <div class="form-group row">
            <textarea type="text" rows="2"  column="40" class="form-control" placeholder="Description" name="poll_desc" >{{$pollgeneraInfo->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" id="outer">
           

               @if(!empty($poll_Options)) 
                  @foreach($poll_Options as $val)
                                   @if(!empty($val->option_image))
                                  @elseif(!empty($val->unsplash_sm))
                              @endif  
                 <div class="col-md-6">
                  <div class="mb-4">
                  
                   <div class="mp-create-pool-image main_div_{{$i}}" >
                  <img class="blah" name="options" src="{{$imgurl}}" />
                                   </div>
                                   <div class="mp-create-pool-image-button position-relative">
                      
                    <a href="jaavscript:;" data-toggle="modal" id="imagelink-image_{{$i}}" data-target="#mp-add-image-modal-{{$i}}">Change Image <i class="fa fa-arrow-up"></i></a>
              

                                   </div>
                                 <div class="mp-create-pool-image-button position-relative">
                                <div class="form-group row">  
                                     <textarea type="text" class="form-control option_name" rows="2" column="40" placeholder="Option A"  id="option_id_{{$i}}" name="options[{{$i}}][name]" >{{$val->option_name}}</textarea>  
                                      </div>   
                                      <input type="hidden" name="options[{{$i}}][id]" value="{{$val->id}}">          
                                      </div>             
                </div>
               </div>
                              @endforeach 
               @endif
             
             <!--   <div class="col-md-6">
                  <div class="mb-4">
                   <div class="mp-create-pool-image main_div_2">
                     
                                   </div>
                                   <div class="mp-create-pool-image-button position-relative">
                     
                    <a href="jaavscript:;" data-toggle="modal" id="imagelink-image_2" data-target="#mp-add-image-modal-2">Add Image <i class="fa fa-arrow-up"></i></a>
                    
                    
                                   </div>
                    <div class="mp-create-pool-image-button position-relative">
                          <div class="form-group row">
                                            <textarea type="text" class="form-control"  rows="2" column="40" placeholder="Option B"  id="option_id_sec" name="option_name[2]" ></textarea>      

                        </div>
                    </div>
                </div>
               </div> -->
              
               
             </div>