@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')) ? 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')) ? 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 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();
          }
      ))
    }
    function 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)
        )
      )
    }
    $(document).ready(() => {
      $('.selection.dropdown').dropdown()
      $('.selection.dropdown').dropdown('set selected', '{{$producto->segmento}}')
      $('.calendar').calendar({
        type: 'month',
        text: {
          months: months.long,
          monthsShort: months.short
        },
        formatInput: false,
        onChange: function(a, b) {
          $(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)
      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()
          }
        })
      })
    })
  </script>
@endpush