@extends('currencies.base')

@section('title')
  Monedas
@endsection

@section('content')
  <table class="ui collapsing table">
    <thead>
      <tr>
        <th>C&oacute;digo</td>
        <th>Moneda</td>
        <th id="add_currency"><i class="plus icon"></i></td>
      </tr>
    </thead>
    <tbody id="currencies"></tbody>
  </table>
  <div class="ui modal" id="add_modal">
    <div class="content">
      <form class="ui form">
        <div class="inline field">
          <label>C&oacute;digo</label>
          <input type="text" name="code" />
        </div>
        <div class="inline field">
          <label>Nombre</label>
          <input type="text" name="name" />
        </div>
        <button class="ui button">Agregar</button>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    let currencies = {
      id: '#currencies',
      loading: '#loading',
      add_button: '#add_currency',
      add_modal: '#add_modal',
      items: [],
      setup: function() {
        $(this.add_modal).modal()
        $(this.add_button).css('cursor', 'pointer').click((e) => {
          this.add()
        })
        this.load().then((data) => {
          this.build(data)
          $(this.loading).modal('hide')
        })
      },
      load: function() {
        let url = '{{$urls->api}}/currencies'
        return $.getJSON(url, (data) => {
          this.items = data.currencies
        })
      },
      build: function() {
        $(this.id).html('')
        $.each(this.items, (i, el) => {
          let item = $('<tr></tr>').append(
            $('<td></td>').append(
              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
                .html(el.code)
            )
          ).append(
            $('<td></td>').append(
              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
                .html(el.name)
            )
          ).append(
            $('<td></td>').attr('class', 'remove_currency').attr('data-id', el.id).append(
              $('<i></i>').attr('class', 'small minus icon')
            ).css('cursor', 'pointer').click((e) => {
              this.remove($(e.currentTarget).attr('data-id'))
            })
          )
          $(this.id).append(item)
        })
      },
      add: function() {
        $(this.add_modal).find('form').trigger('reset').submit((e) => {
          e.preventDefault()
          this.doAdd()
          return false
        })
        $(this.add_modal).modal('show')
      },
      doAdd: function() {
        let url = '{{$urls->api}}/currencies/add'
        let form = $(this.add_modal).find('form')
        let info = {
          code: form.find("[name='code']").val(),
          name: form.find("[name='name']").val()
        }
        $(this.add_modal).modal('hide')
        $(this.loading).modal('show')
        $.post(url, JSON.stringify(info), (data) => {
          if (data.currencies[0].created) {
            this.load().then((data) => {
              this.build(data)
              $(this.loading).modal('hide')
            })
          }
        }, 'json')
      },
      remove: function(currency_id) {
        let url = '{{$urls->api}}/currency/' + currency_id + '/delete'
        $(this.loading).modal('show')
        $.ajax({
          url: url,
          method: 'DELETE',
          dataType: 'json',
          success: (data) => {
            if (data.deleted) {
              this.load().then((data) => {
                this.build(data)
                $(this.loading).modal('hide')
              })
            }
          }
        })
      }
    }
    $(document).ready(() => {
      currencies.setup()
    })
  </script>
@endpush