@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-shopping-bag bg-blue"></i>
                  <div class="d-inline">
                      <h5>Tambah Raw Card Material Baru</h5>
                      <span>Form untuk menambah Raw Card Material 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('rrcm.index') }}">Raw Card Material</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Tambah Raw Card Material 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 Raw Card Material Baru</h3></div>
            <div class="card-body">
                @if(count($errors) > 0)
                  <div class="alert alert-danger">
                          <strong>Whoopss!</strong> &nbsp;Ada error ketika input.<br/>
                          <ul>
                            @foreach($errors->all() as $error)
                              <li>{{ $error }}</li>
                            @endforeach
                          </ul>
                  </div>
                  @endif
              <form id="create_rrcm" method="POST" action="{{ route('rrcm.store') }}">
                @csrf
                <div class="border-bottom pb-4">
                  <div class="row">
                    <div class="col-4">
                      <label for="name" class="font-weight-bold">No Work Order</label>
                      <input type="text" class="form-control" id="no_rrcm" name="no_rrcm" value="{{ generate_no_order('rrcm', Auth::user()->myarea, 12) }}" readonly="readonly" />
                    </div>
                  </div>

                  <div class="row mt-3">
                    <div class="col-6">
                      <label for="name" class="font-weight-bold">Nama</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>
                      <input type="text" class="form-control" id="area" name="area" value="{{ ucwords(Auth::user()->myarea) }}" readonly="readonly"  />
                    </div>
                  </div>

                  </div><!-- // border-bottom pb-4 -->
                                    
                    <table class="table table-borderless" id="dynamic_field">  
                      <tbody>                                                       
                        <tr>  
                            <td>Raw Material</td>  
                            <td>
                              <select name="rawmat[]" class="form-control" id="rawmat">
                                @foreach($rawmats as $key => $val)
                                  <option value="{{ $val }}">{{ strtoupper($val) }}</option>                            
                                @endforeach
                              </select>
                            </td>  
                            <td>&nbsp;</td>
                        </tr>
                        <tr>  
                            <td>Jumlah</td>  
                            <td>
                            <input type="text" class="form-control" id="quantity" name="quantity[]" required="required" placeholder="Jumlah..." />  
                            </td>  
                            <td>&nbsp;</td>
                            
                        </tr>
                        
                        <!--tr class="border-bottom">  
                            <td>Metode Bayar</td>  
                            <td>
                              <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" name="chip-select" id="chip-range" class="custom-control-input" value="range-value" checked="checked">
                                <label class="custom-control-label" for="chip-range">Sold</label>
                              </div>
                              <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" name="chip-select" id="chip-select" class="custom-control-input" value="select-value">
                                <label class="custom-control-label" for="chip-select">TOP</label>
                              </div>
                            </td>  
                            <td>&nbsp;</td>
                        </tr -->   
                        <tr class="border-bottom cloneform">
                          <td>Metode Bayar</td>
                          <td>
                            <select name="pay_method[]" class="form-control" id="pay_method">
                              <option value="0">Sold</option>
                              <option value="1">TOP</option> 
                            </select>
                          </td>
                        </tr>                                             
                    </tbody>                               
                </table> 

                
                
                              
                  <div class="col-6 mt-2">
                      <div class="form-group">
                      <button type="button" class="btn btn-warning mr-2" id="tambahproduk">Tambah Produk</button>                      
                      </div>
                  </div>
                  

                  <div class="col-12 mt-4 pt-4 text-right">
                    <a href="{{ route('rrcm.index') }}" class="btn btn-light mr-4 border">Batal</a>
                    <!--button type="button" class="btn btn-primary mr-2" id="wo_done" name="submit">Selesai</button -->
                    <input type="submit" class="btn btn-primary mr-2" value="Selesai"/>
                  </div>                                
                  
                </div>
              
              </form>
            </div>
        </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>

    var i = 1;    
    _html1 = '<tr class="cloneform">'+  
              '<td>Raw Material</td>'+
              '<td>'+
                '<select name="rawmat[]" class="form-control" id="rawmat">';
                @foreach($rawmats as $key => $val)
    _html1 +=         '<option value="{{ $val }}">{{ strtoupper($val) }}</option>';
                  @endforeach
    _html1 +=   '</select>'+
              '</td> '+
              '<td>&nbsp;</td>'+
          '</tr>'; 
              
     _html2 = '<tr class="cloneform"><td>Jumlah</td>'+  
              '<td>'+
              '<input type="text" class="form-control" id="quantity" name="quantity[]" required="required" placeholder="Jumlah..." />'+  
              '</td>'+  
              '<td>&nbsp;</td>'+              
              '</tr>';
            
    _html_tpl = _html1 + _html2;// + _html3;

    $(document).ready(function(){
      $('#tambahproduk').click(function(){
        var _html = "";
        i++;
        
        /** 
        _html3 = '<tr class="border-bottom cloneform">'+  
                '<td>Metode Bayar</td>'+  
                '<td>'+ 
                '<div class="custom-control custom-radio custom-control-inline">'+ 
                    '<input type="radio" name="chip-select" id="chip-range" class="custom-control-input" value="range-value" checked="checked">'+ 
                    '<label class="custom-control-label" for="chip-range">Sold</label>'+ 
                  '</div>'+ 
                  '<div class="custom-control custom-radio custom-control-inline">'+ 
                    '<input type="radio" name="chip-select" id="chip-select" class="custom-control-input" value="select-value">'+ 
                    '<label class="custom-control-label" for="chip-select">TOP</label>'+ 
                  '</div>'+ 
                '</td>'+ 
                '<td><button type="button" class="btn btn-danger btn_remove" id="'+i+'">Hapus</button></td></td>'+ 
            '</tr>'; 
            */
        _html3 = '<tr class="border-bottom cloneform">'+  
                  '<td>Metode Bayar</td>'+  
                  '<td>'+ 
                  '<select name="pay_method[]" class="form-control" id="pay_method">'+                                
                  '<option value="0">Sold</option>'+ 
                  '<option value="1">TOP</option>'+                        
                  '</select>'+
                  '</td>'+
                  '<td><button type="button" class="btn btn-danger btn_remove" id="'+i+'">Hapus</button></td></td>'+ 
                  '</tr>';

        _html = _html_tpl + _html3;
        _html = _html.replace(/cloneform/g,"cloneform"+i);
        $('#dynamic_field').append(_html); 
        
        $(document).on('click', '.btn_remove', function(){  
          var button_id = $(this).attr('id');
          $('.cloneform'+button_id+'').remove();
        });

      });
    });
    
    

   
    
    
  </script>
@endpush