@extends('layouts.app')

@section('content')
<section class="section">
<div id="root" class="container">
  <h1 class="title">
    Compras MPS
  </h1>
  <p class="subtitle">
    Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
  </p>
  <subpedido-select inline-template gdcid="{{Auth::user()->grupoDeCompra->id}}">
  	<div>
	    <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
  		<div class="columns">
	  		<div class="column is-two-thirds">
				<div class="field">
			        <div class="control">
		        		<input class="input" @input="onType" v-model="subpedido"></input>
					</div>
					<p class="help">Intentá que sea claro como para que tus compas del barrio te identifiquen.</p>
				</div>
			</div>
	  		<div class="column is-one-third buttons">
			  	<button class="button is-danger" :disabled="botonCrearDesabilitado" @click="submit">Crear nuevo pedido</button>
			</div>
		</div>
		<div v-if="subpedidosExistentes.length" class="block">
			<label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
			<p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
  				<div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}">
  					<div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet"><p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem" v-text="subpedidoExistente.nombre"></p></div>
					<div class="buttons column is-half-mobile is-one-third-desktop is-one-third-tablet">
					  	<button class="button is-danger" @click="elegirExistente">Modificar pedido existente</button>
  					</div>
  				</div>
			</div>		
		</div>
	</div>
  </subpedido-select>
</div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('js/subpedidos-create.js') }}"></script>
@endsection