@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Patient List
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            {{-- <li><a href="#">Outdoor</a></li> --}}
            <li class="active">Patient List</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">
                    @can('patient-create')
                        <a href="{{route('outdoor.add-patient')}}" class="btn btn-info btn-md">
                            <i class="fa fa-plus"></i>&nbsp;
                            Add Patient
                        </a>
                    @endcan
                </h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        @can('patient-view')
                            <table id="patientDatatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Patient Name</th>
                                    <th>Patient ID</th>
                                    <th>Mobile</th>
                                    <th>Blood Group</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>Patient Name</th>
                                    <th>Patient ID</th>
                                    <th>Mobile</th>
                                    <th>Blood Group</th>
                                    <th>Status</th>
                                </tr>
                                </tfoot>

                            </table>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="box-footer">
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function () {

            $('#patientDatatable').DataTable({
                processing: true,
                serverSide: true,
                order: [[0, "asc"]],
                ajax: {
                    url: '{{ route("outdoor.patient.list.ajax") }}'
                },
                columns: [
                    {data: 'full_name', name: 'users.full_name', orderable: true, searchable: true},
                    {data: 'patient_id', name: 'patient_id', orderable: true, searchable: true},
                    {data: 'mobile_no', name: 'users.mobile_no', orderable: true, searchable: true},
                    {data: 'blood_group', name: 'blood_group', orderable: true, searchable: true},
                    {data: 'action', name: 'action', orderable: true, searchable: false}
                ],
            });
        });

        function updateStatus(action, url, id) {
            var reference = $("#reference_" + id);
            if (action == 'delete') {
                if (!confirm('Do you want to Delete ?')) {
                    return false;
                }
            }

            $.ajax({
                url: "update-status/" + url + "/" + action + "/" + id,
                method: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        if (action == 'active') {
                            // reference.
                            reference.prev().show().prev().hide();
                            reference.parent().prev().children().next().show().prev().hide();
                        } else if (action == 'inactive') {
                            reference.prev().hide().prev().show();
                            reference.parent().prev().children().next().hide().prev().show();
                        } else if (action == 'delete') {
                            reference.parent().parent().hide(1000).remove();
                        }

                        $('.box-body-second').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    } else {
                        $('.box-body-second').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    }
                },
                error: function (data) {
                    $('.box-body-second').show();
                    $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                }
            });
        }

    </script>
@endsection