@extends("app")


@section("content")

<div class="container">
	<div class="row">
		<div class="col-sm-8">
			<h1>Saldos Bancarios</h1>
		</div>
		<div class="col-sm-4 text-right">
			<a href="#" class="btn btn-primary btn-header">
				Descargar Excel
				<i class="fa fa-download" aria-hidden="true"></i>
			</a>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<div class="form-group">
				<label for="filter-date">
					Filtrar por Fecha
				</label>    
				<input class="form-control" type="text" id="filter-date" name="date">
			</div>
		</div>
		<div class="col-sm-2">
			<button type="button" class="btn btn-primary btn-block btn-input">Filtrar</button>
		</div>
	</div>
	<div class="bank-balances-table">
		<div class="row">
			<div class="col-md-3 u-pr0">
				<span class="title-table">
					Cuenta
				</span>
			</div>
			<div class="col-md-3 u-p0">
				<span class="title-table">
					Saldo Actual
				</span>
			</div>
			<div class="col-md-6 u-pl0">
				<div class="row">
					<div class="col-md-4 u-p0">
						<span class="title-table">
							Fecha
						</span>
					</div>
					<div class="col-md-4 u-p0">
						<span class="title-table">
							Concepto
						</span>
					</div>
					<div class="col-md-4 u-p0">
						<span class="title-table">
							Monto
						</span>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6 u-pr0">
				<ul class="nav nav-pills nav-stacked js-nav-tabs">
					<li role="presentation" class="active">
						<a href="#acount1">
							<div class="row">
								<div class="col-md-6 u-pl8">
									<span>
										2357638573648601
									</span>
								</div>
								<div class="col-md-6 u-pl8 ">
									<span>
									$246,596,3956
									</span>
								</div>
							</div>
						</a>
					</li>
					<li role="presentation">
						<a href="#acount2">
							<div class="row">
								<div class="col-md-6 u-pl8">
									<span>
										2688561063122967
									</span>
								</div>
								<div class="col-md-6 u-pl8">
									<span>
										$294,5967,496
									</span>
								</div>
							</div>
						</a>
					</li>
					<li role="presentation">
						<a href="#acount3">
							<div class="row">
								<div class="col-md-6 u-pl8">
									<span>
										3817762540058684
									</span>
								</div>
								<div class="col-md-6 u-pl8">
									<span>
										$284,805,990
									</span>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="col-md-6 u-pl0">
				<div class="tab-content u-pl0 u-pt10 u-pb10 u-pr0">
					<div role="tabpanel" class="tab-pane active" id="acount1">
						<div class="row">
							<div class="col-md-4 u-pl8">
								<span>
									11/08/17
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									Pagos
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									$293,596,690
								</span>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane" id="acount2">
						<div class="row">
							<div class="col-md-4 u-pl8">
								<span>
									24/01/17
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									Pagos
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									$360,851,386
								</span>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane" id="acount3">
						<div class="row">
							<div class="col-md-4 u-pl8">
								<span>
									16/08/17
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									Pagos
								</span>
							</div>
							<div class="col-md-4 u-pl8">
								<span>
									$395,694,85
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection