@extends('currencies.base')

@section('title')
  Moneda - <span class="c_name"></span>
@endsection

@section('content')
  <h3 class="ui header c_code"></h3>
  <table class="ui table">
    <thead>
      <tr>
        <th>Fecha</th>
        <th>Valor</th>
        <th id="add_value">
          <i class="plus icon"></i>
        </th>
      </tr>
    </thead>
    <tbody id="values"></tbody>
  </table>
  <div class="ui modal" id="add_modal">
    <div class="header">
      Agregar Valor para <span class="c_name"></span>
    </div>
    <div class="content">
      <form class="ui form">
        <div class="inline field">
          <label>Fecha</label>
          <div class="ui calendar">
            <div class="ui input left icon">
              <i class="calendar icon"></i>
              <input type="text" placeholder="Fecha/Hora" name="fecha" />
            </div>
          </div>
        </div>
        <div class="inline field">
          <label>Valor</label>
          <input type="text" name="valor" />
        </div>
        <div class="inline field">
          <label>Cambio con</label>
          <div class="ui dropdown">
            <input type="hidden" name="base" />
            <div class="default text">
              Cambio
            </div>
            <i class="dropdown icon"></i>
            <div class="menu"></div>
          </div>
        </div>
        <button class="ui button">Agregar</button>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    let currency = {
      id: {{$currency_id}},
      data: {
        id: 0,
        name: '',
        code: ''
      },
      map: {
        name: '.c_name',
        code: '.c_code'
      },
      values_id: '#values',
      values: [],
      add_button: '#add_value',
      add_modal: '#add_modal',
      loading: '#loading',
      setup: function() {
        $(this.values_id).hide()
        this.buildModal()
        $(this.add_button).css('cursor', 'pointer').click((e) => {
          this.addValue()
        })
        this.getData().then(() => {
          this.getValues().then(() => {
            $(this.loading).modal('hide')
          })
        })
      },
      buildModal: function() {
        this.getCurrencies()
        $(this.add_modal).modal()
        $(this.add_modal).find('.ui.calendar').calendar()
        $(this.add_modal).find('form').submit((e) => {
          e.preventDefault()
          this.doAddValue()
          return false
        })
        $(this.add_modal).find('.ui.dropdown').dropdown()
      },
      getData: function() {
        let url = '{{$urls->api}}/currency/' + this.id
        return $.getJSON(url, (data) => {
          $.each(this.data, (i, el) => {
            this.data[i] = data.currency[i]
          })
          $.each(this.map, (i, el) => {
            $(el).html(data.currency[i])
          })
        })
      },
      getValues: function() {
        let url = '{{$urls->api}}/currency/' + this.id + '/values'
        return $.getJSON(url, (data) => {
          if (data.values.length > 0) {
            this.values = data.values
            this.populateValues()
          }
        })
      },
      populateValues: function() {
        $(this.values_id).html('')
        $.each(this.values, (i, el) => {
          let row = $('<tr></tr>').append(
            $('<td></td>').html(formatDate(new Date(el.date_time)))
          ).append(
            $('<td></td>').html(formatValue(el.value, el.base.code))
          ).append(
            $('<td></td>').attr('class', 'remove_value').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
              $('<i></i>').attr('class', 'minus icon')
            ).css('cursor', 'pointer').click((e) => {
              this.removeValue($(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
            })
          )
          $(this.values_id).append(row)
        })
        $(this.values_id).show()
      },
      getCurrencies: function() {
        let url = '{{$urls->api}}/currencies'
        $.getJSON(url, (data) => {
          let dp = $(this.add_modal).find('.ui.dropdown')
          values = []
          $.each(data.currencies, (i, el) => {
            values.push({name: el.name, value: el.id, text: el.name})
          })
          dp.dropdown('setup menu', {values: values})
        })
      },
      addValue: function() {
        $(this.add_modal).find('form').trigger('reset')
        $(this.add_modal).modal('show')
      },
      doAddValue: function() {
        let form = $(this.add_modal).find('form')
        let info = {
          date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
          value: form.find("[name='valor']").val(),
          base_id: form.find('.ui.dropdown').dropdown('get value')
        }
        let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
        $(this.add_modal).modal('hide')
        $(this.loading).modal('show')
        $.post(url, JSON.stringify(info), (data) => {
          if (data.values[0].created) {
            this.getValues()
          }
        }, 'json').then(() => {
          $(this.loading).modal('hide')
        })
      },
      removeValue: function(base_id, date_time) {
        let url = '{{$urls->api}}/value/' + this.data.id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
        $(this.loading).modal('show')
        $.ajax({
          url: url,
          method: 'DELETE',
          dataType: 'json',
          success: (data) => {
            if (data.deleted) {
              this.getValues().then(() => {
                $(this.loading).modal('hide')
              })
            }
          }
        })
      }
    }
    $(document).ready(() => {
      currency.setup()
    })
  </script>
@endpush