@extends('app')

@section('content')
    <!-- Content -->
    <div class="content">
        <div class="animated fadeIn">

            <div class="row">
                {{ csrf_field() }}
                <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..." id='client' name='client_id' class="standardSelect" tabindex="1">
                                        <option value="" label="default"></option>
                                                                            </select>
                                    <br/>
                                    <br/>


                                </div>
                                <div class="card-body" style="padding-top: 0; padding-bottom: 0;">
                                    <div class="row">
                                        Abrir Formulário de Cliente <div class='btn' style="position: relative; bottom: 5px;"><i class="fa fa-plus"></i></div>
                                    </div>
                                </div>

                            </div>

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

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

                        <div class="card-body">

                            <select data-placeholder="Entrega..." id="entrega" name='delivery_type_id' class="standardSelect option-input">
                                <option value="" label="default"></option>
                                <option value="1">Motoboy</option>
                                <option value="2">Balcão</option>
                            </select>


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

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

                        <div class="card-body">

                            <select data-placeholder="Produto..." id='produto' name='product_id' class="standardSelect option-input detail-input">
                                <option value="" label="default"></option>
                                                            </select>

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

                        <div class="card-body">
                            <select data-placeholder="Sabores..." id="sabor" name='flavor_id' class="standardSelect option-input detail-input">
                                <option value="" label="default">Sabores</option>


                            </select>


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

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

                        <div class="card-body">

                            <select data-placeholder="Variação..." id='variacao' name='variation_id' class="standardSelect option-input detail-input">
                                
                            </select>

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

                        <div class="card-body">

                            <select data-placeholder="Adicionais..." id='variacao' name='variation_id' class="standardSelect option-input detail-input">

                            </select>

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


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

                        <div class="card-body">
                            <select data-placeholder="Borda..." name='border_id' id='borda' class="standardSelect option-input detail-input">
                                <option value="" label="default">Bordas</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" id="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" id="observacao">
                            </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" id="btn-adicionar">Adicionar Item</button>
                                <button type="button" class="btn btn-secondary btn-lg" id="btn-salvar">Salvar</button>
                                <button type="button" class="btn btn-success btn-lg">Salvar e Imprmir</button>
                            </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" id="text-valor"> 00,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" id="text-previsao"> 04:26</div>
                                    <input type="hidden" id='input-previsao' name="previsao" class="option-input">
                                </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" id="text-frete"> 00,00</span>
                                        <input type="hidden" id='valor-frete' name="valor-frete" class="option-input"></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" id="text-valor-total"> 00,00</span><input type="hidden" id="valor-total-pedido" name="valor-total-pedido" class="option-input"></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">
                                <div class="stat-text">Itens do pedido</div>
                                <table class="table" id="pedido-itens">
                                    <thead>
                                    <tr>
                                        <th>Produto</th>
                                        <th>Tamanho</th>
                                        <th>Sabor</th>
                                        <th>Adicionais</th>
                                        <th>Valor</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


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


@endsection

@section('post-script')

    <script>

        $("#client").on('change', function(){
            //$.post('