@extends("backend.layouts2.master")

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

@push('css')

<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')}}">

@endpush

@section ('content')

@if (isset($errors) && count($errors) > 0)
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Error!</strong> Please fill all required fields
    </div>
@endif

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

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

<div class="container-fluid">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">

          <ol class="breadcrumb float-sm-left">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item">Tindakan</li>
            <li class="breadcrumb-item active">Form</li>
          </ol>
      </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- Page Heading -->

  <!-- DataTales Example -->
  <div class="card shadow mb-4">
      <div class="card-header py-3">
        <div class="row">
          <div class="col-12">
            @if ($action === "UPDATE")

              <h6 class="m-0 font-weight-bold text-primary w-75 p-2"><a href="{{url('/dashboard/layanan/rekam-medis/edit/'.$row->rekam_medis_id)}}" class="btn btn-primary btn-xs"><i class="fas fa-arrow-circle-left"></i></a> Tindakan - {{ $row->pasien->nama }} (No RM : {{ $row->pasien->no_rm }}) (No Pendaftaran : {{ $row->rekam_medis->register_id }})</h6>

            @else
              <h6 class="m-0 font-weight-bold text-primary w-75 p-2"><a href="{{url('/dashboard/layanan/rekam-medis/edit/'.$rekam_medis->id)}}" class="btn btn-primary btn-xs"><i class="fas fa-arrow-circle-left"></i></a> Tindakan - {{ $rekam_medis->pasien->nama }} (No RM : {{ $rekam_medis->pasien->no_rm }}) (No Pendaftaran : {{ $rekam_medis->register_id }})</h6>

            @endif

          </div>
          <div class="col-4">

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

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

      @csrf
      <input type="hidden" name="tindakan_id" value="{{$row->id ?? 0}}">
      <input type="hidden" name="rekam_medis_id" value="{{$rekam_medis->id}}">
      <input type="hidden" name="patient_id" value="{{$rekam_medis->patient_id}}">
      <input type="hidden" name="no_rm" value="{{$rekam_medis->no_rm}}">

        <div class="card-body">
          <div class="resep-group">
            <div class="row">
              <div class="col-md-8">
                <div class="form-group">
                  <label for="exampleInputEmail1">Tindakan</label>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <a href="#" class="btn btn-sm btn-success btn-circle button-add-tindakan">
                    <i class="fas fa-plus"></i>
                  </a>
                </div>
              </div>
            </div>

            @if(isset($row) && count($row->details)>0)
              @foreach ($row->details as $value)
                <div class="row">
                  <div class="col-md-8">
                    <div class="form-group">
                      <select class="form-control" name="tindakan_id[]" id="tindakan_id">
                        @foreach ($tindakan as $val)
                          <option value="{{$val->id}}" {{ $value["tindakan_id"] == $val->id ? 'selected' : '' }}>{{$val->nama}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="form-group">
                      <a href="#" class="btn btn-sm btn-danger btn-circle button-remove-tindakan">
                        <i class="fas fa-trash"></i>
                      </a>
                    </div>
                  </div>
                </div>
              @endforeach
            @endif
            <!-- <div class="row">
              <div class="col-md-8">
                <div class="form-group">
                  <select class="form-control" name="tindakan_id[]" id="tindakan_id">
                    @foreach ($tindakan as $val)
                      <option value="{{$val->id}}">{{$val->nama}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <a href="#" class="btn btn-sm btn-danger btn-circle button-remove-tindakan">
                    <i class="fas fa-trash"></i>
                  </a>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <!-- /.card-body -->

        <div class="card-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

</div>


@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-tindakan', function(e){
      e.preventDefault();
      console.log('tes1');
      $(".resep-group div.row:last").after(`
        <div class="row">
          <div class="col-md-8">
            <div class="form-group">
              <select class="form-control" name="tindakan_id[]" id="tindakan_id">
                @foreach ($tindakan as $val)
                  <option value="{{$val->id}}">{{$val->nama}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <a href="#" class="btn btn-sm btn-danger btn-circle button-remove-tindakan">
                <i class="fas fa-trash"></i>
              </a>
            </div>
          </div>
        </div>
        `);

    });

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

    });

  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
@endpush