@extends('layouts.main')

@push('styles')
<link href="{{ asset('/elite/bower_components/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('elite/tables/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />

<style>
    ul#results li {
        display:inline;
    }
</style>
@endpush

@section('content')

<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('patients.search_results') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('patients.dashboard') }}</a></li>
            <li><a href="{{ route('patients.index') }}">{{ __('patients.patients') }}</a></li>
            <li class="active">{{ __('patients.search_results') }}</li>
        </ol>
    </div>
</div>

@include('flash::message')

@include ('errors.list')

<div class="white-box">
    <h3 class="page-title">{{ __('patients.search_results') }}</h3>

    <div class="row">
        <div class="col-md-12">
            @if(isset($criteria) && isset($patient_count))

                <p>{{ __('patients.search_criteria') }} : <code>{{ $criteria }}</code> &nbsp;&nbsp;&nbsp;{{ __('patients.total_results') }} : <code>{{ count($patients) }}</code> &nbsp;&nbsp;&nbsp;<a href="{{ route('patients.select') }}">{{ __('patients.clear_search') }}</a></p>

                <div class="table-responsive">
                    <table class="table color-bordered-table success-bordered-table">
                        <thead>
                        <tr>
                            <th style="width: 5%">{{ __('patients.patient_number') }}</th>
                            <th style="width: 10%">{{ __('patients.full_names') }}</th>
                            <th style="width: 10%">{{ __('patients.gender') }}</th>
                            <th style="width: 10%">{{ __('patients.age') }}</th>
                            <th style="width: 10%">{{ __('patients.next_of_kin') }}</th>
                            <th style="width: 10%">{{ __('patients.marital_status') }}</th>
                            <th style="width: 5%">{{ __('patients.phone') }}</th>
                            <th style="width: 10%">{{ __('patients.occupation') }}</th>
                            <th style="width: 10%">{{ __('patients.category') }}</th>
                            <th style="width: 10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(count($patients ) > 0)
                            @foreach($patients as $patient)
                                <tr>
                                    <td>{{ $patient->number }}</td>
                                    <td>{{ $patient->first_name." ".$patient->last_name }}</td>
                                    <td>{{ $patient->gender == 2 ? "Female" : "Male" }}</td>
                                    <td>{{ get_patients_age($patient->date_of_birth) }}</td>
                                    <td>{{ $patient->next_of_kin }}</td>
                                    <td>{{ array_key_exists($patient->marital_status, $marital_statuses) ? $marital_statuses[$patient->marital_status] : "N/A" }}</td>
                                    <td>{{ $patient->phone }}</td>
                                    <td>{{ array_key_exists($patient->occupation_id, $occupations) ? $occupations[$patient->occupation_id] : "N/A" }}</td>
                                    <td>{{ array_key_exists($patient->category_id, $categories) ? $categories[$patient->category_id] : "N/A" }}</td>
                                    <td>
                                        <a href="/patient_episodes/set_patient_id/{{ $patient->id }}" class="btn btn-success btn-sm">{{ __('patients.select') }}</a>
                                        @if(is_fingerprint_enabled() && !is_null($patient->fingerprint_template))
                                            <br><br>
                                            <a href="#" onclick="confirm_fingerprint({{ $patient->id }})" class="btn btn-success btn-sm">{{ __('patients.confirm_fingerprint') }}</a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr><td colspan="10"><code>{{ __('patients.no_records_found') }}</code></td></tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

<div class="modal" id="modal_confirm_fingerprint" tabindex="-1" role="dialog" aria-labelledby="confirm_fingerprint_modal_label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ __('patients.confirm_fingerprint') }}</h4>
            </div>
            <div class="modal-body">
                <div class="fingerprint_box text-center">
                    <img id="fingerprint_image" height="240" width="220">
                </div>

                {{ Form::hidden('fingerprint_patient_id', '', ['id' => 'fingerprint_patient_id']) }}
                {{ Form::hidden('fingerprint_template', '', ['id' => 'fingerprint_template']) }}
                {{ Form::hidden('saved_fingerprint_template', '', ['id' => 'saved_fingerprint_template']) }}

                <button type="button" onClick='capture_fingerprint()' class="btn btn-sm btn-primary">{{ __('patients.capture_fingerprint') }}</button>
                <button type="button" onClick='search_fingerprint()' class="btn btn-sm btn-primary">{{ __('patients.confirm_fingerprint') }}</button>

                <p id="scanner_msg"></p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')

<script src="{{ asset('elite/bower_components/datatables/jquery.dataTables.min.js') }}"></script>

<script src="{{ asset('elite/tables/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/jszip.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/pdfmake.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/vfs_fonts.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.print.min.js') }}"></script>

<script>
    $('.table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                },
                title: 'Selected patients'
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                },
                title: 'Selected patients'
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                },
                title: 'Selected patients'
            }
        ],
    });
    $('.sorting').removeClass('sorting');//remove the sorting class
    $('.sorting_asc').removeClass('sorting_asc');//remove the sorting class

    function confirm_fingerprint(id) {
        $.ajax({
            method: 'GET',
            url: '/patients/get_fingerprint/' + id,
            success: function(response){
                if (response != '0') {fingerprint_patient_id
                    $('#saved_fingerprint_template').val(response);
                    $('#fingerprint_patient_id').val(id);
                    $('#modal_confirm_fingerprint').modal('show');
                } else {
                    alert("Patient has no registered fingerprints");
                }
            }
        });
    }

    function search_fingerprint() {
        let fingerprint_template = $('#fingerprint_template').val();
        let saved_fingerprint_template = $('#saved_fingerprint_template').val();
        let fingerprint_patient_id = $('#fingerprint_patient_id').val();

        if (fingerprint_template !== '' && saved_fingerprint_template !== '') {
            $.ajax({
                type: "POST",
                url: '/patients/compare_fingerprint_from_scanner/',
                data: {fingerprint_template: fingerprint_template, saved_fingerprint_template: saved_fingerprint_template},
                success: function(response){
                    let responseArray = JSON.parse(response);
                    console.log(responseArray);

                    if (responseArray["error_code"] == "0") {
                        let score = Math.round(responseArray["score"]);
                                
                        if(score > 50) {
                            window.location.href = "/patient_episodes/set_patient_id/" + fingerprint_patient_id;
                        } else {
                            alert("Fingerprint does not match with record");
                        }
                    } else {
                        $('#scanner_msg').text("Error Code: " + responseArray["error_code"] + " - Error Message: " + responseArray["error_message"]).css('color', 'red');
                    }
                }
            });
        } else {
            alert("Please capture the patient's fingerprint before searching");
        }
    }

    function capture_fingerprint() {
        $.ajax({
            url: '/patients/fetch_fingerprint_from_scanner/',
            success: function(response){
                let responseArray = JSON.parse(response);

                if (responseArray["error_code"] == "0") {
                    let template = responseArray["template"];
                    let pngImage = "data:image/png;base64," + responseArray["image"];

                    $("#fingerprint_image").attr('src', pngImage);
                    $('#fingerprint_template').val(template);

                    $('#scanner_msg').text("Fingerprint Captured").css('color', 'green');
                } else {
                    $('#scanner_msg').text("Error Code: " + responseArray["error_code"] + " - Error Message: " + responseArray["error_message"]).css('color', 'red');
                }
            }
        });
    }
</script>
@endpush

@push('styles')
    <style type="text/css">
        .color-bordered-table.success-bordered-table {
            border-top: 0px;
        }
    </style>
@endpush