@extends("backend.layout-sticky.master")

@section("title")
    Product - Sistem Klinik
@endsection

@push('css')
<link href="{{asset('sb-admin2/css/sb-admin-2.min.css')}}" rel="stylesheet">

<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<style>

  .header-clear-medium {
    padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
  }
  .select2-container {
    width: 100%!important;
  }
</style>
@endpush

@section ('back')
<!-- <a href="#" data-back-button="" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a> -->
<a href="{{route('dashboard.keuangan.billing.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
@endsection

@section ('content')

<div class="card card-style">

  @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
  @endif

  @if(session()->has('messages'))
    <div class="alert alert-success">
        {{ session()->get('messages') }}
    </div>
  @endif

  <form id="form-product" action="{{ route('dashboard.keuangan.billing.product_update', [$row->id]) }}" method="POST" enctype="multipart/form-data">

  @csrf
  <input type="hidden" name="billing_id" value="{{$row->id}}">
  <div class="content" id="tab-group-1">
      <div class="tab-controls tabs-small tabs-rounded">
          <a href="#" data-active data-bs-toggle="collapse" data-bs-target="#productcollapse">Tambah Produk</a>
      </div>
      <div class="clearfix mb-3"></div>
      <div data-bs-parent="#tab-group-1" class="collapse show" id="productcollapse">
        <div class="mb-4">
          <table  class="table product-group">
            <tr style="width: 100%;">
              <td style="width: 40%;">Nama</td>
              <td style="width: 15%;">Jumlah</td>
              <td style="width: 20%;">Harga Satuan</td>
              <td style="width: 10%;"><a href="#" class="icon icon-xxs rounded-xl bg-phone button-add-product">
                <i class="fas fa-plus"></i>
              </a>
              </td>
            </tr>

          @if(isset($row) && isset($row->billing_products) && count($row->billing_products)>0)
            @foreach ($row->billing_products as $value)
            <tr>

              <td>
                <div class="form-group">
                  <select class="form-control product_id" name="product_id[]" id="product_id-2{{$value->id}}" data-id="{{$value->id}}">

                  </select>
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input type="number" class="form-control" name="jumlah[]" id="jumlah" value="{{ $value->jumlah ?? '' }}">

                </div>
              </td>
              <td>
                <div class="form-group">
                  <input disabled class="form-control harga_satuan" name="harga_satuan[]" id="harga_satuan-{{$value->id}}" value="{{ $value->harga_satuan ?? '' }}">
                </div>
              </td>

              <td>
                <div class="form-group">
                  <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-product">
                    <i class="fas fa-trash"></i>
                  </a>
                </div>
              </td>
            </tr>

            @endforeach
          @endif
          </table>
        </div>
        <button class="btn btn-xxs mb-3 rounded-s text-uppercase font-900 shadow-s border-blue-dark btn-save bg-blue-light" type="button">Save </button>

        <button class="d-none btn-submit" type="submit"></button>
      </div>

  </div>


  </form>
</div>

</form>

@endsection

@push('js')
<!-- Page level custom scripts -->
<script src="{{asset('adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/toastr/toastr.min.js')}}"></script>

<script>

$(document).on('click', '.btn-save', function(e){

  $(".btn-submit").click()

});


@if(isset($row))

  @if(isset($row->billing_products) && count($row->billing_products)>0)
    @foreach ($row->billing_products as $value)

    var set_product_{{$value->id}} = new Option("{{$value->product->nama ?? ""}}", "{{$value['product_id'] ?? 0}}", false, true)
    $('#product_id-2{{$value->id}}').append(set_product_{{$value->id}}).trigger('change')

      $("#product_id-2{{$value->id}}").select2({
          placeholder:"Pilih Product",
          ajax:
          {
            url: "{{ route('dashboard.master.product.getProduct') }}",
            processResults: function (data) {
              // console.log(data);
              return {
                results: data.results
              };
            }
          }
      })
    @endforeach
  @endif

@endif


$(document).on('click', '.button-add-product', function(e){
  e.preventDefault();
  let id = $(".product-group tr").length

  $(".product-group tr:last").after(`
    <tr>

      <td>
        <div class="form-group">
          <select class="form-control product_id" name="product_id[]" id="product_id-`+id+`">

          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <input type="number" class="form-control" name="jumlah[]" value="1">
        </div>
      </td>

      <td>
        <div class="form-group">
          <input type="text" class="form-control harga_satuan" name="harga_satuan[]" value="" id="harga_satuan-2`+id+`">
        </div>
      </td>

      <td><div class="form-group">
        <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-product">
          <i class="fas fa-trash"></i>
        </a>
      </div></i>
      </a>
      </td>
    </tr>
    `);

    $("#product_id-"+id).select2({
        placeholder:"Pilih product",
        ajax:
        {
          url: "{{ route('dashboard.master.product.getProduct') }}",
          processResults: function (data) {
            // console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

});

$(document).on('click', '.button-remove-product', function(e){
  e.preventDefault();

  $(this).parents("tr").remove()

});

$(document).on('change', '.product_id', function(e){
  e.preventDefault();
  let id = $(this).val()
  let el = $(this).parents("tr").find(".harga_satuan")
  console.log($(this).parents("tr").find(".harga_satuan"));
  $.ajax({
      url:"{{ route('dashboard.master.product.getProductDetail') }}",
      method:"GET",
      data:{id: id},
      success:function(res){

        el.val(res.harga)

      }
    })


});

function addCommas(nStr)
  {
      nStr += '';
      x = nStr.split('.');
      x1 = x[0];
      x2 = x.length > 1 ? '.' + x[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2;
  }

</script>
@endpush