{% extends 'base.html.twig' %}

{% block title %}Search Patient{% endblock %}

{% block styles %}
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet">

{{ parent() }}
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-6">
            <form class="kt-form">
                <div class="input-group" style="border-bottom: 2px solid">
                    <input id="search-abha" placeholder="Search ABHA" class="form-control" type="text" name="search"
                        style="background-color: transparent; color: #189f9f; border: none;">
                </div>
                {% if abha_env == 'sandbox' %}
                <span>e.g. "xyz{{abha_sbx}}"</span>
                {% else %}
                <span>e.g. "xyz{{abha_prod}}"</span>
                {% endif %}
                <div id="error_msg"></div>
            </form>
        </div>

        <div class="col-6">
            <div class="kt-subheader__toolbar">
                <a href="javascript:void(0);" id="search" class="btn btn-default btn-bold" role="button">Search</a>
                <a href="javascript:void(0);" id="shared-profile" class="btn btn-default btn-bold" role="button">Shared
                    Profiles</a>
                <a href="javascript:void(0);" id="AbhaPop" class="btn btn-brand btn-bold">Register Patient</a>
            </div>
        </div>
    </div>
</div>
<div class="kt-container kt-grid__item kt-grid__item--fluid mt-4">
    <div class="kt-portlet kt-portlet--mobile d-none" id="tableDiv">
        <div class="kt-portlet__body">
            <h4 class="mb-4">Search Results</h4>

            <table class="table member-list" id="member-list" style="width:100%">
                <thead>
                    <tr>
                        <th width="5%">Sr. No.</th>
                        <th width="5%">Abha Id</th>
                        <th width="15%">Abha Address</th>
                        <th width="15%">Name</th>
                        <th width="10%">Gender</th>
                        <th width="10%">Mobile</th>
                        <th width="10%">Date of Birth</th>
                        <th width="10%">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="patient-family" tabindex="-1" role="dialog" aria-labelledby="patient-family-model"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="patient-family-model">Family List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="kt-scroll" data-scroll="true" data-height="200">
                    <table class="table table-striped table-bordered table-hover" id="family_list">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Gender</th>
                                <th>Age</th>
                                <th>Mobile</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<form action="{{ path('patient_register') }}" id="register-new-member" method="POST">
    <input type="hidden" name="member_id" id="new-member-id">
</form>
<form action="{{ path('abha_card') }}" id="new-abha" method="POST">
    <input type="hidden" name="type" id="abha_val" value>
</form>
<form action="{{ path('abha_address_num_verification') }}" id="link-abha" method="POST">
    <input type="hidden" name="type" id="abha_link_val" value>
    <input type="hidden" name="abha_details" id="abha_details" value="">
</form>
<form action="{{ path('abha_init') }}" id="frmAbhaDetail" method="POST">
    <input type="hidden" name="type" id="type" value="">
    <input type="hidden" name="abha_details" id="abhaDetails" value="">
    <input type="hidden" name="dob" id="dob" value="">
    <input type="hidden" name="name" id="name" value="">
    <input type="hidden" name="gender" id="gender" value="">
    <input type="hidden" name="mobile" id="mobile" value="">
    <input type="hidden" name="patientId" id="patientId" value="">
    <input type="hidden" name="profile_shared_id" id="profile_shared_id" value="">
</form>

{% endblock %}

{% block scripts %}
{{ parent() }}

<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
    $(document).ready(function () {

        var htmlPrefilter = $.htmlPrefilter,
            rdel = /<(del)(?=[\s>])[\w\W]*?<\/\1\s*>/gi;
        $.htmlPrefilter = function (html) {
            return htmlPrefilter.call(this, html).replace(rdel, "");
        };


        $('#shared-profile, #search').on('click', function () {

            var searchType = $(this).attr('id'), url;
            if (searchType == 'shared-profile') {
                url = '{{ path('shared_profile') }}';
                var title = "Please wait....";
            } else {
                url = '{{ path('patient_search_with_abha') }}';
                var title = "Searching... Please wait... !";
                if ($('#search-abha').val().length < 3) {
                    swal.fire("", "Please enter at least 3 characters for searching!", "error");
                    return false;
                }
            }
            $('#member-list tbody').remove();

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    search: $('#search-abha').val()
                },
                beforeSend: function () {
                    Swal.fire({
                        title: title,
                        allowOutsideClick: false,
                        onBeforeOpen: () => {
                            Swal.showLoading()
                        },
                    });
                },
                success: function (members) {
                    if (searchType != 'shared-profile') {
                        if (members.responseData) {
                            Swal.fire({
                                title: 'Do you want verify your ABHA?',
                                type: 'warning',
                                allowOutsideClick: false,
                                showCancelButton: true,
                                confirmButtonColor: '#189f9f',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Yes',
                                cancelButtonText: 'No',
                            }).then((result) => {
                                if (result.value) { //yes
                                    //Todo : abha link page route define
                                    $('#abha_details').val($('#search-abha').val());
                                    $('#abha_link_val').val('case');
                                    $('#link-abha').submit();
                                    //window.location.href = "{{ path('patient_new') }}";
                                } else { //no
                                    //Todo : new patient reg link
                                    window.location.href = "{{ path('case_new') }}";
                                    // window.location.href = "{{ path('patient_new') }}";
                                }
                            });
                            $('#error_msg').text('');
                        } else {
                            swal.close();
                            $('#error_msg').text('Record not found.').css('color', 'red');
                        }
                    } else {
                        var tbody = $('<tbody />');
                        swal.close();
                        if (!members.responseData || !$.isArray(members.responseData) || members.responseData.length == 0) {
                            tbody.append('<tr><td colspan="11" class="text-center">No result found!</td></tr>');
                        } else {
                            $.each(members.responseData, function (i, member) {

                                var tr = $('<tr />');

                                tr.append($('<td class="text-right" width="5%" />').html(i + 1))
                                    .append($('<td />').html(member.abha_number))
                                    .append($('<td />').html(member.abha_address))
                                    .append($('<td width="15%" />').html(member.name))
                                    .append($('<td />').html(member.gender))
                                    .append($('<td />').html(member.mobile))
                                    .append($('<td width="15%" />').html(member.dob));

                                var actionColumn = '';
                                if (searchType == 'shared-profile') {
                                    if (member.is_exist == 0) {
                                        var ispatient = 'reg';
                                    } else {
                                        var ispatient = 'case';
                                    }
                                    // $('.abhaDetails').val(member.abha_address);
                                    $('#type').val(ispatient);
                                    actionColumn += "<button class='btn btn-link abhaData' onclick='abhaData(this)' data-patient='" + member.patient_id + "' data-abhaaddress='" + member.abha_address + "' data-ispatient='" + ispatient + "' data-id='" + member.id + "' data-dob='" + member.dob + "' data-gender='" + member.gender + "' data-name='" + member.name + "' data-mobile='" + member.mobile + "'> <i class='fa fa-eye' aria-hidden='true'></i>View</button>";
                                }

                                actionColumn += '</div>' +
                                    '</div>';
                                tr.append($('<td class="text-left" />').html(actionColumn));
                                tbody.append(tr);
                            });
                        }

                        $('#member-list').append($.htmlPrefilter(tbody[0].outerHTML));
                        $('#tableDiv').removeClass('d-none');
                    }
                }
            });
        });

        $('#AbhaPop').click(function () {
            Swal.fire({
                title: 'Do you have ABHA?',
                type: 'warning',
                allowOutsideClick: false,
                showCancelButton: true,
                confirmButtonColor: '#189f9f',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
            }).then((result) => {
                if (result.value) {
                    Swal.fire({
                        title: 'Do you want verify your ABHA?',
                        type: 'warning',
                        allowOutsideClick: false,
                        showCancelButton: true,
                        confirmButtonColor: '#189f9f',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No',
                    }).then((result) => {
                        if (result.value) { //yes
                            //Todo : abha link page route define
                            $('#abha_link_val').val('reg');
                            $('#link-abha').submit();
                            //window.location.href = "{{ path('patient_new') }}";
                        } else { //no
                            //Todo : new patient reg link
                            window.location.href = "{{ path('patient_new') }}";
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Do you want to create ABHA?',
                        type: 'warning',
                        confirmButtonColor: '#189f9f',
                        cancelButtonColor: '#d33',
                        showCancelButton: true,
                        allowOutsideClick: false,
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No',
                        reverseButtons: false
                    }).then((result) => {
                        if (result.value) {
                            $('#abha_val').val('reg');
                            $('#new-abha').submit();
                            //window.location.href = "{{ path('abha_link') }}";
                        } else {
                            window.location.href = "{{ path('patient_new') }}";
                        }
                    })
                }
            })
        });
        $('#member-list').on('click', '.register-member', function () {
            $('#new-member-id').val($(this).attr('data'));
            $('#register-new-member').submit();
        });


        jQuery('#member-list').DataTable({
            paginate: true,
            'info': true,
            searchable: true,
            "language": {
                "emptyTable": "No records found"
            },
        });
    });
    function abhaData(btn) {
        $('#dob').val($(btn).data('dob'));
        $('#profile_shared_id').val($(btn).data('id'));
        $('#gender').val($(btn).data('gender'));
        $('#name').val($(btn).data('name'));
        $('#mobile').val($(btn).data('mobile'));
        $('#type').val($(btn).data('ispatient'));
        $('#patientId').val($(btn).data('patient'));
        $('#abhaDetails').val($(btn).data('abhaaddress'));
        $('#frmAbhaDetail').submit();
    }
    function ABHA(ABHA) {
        Swal.fire({
            title: 'Do you have ABHA?',
            type: 'warning',
            allowOutsideClick: false,
            showCancelButton: true,
            confirmButtonColor: '#189f9f',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
        }).then((result) => {
            if (result.value) {
                Swal.fire({
                    title: 'Do you want verify your ABHA?',
                    type: 'warning',
                    allowOutsideClick: false,
                    showCancelButton: true,
                    confirmButtonColor: '#189f9f',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                }).then((result) => {
                    if (result.value) { //yes
                        //Todo : abha link page route define
                        window.location.href = "{{ path('patient_new') }}";
                    } else { //no
                        //Todo : new patient reg link
                        window.location.href = "{{ path('patient_new') }}";
                    }
                });
            } else {
                Swal.fire({
                    title: 'Do you want to create ABHA?',
                    type: 'warning',
                    confirmButtonColor: '#189f9f',
                    cancelButtonColor: '#d33',
                    showCancelButton: true,
                    allowOutsideClick: false,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    reverseButtons: false
                }).then((result) => {
                    if (result.value) {
                        window.location.href = "{{ path('abha_card') }}";
                    } else {
                        window.location.href = "{{ path('patient_new') }}";
                    }
                })
            }
        })
    }
</script>
{% endblock %}