@extends('front.layouts.main')

@section('header')

@endsection

@section('content')

<div class="container-fluid">
  <form action="{{route('add-sub-category')}}" method="post">
    @csrf
    <br>
    <br>
    <div class="form-row">
      <div class="form-group col-md-6">
          <input type="hidden" value="1" id="count">
        <label for="category">Category</label>
        <select name="subcategory[0][category_id]" class="form-control">
          @foreach ($listings as $item)
              <option value="{{ $item->id }}"> {{ $item->category_name }} </option>
          @endforeach
        </select>
      </div>
      <div class="form-group col-md-6">
        <label for="category">SubCategory Name</label>
        <input type="text" class="form-control" id="category" name="subcategory[0][sub_category_name]" placeholder="Enter SubCategory">
      </div>
    </div>
    <a href="#" id="add" class="btn btn-primary">Add More</a>
    <button type="submit" class="btn btn-success" style="width:100%; margin-top:50px;">Save</button>
  </form>
</div>

@endsection

@section('scripts')

@endsection

@section('js')

<script>
  var $table = $('#table')
  var $remove = $('#remove')
  var selections = []

  function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    })
  }

  function responseHandler(res) {
    $.each(res.rows, function (i, row) {
      row.state = $.inArray(row.id, selections) !== -1
    })
    return res
  }

  function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      html.push('<p><b>' + key + ':</b> ' + value + '</p>')
    })
    return html.join('')
  }

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:void(0)" title="Like">',
      '<i class="fa fa-heart"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }

  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    }
  }

  function totalTextFormatter(data) {
    return 'Total'
  }

  function totalNameFormatter(data) {
    return data.length
  }

  function totalPriceFormatter(data) {
    var field = this.field
    return '$' + data.map(function (row) {
      return +row[field].substring(1)
    }).reduce(function (sum, i) {
      return sum + i
    }, 0)
  }

  function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
      height: 550,
      locale: $('#locale').val(),
      columns: [
        [{
          field: 'state',
          checkbox: true,
          rowspan: 2,
          align: 'center',
          valign: 'middle'
        }, {
          title: 'Item ID',
          field: 'id',
          rowspan: 2,
          align: 'center',
          valign: 'middle',
          sortable: true,
          footerFormatter: totalTextFormatter
        }, {
          title: 'Item Detail',
          colspan: 3,
          align: 'center'
        }],
        [{
          field: 'name',
          title: 'Item Name',
          sortable: true,
          footerFormatter: totalNameFormatter,
          align: 'center'
        }, {
          field: 'price',
          title: 'Item Price',
          sortable: true,
          align: 'center',
          footerFormatter: totalPriceFormatter
        }, {
          field: 'operate',
          title: 'Item Operate',
          align: 'center',
          clickToSelect: false,
          events: window.operateEvents,
          formatter: operateFormatter
        }]
      ]
    })
    $table.on('check.bs.table uncheck.bs.table ' +
      'check-all.bs.table uncheck-all.bs.table',
    function () {
      $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

      // save your data, here just save the current page
      selections = getIdSelections()
      // push or splice the selections if you want to save all data selections
    })
    $table.on('all.bs.table', function (e, name, args) {
      console.log(name, args)
    })
    $remove.click(function () {
      var ids = getIdSelections()
      $table.bootstrapTable('remove', {
        field: 'id',
        values: ids
      })
      $remove.prop('disabled', true)
    })
  }

  $(function() {
    initTable()

    $('#locale').change(initTable)
  })
</script>


<script>
$('#add').on('click',function(){
    var count = $('#count').val();
    console.log(count);
    
    var counts = count + 1;
    
    $('#count').val();
    
    $('#count').val(counts);
    
    var html = `<div class="form-group col-md-6">
        <label for="category">Category</label>
        <select name="subcategory[`+counts+`][category_id]" class="form-control">
          @foreach ($listings as $item)
              <option value="{{ $item->id }}"> {{ $item->category_name }} </option>
          @endforeach
        </select>
      </div>
      <div class="form-group col-md-6">
        <label for="category">SubCategory Name</label>
        <input type="text" class="form-control" id="category" name="subcategory[`+counts+`][sub_category_name]" placeholder="Enter SubCategory">
      </div>`;
      
     $('.form-row').append(html);
});
</script>

@endsection