@extends('app')

@section('content')


    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>Novo</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="#">Pedido</a></li>
                                <li class="active">Pedido</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="content">
        <div class="animated fadeIn">

            <div class="row">

                <div class="col-xs-12 col-sm-12">
                    <div class="card">

                        <div class="card-body card-block">
                            <div class="form-group">
                                <div class="input-group">


                                    <select data-placeholder="Cliente..." class="standardSelect" tabindex="1">
                                        <option value="" label="default"></option>
                                        <option value="United States">Bruno Pircoski 42 99102115</option>
                                        <option value="United Kingdom">Joao carlos 42 16565465</option>
                                        <option value="Afghanistan">paulode Nobrega 54 65465546</option>
                                        <option value="Aland Islands">Gean carlos 54 654654</option>
                                        <option value="Albania">Paulo 5646545664</option>
                                        <option value="Algeria">Carla 5456465</option>
                                        <option value="American Samoa"> Paula 54564564646</option>
                                        <option value="Andorra">Andrea 546545646</option>
                                        <option value="Angola">Solage 46545644</option>
                                        <option value="Anguilla">Tassiane 456465465465</option>
                                        <option value="Antarctica">Tais 54654456</option>
                                    </select>
                                    <br/>
                                    <br/>
                                    <button type="button" class="btn btn-primary">Cadastrar</button>


                                </div>

                            </div>

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

                <div class="col-xs-4 col-sm-4">
                    <div class="card">

                        <div class="card-body">

                            <select data-placeholder="Entrega..." multiple class="standardSelect">
                                <option value="" label="default"></option>
                                <option value="United States">Motoboy</option>
                                <option value="United Kingdom">Balcão</option>
                            </select>


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

                <div class="col-xs-4 col-sm-4">
                    <div class="card">

                        <div class="card-body">

                            <select data-placeholder="Produto..." multiple class="standardSelect">
                                <option value="" label="default"></option>
                                <option value="United States">Pizza</option>
                                <option value="United Kingdom">Calzonne</option>

                            </select>

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

                <div class="col-xs-4 col-sm-4">
                    <div class="card">

                        <div class="card-body">

                            <select data-placeholder="Tamanho..." multiple class="standardSelect">
                                <option value="" label="default"></option>
                                <option value="United States">Gigante</option>
                                <option value="United Kingdom">Grande</option>
                                <option value="Afghanistan">Média</option>
                                <option value="Aland Islands">Pequena</option>

                            </select>

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

                <div class="col-xs-5 col-sm-5">
                    <div class="card">

                        <div class="card-body">
                            <select data-placeholder="Sabores..." multiple class="standardSelect">
                                <option value="" label="default"></option>
                                <option value="United States">4 queijos</option>
                                <option value="United Kingdom">Frango catupiry</option>
                                <option value="Afghanistan">Calabresa</option>
                                <option value="Aland Islands">Da casa</option>
                                <option value="Aland Islands">Tropeiro</option>
                                <option value="Aland Islands">Mexicana</option>
                                <option value="Aland Islands">Mussarela</option>
                                <option value="Aland Islands">MM</option>
                                <option value="Aland Islands">Prestigio</option>
                                <option value="Aland Islands">Bacon</option>
                                <option value="Aland Islands">Milho</option>
                                <option value="Aland Islands">Palmito</option>

                            </select>


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

                <div class="col-xs-2 col-sm-2">
                    <div class="card">

                        <div class="card-body">
                            <select data-placeholder="Borda..." multiple class="standardSelect">
                                <option value="" label="default"></option>
                                <option value="United States">Sem borda</option>
                                <option value="United Kingdom">Catupiry</option>
                                <option value="Afghanistan">Chedar</option>


                            </select>


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

                <div class="col-xs-2 col-sm-2">
                    <div class="card">

                        <div class="card-body">

                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                                <input class="form-control" placeholder="min">
                            </div>


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

                <div class="col-xs-3 col-sm-3">
                    <div class="card">

                        <div class="card-body">

                            <div class="input-group">

                                <input class="form-control" placeholder="observação">
                            </div>


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

                <div class="col-xs-3 col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="stat-widget-one">
                                <div class="stat-icon dib"><i class="ti-money text-success border-success"></i></div>
                                <div class="stat-content dib">
                                    <div class="stat-text">Valor do pedido</div>
                                    <div class="stat-digit"><span>R$</span><span
                                                class="count"> 48</span><span>,00</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-3 col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="stat-widget-one">
                                <div class="stat-icon dib"><i class="ti-alarm-clock text-success border-success"></i>
                                </div>
                                <div class="stat-content dib">
                                    <div class="stat-text">Previsão</div>
                                    <div class="stat-digit">23:20</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-3 col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="stat-widget-one">
                                <div class="stat-icon dib"><i class="ti-money text-success border-success"></i></div>
                                <div class="stat-content dib">
                                    <div class="stat-text">Frete</div>
                                    <div class="stat-digit"><span>R$</span><span
                                                class="count"> 12</span><span>,00</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-3 col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="stat-widget-one">
                                <div class="stat-icon dib"><i class="ti-money text-success border-success"></i></div>
                                <div class="stat-content dib">
                                    <div class="stat-text">Total</div>
                                    <div class="stat-digit"><span>R$</span><span
                                                class="count"> 60</span><span>,00</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-body">
                                <button type="button" class="btn btn-primary btn-lg">Adicionar Outro</button>
                                <button type="button" class="btn btn-secondary btn-lg">Salvar</button>
                                <button type="button" class="btn btn-success btn-lg">Salvar e Imprmir</button>

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


            </div>


        </div><!-- .animated -->
    </div>
    <!-- /.content -->


@endsection


@section('post-script')

    <script>
        $('#btnNewItem').click(function () {

            var row = $('table tbody > tr:last'),
                newRow = row.clone(),
                length = $("table tbody tr").length;

            newRow.find('td').each(function () {
                var td = $(this),
                    input = td.find('input, select'),
                    name = input.attr('name');
                input.attr('name', name.replace((length - 1) + "", length + ""));
            });

            newRow.find('input').val(1);
            newRow.insertAfter(row);
            calculateTotal();

        });


        $(document.body).on('click', 'select', function () {
            calculateTotal();
        });

        $(document.body).on('blur', 'input', function () {
            calculateTotal();
        });

        function calculateTotal() {
            var total = 0,
                trLen = $("table tbody tr").length,
                tr = null, price, qtd;

            for (var i = 0; i < trLen; i++) {
                tr = $('table tbody tr').eq(i);
                price = tr.find(':selected').data('price');
                qtd = tr.find('input').val();
                total += price * qtd;
                $('#total').html(total);
            }
        }


    </script>

@endsection