@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">
            <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>Bono Pie en UF</label>
          <input type="text" name="bono" value="{{$producto->bono ?? ''}}" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Rentabilidad %</label>
          <input type="text" name="rentabilidad" value="{{$producto->rentabilidad ?? ''}}" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Valor Cuota en UF</label>
          <input type="text" name="cuota" value="{{$producto->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" value="{{$producto->estado ?? ''}}" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Unidades</label>
          <input type="text" name="unidades" value="{{$producto->unidades ?? ''}}" />
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label>Modelos</label>
          <input type="text" name="modelos" value="{{$producto->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" value="{{(property_exists($producto, 'tamaños') and is_array($producto->tamaños)) ? explode(' - ', rtrim($producto->tamaños, ' m²'))[0] : ''}}" />
          </div>
          <div class="field">
            <label>Tamaño M&aacute;ximo</label>
            <input type="text" name="tamaño_max" value="{{(property_exists($producto, 'tamaños') and is_array($producto->tamaños)) ? explode(' - ', rtrim($producto->tamaños, ' m²'))[1] : ''}}" />
          </div>
        </div>
      </div>
      <div class="ten wide column">
        <div class="field">
          <label>Descripci&oacute;n</label>
          <textarea rows="1" name="descripcion">{{$producto->descripcion ?? ''}}</textarea>
        </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>
      <?php
      /*
      <div class="column">
        <div class="field">
          <label>Video</label>
          <input type="file" name="video" />
        </div>
        <div class="ui list">
          @if (isset($producto->video))
            <div class="item">
              <i class="trash alternate outline icon video"></i>
              <div class="content">
                {{$producto->video}}
              </div>
            </div>
          @endif
        </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()
        $('.selection.dropdown').dropdown()
        $('.selection.dropdown').dropdown('set selected', '{{$producto->segmento}}')
        $('.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())
          }
        })
        var entrega = new Date('{{str_pad(implode('-', array_reverse(explode('/', $producto->entrega))), 7, '20', STR_PAD_LEFT)}}-01T01:00')
        $('.calendar').calendar('set date', entrega)
        $('.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
        $("input[name='video']").change(function() {
          var fData = new FormData()
          fData.append('video', $("input[name='video']")[0].files[0])
          var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/set'
          $.ajax({
            url: url,
            method: 'post',
            data: fData,
            contentType: false,
            processData: false,
            success: (data) => {
              if (data.estado) {
                window.location.reload()
              }
            }
          })
        })
        $('.trash.video').attr('cursor', 'pointer').click(() => {
          var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/delete'
          $.post(url, {}, (data) => {
            if (data.estado) {
              window.location.reload()
            }
          })
        })
      }
    }
    $(document).ready(() => {
      producto.setup()
    })
  </script>
@endpush
