@extends('layouts.bubofamily')

@section('content_header')
<h1>Lista dei Movimenti</h1>
@endsection

@section('content')
<!-- <div class="row">
    <div class="col-lg-12">
        <h1 class="page-header"></h1>
    </div>
</div>-->
<div class="row">
	<div class="col-lg-12">
    	<div class="panel panel-default">
            <div class="panel-heading">
                Lista movimenti
            </div>
            <div class="panel-body">
            	<div class="row">
            		<button class="btn btn-warning btn-detail open_modal_spesa">Nuova Spesa</button>&nbsp;
            		<button class="btn btn-warning btn-detail open_modal_entrata">Nuova Entrata</button>
            	</div>
            	<div class="row">
            <div class="table-responsive">
                   <table class="table table-striped table-bordered table-hover" id="listamovimenti" data-page-length='25'>
            		<thead>
            			<tr>
            				<th>Data</th>
            				<th>Categoria</th>
            				<th>Descrizione</th>
            				<th>Importo</th>
            				<th>Azione</th>
            			</tr>
            		</thead>
            		<tbody>
            		@foreach( $movimenti as $movimento )
            		<tr>

            			<td>{{ $movimento->mov_data}}</td>
                        <td>{{ $movimento->cat_name}}</td>
            			<td>{{ $movimento->mov_descrizione}}</td>
            			<td>&euro; {{ $movimento->mov_importo}}</td>
            			<td>
            				<button class="btn btn-warning btn-detail open_modal_modifica" value="{{ $movimento->id}}">Edit</button>&nbsp;
            				<a class="btn btn-danger" href="/admin/movimenti/delete?id={{ $movimento->id}}">Canc.</a>&nbsp;
            				<a class="btn btn-warning" href="/admin/movimenti/docs?entity=0&entity_id={{ $movimento->id}}">Doc.</a>&nbsp;
            				<!-- Definisce quanti documenti sono presenti per il record -->
            				( {{ $movimento->quanti ?? ''}} )
            			</td>
            		</tr>
            		@endforeach
            		</tbody>
            		</table>
            	</div>
            	</div>
			</div>
		</div>
	</div>
</div>


		</div>
	</div>
</div>
<!-- MODAL NEW -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog draggable" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Nuovo movimento</h4>

			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-12">
						<form action="" method="POST" id="form">
							@csrf
							<div class="row">
								<div class="col-xs-6">
									<label for="data" class="form-label">Data</label> <input
										type="date" class="form-control" id="data" name="mov_data"
										value="{{ date('Y-m-d')}}">
								</div>
								<div class="col-xs-6">
									<label for="categoria" class="form-label">Categoria</label> <select
										name="mov_fk_categoria" class="form-control selectpicker select2"
										id="categoria" data-live-search="true"
										data-live-search-placeholder="Cerca opzioni">
									</select>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12">
									<label for="descrizione" class="form-label">Descrizione</label>
									<input type="text" class="form-control" id="descrizione"
										size="50" name="mov_descrizione">
								</div>
							</div>
							<div class="row">
								<div class="col-xs-5">
									<label for="importo" class="form-label">Importo</label>
									<div class="input-group">
										<span class="input-group-addon"> <i class="fa fa-eur"></i>
										</span> <input type="number" step="0.01" min="-999999"
											max="999999" class="form-control" id="importo" size="50"
											name="mov_importo" aria-describedby="importo">
									</div>
								</div>

								<div class="col-xs-7">
									<label for="tags" class="form-label">Tag</label> <select
										name="mov_fk_tags" class="form-control select2" id="tags"></select>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12">&nbsp;</div>
							</div>
							<div class="row">
								<div class="col-xs-12"></div>
							</div>

					</div>
				</div>
			</div>
			<div class="modal-footer">
				<input type="hidden" name="userid" value="{{ Auth::user()->id }}">
				<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>
</div>

@endsection

@section('js')
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script src="/js/app/movimenti.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endsection