@extends('front.layouts.main')

@section('header_style')
    <style>
    #start .form-row{
    background: #8e8e8e;
    }
    #start .form-row input{
    background: #a7a7a7;
    }
    #start .form-row select{
    background: #a7a7a7;
    }
    #start .form-row:last-child{
    background: #fff;
    }
    #start .form-row:last-child input{
    background: #fff;
    }
    #start .form-row:last-child select{
    background: #fff;
    }
    .trash {
    margin-top: 30px;
    }
    </style>
@endsection
@section('content')
  <div class="container-fluid">
      <br>
      <br>
      <form action="{{route('de-insert-product')}}" method="post" enctype="multipart/form-data">
        @csrf
        <div id="start">
            <div class="form-row">
                <input type="hidden" value="1" id="index">
                <div class="form-group col-md-3">
                  <img  class="img-fluid" id="output" style="width: 50px" alt="">
                  <label for="inputAddress">Product Image</label>
                  <input accept="image/*" type="file" class="form-control file" id="inputPassword4" name="product[0][pic]">
              </div>
                <div class="form-group col-md-3">
                  <label for="inputAddress">Product Name <span style="color:red">*</span></label>
                  <input type="text" class="form-control" id="inputPassword4" required name="product[0][name]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Product Description</label>
                    <input type="text" class="form-control" id="inputPassword4" name="product[0][description]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Quantity <span style="color:red">*</span></label>
                    <input type="number" class="form-control" id="quantity" required name="product[0][quantity]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputPassword4">Unit </label>
                    <select name="product[0][unit]" class="form-control">
                      <option value="piece">Piece</option>
                      <option value="kg">KG</option>
                      <option value="gram">Gram</option>
                      <option value="ml">ML</option>
                      <option value="litre">Litre</option>
                      <option value="dozen">Dozen</option>
                      <option value="pair">Pair</option>
                    </select>
                 </div>
                 <div class="form-group col-md-3">
                    <label for="inputAddress">Buying Price <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="quantity" required name="product[0][buying_price]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Selling Price <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="quantity" required name="product[0][selling_price]" value="">
                </div>
                <div class="form-group col-md-3">
                    <!-- <label for="inputAddress">SKU or model</label> -->
                    <label for="inputAddress">SKU or model</label>
                    <input type="text" class="form-control" id="quantity" name="product[0][sku_or_model]" value="">
                </div>
                <!-- <div class="form-group col-md-2">
                  
                    <label for="inputAddress">Expired Date</label>
                    <input type="date" class="form-control" id="quantity" name="product[0][expireddate]" value="">
                </div> -->
                <div class="form-group col-md-3">
                  <label for="inputAddress">Category <span style="color:red">*</span></label>                 
                  <select class="form-control" id="quantity" required name="product[0][category_id]">
                  <option>Select</option>
                    @foreach ($category as $item)
                        <option value="{{ $item->id }}">{{ $item->category_name }}</option>
                    @endforeach
                  </select>
                 </div>
                <div class="form-group col-md-3">
                  <label for="inputAddress">Sub Category <span style="color:red">*</span></label>
                 
                  <select class="form-control"  required name="product[0][sub_category_id]">
                  <option  >Select </option>
                    @foreach ($sub_category as $item)
                        <option value="{{ $item->id }}">{{ $item->sub_category }}</option>
                    @endforeach
                  </select>
                 </div>
                <div class="form-group col-md-2">
                    <label for="inputAddress">Brand  <span style="color:red">*</span></label>
           
                    <select class="form-control" required name="product[0][brand]">
                    <option  >Select</option>
                      @foreach ($brand as $item)
                          <option value="{{ $item->id }}">{{ $item->brand }}</option>
                      @endforeach
                    </select>
                   </div>
                  <div class="form-group col-md-2">
                    <label for="inputAddress">Suppliers <span style="color:red">*</span></label>
                   
                    <select class="form-control" required name="product[0][suppliers]">
                    <option  >Select</option>
                      @foreach ($suppliers as $item)
                          <option value="{{ $item->id }}">{{ $item->supplier_name }}</option>
                      @endforeach
                     </select>
                  </div>
                <div class="form-group col-md-2 butns">
                    <a style="margin-top: 30px;" class="btn btn-success" onclick="addproduct()" href="#"> <b>+ </b> </a>
                </div>
            </div>
        </div>
          <!-- <div class="form-row">
              <div class="form-group col-md-6">
                  <label for="inputAddress">Rejected Product reason</label>
                  <input type="text" class="form-control" id="inputPassword4" name="reject reason" value="">
              </div>
              <div class="form-group col-md-6">
                  <label for="inputAddress">Rejected Product Quantity</label>
                  <input type="text" class="form-control" id="inputPassword4" name="rejectquantity" value="">
              </div>
          </div> -->
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>



@endsection

@section('js')


<script>
  $('#start').on('change', '.file',function(event) {
    output = $(this).closest('.form-group').find('img');
    console.log(URL.createObjectURL(event.target.files[0]));
    output.attr('src',URL.createObjectURL(event.target.files[0]));
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  });
</script>

<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('', !$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('', true)
    })
  }

  $(function() {
    initTable()

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

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

<script>
  $('#start').on('change', '#quantity', function(){
        quanti = $(this).closest('#quantity').val();
        quantit = parseInt(quanti);

        qua =  $('#total_sorted').val();
        quaaaa =  $('#total_sorted_hidden').val();
        q = parseInt(qua);
        qq = parseInt(quaaaa);
        $('#total_sorted').val( quantit + q );
        $('#total_sorted_hidden').val( quantit + qq );
  });
</script>

<script>
    function addproduct(){
           $('#start input').attr('readonly', 'readonly');
      
            $('.butns').html('<a style="margin-top: 30px;" class="btn btn-primary edit" href="#"> <b>edit </b> </a> <a class="btn btn-danger trash" href="#"><b> X </b></a>')

            var brands = {!! json_encode($brand, JSON_HEX_TAG) !!};
            brand = [];
            brands.forEach(function (data){
              brand += ` <option value="`+data.id+`">`+data.brand+`</option>` 
            });

            var sub_categorys = {!! json_encode($sub_category, JSON_HEX_TAG) !!};
            sub_category = [];
            sub_categorys.forEach(function (data){
              sub_category += ` <option value="`+data.id+`">`+data.sub_category+`</option>` 
            });

            index = document.getElementById('index').value;

            addindex = document.getElementById('index').value = index + 1;

        html = `<div class="form-row">
                  <div class="form-group col-md-3">
                    <img  class="img-fluid" id="output" style="width: 50px" alt="">
                    <label for="inputAddress">Product Image</label>
                    <input accept="image/*" type="file" class="form-control file" id="inputPassword4" name="product[`+index+`][pic]">
                  </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Product Name <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="inputPassword4" required name="product[`+index+`][name]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Product Description</label>
                    <input type="text" class="form-control" id="inputPassword4" name="product[`+index+`][description]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Quantity <span style="color:red">*</span></label>
                    <input type="number" class="form-control" id="quantity" required name="product[`+index+`][quantity]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputPassword4">Unit </label>
                    <select name="product[`+index+`][unit]" class="form-control">
                      <option value="kg">KG</option>
                      <option value="gram">Gram</option>
                      <option value="ml">ML</option>
                      <option value="litre">Litre</option>
                      <option value="piece">Piece</option>
                      <option value="dozen">Dozen</option>
                      <option value="pair">Pair</option>
                    </select>
                 </div>
                 <div class="form-group col-md-3">
                    <label for="inputAddress">Buying Price  <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="quantity" required name="product[`+index+`][buying_price]" value="">
                </div>
                <div class="form-group col-md-3">
                    <label for="inputAddress">Selling Price  <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="quantity" required name="product[`+index+`][selling_price]" value="">
                </div>
                <div class="form-group col-md-3">              
                    <label for="inputAddress">SKU or model</label>
                    <input type="text" class="form-control" id="quantity" name="product[`+index+`][sku_or_model]" value="">
                </div>               
                <div class="form-group col-md-3">
                  <label for="inputAddress">Category <span style="color:red">*</span></label>                 
                  <select class="form-control" required name="product[`+index+`][category_id]">
                  <option>Select</option>
                    @foreach ($category as $item)
                        <option value="{{ $item->id }}">{{ $item->category_name }}</option>
                    @endforeach
                  </select>
                 </div>
                <div class="form-group col-md-3">
                  <label for="inputAddress">Sub Category</label>
                  <select class="form-control" name="product[`+index+`][sub_category_id]">
                    @foreach ($sub_category as $item)
                        <option value="{{ $item->id }}">{{ $item->sub_category }}</option>
                    @endforeach
                  </select>
              </div>
                <div class="form-group col-md-2">
                    <label for="inputAddress">Brand</label>
                    <select class="form-control" name="product[`+index+`][brand]">
                      @foreach ($brand as $item)
                          <option value="{{ $item->id }}">{{ $item->brand }}</option>
                      @endforeach
                    </select>
                </div>
                <div class="form-group col-md-2">
                  <label for="inputAddress">Suppliers</label>
                  <select class="form-control" name="product[`+index+`][suppliers]">
                     <option  >Select</option>
                    @foreach ($suppliers as $item)
                       
                        <option value="{{ $item->id }}">{{ $item->supplier_name }}</option>
                    @endforeach
                  </select>
                  </div>
              <div class="form-group col-md-2 butns">
                  <a style="margin-top: 30px;" class="btn btn-success" onclick="addproduct()" href="#"> <b>+ </b> </a>
              </div>
              </div>`;

         $('#start').append(html);

    };

    $("#start").on('click','.trash', function () {
		$(this).closest('.form-row').remove();
		return false;
    });

    $("#start").on('click','.edit', function () {
      $(this).closest(".form-row").find("input").removeAttr('readonly');
      $(this).closest(".form-row").attr('style', 'background: #fff');
      $(this).closest(".form-row").find("input").css('background', 'transparent');
      $(this).closest(".form-row").find("select").css('background', 'transparent');
      $(this).closest(".form-row").find("file").css('background', 'transparent');
      $(this).closest(".butns").html(`<a style="margin-top: 30px;" class="btn btn-success save" href="#"> <b>save </b> </a> <a class="btn btn-danger trash" href="#"><b> X </b></a>`);

    });

    $("#start").on('click','.save', function () {
      $(this).closest(".form-row").find("input").attr('readonly','readonly');
      $(this).closest(".form-row").css('background', '#8e8e8e');
      $(this).closest(".form-row").find("input").css('background', 'transparent');
      $(this).closest(".form-row").find("select").css('background', 'transparent');
      $(this).closest(".form-row").find("file").css('background', 'transparent');
      $(this).closest(".butns").html(`<a style="margin-top: 30px;" class="btn btn-primary edit" href="#"> <b>edit </b> </a> <a class="btn btn-danger trash" href="#"><b> X </b></a>`);

    });

 
</script>
@endsection