@extends('admin.layouts.app')

@section('title', 'Unprocess New Patient')

@section('datatable')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Unprocess New Patient</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item active">Unprocess New Patient</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th width="10">#</th>
                            <th width="300">Register Code</th>
                            <th width="300">Name</th>
                            <th width="100">Created At</th>
                            <th width="10">#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript">
    function processNewPatient(code){
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: 'Yes, process it!',
            buttonsStyling:!1,
            showCloseButton:!0,
        }).then(function (t) {
            if(t.value){
                var data = {
                    _token: "{{ csrf_token() }}",
                    _method:'post',
                    code:code
                };
                $.ajax({
                    url: "{{route('admin.sync.unprocesspatient')}}",
                    dataType: 'json',
                    data:data,
                    type:'POST',
                    beforeSend:function(){
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response){
                    if(response.status){
                        $('.overlay').addClass('d-none');
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            dataTable.ajax.reload( null, false );
                        })
                    }else{
                        $('.overlay').addClass('d-none');
                        Swal.fire({ 
                            title: "Error!", 
                            text: response.message, 
                            icon: "error", 
                            confirmButtonClass: "btn btn-primary w-xs mt-2", 
                            buttonsStyling:!1, 
                        });
                    }
                }).fail(function(response){
                    res = response.responseJSON;
                    $('.overlay').addClass('d-none');
                    Swal.fire({ 
                        title: "Error!", 
                        text: res.message, 
                        icon: "error", 
                        confirmButtonClass: "btn btn-primary w-xs mt-2", 
                        buttonsStyling:!1, 
                    });
                })
            }
        })
    }
    $(document).ready(function() {
        dataTable = $('.datatable').DataTable( {
            stateSave:true,
            processing: true,
            serverSide: true,
            filter:false,
            info:false,
            lengthChange:true,
            responsive: true,
            order: [[ 0, "asc" ]],
            paging: false,
            ajax: {
                url: "{{route('admin.sync.readunprocessnewpatient')}}",
                type: "GET",
                data:function(data){

                }
            },
            columnDefs:[
                {
                    orderable: false,targets:[0]
                },
                { className: "text-right", targets: [0] },
                { className: "text-center", targets: [4] },
                { render: function ( data, type, row ) {
                    return `<button class="btn btn-info btn-sm" onclick="processNewPatient('${row.code}')">Process</button>`;
                },targets: [4]
                }
            ],
            columns: [
                { data: "no" },
                { data: "code" },
                { data: "name" },
                { data: "admission_date" },
                { data: "id" },
            ]
        });
    })
</script>
@endpush