
<template>
    <div id="app">
        <div class="hlava"><h1>Letenka</h1></div>
        <div class="wrapper">
            
                <div class="col1">
                    <div class="hlavni">
                        <div class="hlavni2">
                            <br>
                    
                            <h2>Parametry letu</h2>
                            <p>
                                 Tip cesty
                                <br>

                                <select class="vyber" v-model="travelType"> <!-- načtení výběru do travelType -->
                                   
                                     <option value="" disabled>Vyberte jednu možnost</option> <!-- mrtvý výběr (je vidět,ale nejde vybrat) -->
                                     <option v-for="(option, index) in travelTypes" :key="index" :value="option"> <!-- vypsání textu z travelTypes (option je jeden řádek v datech) -->
                                        {{ option.text }}
                                    </option>
                                </select>
                            </p>
                        
                            
                            <!-- volba destinace -->
                            <p>
                                Destinace
                                <br>
                                <select class="vyber" v-model="travelDestinaction">
                                    <option  value="" disabled>Vyberte jednu možnost</option>
                                    <option  v-for="(option, index) in travelDestinactions" :key="index" :value="option">
                                        {{ option.text }}
                                    </option>
                                </select>
                            </p>
                        
                            
                            <!-- datum odletu -->
                            
                        
                        
                            <div v-if="travelType.value == 'O'" class="input-group">
                                <label for="inputDepartureDate"></label>
                                <p>Označte datum odletu</p>
                                <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" id=""/>
                            </div>
                            <div v-else class="input-group">
                                <label for="inputDepartureRangeDate"> Označte datum příletu a odletu</label>
                                <v-date-picker v-model="departureRangeDate" :min-date="new Date()" is-range />
                            <!-- datum příletu pokud zpáteční -->
                            </div>
                        </div>
                        <div class="hlavni2">
                            <p>
                                <label  for="inputPersonCount">Počet cestujících</label><br>
                                <!-- <input v-model="personCount" type="number" id="inputPersonCount" min="1" max="3"> výběr počtu cestujícich --> 
                                <input class="vyber1" v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
                            </p>
                            
                            <!-- volba třídy E, B -->
                            <p>
                                <label for="inputClassType">Volba třídy</label><br>
                                <select class="vyber" v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
                                    <option value="" disabled>Vyberte jednu možnost</option>
                                    <option v-for="(option, index) in classTypes" :key="index" :value="option">
                                        {{ option.text }}
                                    </option>
                                </select>
                            </p>
                             <seat v-model="chosenSeats" :seats="seats" :classType = "classType" :personCount= "PersonCount" />
                            
                            
                            
                            <br>
                            <button class="vyber" v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
                        </div>
                    
                    </div>

                </div>

                <div class="col">
                    <div class="hlavni1">
                        
                    
                        <div class="hlavni2">
                            <img class="foto" src="./assets/let.png" alt="">
                            <h2>Objednávka</h2>
                            <p v-if="travelType">
                                Typ cesty: 
                                <span style="text-transform: lowercase"> <!-- vypsání výběru  -->
                                    {{ travelType.text }}
                                </span>
                            </p>
                            <p v-if="travelDestinaction">
                                Cílová destinace 
                                <span style="text-transform: lowercase">
                                    {{ travelDestinaction.text }}
                                </span>
                            </p>
                            <p>
                                Počet cestujích: {{ personCount}} <!-- vypsání počtu cestujích -->
                            </p>
                            <p v-if="classType">
                                Třída: 
                                <span style="text-transform: lowercase">
                                    {{ classType.text }}
                                </span>
                            </p>

                            <div v-if="chosenSeats.length">
                            
                                Vybraná místa: 
                                <div class="sedadlo"> <!-- Vypíše vybraná sedadla -->
                                    <div class="seat" v-for="seat in chosenSeats" :key="seat">
                                        {{ seat }}
                                        
                                    </div>
                                </div>
                            </div>
                           
                            
                            

                            
                        </div>
                    </div>
                        

                </div>
        
                
                
            
        </div>
    </div>
     
    
</template>

<script>

import Vue from 'vue';

import VCalendar from 'v-calendar';
import seat from './components/seat';

Vue.use(VCalendar, {});

export default {
  components: { seat },
  name: 'App',
  data: function() {
      return {
          travelDestinaction: "",
          travelDestinactions: [
              { value: "P", text: "Paris" },    /* označení a s ním svázaný text */
              { value: "L", text: "London" },
          ],
         
          
          travelType: "",
          travelTypes: [
              { value: "R", text: "Zpáteční" },
              { value: "O", text: "Jednosměrná" },
          ],
          personCount: 1, /* minimální počet cestujicich  */

          classType: "",
          classTypes: [
              { value: "E", text: "Ekonomi" },
              { value: "B", text: "Business" },
              { value: "F", text: "First" }
          ],
          seats: [              /* definuji sedadla */
              "F1", "F2", "F3",  
              "B1", "B2", "B3", 
              "E1", "E2", "E3", "E4", "E5", "E6",
          ],
          chosenSeats: [],
          departuredate: new Date(),
          departurerangedate: {
              start: new Date(),
              end: new Date(),

          },
      }
  },
  methods: {
      addSeatClick: function(seat) {
          if (this.chosenSeats.length < this.personCount) {
              this.chosenSeats.push(seat);
          }
          else {
              alert("Všichni cestující již sedí!");
          }
      },
      personCountChange: function() {
          let diff = this.personCount - this.chosenSeats.length;
              // diff je záporné číslo1
              for (let i = diff; i < 0; i++) {
                  this.chosenSeats.pop();       
              }
          
      }
  }
}
</script>

<style>
    .vyber1{
        background-color: #0563af;
        width: 158px;
        padding: 12px;
        border: none;
        color: white;
    }


    .vyber{
        background-color: #0563af;
        padding: 12px;
        border: none;
        color: white;
    }
    .kalen{
         background-color: #0563af;
         color: white;

    }
    
    


  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  }

  .seat {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      border: 1px solid gray;
      margin: 2px;
      background-color: rgb(62, 156, 53);
      
  }

  .seat div:hover {
      cursor: pointer;
      background-color: lightgray;
  }

  .seat .disabled {
      color: rgb(255, 255, 255);
  }

  .seat .disabled:hover {
      cursor: default;
      background-color: transparent;
  }

  .seat .chosen {
      background-color: lightgreen;
  }
  .col{
      width: 90%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
  }

  .hlavni{
      width: 50%;
    margin: 0 auto;
    background-color: white;
      
  }
  .hlava{
      width: 100%;
      margin: 0 auto;
      text-align: center;
  }
  #app{
      background-image: url("./assets/leta.jpeg");
  }
  .obr{
      width: 30px;
  }
  h1,h2,h3,p {
      font-family: Arial, Helvetica, sans-serif;
  }

  .druha{
      width: 30%;
    float: left;

  }
  .col1{
      width: 100%;
  }
  .hlavni2{
      width: 80%;
      margin: 0 auto;

  }
  .foto{
      float: right;
      width: 100%;
  }

  
  @media (max-width: 1200px) {
     .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  }

  .seat {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      border: 1px solid gray;
      margin: 2px;
      background-color: rgb(62, 156, 53);
      
  }

  .seat div:hover {
      cursor: pointer;
      background-color: lightgray;
  }

  .seat .disabled {
      color: rgb(255, 255, 255);
  }

  .seat .disabled:hover {
      cursor: default;
      background-color: transparent;
  }

  .seat .chosen {
      background-color: lightgreen;
  }
  .col{
      width: 80%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
  }

  .hlavni{
      width: 90%;
    margin: 0 auto;
    background-color: white;
      
  }
  .hlava{
      width: 90%;
      margin: 0 auto;
      text-align: center;
  }
  #app{
      background-image: url("./assets/leta.jpeg");
  }
  .obr{
      width: 30px;
  }
  h1,h2,h3,p {
      font-family: Arial, Helvetica, sans-serif;
  }

  .druha{
      width: 30%;
    float: left;

  }
  .col1{
      width: 100%;
  }
  .hlavni2{
      width: 80%;
      margin: 0 auto;
      }
    .foto{
      float: right;
      width: 100%;
  }
    
    
}


  @media (max-width: 800px) {
      .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    
  }

  .seat {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      border: 1px solid gray;
      margin: 2px;
      background-color: rgb(62, 156, 53);
      
  }

  .seat div:hover {
      cursor: pointer;
      background-color: lightgray;
  }

  .seat .disabled {
      color: rgb(255, 255, 255);
  }

  .seat .disabled:hover {
      cursor: default;
      background-color: transparent;
  }

  .seat .chosen {
      background-color: lightgreen;
  }
  .col{
      width: 80%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
         min-height: 100px;
    
  }

  .hlavni{
      width: 90%;
    margin: 0 auto;
    background-color: white;
      
  }
  .hlava{
      width: 100%;
      margin: 0 auto;
      text-align: center;
  }
  #app{
      background-image: url("./assets/leta.jpeg");
  }
  .obr{
      width: 30px;
  }
  h1,h2,h3,p {
      font-family: Arial, Helvetica, sans-serif;
  }

  .druha{
      width: 30%;
    float: left;

  }
  .col1{
      width: 80%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
       
  }
  .hlavni2{
       width: 50%;
    margin: 0 auto;
    background-color: white;

  }
  .foto{
      float: right;
      width: 100%;
    
    
    }
}


@media (max-width: 500px) {

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    
  }

  .seat {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      border: 1px solid gray;
      margin: 2px;
      background-color: rgb(62, 156, 53);
      
  }

  .seat div:hover {
      cursor: pointer;
      background-color: lightgray;
  }

  .seat .disabled {
      color: rgb(255, 255, 255);
  }

  .seat .disabled:hover {
      cursor: default;
      background-color: transparent;
  }

  .seat .chosen {
      background-color: lightgreen;
  }
  .col{
      width: 100%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
         min-height: 100px;
    
  }

  .hlavni{
      width: 90%;
    margin: 0 auto;
    background-color: white;
      
  }
  .hlava{
      width: 100%;
      margin: 0 auto;
      text-align: center;
  }
  #app{
      background-image: url("./assets/leta.jpeg");
  }
  .obr{
      width: 30px;
  }
  h1,h2,h3,p {
      font-family: Arial, Helvetica, sans-serif;
  }

  .druha{
      width: 30%;
    float: left;

  }
  .col1{
      width: 100%;
      background-color: rgb(255, 255, 255);
        opacity: 0.99;
       
  }
  .hlavni2{
       width: 50%;
    margin: 0 auto;
    background-color: white;

  }
  .foto{
      float: right;
      width: 100%;
    }
  
    
    
}


  

  
  

</style>
