@extends('coins.base')

@section('page_content')
  <h3 class="ui basic segment header">Monedas</h3>
  <table class="ui striped table" id="coins">
    <thead>
      <tr>
        <th>
          Moneda
        </th>
        <th>
          Código
        </th>
        <th class="right aligned">
          <i class="plus icon"></i>
        </th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div class="ui modal" id="coin_modal">
    <div class="header"></div>
    <div class="content"></div>
    <div class="actions">
      <div class="ui approve button"></div>
    </div>
  </div>
@endsection

@push('page_scripts')
  <script type="text/javascript">
    function reload() {
      window.location.reload()
    }
    const coins = {
      urls: {
        api: '{{$urls->api}}',
        base: '{{$urls->base}}'
      },
      table: null,
      modal: null,
      setup: function(table, modal) {
        this.table = table
        this.modal = modal
        table.find('plus icon').css('cursor', 'pointer').click(() => {
          addCoin()
        })
        table.find('.plus.icon').css('cursor', 'pointer').click((e) => {
          this.add()
        })
        this.load()
      },
      load: function() {
        const url = this.urls.api + '/coins'
        const table = this.table
        const body = table.find('tbody')
        table.find('tbody').append($('<div></div>').attr('class', 'ui active dimmer').append(
          $('<div></div>').attr('class', 'ui loader')
        ))
        $.getJSON(url, (data) => {
          body.html('')
          data.coins.forEach((v) => {
            const u = this.urls.base + '/coin/' + v.id
            const tr = $('<tr></tr>').append(
              $('<td></td>').append($('<a></a>').attr('href', u).html(v.name))
            ).append(
              $('<td></td>').append($('<a></a>').attr('href', u).html(v.code))
            ).append(
              $('<td></td>').attr('class', 'right aligned').append(
                $('<i></i>').attr('class', 'edit icon edit_coin').attr('data-id', v.id)
              ).append(
                $('<i></i>').attr('class', 'minus icon minus_coin').attr('data-id', v.id)
              )
            )
            body.append(tr)
          })
          $('.edit_coin').css('cursor', 'pointer').click((e) => {
            const elem = $(e.target)
            const id = elem.attr('data-id')
            this.edit(id)
          })
          $('.minus_coin').css('cursor', 'pointer').click((e) => {
            const elem = $(e.target)
            const id = elem.attr('data-id')
            this.delete(id)
          })
        }).catch(() => {
          body.html('')
        })
      },
      add: function() {
        this.modal.find('.header').html('Agregar')
        this.modal.find('.actions .approve.button').html('Agregar')
        this.modal.find('.content').html('')
        const form = $('<form></form>').attr('class', 'ui form').append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Nombre')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'name')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Identificador')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'identifier')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Código')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Prefijo')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'prefix')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Sufijo')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'suffix')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Decimales')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'decimals')
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Url')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'ref_url')
            )
        )
        this.modal.find('.content').append(form)
        this.modal.modal('show')
        this.modal.modal({
          onApprove: () => {
            const url = this.urls.api + '/coins/add'
            const fields = [
              'name',
              'code',
              'identifier',
              'prefix',
              'suffix',
              'decimals',
              'ref_url'
            ]
            let data = {}
            fields.forEach((k) => {
              const val = form.find("[name='" + k + "']").val()
              if (val != '') {
                data[k] = val
              }
            })
            data = JSON.stringify(data)
            $.post(url, data, (response) => {
              if (response.created === true) {
                return this.load()
              }
            }, 'json')
          }
        })
      },
      edit: function(id) {
        const url = this.urls.api + '/coin/' + id
        $.getJSON(url, (data) => {
          const elem = data.coin
          this.modal.find('.header').html('Editar')
          this.modal.find('.actions .approve.button').html('Editar')
          this.modal.find('.content').html('')
          const form = $('<form></form>').attr('class', 'ui form').append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Nombre')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'name').attr('value', elem.name)
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Código')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5').attr('value', elem.code)
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Prefijo')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'prefix').attr('value', elem.prefix)
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Sufijo')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'suffix').attr('value', elem.suffix)
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Decimales')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'decimals').attr('value', elem.decimals)
            )
          ).append(
            $('<div></div>').attr('class', 'field').append(
              $('<label></label>').html('Url')
            ).append(
              $('<input />').attr('type', 'text').attr('name', 'ref_url').attr('value', elem.ref_url)
            )
          )
          this.modal.find('.content').append(form)
          this.modal.modal('show')
          this.modal.find('.actions .approve.button').click(() => {
            const url = this.urls.api + '/coin/' + id + '/edit'
            const fields = [
              'name',
              'code',
              'prefix',
              'suffix',
              'decimals',
              'ref_url'
            ]
            let data = {}
            fields.forEach((k) => {
              const val = form.find("[name='" + k + "']").val()
              if (val != '' && val != elem[k]) {
                data[k] = val
              }
            })
            data = JSON.stringify(data)
            $.ajax(
              {
                url: url,
                method: 'PUT',
                data: data,
                success: (response) => {
                  if (response.edited === true) {
                    return this.load()
                  }
                },
                dataType: 'json'
              }
            )
          })
        })
      },
      delete: function(id) {
        const url = this.urls.api + '/coin/' + id + '/delete'
        $.ajax(
          {
            url: url,
            method: 'DELETE',
            success: (response) => {
              console.debug(response)
              if (response.deleted === true) {
                return this.load()
              }
            },
            dataType: 'json'
          }
        )
      }
    }
    $(document).ready(() => {
      const modal = $('#coin_modal')
      modal.modal()
      modal.modal('setting', 'closable', true)
      const table = $('#coins')

      coins.setup(table, modal)
    })
  </script>
@endpush