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

@section("title")
    Resep - 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;
  }
</style>
@endpush

@section ('back')
<a href="{{route('dashboard.layanan.rekam_medis.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
@endsection

@section ('content')



<form action="{{ ($action === "UPDATE") ? route('dashboard.farmasi.resep.update', [$row->id]) : route('dashboard.farmasi.resep.store') }}" method="POST" enctype="multipart/form-data">

@if ($action === "UPDATE")
    @method('PUT')
@endif

@csrf

<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

  <form action="{{ ($action === "UPDATE") ? route('dashboard.farmasi.resep.update', [$row->id]) : route('dashboard.farmasi.resep.store') }}" method="POST" enctype="multipart/form-data">

  @if ($action === "UPDATE")
      @method('PUT')
  @endif

  @csrf
  <input type="hidden" name="rekam_medis_id" value="{{$rekam_medis->id}}">

  <div class="mb-4">
    <table  class="table drug-group">
      <tr style="width: 100%;">
        <td style="width: 40%;">Obat</td>
        <td style="width: 20%;">Dosis</td>
        <td style="width: 20%;">Jumlah</td>
        <td style="width: 20%;"><a href="#" class="icon icon-xxs rounded-xl bg-phone button-add-drug">
          <i class="fas fa-plus"></i>
        </a>
        </td>
      </tr>

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

        <td>
          <div class="form-group">
            <select class="form-control" name="drug_id[]" id="drug_id">
              @foreach ($drugs as $val)
                <option value="{{$val->id}}" {{ $value["drug_id"] == $val->id ? 'selected' : '' }}>{{$val->nama}}</option>
              @endforeach
            </select>
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" name="dosis[]" value="{{$value->dosis}}">
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" name="jumlah[]" value="{{$value->jumlah}}">
          </div>
        </td>

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

      @endforeach
    @endif
    </table>
  </div>

      <button class="btn btn-xxs mb-3 rounded-s text-uppercase font-900 shadow-s border-blue-dark  bg-blue-light">Save</span> </button>
  </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', '.button-add-drug', function(e){
  e.preventDefault();
  console.log('tes1');
  $(".drug-group tr:last").after(`
    <tr>

      <td>
        <div class="form-group">
          <select class="form-control" name="drug_id[]" id="drug_id">
            @foreach ($drugs as $val)
              <option value="{{$val->id}}">{{$val->nama}}</option>
            @endforeach
          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <input type="text" class="form-control" name="dosis[]" value="">
        </div>
      </td>
      <td>
        <div class="form-group">
          <input type="text" class="form-control" name="jumlah[]" value="">
        </div>
      </td>

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

});

$(document).on('click', '.button-remove-drug', function(e){
  e.preventDefault();
  console.log("tes");
  $(this).parents("tr").remove()

});

</script>
@endpush