    <template>
        <div id="app">
            <h1>Letenka</h1>
            <div class="wrapper">
                <div class="col form">
                    <h2>Parametry letu</h2>
                    <form action="">
                        <p>
                            <select v-model="travelType">
                                <option value="" disabled>Vyberte jednu možnost</option>
                                <option v-for="(option, index) in travelTypes" :key="index" :value="option">
                                    {{ option.text }}
                                </option>
                            </select>
                        </p>
                        
                        <!-- volba destinace -->
                        <!-- datum odletu -->
                        <input type="date">
                        <!-- datum příletu pokud zpáteční -->


                        <p>
                            <label for="inputPersonCount">Počet cestujících</label><br>
                            <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
                        </p>
                        
                        <!-- volba třídy E, B -->
                        <p>
                            <label for="inputClassType">Volba třídy</label><br>
                            <select 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>
                        
                        <div class="seatWrap">
                            <div class="seat" v-for="(seat, index) in seats" :key="index">
                                <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
                                    {{ seat }}
                                </div>
                                <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
                                    {{ seat }}
                                </div>
                                <div v-else class="disabled">
                                    {{ seat }}
                                </div>
                                
                            </div>
                        </div>
                        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
                    </form>

                </div>
                <div class="col order">
                    <h2>Objednávka</h2>
                    <p v-if="travelType">
                        Typ cesty: 
                        <span style="text-transform: lowercase">
                            {{ travelType.text }}
                        </span>
                    </p>
                    <p>
                        Počet cestujích: {{ personCount}}
                    </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="seat" v-for="seat in chosenSeats" :key="seat">
                            {{ seat }}
                        </div>
                    </div>

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

    <script>

    export default {
      name: 'App',
      data: function() {
          return {
              travelType: "",
              travelTypes: [
                  { value: "R", text: "Zpáteční" },
                  { value: "O", text: "Jednosměrná" },
              ],
              personCount: 1,
              classType: "",
              classTypes: [
                  { value: "E", text: "Ekonomická" },
                  { value: "B", text: "Byznys" }
              ],
              seats: [
                  "B1", "B2", "B3", 
                  "E1", "E2", "E3", "E4", "E5"
              ],
              chosenSeats: []
          }
      },
      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é číslo
              for (let i = diff; i < 0; i++) {
                  this.chosenSeats.pop();       
              }
          }
      }
    }
    </script>

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

      .seat {
          display: inline-block;
          width: 30px;
          text-align: center;
          border: 1px solid gray;
          margin: 2px;
      }

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

      .seat .disabled {
          color: lightgray;
      }

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

      .seat .chosen {
          background-color: lightgreen;
      }

    </style>