@extends('admin.layout.base')

@section('page_content')
  <div class="ui header">
    AGREGAR PRODUCTO
  </div>
  <form class="ui form" method="post" action="{{$urls->admin}}/productos/add" enctype="multipart/form-data">
    <div class="ui three columns grid">
      <div class="column">
        <div class="field">
          <label>Nombre</label>
          <input type="text" name="nombre" />
        </div>
      </div>
      <div class="column">
        <div class="fields">
          <div class="field">
            <label>Direcci&oacute;n</label>
            <input type="text" name="calle" />
          </div>
          <div class="field">
            <label>Comuna</label>
            <input type="text" name="comuna" />
          </div>
          <div class="field">
            <label>Ciudad</label>
            <input type="text" name="ciudad" />
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Segmento</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="segmento" />
            <i class="dropdown icon"></i>
            <div class="default text">Segmento</div>
            <div class="menu">
              @foreach ($segmentos as $segmento)
                <div class="item" data-value="{{$segmento->titulo}}">{{$segmento->titulo}}</div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Valor en UF</label>
          <input type="text" name="valor" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Bono Pie en UF</label>
          <input type="text" name="bono" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Rentabilidad %</label>
          <input type="text" name="rentabilidad" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Valor Cuota en UF</label>
          <input type="text" name="cuota" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Entrega Estimada</label>
          <div class="ui calendar">
            <input type="text" name="entrega" placeholder="Entrega" />
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Destacado</label>
          <div class="ui toggle checkbox">
            <input type="checkbox" name="destacado" />
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Estado</label>
          <input type="text" name="estado" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Unidades</label>
          <input type="text" name="unidades" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Modelos</label>
          <input type="text" name="modelos" />
        </div>
      </div>
      <div class="column">
        <div class="fields">
          <div class="field">
            <label>Tamaño M&iacute;nimo</label>
            <input type="text" name="tamaño_min" />
          </div>
          <div class="field">
            <label>Tamaño M&aacute;ximo</label>
            <input type="text" name="tamaño_max" />
          </div>
        </div>
      </div>
      <div class="ten wide column">
        <div class="field">
          <label>Descripci&oacute;n</label>
          <textarea rows="1" name="descripcion"></textarea>
        </div>
      </div>
    </div>
    <br />
    <button class="ui button">AGREGAR</button>
  </form>
@endsection

@push('scripts')
  <script type="text/javascript">
    var months = {
      long: [],
      short: []
    }
    var date = new Date(2018, 0, 1)
    for (i = 0; i < 12; i ++) {
      date.setMonth(i)
      months.long.push(date.toLocaleString('es-ES', {month: "long"}).replace(
          /\w\S*/g,
          function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
          }
      ))
      months.short.push(date.toLocaleString('es-ES', {month: "short"}).replace(
          /\w\S*/g,
          function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
          }
      ))
    }
    $(document).ready(() => {
      $('.selection.dropdown').dropdown()
      $('.calendar').calendar({
        type: 'month',
        text: {
          months: months.long,
          monthsShort: months.short
        },
        formatInput: false,
        onChange: function(a) {
          $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
        }
      })
      $('.checkbox').checkbox()
    })
  </script>
@endpush
