@extends('layouts.app')
@section('title', __('medsurgery::lang.implant_registry'))
@section('content')
<section class="content-header"><h1>@lang('medsurgery::lang.implant_registry')</h1>
    <p>@lang('medsurgery::lang.implants_help')</p>
</section>
<section class="content">
  @component('components.widget', ['class' => 'box-primary'])
    <div class="row" style="margin-bottom:12px;">
      <div class="col-md-4">
        <input type="text" id="medsx_implant_search" class="form-control input-sm"
          placeholder="@lang('medsurgery::lang.search') (@lang('medsurgery::lang.implant_serial') / @lang('medsurgery::lang.implant_lot') / @lang('medsurgery::lang.implant_name'))">
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered table-striped" id="medsx_implants_table">
        <thead><tr>
          <th>@lang('medsurgery::lang.implant_name')</th>
          <th>@lang('medsurgery::lang.implant_serial')</th>
          <th>@lang('medsurgery::lang.implant_lot')</th>
          <th>@lang('medsurgery::lang.case_no')</th>
          <th>@lang('medsurgery::lang.patient')</th>
          <th>@lang('medsurgery::lang.date')</th>
        </tr></thead>
      </table>
    </div>
  @endcomponent
</section>
@endsection
@section('javascript')
<script>
$(function () {
    var table = $('#medsx_implants_table').DataTable({
        processing: true, serverSide: false,
        ajax: {
            url: '{{ route('medsx.implants.index') }}',
            data: function (d) { d.q = $('#medsx_implant_search').val(); }
        },
        columns: [
            { data: 'name' },
            { data: 'serial' },
            { data: 'lot' },
            { data: null, render: function (row) {
                return '<a href="' + row.case_url + '">' + row.case_no + '</a>';
            }},
            { data: 'patient_name' },
            { data: 'date' },
        ],
        language: { emptyTable: '{{ __('medsurgery::lang.no_implants') }}' }
    });

    var t;
    $('#medsx_implant_search').on('keyup', function () {
        clearTimeout(t);
        t = setTimeout(function () { table.ajax.reload(); }, 300);
    });
});
</script>
@endsection
