<script type="text/x-template" id="card-template">
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">{{ __('List Services') }}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-primary btn-sm" data-card-widget="collapse"
                    title="Collapse">
                    <i class="fas fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body" style="padding: 0">
            <table class="table">
                <tr>
                    <th>{{ __('Subject') }}</th>
                    <th>{{ __('Prix') }}</th>
                    <th></th>
                </tr>
                <tr v-if="booking.passengers.filter(item=>item.is_child).length">
                    <td>@{{ $t('Infant')}}(x@{{ booking.passengers.filter(item=>item.is_child).length }})</td>
                    <td>@{{ formatPrice(booking.passengers.filter(item=>item.is_child).length*price_child) }}</td>
                    <td></td>
                </tr>
                <tr v-if="booking.segments.aller.room_type">
                    <td>@{{ booking.segments.aller.room_type. name }}(x@{{ booking.capacity }})</td>
                    <td>@{{ formatPrice(booking.segments.aller.room_type.price) }}</td>
                    <td></td>
                </tr>
                <tr v-for="service in booking.segments.aller.services" key="service.id">
                    <td>@{{ service.name }}(x@{{ service.quantity }})</td>
                    <td v-if="has_retour">@{{ formatPrice(service.price_two) }}</td>
                    <td v-else>@{{ formatPrice(service.price) }}</td>
                    
                    <td>
                        <a @click="destroyService(service,'aller')" class="btn btn-danger btn-sm"  ><i
                                class="fas fa-minus-circle "></i></a>
                    </td>
                </tr>
                <tr v-if="has_retour">
                    <th colspan="3" style="background: #00bc8c;color: white">services Retour</th>
                </tr>
                <tr v-if="booking.segments.retour.room_type">
                    <td>@{{ booking.segments.retour.room_type.name }}(x@{{ booking.capacity }})</td>
                    <td>@{{ formatPrice(booking.segments.retour.room_type.price) }}</td>
                    <td></td>
                </tr>
                <tr v-for="service in booking.segments.retour.services" key="service.id">
                    <td>@{{ service.name }}(x@{{ service.quantity }})</td>
                      <td v-if="has_retour">@{{ formatPrice(service.price_two) }}</td>
                    <td v-else>@{{ formatPrice(service.price) }}</td>
                    <td>
                        <a @click="destroyService(service,'retour')" class="btn btn-danger btn-sm" ><i
                                class="fas fa-minus-circle "></i></a>
                    </td>
                </tr>
                <tr>
                    <td>{{ __('Total') }}</td>
                    
                    <td  v-model="totalprice" colspan="2">@{{ formatPrice(total()) }}</td>
                </tr>
            </table>
        </div>
        <div class="card-footer">
            <button v-if="is_bay" @click="book" type="button"
                class="btn btn-primary font-weight-bolder text-uppercase btn-block"
                data-wizard-type="action-next">
                @{{ $t('Buy') }}
            </button>
        </div>
    </div>
</script>

<script>
    Vue.component('v-card', {
        props: ['booking', 'step', 'has_retour', 'book' ,'is_bay'],
        data: function() {
            return {
                price_child: {{$price_child}},
            }
        
        },
        methods: {
            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 => {
                    if(this.has_retour){
                      s += item.quantity * item.price_two;
                        
                    }
                    else{
                        
                        s += item.quantity * item.price;
                    }
                });
                this.booking.segments.retour.services.map(item => {
                    if(this.has_retour){
                       s += item.quantity * item.price_two;
                    }
                    else{
                       s += item.quantity * item.price;
                        
                    }
                });
                s += this.booking.passengers.filter(item=>item.is_child).length*this.price_child
                return s;
            },
            destroyService(service, type) {
                var booking = this.booking.segments[type];
                booking.services = booking.services.filter(item => service.id != item.id);
             }
        },
        template: '#card-template'
    });

</script>
