<x-app-layout>

  <div class="row pt-4">
      <div class="col-md-9">
        <v-booking 
            v-bind:has_retour.sync="has_retour" 
            v-bind:cruise_id.sync="booking.segments.aller.cruise_id" 
            v-bind:room_type_id.sync="booking.segments.aller.room_type_id"
            v-on:change-room="selectRoomType($event,'aller')"
            v-on:change-cruise="changeCruise($event,'aller')"
            v-on:change-capacity="changeCapacity($event)"
            :search_disable="false"
            >
        </v-booking>
                
      </div>
      <div class="col-md-3">
          <v-card :is_bay="true"  :booking='booking' :step="step" :has_retour="false"  :book="book" />
      </div>

  </div>



  <x-slot name="after_script">
      <script src="/bower_components/admin-lte/plugins/moment/moment.min.js"></script>
      @include('booking.components.booking')
      @include('booking.components.services')
      @include('booking.components.card')
      <script>
          var app = new Vue({
              el: '#app',
              data: {
            
                  step: 1,
                  has_retour: @json($has_retour),
                  booking: {
                      capacity: 1 ,
                      passengers: [],
                      segments: {
                            aller:{
                                cruise_id: {{$segment->cruise_id}},
                                room_type_id: {{$segment->room_type_id}},
                                cruise: @json($segment->cruise),
                                room_type: null,
                                services: @json($segment->services->map(function($item){return $item->mix();})),
                            },
                            retour: {
                                cruise_id: null,
                                room_type_id: null,
                                cruise: null,
                                room_type: null,
                                services: [],
                            }
                      }
                  },
                  passenger: {},
                  totalprice:'',
                  editMode: false,
                  search: {
                      from: '',
                      to: '',
                      departure_date: "<?php echo date('Y-m-d'); ?>",
                      has_retour: false,
                      retour_departure_date: "<?php echo date('Y-m-d'); ?>",
                  }
              },
              watch: {
                  step: function() {
                      $("#step-" + this.step + "-tab").tab('show');
                      window.location.hash = "step-" + this.step;
                  }
              },
              mounted() {
                  moment.locale('en');
                  axios.get("/search/items/nationalities").then((res) => {
                      this.nationalities = res.data;

                  });
                  axios.get("/search/items/calleds").then((res) => {
                      this.calleds = res.data;
                  }); 
                  this.$root.load = false;
                
              },
              methods: {
                  storeService(service, type) {
                      var booking = this.booking.segments[type];
                      var v = booking.services.filter(item => service.id === item.id)[0];
                      if (v !== undefined) {
                          v.quantity += 1;
                      } else {
                          booking.services.push({
                              ...service,
                              quantity: 1
                          });
                      }

                  },
                  next() {
                      this.step =this.step + 3;
                  },
                  prev() {
                    this.step =this.step - 3;
                  },
                  isNext() {
                      switch (this.step) {
                          case 1:
                              return this.booking.segments.aller.room_type;
                              break;
                          case 2:
                              return this.booking.passengers.length >= this.booking.capacity;
                              break;
                          default:
                              return true;
                              break;
                      }
                  },
                  selectRoomType(room_type, type) {
                      var booking = this.booking.segments[type];
                      booking.room_type = room_type;
 
                  },
                  changeCruise(cruise, type) {
                      var booking = this.booking.segments[type];
                      booking.cruise = cruise;
                  },
                  changeCapacity(capacity) {
                      this.booking.capacity = capacity;
                  },
                  passengerNumber() {
                      return this.booking.passengers.length;
                  },
                  storePassenger() {
                      this.booking.passengers = [...this.booking.passengers, {id: this.booking.passengers.length + 1, ...this.passenger }]
                      this.passenger = this.clearPassenger();
                  },
                  editPassenger(passenger) {
                      $("#addNew").modal("show");
                      this.passenger = {
                          ...passenger
                      };
                  },
                  updatePassenger(id) {
                      this.booking.passengers = this.booking.passengers.map(item => {
                          if (item.id === id) {
                              return {
                                  ...this.passenger
                              };
                          }
                          return item;
                      })
                      this.passenger = this.clearPassenger();
                      $("#addNew").modal("hide");
                  },
                  addChild(id) {
                      this.passenger = {};
                      $("#addNew2").modal("show");
                      this.editMode = false;
                      this.passenger.type = 0;
                  },
                  storeChild() {
                      this.storePassenger();
                      $("#addNew2").modal("hide");
                  },
                  editChild(passenger) {
                      $("#addNew2").modal("show");
                      this.passenger = {
                          ...passenger
                      };
                      this.editMode = true;
                      this.passenger.type = 0;
                  },
                  updateChild() {
                      this.updatePassenger(this.passenger.id);
                      $("#addNew2").modal("hide");
                  },
                  passengerNumber(booking) {
                      return this.booking.passengers.filter(item => item.type !== 0).length;
                  },
                  clearPassenger() {
                      return this.passenger = {
                          firstName: "",
                          lastName: "",
                          nationality: "",
                          called: "",
                          booking: "",
                          passport: "",
                          phone: "",
                          email: "",
                          address: "",
                          mobile: "",
                          type: "",
                          birth_date: ""
                      };
                  },
                  clear() {
                      this.clearPassenger();
                      this.booking =  {
                          capacity: 0,
                          passengers: [],
                          segments: {
                              aller: {
                                  cruise_id: null,
                                  room_type_id: null,
                                  cruise: null,
                                  room_type: null,
                                  services: [],
                              },
                              retour: {
                                  cruise_id: null,
                                  room_type_id: null,
                                  cruise: null,
                                  room_type: null,
                                  services: [],
                              }
                          }
                      };
                      this.$root.load = false;
                      this.step = 1;
                  },
                  total() {
                        var s = 0;
                        if (this.booking.segments.aller.room_type) s += this.booking.capacity * this.booking.segments.aller.room_type.price;
                        if (this.booking.segments.retour.room_type) s += this.booking.capacity * this.booking.segments.retour.room_type.price;
                        this.booking.segments.aller.services.map(item => {
                            s += item.quantity * item.price;
                        });
                        this.booking.segments.retour.services.map(item => {
                            s += item.quantity * item.price;
                        });
                        return s;
                    },
                    book() {
                      
                        if (this.total > this.$root.cota.balance) {
                            this.error(this.$t('You do not have enough credit to perform this operation'));
                            return false;
                        }
                             axios.put("{{ route('tickets.update', $ticket->ticket_number) }}", {
                           
                          
                                booking: this.booking,
                                total:this.total
                            })
                            .then((res) => {
                                this.clear();
                                 window.open("/booking/print_ticket/" + res.data.id, "_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=500,height=400" );
                            })
                            .catch(error => {
                                this.error(error);
                            });
                    }

              }
          });

      </script>
      <script>
          $(document).ready(function() {
              $('#myTab').on('click', 'a', function(e) {
                  e.preventDefault();

                  // Add this line
                  window.location.hash = $(this).attr('href');

                  $(this).tab('show');
              });
          });

      </script>
  </x-slot>
</x-app-layout>
