@extends('layouts_home.header')
@section('content')

    @if (session('success_message'))
        <div class="alert alert-success">
            {{ session('success_message') }}
        </div>
    @endif
    <div id="breadcrumb" class="flexer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 italics">
                    <a href="{{ route('home.index')}}">Inicio</a> / {{-- / <a href="#">Shop</a> / <a href="#">Mens</a> / <a href="#">T-Shirt With World Wide</a> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="container prod-det">
        <div class="row">
            <form action="" id="services">
                <div class="col-md-4">
                    <h3 class="font-black">Paquete #1</h3>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="1" value="200"/>
                        <label for="servicio">Pasajes</label> <span>200</span>
                    </div>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="2" value="30"/>
                        <label for="servicio">Desayuno</label> <span>30</span>
                    </div>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="3" value="40"/>
                        <label for="servicio">Tour</label> <span>40</span>
                    </div>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="4" value="30"/>
                        <label for="servicio">Almuerzo</label> <span>30</span>
                    </div>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="5" value="30"/>
                        <label for="servicio">Cena</label> <span>30</span>
                    </div>
                    <div class="form-control">
                        <input type="checkbox" name="servicio" class="agregar" data-id="6" value="80"/>
                        <label for="servicio">Spa</label> <span>80</span>
                    </div>
                    
                    <input type="button" onclick="calculos()" value="Calcular">
                    <h3>Total: S/<span ><input type="text" id="calcular"></span></h3>
                    
                </div>
            </form>
            <div class="col-md-4">

            </div>
            <div class="col-md-4">

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

@endsection

@section('script')

<script>

    const calculo = document.getElementById('services');
    calculo.addEventListener('change',() => calculos());

    function calculos() {
    
        var servicio = document.forms[0];
        var datos = 0;
        var i;
        for (i = 0; i < servicio.length; i++) {
            if (servicio[i].checked) {
                datos = datos + parseInt(servicio[i].value);
            }
        }
            document.getElementById("calcular").value = datos;
        }
    </script>

@endsection