@extends('layouts.master')

@section('content')
<div class="container-fluid">
  <div class="page-header">
      <div class="row align-items-end">
          <div class="col-lg-8">
              <div class="page-header-title">
                  <i class="ik ik-package bg-blue"></i>
                  <div class="d-inline">
                      <h5>Tambah Loading Card</h5>
                      <span>Form untuk menambah loading card baru.</span>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <nav class="breadcrumb-container" aria-label="breadcrumb">
                  <ol class="breadcrumb">
                      <li class="breadcrumb-item">
                          <a href="{{ route('home') }}"><i class="ik ik-home"></i></a>
                      </li>
                      <li class="breadcrumb-item"><a href="{{ url('rrev.index') }}">Loading Card Area</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Tambah Loading Card Area Baru</li>
                  </ol>
              </nav>
          </div>
      </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header"><h3>Form Tambah Loading Card Area Baru</h3></div>
            <div class="card-body">
            @if($message = Session::get('error'))
               <div class="alert alert-danger alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                  <strong>Whoopss!</strong> &nbsp;Ada error ketika input.<br/>
                  <ul>                    
                      <li>{{ $message }}</li>                    
                  </ul>
               </div>
              @endif
              <form id="create_request" method="POST" action="{{ route('lcarea.store') }}" onsubmit="simpan.disabled = true; return true;">
                @csrf
                <div class="border-bottom pb-4">                  

                  <div class="row">
                    <div class="col-4">
                      <label for="name" class="font-weight-bold">No Request Voucher Card</label>
                      <input type="text" class="form-control" id="no_rvc" name="no_rvc" value="{{ generate_no_order('rvc', Auth::user()->myarea, $id_last) }}" readonly="readonly" />
                    </div>
                  </div>

                  <div class="row mt-3">
                    <div class="col-6">
                      <label for="name" class="font-weight-bold">Nama Teritory Manager</label>
                      <input type="text" class="form-control" id="name" name="name" value="{{ ucwords(Auth::user()->name) }}" readonly="readonly" />
                    </div>
                    <div class="col-6">
                      <label for="area" class="font-weight-bold">Area</label>
					  <select class="custom-select sumber" name="area" id="area">
						<option value="{{ strtolower(Auth::user()->myarea) }}" {{ strtolower(Auth::user()->myarea) == $area ? 'selected' : ''}}>{{ ucwords(Auth::user()->myarea) }}</option>
						<option value="warehouse" {{ $area=='warehouse' ? 'selected' : ''}}>Warehouse</option>
					  </select>
                      <!--input type="text" class="form-control" id="area" name="area" value="{{ ucwords(Auth::user()->myarea) }}" readonly="readonly"  /-->
                    </div>
                  </div>
                  </div><!-- // border-bottom pb-4 -->
                  
                  <div class="border-bottom pb-4">
                    <div class="row mt-3">
                      <div class="col-6">
                      <label class="font-weight-bold">Input nama retailer</label>
                        <input type="text" class="form-control suggest_retailer" id="retailer" name="retailer" placeholder="Toko Cell...."/></td>
                      </div>
                    </div>

                    <div class="row mt-3">
                      <div class="col-12">
                        <table class="table table-borderless" id="productlist">  
						  <thead>
							<th>
								<td>Stock</td>
								<td>Request</td>
								<td>SN Awal</td>
								<td>SN Akhir</td>
								<td>Harga Jual per Unit</td>
								<td>Pembayaran</td>
							</th>
						  </thead>
                          <tbody>      
                            @foreach($distinct_products as $index => $val)
                            <tr id="{{ $val->product }}" name="{{ $index }}">
                              <td style="width: 100px;">
                                <input class="border-checkbox" type="checkbox" id="product_name[{{ $index }}]" name="products[]" value="{{ $val->product }}">&nbsp;{{ $val->product }}
                              </td>
                              <td><input type="text" style="width: 75px;" class="form-control number-input" id="stock[{{ $index }}]" name="stock[]" value="{{ $val->stock }}" readonly required="required"/></td>
                              <td><input type="text" style="width: 75px;" class="form-control total_fill number-input" id="total[{{ $index }}]" name="total[]" readonly required="required"/></td>
                              <td><input type="text" style="width: 145px;" class="form-control" id="sn_awal[{{ $index }}]" name="sn_awal[]" readonly required="required"/></td>
                              <td><input type="text" style="width: 145px;" class="form-control" id="sn_akhir[{{ $index }}]" name="sn_akhir[]" readonly required="required"/></td>
                              <td><input type="text" style="width: 115px;" class="form-control money-input" id="ppu[{{ $index }}]" name="ppu[]" readonly required="required"/></td>
                              <td>
                                <select id="pay_method{{ $index }}" name="pay_method[]" class="form-control pay_method" readonly>
                                  <option value="0">Tunai</option>
                                  <option value="1">Transfer</option>
                                  <option value="2">TOP</option>
                                </select>
                              </td>
                              <td class="add_product_{{ $val->product }}" style="display:none;"><a href="javascript:void(0);" class="btn btn-success add_product" title="{{ $val->product }}"> 
                                  <i class="ik ik-plus"></i>&nbsp;{{ $val->product }}
                                  </a>
                              </td>
                              <!--td>
                                <input type="radio" name="pay_method_{{--$val->product --}}" value="0" disabled checked="checked"/>&nbsp;Sold<br/>
                                <input type="radio" name="pay_method_{{-- $val->product --}}" value="1" disabled/>&nbsp;TOP
                              </td -->
                            </tr>
                            
                            @endforeach
                          </tbody>
                        </table>
                      </div>                    
                    </div> 
                  </div><!-- // border-bottom pb-4 -->
                  <div class="col-12 mt-4 text-right">
                      <a href="{{ route('lcarea.index') }}" class="btn btn-light mr-4 border">Batal</a>
                      <button type="button" id="simpan" name="simpan" class="btn btn-primary mr-2" disabled>Simpan</button>
                  </div>                                                  
                 </form> 
                </div><!-- //card-body -->                            
            </div>
        </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
 $(document).ready(function(){
  $('.border-checkbox').change(function(){
        var this_tr = $(this).closest('tr'); //parent tr       
        var product = this_tr.attr('id'); 
        
        //this_tr.find('.form-control').attr('disabled',!this.checked);        
        $('.clone_'+product).remove();
        //this_tr.find('.add_product_'+product).toggle();

    });
    var x = 100;
    var addProduct = $('.add_product');

    $(addProduct).click(function(){
      var this_tr = $(this).closest('tr'); //parent tr        
      var product = this_tr.attr('id');
      x++;
      var fieldTd = '<tr class="'+product+'" id="row'+x+'">'+   
                    '<td>&nbsp;</td>'+                 
                    '<td><input type="text" class="form-control" id="sn_awal['+x+']" name="sn_awal[]" placeholder="SN Awal..." required="required"/></td>'+
                    '<td><input type="text" class="form-control" id="sn_akhir['+x+']" name="sn_akhir[]" placeholder="SN Akhir..." required="required" onblur="akhir2('+x+');"/></td>'+                    
                    '<td><input type="text" class="form-control money-input" name="ppu[]" placeholder="Harga Jual per Unit..." required="required"/></td>'+
                    '<td><input type="text" class="form-control" id="total['+x+']" name="total[]" placeholder="Total Jumlah Kartu..." required="required"/></td>'+
                    '<td><select name="pay_method[]" class="form-control pay_method">'+
                    '<option value="0">Tunai</option>'+
                    '<option value="1">Transfer</option>'+
                    '<option value="2">TOP</option>'+
                    '</select>'+
                    '</td>'+
                    '<td><a href="javascript:void(0);" class="remove_field" id="'+x+'" style="color:red; text-decoration:underline;">Hapus</a></td>'+
                    '<input type="hidden" name="products[]" value="'+product+'_'+x+'" />'+
                    '</tr>';
      
      var next_tr = $(this_tr).next("tr");
      var class_name_next_tr = $(next_tr).attr('class');
      var id_next_tr = $(next_tr).attr('id');
      console.log("class= "+class_name_next_tr);
      console.log("id = "+id_next_tr);
      if (class_name_next_tr === undefined){
        $(fieldTd).insertAfter(this_tr);
      }else{        
        $(fieldTd).insertAfter(next_tr);
      }

      $('.money-input').priceFormat({
        prefix: 'Rp ',
        centsSeparator: ',',
        thousandsSeparator: '.',
        centsLimit: 0
      });
      
      /** 
      if(class_name_next_tr.length && class_name_next_tr == product){
        $(fieldTd).insertAfter(next_tr);
      }else{
        
      }
      */                  
      
    });

    $('#productlist').on('click','.remove_field',function(e){
        e.preventDefault();
        var button_id = $(this).attr('id');
        console.log("id hapus = "+button_id);
        $('#row'+button_id).remove();
        x--;
      });

    $('.money-input').priceFormat({
        prefix: 'Rp ',
        centsSeparator: ',',
        thousandsSeparator: '.',
        centsLimit: 0
      });
	  
	  $('.number-input').priceFormat({
        prefix: '',
        centsSeparator: ',',
        thousandsSeparator: '.',
        centsLimit: 0
      });
      
      
	
 });
 
 /*
 function akhir(index) {
	var sn_awal = document.getElementById("sn_awal["+index+"]");
	var sn_akhir = document.getElementById("sn_akhir["+index+"]");
	var total = document.getElementById("total["+index+"]");
	
	total.value = sn_akhir.value - sn_awal.value + 1;
	//alert(index);
 }
 
 function akhir2(index2) {
	var sn_awal2 = document.getElementById("sn_awal["+index2+"]");
	var sn_akhir2 = document.getElementById("sn_akhir["+index2+"]");
	var total2 = document.getElementById("total["+index2+"]");
	
	total2.value = sn_akhir2.value - sn_awal2.value + 1;
	//alert(index2);
 }
 */
</script>
@endpush