@extends('layout.app2')
@section('content')

<section class="banner ban-fin">
    <div class="log-menu">
       <ul>
            
        <li><a href=""><img src="{{ url('/img') }}/icons8_cancel_filled.png" alt="Placeholder image" width="24" height="24" class="img-fluid">&nbsp;Salir</a>
        </li>
         
      </ul> 
   </div>
      
   <h4 class="log-title-admin">{{ $survey[0]->nombre}}</h4>
    
   
     
    </section>
    <section class="content-tables">
         
        <div class="container titulo-proyectos">Please read the following questions and select or write your answer. 
        
        </div>
        <div class="container subtitulo-proyectos">We would fully appreciate your kindly feedback by Jan 24th 2025. <br> In case of not receiving any reply we will assume you are satisfied (Good) with our products and services. 
        </div>
        <div class="container titulo-proyectos">
            <b>Estimated survey time: 10 minutes</b>
            <img src="{{ url('/img') }}/star.png" alt="" width="500" height="200">
        </div>
    </section>
    @if(count($errors) > 0)
         <div class="alert alert-danger" role="alert">
            Unanswered fields exist
         </div>
   @endif
   <form class="formulario-agregar" action="{{ route('encue.store') }}" style="box-shadow: 0 0 10px 0 #ddd;" method="POST" autocomplete="off" >
      <input type="hidden" value="{{$tipo}}" name="tipo" id="tipo">
      <input type="hidden" value="{{$survey[0]->surveyid}}" name="surveyid" id="surveyid">
      @csrf
     
    <div class="container">
      <label class="mt-1">Evaluator Name: <input type="text" class="form-control" name="evaluator" required></label> 
      <div class="alert alert-primary" role="alert">
         <h2>Quality</h2>
      </div>

        <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
                  <div class="media"> <div class="numberCircle">1</div>
                  <div class="media-body">
                        <label class="mt-1">Do the supersacks arrive in good condition to your facility? (Good condition is straight, no broken, no dirty)?</label>

                                    <div class="container">
                                          <div class="row">
                                             <div class="col mt-4">
                                             
                                             
                                                   <p class="font-weight-bold ">Review</p>
                                                   <div class="form-group row">
                                                      <input type="hidden" name="booking_id" value="">
                                                      <div class="col">
                                                         <div class="rate">
                                                            <input type="radio"  id="star5" class="rate" name="Question1" value="100" />
                                                            <label for="star5" title="Very Satisfied">5 stars</label>
                                                            <input type="radio"  id="star4" class="rate" name="Question1" value="80"/>
                                                            <label for="star4" title="4">4 stars</label>
                                                            <input type="radio" id="star3" class="rate" name="Question1" value="60"/>
                                                            <label for="star3" title="3">3 stars</label>
                                                            <input type="radio" id="star2" class="rate" name="Question1" value="40">
                                                            <label for="star2" title="2">2 stars</label>
                                                            <input type="radio" id="star1" class="rate" name="Question1" value="20"/>
                                                            <label for="star1"  title="Not Satisfied">1 star</label>
                                                         </div>
                                                      </div>
                                                   </div>
                                                   <div class="form-group row mt-4">
                                                      <div class="col" id="copt1" style="display: none" name="copt1">
                                                         <textarea class="form-control" name="copt1" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                                                      </div>
                                                   </div>
                                                   
                                             </div>
                                          </div>
                                       </div>
                                    
                  </div>
                  </div>
            </div>
            <div class="media-object-default">
                  <div class="media"> <div class="numberCircle">2</div>
                  <div class="media-body">
                     <label class="mt-1">Do the supersacks arrive properly labeled?</label>
                     <div class="container">
                        <div class="row">
                           <div class="col mt-4">
                              
                               
                                 <p class="font-weight-bold ">Review</p>
                                 <div class="form-group row">
                                    <input type="hidden" name="booking_id" value="">
                                    <div class="col">
                                       <div class="rate">
                                          <input type="radio"  id="star52" class="rate" name="Question2" value="100"/>
                                          <label for="star52" title="Very Satisfied">5 stars</label>
                                          <input type="radio"  id="star42" class="rate" name="Question2" value="80"/>
                                          <label for="star42" title="4">4 stars</label>
                                          <input type="radio" id="star32" class="rate" name="Question2" value="60"/>
                                          <label for="star32" title="3">3 stars</label>
                                          <input type="radio" id="star22" class="rate" name="Question2" value="40">
                                          <label for="star22" title="2">2 stars</label>
                                          <input type="radio" id="star12" class="rate" name="Question2" value="20"/>
                                          <label for="star12"  title="Not Satisfied">1 star</label>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="form-group row mt-4">
                                    <div class="col" id="copt2" style="display: none">
                                       <textarea class="form-control" name="copt2" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                                    </div>
                                 </div>
                                 
                           </div>
                        </div>
                     </div>
                  </div>
                  </div>
            </div>
            <div class="media-object-default">
                  <div class="media"> <div class="numberCircle">3</div>
                  <div class="media-body">
                     <label class="mt-1">Do the pallets arrive in good condition? (Good condition means no broken and stable) ?</label>
                     <div class="container">
                        <div class="row">
                           <div class="col mt-4">
                              
                              
                                 <p class="font-weight-bold ">Review</p>
                                 <div class="form-group row">
                                    <input type="hidden" name="booking_id" value="">
                                    <div class="col">
                                       <div class="rate">
                                          <input type="radio"  id="star53" class="rate" name="Question3" value="100"/>
                                          <label for="star53" title="Very Satisfied">5 stars</label>
                                          <input type="radio"  id="star43" class="rate" name="Question3" value="80"/>
                                          <label for="star43" title="4">4 stars</label>
                                          <input type="radio" id="star33" class="rate" name="Question3" value="60"/>
                                          <label for="star33" title="3">3 stars</label>
                                          <input type="radio" id="star23" class="rate" name="Question3" value="40">
                                          <label for="star23" title="2">2 stars</label>
                                          <input type="radio" id="star13" class="rate" name="Question3" value="20"/>
                                          <label for="star13"  title="Not Satisfied">1 star</label>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="form-group row mt-4">
                                    <div class="col" id="copt3" style="display: none">
                                       <textarea class="form-control" name="copt3" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                                    </div>
                                 </div>
                                 
                           </div>
                        </div>
                     </div>
                  </div>
                  </div>
               
            </div>
        @endif
        @if ($tipo == 3)
        <div class="media-object-default">
            <div class="media"> <div class="numberCircle">1</div>
            <div class="media-body">
                <label class="mt-1">Do the railcars arrive in proper condition (top and bottom covers, discharge valves, butterfly valves, vent valves)?</label>
                <div class="container">
                    <div class="row">
                       <div class="col mt-4">
                        
                            
                             <p class="font-weight-bold ">Review</p>
                             <div class="form-group row">
                                <input type="hidden" name="booking_id" value="">
                                <div class="col">
                                   <div class="rate">
                                      <input type="radio"  id="star54" class="rate" name="Question4" value="100"/>
                                      <label for="star54" title="Very Satisfied">5 stars</label>
                                      <input type="radio"  id="star44" class="rate" name="Question4" value="80"/>
                                      <label for="star44" title="4">4 stars</label>
                                      <input type="radio" id="star34" class="rate" name="Question4" value="60"/>
                                      <label for="star34" title="3">3 stars</label>
                                      <input type="radio" id="star24" class="rate" name="Question4" value="40">
                                      <label for="star24" title="2">2 stars</label>
                                      <input type="radio" id="star14" class="rate" name="Question4" value="20"/>
                                      <label for="star14"  title="Not Satisfied">1 star</label>
                                   </div>
                                </div>
                             </div>
                             <div class="form-group row mt-4">
                                <div class="col" id="copt4" style="display: none">
                                   <textarea class="form-control" name="copt4" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                                </div>
                             </div>
                             
                       </div>
                    </div>
                 </div>
            </div>
            </div>
        </div>
        <div class="media-object-default">
         <div class="media"> <div class="numberCircle">2</div>
         <div class="media-body">
             <label class="mt-1">Do the sampling valves in the railcars perform properly?</label>
             <div class="container">
                 <div class="row">
                    <div class="col mt-4">
                     
                         
                          <p class="font-weight-bold ">Review</p>
                          <div class="form-group row">
                             <input type="hidden" name="booking_id" value="">
                             <div class="col">
                                <div class="rate">
                                   <input type="radio"  id="star55" class="rate" name="Question5" value="100"/>
                                   <label for="star55" title="Very Satisfied">5 stars</label>
                                   <input type="radio"  id="star45" class="rate" name="Question5" value="80"/>
                                   <label for="star45" title="text">4 stars</label>
                                   <input type="radio" id="star35" class="rate" name="Question5" value="60"/>
                                   <label for="star35" title="text">3 stars</label>
                                   <input type="radio" id="star25" class="rate" name="Question5" value="40">
                                   <label for="star25" title="text">2 stars</label>
                                   <input type="radio" id="star15" class="rate" name="Question5" value="20"/>
                                   <label for="star15"  title="Not Satisfied">1 star</label>
                                </div>
                             </div>
                          </div>
                          <div class="form-group row mt-4">
                             <div class="col" id="copt5" style="display: none">
                                <textarea class="form-control" name="copt5" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                             </div>
                          </div>
                          
                    </div>
                 </div>
              </div>
            </div>
         </div>
    </div> 
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">3</div>
            <div class="media-body">
               <label class="mt-1">Do the railcars arrive with 25 seals (16 seals at the top, 6 seals in the sampling valves and 3 seals at the bottom valves?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star56" class="rate" name="Question6" value="100"/>
                                    <label for="star56" title="Very Satisfied">5 stars</label>
                                    <input type="radi6"  id="star46" class="rate" name="Question6" value="80"/>
                                    <label for="star46" title="text">4 stars</label>
                                    <input type="radio" id="star36" class="rate" name="Question6" value="60"/>
                                    <label for="star36" title="text">3 stars</label>
                                    <input type="radio" id="star26" class="rate" name="Question6" value="40">
                                    <label for="star26" title="text">2 stars</label>
                                    <input type="radio" id="star16" class="rate" name="Question6" value="20"/>
                                    <label for="star16"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt6" style="display: none">
                                 <textarea class="form-control" name="copt6" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">4</div>
            <div class="media-body">
               <label class="mt-1">Do the railcars arrive properly labeled?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star57" class="rate" name="Question7" value="100"/>
                                    <label for="star57" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star47" class="rate" name="Question7" value="80"/>
                                    <label for="star47" title="text">4 stars</label>
                                    <input type="radio" id="star37" class="rate" name="Question7" value="60"/>
                                    <label for="star37" title="text">3 stars</label>
                                    <input type="radio" id="star27" class="rate" name="Question7" value="40">
                                    <label for="star27" title="text">2 stars</label>
                                    <input type="radio" id="star17" class="rate" name="Question7" value="20"/>
                                    <label for="star17"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt7" style="display: none">
                                 <textarea class="form-control" name="copt7" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         @endif
         <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
               <div class="media"> <div class="numberCircle">4</div>
            @endif
            @if ($tipo == 3)
               <div class="media"> <div class="numberCircle">5</div>
             @endif
            <div class="media-body">
               <label class="mt-1">Do the labels can be easily scanned?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star58" class="rate" name="Question8" value="100"/>
                                    <label for="star58" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star48" class="rate" name="Question8" value="80"/>
                                    <label for="star48" title="text">4 stars</label>
                                    <input type="radio" id="star38" class="rate" name="Question8" value="60"/>
                                    <label for="star38" title="text">3 stars</label>
                                    <input type="radio" id="star28" class="rate" name="Question8" value="40">
                                    <label for="star28" title="text">2 stars</label>
                                    <input type="radio" id="star18" class="rate" name="Question8" value="20"/>
                                    <label for="star18"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt8" style="display: none">
                                 <textarea class="form-control" name="copt8" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         @if ($tipo == 3)
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">6</div>
            <div class="media-body">
               <label class="mt-1">Do the butterfly valves are closed and in good condition?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star59" class="rate" name="Question9" value="100"/>
                                    <label for="star59" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star49" class="rate" name="Question9" value="80"/>
                                    <label for="star49" title="text">4 stars</label>
                                    <input type="radio" id="star39" class="rate" name="Question9" value="60"/>
                                    <label for="star39" title="text">3 stars</label>
                                    <input type="radio" id="star29" class="rate" name="Question9" value="40">
                                    <label for="star29" title="text">2 stars</label>
                                    <input type="radio" id="star19" class="rate" name="Question9" value="20"/>
                                    <label for="star19"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt9" style="display: none">
                                 <textarea class="form-control" name="copt9" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         @endif
         <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
               <div class="media"> <div class="numberCircle">5</div>
            @endif
            @if ($tipo == 3)
               <div class="media"> <div class="numberCircle">7</div>
             @endif
            <div class="media-body">
               <label class="mt-1">Do you receive set of documents on time? (Invoice, packing list, bill of lading, certificate of origin if apply, and certificate of analysis)?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star510" class="rate" name="Question10" value="100"/>
                                    <label for="star510" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star410" class="rate" name="Question10" value="80"/>
                                    <label for="star410" title="text">4 stars</label>
                                    <input type="radio" id="star310" class="rate" name="Question10" value="60"/>
                                    <label for="star310" title="text">3 stars</label>
                                    <input type="radio" id="star210" class="rate" name="Question10" value="40">
                                    <label for="star210" title="text">2 stars</label>
                                    <input type="radio" id="star110" class="rate" name="Question10" value="20"/>
                                    <label for="star110"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt10" style="display: none">
                                 <textarea class="form-control" name="copt10" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
            <div class="media"> <div class="numberCircle">6</div>
            @endif
            @if ($tipo == 3)
               <div class="media"> <div class="numberCircle">8</div>
            @endif
            <div class="media-body">
               <label class="mt-1">Is the information in the documents correct? (Invoice, packing list, bill of lading, certificate of origin if apply, and certificate of analysis)</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                        
                           
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star511" class="rate" name="Question11" value="100"/>
                                    <label for="star511" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star411" class="rate" name="Question11" value="80"/>
                                    <label for="star411" title="text">4 stars</label>
                                    <input type="radio" id="star311" class="rate" name="Question11" value="60"/>
                                    <label for="star311" title="text">3 stars</label>
                                    <input type="radio" id="star211" class="rate" name="Question11" value="40">
                                    <label for="star211" title="text">2 stars</label>
                                    <input type="radio" id="star111" class="rate" name="Question11" value="20"/>
                                    <label for="star111"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt11" style="display: none">
                                 <textarea class="form-control" name="copt11" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
  </div> {{-- Conteiner --}}

    
       <div class="container">
         <div class="alert alert-primary" role="alert">
            <h2>Customer Service</h2>
           </div>
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">1</div>
            <div class="media-body">
               <label class="mt-1">Is the customer service you receive satisfactory?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star512" class="rate" name="Question12" value="100"/>
                                    <label for="star512" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star412" class="rate" name="Question12" value="80"/>
                                    <label for="star412" title="text">4 stars</label>
                                    <input type="radio" id="star312" class="rate" name="Question12" value="60"/>
                                    <label for="star312" title="text">3 stars</label>
                                    <input type="radio" id="star212" class="rate" name="Question12" value="40">
                                    <label for="star212" title="text">2 stars</label>
                                    <input type="radio" id="star112" class="rate" name="Question12" value="20"/>
                                    <label for="star112"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt12" style="display: none">
                                 <textarea class="form-control" name="copt12" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">2</div>
            <div class="media-body">
               <label class="mt-1">Does customer service countermeasures respond effectively and satisfactorily ?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star513" class="rate" name="Question13" value="100"/>
                                    <label for="star513" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star413" class="rate" name="Question13" value="80"/>
                                    <label for="star413" title="text">4 stars</label>
                                    <input type="radio" id="star313" class="rate" name="Question13" value="60"/>
                                    <label for="star313" title="text">3 stars</label>
                                    <input type="radio" id="star213" class="rate" name="Question13" value="40">
                                    <label for="star213" title="text">2 stars</label>
                                    <input type="radio" id="star113" class="rate" name="Question13" value="20"/>
                                    <label for="star113"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt13" style="display: none">
                                 <textarea class="form-control" name="copt13" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>  
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">3</div>
            <div class="media-body">
               <label class="mt-1">Does the customer service representative answer within 24 hours?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star514" class="rate" name="Question14" value="100"/>
                                    <label for="star514" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star414" class="rate" name="Question14" value="80"/>
                                    <label for="star414" title="text">4 stars</label>
                                    <input type="radio" id="star314" class="rate" name="Question14" value="60"/>
                                    <label for="star314" title="text">3 stars</label>
                                    <input type="radio" id="star214" class="rate" name="Question14" value="40">
                                    <label for="star214" title="text">2 stars</label>
                                    <input type="radio" id="star114" class="rate" name="Question14" value="20"/>
                                    <label for="star114"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt14" style="display: none">
                                 <textarea class="form-control" name="copt14" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>  
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">4</div>
            <div class="media-body">
               <label class="mt-1">Is customer service courteous and professional?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star515" class="rate" name="Question15" value="100"/>
                                    <label for="star515" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star415" class="rate" name="Question15" value="80"/>
                                    <label for="star415" title="text">4 stars</label>
                                    <input type="radio" id="star315" class="rate" name="Question15" value="60"/>
                                    <label for="star315" title="text">3 stars</label>
                                    <input type="radio" id="star215" class="rate" name="Question15" value="40">
                                    <label for="star215" title="text">2 stars</label>
                                    <input type="radio" id="star115" class="rate" name="Question15" value="20"/>
                                    <label for="star115"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt15" style="display: none">
                                 <textarea class="form-control" name="copt15" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
       </div> {{-- Conteiner Sale --}}
       
         
        
        <div class="container">
         <div class="alert alert-primary" role="alert">
         <h2>Transportation</h2>
         </div>
         @if ($tipo == 3)
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">1</div>
            <div class="media-body">
               <label class="mt-1">Do you receive periodically the updated Railcar status file?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star516" class="rate" name="Question16" value="100"/>
                                    <label for="star516" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star416" class="rate" name="Question16" value="80"/>
                                    <label for="star416" title="text">4 stars</label>
                                    <input type="radio" id="star316" class="rate" name="Question16" value="60"/>
                                    <label for="star316" title="text">3 stars</label>
                                    <input type="radio" id="star216" class="rate" name="Question16" value="40">
                                    <label for="star216" title="text">2 stars</label>
                                    <input type="radio" id="star116" class="rate" name="Question16" value="20"/>
                                    <label for="star116"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt16" style="display: none">
                                 <textarea class="form-control" name="copt16" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
      @endif
         <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
            <div class="media"> <div class="numberCircle">1</div>
            @endif
            @if ($tipo == 3)
               <div class="media"> <div class="numberCircle">2</div>
            @endif
            <div class="media-body">
               <label class="mt-1">Does the shipping schedule satisfy your required delivered day?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star517" class="rate" name="Question17" value="100"/>
                                    <label for="star517" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star417" class="rate" name="Question17" value="80"/>
                                    <label for="star417" title="text">4 stars</label>
                                    <input type="radio" id="star317" class="rate" name="Question17" value="60"/>
                                    <label for="star317" title="text">3 stars</label>
                                    <input type="radio" id="star217" class="rate" name="Question17" value="40">
                                    <label for="star217" title="text">2 stars</label>
                                    <input type="radio" id="star117" class="rate" name="Question17" value="20"/>
                                    <label for="star117"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt17" style="display: none">
                                 <textarea class="form-control" name="copt17" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         <div class="media-object-default">
            @if ($tipo == 1 || $tipo==2)
            <div class="media"> <div class="numberCircle">2</div>
            @endif
            @if ($tipo == 3)
               <div class="media"> <div class="numberCircle">3</div>
            @endif
            <div class="media-body">
               <label class="mt-1">Do you receive notifications about any (issue) with shipments in proper timing?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star518" class="rate" name="Question18" value="100"/>
                                    <label for="star518" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star418" class="rate" name="Question18" value="80"/>
                                    <label for="star418" title="text">4 stars</label>
                                    <input type="radio" id="star318" class="rate" name="Question18" value="60"/>
                                    <label for="star318" title="text">3 stars</label>
                                    <input type="radio" id="star218" class="rate" name="Question18" value="40">
                                    <label for="star218" title="text">2 stars</label>
                                    <input type="radio" id="star118" class="rate" name="Question18" value="20"/>
                                    <label for="star118"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt18" style="display: none">
                                 <textarea class="form-control" name="copt18" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         @if ($tipo == 2)
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">3</div>
            <div class="media-body">
               <label class="mt-1">The transportation company delivers the necessary documents (packing list & COAS)?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star519" class="rate" name="Question19" value="100"/>
                                    <label for="star519" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star419" class="rate" name="Question19" value="80"/>
                                    <label for="star419" title="text">4 stars</label>
                                    <input type="radio" id="star319" class="rate" name="Question19" value="60"/>
                                    <label for="star319" title="text">3 stars</label>
                                    <input type="radio" id="star219" class="rate" name="Question19" value="40">
                                    <label for="star219" title="text">2 stars</label>
                                    <input type="radio" id="star119" class="rate" name="Question19" value="20"/>
                                    <label for="star119"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt19" style="display: none">
                                 <textarea class="form-control" name="copt19" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div> 
         @endif
         @if ($tipo == 1)
         <div class="media-object-default">
            <div class="media"> <div class="numberCircle">3</div>
            <div class="media-body">
               <label class="mt-1">Do you  receive the shipment calendar updated as soon as you send the order or any schedule change (within 2 working days)?</label>
               <div class="container">
                  <div class="row">
                     <div class="col mt-4">
                           <p class="font-weight-bold ">Review</p>
                           <div class="form-group row">
                              <input type="hidden" name="booking_id" value="">
                              <div class="col">
                                 <div class="rate">
                                    <input type="radio"  id="star520" class="rate" name="Question20" value="100"/>
                                    <label for="star520" title="Very Satisfied">5 stars</label>
                                    <input type="radio"  id="star420" class="rate" name="Question20" value="80"/>
                                    <label for="star420" title="text">4 stars</label>
                                    <input type="radio" id="star320" class="rate" name="Question20" value="60"/>
                                    <label for="star320" title="text">3 stars</label>
                                    <input type="radio" id="star220" class="rate" name="Question20" value="40">
                                    <label for="star220" title="text">2 stars</label>
                                    <input type="radio" id="star120" class="rate" name="Question20" value="20"/>
                                    <label for="star120"  title="Not Satisfied">1 star</label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group row mt-4">
                              <div class="col" id="copt20" style="display: none">
                                 <textarea class="form-control" name="copt20" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         @endif

        </div>{{-- Conteiner Transportation --}}
        <div class="media-object-default">
        
         <div class="media-body">
            <div class="container">
            <label class="mt-1">Any general comment about our product or service. Please share your comments 
            </label>
            
            <textarea class="form-control" name="obser" rows="6 " placeholder="How can we improve? (comment)" maxlength="200"></textarea>
            </div>
            </div>
         </div>
      </div>
   

     </div>{{-- Pregunta General --}}

            <div class="mt-3 text-right">
                <button class="btn btn-sm py-2 px-3 btn-info">Save Survey
                </button>
                
            </div>
         
   </form>


<script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script src="{{ asset('js/sweetalert2.all.min.js') }}"></script>
<script>

$(document).ready(function(){

    var copt1 = document.getElementById("copt1");
    var copt2 = document.getElementById("copt2");
    var copt3 = document.getElementById("copt3");
    var copt4 = document.getElementById("copt4");
    var copt5= document.getElementById("copt5");
    var copt6= document.getElementById("copt6");
    var copt7= document.getElementById("copt7");
    var copt8=document.getElementById("copt8");
    var copt9=document.getElementById("copt9");
    var copt10=document.getElementById("copt10");
    var copt11=document.getElementById("copt11");
    var copt12=document.getElementById("copt12");
    var copt13=document.getElementById("copt13");
    var copt14=document.getElementById("copt14");
    var copt15=document.getElementById("copt15");
    var copt16=document.getElementById("copt16");
    var copt17=document.getElementById("copt17");
    var copt18=document.getElementById("copt18");
    var copt19=document.getElementById("copt19");
    var copt20=document.getElementById("copt20");


    

   


    $('input[type=radio]').click(function(){
        
       
        if (this.id == "star1" || this.id == "star2" || this.id == "star3" || this.id == "star4" )
            copt1.style.display = "block";
        if ( this.id == "star5")
            copt1.style.display = "none";

        if (this.id == "star12" || this.id == "star22" || this.id == "star32" || this.id == "star42"  )
            copt2.style.display = "block";
        if ( this.id == "star52")
            copt2.style.display = "none";

        if (this.id == "star13" || this.id == "star23" || this.id == "star33" || this.id == "star43"  )
            copt3.style.display = "block";
        if ( this.id == "star53")
            copt3.style.display = "none";
            
        if (this.id == "star14" || this.id == "star24" || this.id == "star34" || this.id == "star44" )
            copt4.style.display = "block";
        if ( this.id == "star54")
            copt4.style.display = "none";

         if (this.id == "star15" || this.id == "star25" || this.id == "star35" || this.id == "star45" )
            copt5.style.display = "block";
        if ( this.id == "star55")
            copt5.style.display = "none";

            if (this.id == "star16" || this.id == "star26" || this.id == "star36" || this.id == "star46" )
            copt6.style.display = "block";
        if ( this.id == "star56")
            copt6.style.display = "none";

        if (this.id == "star17" || this.id == "star27" || this.id == "star37" || this.id == "star47"  )
            copt7.style.display = "block";
        if ( this.id == "star57")
            copt7.style.display = "none";

            if (this.id == "star18" || this.id == "star28" || this.id == "star38" || this.id == "star48"  )
            copt8.style.display = "block";
        if ( this.id == "star58")
            copt8.style.display = "none";

            if (this.id == "star19" || this.id == "star29" || this.id == "star39" || this.id == "star49" )
            copt9.style.display = "block";
        if ( this.id == "star59")
            copt9.style.display = "none";

            if (this.id == "star110" || this.id == "star210" || this.id == "star310" || this.id == "star410" )
            copt10.style.display = "block";
            if ( this.id == "star510")
            copt10.style.display = "none";
         
            if (this.id == "star111" || this.id == "star211" || this.id == "star311" || this.id == "star411"  )
            copt11.style.display = "block";
            if ( this.id == "star511")
            copt11.style.display = "none";

            if (this.id == "star112" || this.id == "star212" || this.id == "star312" || this.id == "star412"  )
            copt12.style.display = "block";
            if ( this.id == "star512")
            copt12.style.display = "none";

            if (this.id == "star113" || this.id == "star213" || this.id == "star313" || this.id == "star413"  )
            copt13.style.display = "block";
            if  (this.id == "star513")
            copt13.style.display = "none";

            if (this.id == "star114" || this.id == "star214" || this.id == "star314" || this.id == "star414")
            copt14.style.display = "block";
            if ( this.id == "star514")
            copt14.style.display = "none";

            if (this.id == "star115" || this.id == "star215" || this.id == "star315" || this.id == "star415" )
            copt15.style.display = "block";
            if ( this.id == "star515")
            copt15.style.display = "none";

            if (this.id == "star116" || this.id == "star216" || this.id == "star316" || this.id == "star416" )
            copt16.style.display = "block";
            if ( this.id == "star516")
            copt16.style.display = "none";

            if (this.id == "star117" || this.id == "star217" || this.id == "star317" || this.id == "star417" )
            copt17.style.display = "block";
            if ( this.id == "star517")
            copt17.style.display = "none";

            if (this.id == "star118" || this.id == "star218" || this.id == "star318" || this.id == "star418" )
            copt18.style.display = "block";
            if ( this.id == "star518")
            copt18.style.display = "none";

            if (this.id == "star119" || this.id == "star219" || this.id == "star319" || this.id == "star419" )
            copt19.style.display = "block";
            if ( this.id == "star519")
            copt19.style.display = "none";
         
            if (this.id == "star120" || this.id == "star220" || this.id == "star320" || this.id == "star420" )
            copt20.style.display = "block";
            if ( this.id == "star520")
            copt20.style.display = "none";

       
    });
});
    
$('.formulario-agregar').submit(function(e){
        
        e.preventDefault();
        var tipo = document.getElementById("tipo").value;

       
       Swal.fire({
             title: 'Are your sure?',
             text: "Save the survey?",
             type: 'warning',
             showCancelButton: true,
             confirmButtonColor: '#3085d6',
             cancelButtonColor: '#d33',
             confirmButtonText: 'Si!'
           }).then((result) => {
               if (result.value == true) {
                  i=0;
                  cadena='';
                  if (tipo== 1){
                     if ($('input[name=Question1]:checked').length == 0) {
                        i=i+1;
                        cadena= cadena + 'Quality seccion : Question 1 remains to be answered |'
                     }
                     if ($('input[name=Question2]:checked').length == 0) {
                        cadena= cadena + 'Quality seccion : Question 2 remains to be answered |'
                     
                        i=i+1;
                     }
                     if ($('input[name=Question3]:checked').length == 0) {
                         cadena= cadena + 'Quality seccion : Question 3 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question8]:checked').length == 0) {
                          cadena= cadena + 'Quality seccion : Question 4 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question10]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 5 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question11]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 6 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question12]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question13]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question14]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question15]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 4 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question17]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question18]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question20]:checked').length == 0) {
                          cadena= cadena + 'Transportation seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }

                     if (i == 0){
                          this.submit();
                        }
                        else    {
                           console.log(cadena);
                           Swal.fire({
                              position: "top-end",
                              icon: "warning",
                              title: cadena,
                              showConfirmButton: true
                              });
                        }

                  }  // tipo 1
                  if (tipo== 2){
                     if ($('input[name=Question1]:checked').length == 0) {
                        i=i+1;
                        cadena= cadena + 'Quality seccion : Question 1 remains to be answered |'
                     }
                     if ($('input[name=Question2]:checked').length == 0) {
                        cadena= cadena + 'Quality seccion : Question 2 remains to be answered |'
                     
                        i=i+1;
                     }
                     if ($('input[name=Question3]:checked').length == 0) {
                         cadena= cadena + 'Quality seccion : Question 3 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question8]:checked').length == 0) {
                          cadena= cadena + 'Quality seccion : Question 4 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question10]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 5 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question11]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 6 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question12]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question13]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question14]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question15]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 4 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question17]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question18]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question19]:checked').length == 0) {
                          cadena= cadena + 'Transportation seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }

                     if (i == 0){
                          this.submit();
                        }
                        else    {
                           console.log(cadena);
                           Swal.fire({
                              position: "top-end",
                              icon: "warning",
                              title: cadena,
                              showConfirmButton: true
                              });
                        }

                  } // tipo 2
                  if (tipo== 3){
                     if ($('input[name=Question4]:checked').length == 0) {
                        i=i+1;
                        cadena= cadena + 'Quality seccion : Question 1 remains to be answered |'
                     }
                     if ($('input[name=Question5]:checked').length == 0) {
                        cadena= cadena + 'Quality seccion : Question 2 remains to be answered |'
                     
                        i=i+1;
                     }
                     if ($('input[name=Question6]:checked').length == 0) {
                         cadena= cadena + 'Quality seccion : Question 3 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question7]:checked').length == 0) {
                          cadena= cadena + 'Quality seccion : Question 4 remains to be answered |'
                          i=i+1;
                     }
                     if ($('input[name=Question8]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 5 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question9]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 6 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question10]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 7 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question11]:checked').length == 0) {
                           cadena= cadena + 'Quality seccion : Question 8 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question12]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question13]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question14]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question15]:checked').length == 0) {
                           cadena= cadena + 'Sale seccion :Question 4 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question16]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 1 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question17]:checked').length == 0) {
                           cadena= cadena + 'Transportation seccion :Question 2 remains to be answered |'
                           i=i+1;
                     }
                     if ($('input[name=Question18]:checked').length == 0) {
                          cadena= cadena + 'Transportation seccion :Question 3 remains to be answered |'
                           i=i+1;
                     }

                     if (i == 0){
                          this.submit();
                        }
                        else    {
                           console.log(cadena);
                           Swal.fire({
                              position: "top-end",
                              icon: "warning",
                              title: cadena,
                              showConfirmButton: true
                              });
                        }

                  } // tipo 3


               }
             })
       
       });

</script>
@endsection