@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-layers bg-blue"></i>
                  <div class="d-inline">
                      <h5>Loading Checkout</h5>
                      <span>Form untuk loading checkout eV.</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('loading.index') }}">Loading</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Loading Checkout eV</li>
                  </ol>
              </nav>
          </div>
      </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card">
        <div class="card-header"><h3>Form Loading Checkout eVoucher</h3></div>
            <div class="card-body">
                @if($message = Session::get('success'))
                <div class="alert alert-success alert-dismissible">
                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                  <h4><i class="ik ik-alert-circle ik-2x"></i>Info</h4>
                  <p>{{ $message }}</p>
                </div>
                @endif                
                @csrf
                <div class="border-bottom pb-4">                  

                  <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 class="row mt-4">
                    <div class="col-6">
                    <label for="sme" class="font-weight-bold">Sales</label>
                      <input type="text" class="form-control" id="sme" name="sme" value="{{ ucwords($sme->sales->name) }}" readonly="readonly" />
                    </div>
                    <div class="col-6">
                    <label for="sme" class="font-weight-bold">MSISDN</label>
                      <input type="text" class="form-control" id="msisdn" name="msisdn" value="{{ ucwords($sme->evoucher[0]->msisdn) }}" readonly="readonly" />
                    </div>
                  </div>

                  </div><!-- // border-bottom pb-4 -->
                  
                  <div class="row mt-3">
                    <div class="col-3">
                      <label for="no_hp" class="font-weight-bold ">Toko</label>                                         
                      <input type="text" class="form-control suggest_retailer2" name="retailer[]" value="" required="required"/>                      
                    </div>
                    <div class="col-2">
                      <label for="no_hp" class="font-weight-bold ">Nominal</label>                                         
                      <input type="text" class="form-control pricing" name="nominal[]" value="" required="required" placeholder="Rp 1.000.000"/>                      
                    </div>
                    <div class="col-3">
                      <label for="no_hp" class="font-weight-bold ">Harga Jual</label>                                         
                      <input type="text" class="form-control pricing" name="eup[]" value="" required="required" placeholder="Rp 1.000.000"/>
                    </div>
                    <div class="col-2">
                      <label for="no_hp" class="font-weight-bold ">Metode Bayar</label>                                         
                        <select name="paymethod[]" class="form-control">
                              <option value="0">Tunai</option>
                              <option value="1">Transfer</option>
                              <option value="2">TOP</option>
                        </select>
                    </div>
                    <div class="col-2">
                      <div  style="padding-top:30px;">
                        <a href="javascript:void(0);" class="btn btn-success tambah_toko" title="Tambah Toko"> 
                          <i class="ik ik-plus"></i>&nbsp;Tambah Toko
                        </a>
                      </div>
                    </div>                    
                  </div>  
                  <div class="extra_retailer"></div>

                  <div class="row mt-4">
                    <div class="col-6 mt-2">
                      <div class="form-group">
                        <label for="password" class="font-weight-bold">Password</label>
                        <input type="password" name="password" class="form-control" id="password" autocomplete="new-password" />
                        <div class="error-password text-danger mt-3 error" style="display:none">Password belum di isi</div>
                        <div class="error-password-fail text-danger mt-3 error" style="display:none">Password tidak benar</div>
                      </div>
                    </div> 
                  </div>
                                                       
                  <div class="col-12 mt-4 pt-4 text-right">
                    <a href="{{ route('loading.index') }}" class="btn btn-light mr-4 border">Batal</a>
                    <input type="hidden" name="id_loading" id="id_loading" value=""/>
                    <input type="hidden" name="id_sme" id="id_sme" value=""/>
                    <input type="submit" class="btn btn-primary mr-2" id="checkout_done" value="Selesai"/>  
                  </div>                                
                  
                </div>
            </div>
        </div>
    </div>
  </div>
@endsection
@push('scripts')
  <script>

    $('.pricing').priceFormat({
            prefix: 'Rp ',
            centsSeparator: ',',
            thousandsSeparator: '.',
            centsLimit: 0
      });

      //27 April 2020; autocomplete retailer
      let myroute = base_url + '/area/retailercomplete';            
            $('.suggest_retailer2').typeahead({
                minLength:2,
                highlight:true,
            
                source: function(term,process){
                            return $.getJSON(myroute,{term: term},function(data){
                                var resultList = data.map(function (item) {
                                    var aItem = { name: item.name+" "+item.qr_code };
                                    return aItem;
                                });
                                return process(resultList);
                            });
                        }
            });
      
      $(document).ready(function () {
          

        var maxField = 20;
        var addButton = $('.tambah_toko');
        var wrapper = $('.extra_retailer');
        
        var x = 1;

        $(addButton).click(function(){
          if(x < maxField){
            var fieldHTML = '<div class="row mt-3" id="row_'+x+'">'+
                         '<div class="col-3">'+
                            '<label for="no_hp" class="font-weight-bold ">Toko</label>'+
                            '<input type="text" class="form-control suggest_retailer2" name="retailer[]" value="" required="required"/> '+
                          '</div>'+
                          '<div class="col-2">'+
                          ' <label for="no_hp" class="font-weight-bold ">Nominal</label>'+
                          ' <input type="text" class="form-control pricing_'+x+'" name="nominal[]" value="" required="required" placeholder="Rp 1.000.000"/>'+
                          '</div>'+
                          '<div class="col-3">'+
                            '<label for="no_hp" class="font-weight-bold ">Harga Jual</label>'+
                            '<input type="text" class="form-control pricing_'+x+'" name="eup[]" value="" required="required" placeholder="Rp 1.000.000"/>'+
                          '</div>'+
                          '<div class="col-2">'+
                            '<label for="no_hp" class="font-weight-bold ">Metode Bayar</label>'+
                             '<select name="paymethod[]" class="form-control">'+
                                '<option value="0">Tunai</option>'+
                                '<option value="1">Transfer</option>'+
                                '<option value="2">TOP</option>'+
                             '</select>'+
                           '</div>'+
                          '<div class="col-2">'+
                            '<div  style="padding-top:30px;">'+
                             '<button type="button" class="btn btn-danger remove_field" id="'+x+'">Hapus</button> '+ 
                          '</div>'+
                         '</div>'+
                         '</div>';
            x++;
            $(wrapper).append(fieldHTML);

            console.log("pricing = "+x);

            
          }

          $('#row_'+x).priceFormat({
              prefix: 'Rp ',
              centsSeparator: ',',
              thousandsSeparator: '.',
              centsLimit: 0
            });
        });

        $(document).on('click', '.remove_field', function(){  
           var button_id = $(this).attr("id");   
           console.log("button id = "+button_id);
           $('#row_'+button_id+'').remove();  
           x--;
        });  

        
              

      });

      function delete_retailer($id){
          $('#retailer_'+id).remove();
          return false;
      }
  </script>
@endpush