@extends('admin.layout.base')

@section('page_content')
  <div class="ui header">
    PRODUCTO
  </div>
  <form class="ui form" method="post" action="{{$urls->admin}}/producto/{{$producto->id}}" enctype="multipart/form-data">
    <div class="ui three columns grid">
      <div class="column">
        <div class="field">
          <label>Nombre</label>
          <input type="text" name="nombre" value="{{$producto->nombre ?? ''}}" />
        </div>
      </div>
      <div class="column">
        <div class="fields">
          <div class="field">
            <label>Direcci&oacute;n</label>
            <input type="text" name="calle" value="{{$producto->direccion->calle ?? ''}}" />
          </div>
          <div class="field">
            <label>Comuna</label>
            <input type="text" name="comuna" value="{{$producto->direccion->comuna ?? ''}}" />
          </div>
          <div class="field">
            <label>Ciudad</label>
            <input type="text" name="ciudad" value="{{$producto->direccion->ciudad ?? ''}}" />
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Segmento</label>
          <div class="ui selection dropdown" id="segmento">
            <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" value="{{str_replace('.', '', $producto->valor ?? '')}}" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Destacado</label>
          <div class="ui toggle checkbox">
            <input type="checkbox" name="destacado" />
          </div>
        </div>
      </div>
      <span id="campos"></span>
      @foreach ($properties as $property)
        <div class="column">
          <div class="field">
            <label>{{$property->label}}</label>
            <input type="text" name="{{$property->name}}" value="{{$producto->{$property->name} ?? ''}}" />
          </div>
        </div>
      @endforeach
      <span id="end_campos"></span>
      <div class="row">
        <div class="ten wide column">
          <div class="field">
            <label>Descripci&oacute;n</label>
            <textarea rows="1" name="descripcion">{{$producto->descripcion ?? ''}}</textarea>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Im&aacute;genes</label>
          <input type="file" name="imagen" />
        </div>
        <div id="imagenes" class="ui list"></div>
      </div>
    </div>
    <br />
    <button class="ui button">GUARDAR</button>
  </form>
@endsection

@push('scripts')
  <script type="text/javascript">
    var producto = {
      months: {
        long: [],
        short: []
      },
      date: new Date(2018, 0, 1),
      listImage: (image) => {
        var icon = $('<i></i>').attr('class', 'trash alternate outline icon')
        icon.css('cursor', 'pointer').click(function() {
          var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagen/delete'
          $.post(url, {imagen: image}, (data) => {
            if (data.estado) {
              window.location.reload()
            }
          })
        })
        $('#imagenes').append(
          $('<div></div>').attr('class', 'item').append(
            icon
          ).append(
            $('<div></div>').attr('class', 'content').html(image)
          )
        )
      },
      setMonths: () => {
        for (i = 0; i < 12; i ++) {
          producto.date.setMonth(i)
          producto.months.long.push(producto.date.toLocaleString('es-ES', {month: "long"}).replace(
              /\w\S*/g,
              function(txt) {
                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
              }
          ))
          producto.months.short.push(producto.date.toLocaleString('es-ES', {month: "short"}).replace(
              /\w\S*/g,
              function(txt) {
                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
              }
          ))
        }
      },
      setup: () => {
        producto.setMonths()
        $('#segmento').dropdown({
          onChange: () => {
            producto.changeSegmento()
          }
        })
        $('#segmento').dropdown('set selected', '{{$producto->segmento}}')
        producto.linkCalendar()
        $('.checkbox').checkbox()
        @if ($producto->destacado())
          $('.checkbox').checkbox('set checked')
        @endif
        $("input[name='imagen']").change(function() {
          var data = new FormData()
          data.append('imagen', $(this)[0].files[0])
          var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagenes/add'
          $.ajax({
            url: url,
            method: 'post',
            data: data,
            contentType: false,
            processData: false,
            success: (data) => {
              if (data.estado) {
                window.location.reload()
              }
            }
          })
        })
        @foreach ($producto->imagenes() as $image)
          producto.listImage('{{$image}}')
        @endforeach
      },
      linkCalendar: () => {
        var div = $("input[name='entrega']").parent()
        div.find('input').remove()
        div.append(
          $('<div></div>').attr('class', 'ui calendar').append(
            $('<input />').attr('type', 'text').attr('name', 'entrega').attr('placeholder', 'Entrega')
          )
        )
        $('.calendar').calendar({
          type: 'month',
          text: {
            months: producto.months.long,
            monthsShort: producto.months.short
          },
          formatInput: false,
          onChange: function(a, b) {
            if (typeof a == 'undefined') {
              a = new Date()
            }
            $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
          }
        })
        @if (isset($producto->entrega))
          var entrega = new Date('{{str_pad(implode('-', array_reverse(explode('/', $producto->entrega))), 7, '20', STR_PAD_LEFT)}}-01T01:00')
          $('.calendar').calendar('set date', entrega)
        @endif
      },
      changeSegmento: () => {
        var segmento = $('#segmento').dropdown('get value')
        if (segmento == '{{$producto->segmento}}') {
          return
        }
        var url = '{{$urls->admin}}/productos/campos'
        $.post(url, {segmento: segmento}, (data) => {
          var div = $('#campos')
          var end = $('#end_campos')
          var current = div.next()
          var next = current.next()
          if (current[0] == end[0] || next[0] == end[0]) {
          } else {
            while (next[0] != end[0] || next.length == 0) {
              current.remove()
              current = next
              next = next.next()
            }
          }
          $.each(data.fields, (i, el) => {
            var campo = $('<div></div>').attr('class', 'column').append(
              $('<div></div>').attr('class', 'field').append(
                $('<label></label>').html(el.label)
              ).append(
                $('<input />').attr('type', 'text').attr('name', el.name)
              )
            )
            end.before(campo)
          })
          producto.linkCalendar()
        })
      }
    }
    $(document).ready(() => {
      producto.setup()
    })
  </script>
@endpush