@extends('layouts.master')

@section('content')
<div class="container">
    <div class="row-fluid">
        <div class="col-md-12">
            <h2><span class="glyphicon glyphicon-edit"></span> Nueva Cotización</h2>
            <hr>
            <form class="form-horizontal" role="form" id="datos_cotizacion">
                <div class="form-group row">
                    <label for="atencion" class="col-md-1 control-label">Atención:</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="atencion" placeholder="Nombre y Apellido" required>
                    </div>
                    <label for="tel1" class="col-md-1 control-label">Teléfono:</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="tel1" placeholder="Teléfono" required>
                    </div>
                    <label for="tel1" class="col-md-1 control-label">Correo:</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="email1" placeholder="Correo" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="empresa" class="col-md-1 control-label">Ciudad:</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="ciudad" placeholder="Ciudad">
                    </div>
                    <label for="tel2" class="col-md-1 control-label">Estado:</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="estado" placeholder="Estado">
                    </div>
                    <label for="email" class="col-md-1 control-label">Codigo Postal:</label>
                    <div class="col-md-3">
                        <input type="email" class="form-control" id="cp" placeholder="Codigo Postal">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="empresa" class="col-md-1 control-label">Distribuidor:</label>
                    <div class="col-md-5">
                        <select class="form-control js-example-basic-single" name="distribuidor" id="distribuidor">
                            <option value="">Seleccionar Distribuidor</option>
                            @foreach($distribuidor as $dis)
                            <option value="{{ $dis->id }}">{{ $dis->nombre_comercial }} ({{ $dis->ciudad }} - {{ $dis->provincia_comercial }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="col-md-12">
                    <div class="pull-right">
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
                            <span class="glyphicon glyphicon-plus"></span> Agregar productos
                        </button>
                    </div>	
                </div>
            </form>            
            <div class='col-md-12' id="table_prod_reg" style="display: none">
                <br><br><br>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Modelo</th>
                            <th>Categoria</th>
                            <th>Cantidad</th>
                            <th>Precio Unit</th>
                            <th>Iva</th>
                            <th>Precio Total</th>
                            <th>Eliminar</th>
                        </tr>
                    </thead>
                    <tbody id="resultados"></tbody>
                    <tbody id="total_"></tbody>
                    <tbody id="total_2" style="display: none"></tbody>
                    <input type="hidden" id="total">
                    <input type="hidden" id="iva">
                </table>
                <button id="add_cotizacion" class="btn btn-primary pull-right">Registrar Cotización</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Buscar productos</h4>
                <br>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="serach_prod" onkeyup="mayus(this);" placeholder="Buscar productos" style="margin-bottom: 15px;">
                    </div>
                </div>
            </div>
            <div class="table-wrapper-scroll-y">
                <div class="modal-body">                    
                    <div id="loader" style="position: absolute;	text-align: center;	top: 55px;	width: 100%;display:none;"></div><!-- Carga gif animado -->
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Producto</th>
                                <th>Categoria</th>
                                <th>Cantidad</th>
                                <th>Precio</th>
                                <th>Iva</th>
                                <th>Agregar</th>
                            </tr>
                        </thead>
                        <tbody id="outer_div"></tbody>
                    </table>
                </div>
                <br>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>
</div>
@endsection

@section('scripts')
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{ asset('js/VentanaCentrada.js') }}"></script>
<script src="{{ asset('js/productos.js') }}"></script>
<script>
$(document).ready(function () {
    $('.js-example-basic-single').select2({
        theme: "bootstrap",
        placeholder: "Selecciona un distribuidor",
        allowClear: true
    });
});
</script>
@endsection