<table id="" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Medicine</th>
            <th>Amount</th>
        </tr>
    </thead>
    
        <tbody>
            @php $i=1;@endphp
            @foreach($data as $result)
            <tr>
                <td width="10"><input type="checkbox" name="MedicineId[]" value="{{$result->id}}"  class="common_selector Proccedures"></td>
                <input type="hidden" name="ProcId[]" value="{{$result->id}}">
                <td>{{$result->Name}}</td>
                <td>{{$result->Amount}}</td>
            </tr>
            @php $i++;@endphp
            @endforeach
            <tr>
            <td><button type="button" class="btn btn-primary btn-finish" onclick="saveSurgicalPres()">Save</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success btn-finish" onclick="printSurgicalPres()">Print</button></td>
        <td>Total Amount</td>
        <td id="TotalAmount"></td>
      
        </tr>
        </tbody>
        <input type="hidden" id="TotAmt" value="">
        <input type="hidden" id="ProcId" name="ProcedureId[]" value="">
        <input type="hidden" id="actionsurg" value="Save">
        <input type="hidden" id="surgsaveid" value="">
</table>

<script type="text/javascript">
$(document).ready(function() {
    $('#example22').DataTable({
        scrollY: '200px',
        pageLength: '1000',
        paging: false
    });

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        //filter_data();
        var ProccedureId = get_filter('Proccedures');
         if(ProccedureId == ''){
              $('#ProcId').val(0);
         }
         else{
        $('#ProcId').val(ProccedureId);
        
        getTotAmount();
         }
        
    });

});

function getTotAmount(){
    var ProcId = $('#ProcId').val();
    $.ajax({
            url: "{{ url('getSurgTotAmount') }}",
            method: "POST",
            data: {
                _token: '{{csrf_token()}}',
                ProcId:ProcId
            },
            success: function(data) {
                $('#TotAmt').val(data);
                $('#TotalAmount').html(data);
            }
        });
}

function saveSurgicalPres(){
    var ProcId = $('#ProcId').val();
    var id = $('#id').val();
    $.ajax({
            url: "{{ url('saveSurgicalPres') }}",
            method: "POST",
            data: {
                _token: '{{csrf_token()}}',
                ProcId:ProcId,
                id:id
            },
            success: function(data) {
                setTimeout(function() {
            window.open(
                '/{{projectUrl()}}printSurgicalPres/' + id, 'popUpWindow4',
                'height=1000,width=800,left=0,top=0,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
            );
        }, 1);
                //alert("Record Saved...");
                //$('#modal-report-surgical').modal('hide');
            }
        });
}
</script>