@extends('layouts.admin_master')

@section('content')

<main>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="card shadow-lg border-0 rounded-lg mt-5">
                    <div class="card-header">
                        <h1 class="text-center font-weight-light my-4"><b>Pasien Baru</b></h1>
                    </div>
                    <div class="card-body">
                        <form id="myForm">
                            <div class="form-row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputFirstName">Tipe Pasien</label>
                                        <div class="form-check">
                                            <input checked class="form-check-input" type="radio" onclick="javascript:yesnoCheck();" name="tipe_pasien" id="yesCheck">
                                            <label class="form-check-label" for="flexRadioDefault1">
                                                Pasien Lama
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" onclick="javascript:yesnoCheck();" name="tipe_pasien" id="noCheck">
                                            <label class="form-check-label" for="flexRadioDefault2">
                                                Pasien Baru
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12" id="ifYes" style="visibility:hidden">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputFirstName">Nomor Rekam Medis</label>
                                        <select class="mySelect2" name="no_rekam_medis" style="width: 100%;" name="state">

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputFirstName">Nama Pasien</label>
                                        <input class="form-control py-4" name="nama" type="text" placeholder="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputLastName">Nomor Telepon</label>
                                        <input class="form-control py-4" name="telp" type="text" placeholder="" />
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputLastName">Alamat</label>
                                        <input class="form-control py-4" name="alamat" type="text" placeholder="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="inputFirstName">Nomor BPJS</label>
                                        <input class="form-control py-4" name="nomor_bpjs" type="text" placeholder="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="Poliklinik">Poli Klinik</label>
                                        <select class="form-control py-4" name="poliklinik" id="poliklinik">
                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="small mb-1" for="Dokter">Dokter</label>
                                        <select class="form-control py-4" name="dokter" id="dokter">

                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-4 mb-0"><button id="daftar" type="submit" class="btn btn-primary btn-block">Submit</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    $(document).ready(function() {
        $('#myForm').on('submit', function (e) {
            e.preventDefault();      

            $.ajax({
                type: "POST",
                url: "http://10.10.123.135:8083/api/v1/visit",
                data: $("#myForm").serialize(),
                success: function(response) {
                    console.log(response);
                }
            });
        });

        $('.mySelect2').select2({
            //   ajax: {
            //     url: 'https://api.github.com/orgs/select2/repos',
            //     data: function (params) {
            //       var query = {
            //         search: params.term,
            //         type: 'public'
            //       }

            //       // Query parameters will be ?search=[term]&type=public
            //       return query;
            //     }
            //   }
        });

        $.ajax({
            url: "http://10.10.123.135:8083/api/v1/healthcare",
            type: 'GET',
            dataType: 'json', // added data type
            success: function(res) {
                let data = res.data
                $.each(data, function(index) {
                    $('#poliklinik')
                        .append("<option value='" + data[index].id + "'>" + data[index].name + "</option>");
                });
            }
        });


        function selectDokter(id) {
            $.ajax({
                url: "http://10.10.123.135:8083/api/v1/doctor?poli=" + id,
                type: 'GET',
                dataType: 'json', // added data type
                success: function(res) {
                    let data = res.data
                    $.each(data, function(index) {
                        $('#dokter').append($('<option>', {
                            value: data[index].id
                        }).text(data[index].name));
                    });
                }
            });
        }

        $('#poliklinik').on('change', function() {
            selectDokter(this.value);
            // alert(this.value)
        });

        function yesnoCheck() {
            if (document.getElementById('yesCheck').checked) {
                document.getElementById('ifYes').style.visibility = 'visible';
            } else document.getElementById('ifYes').style.visibility = 'hidden';
        }
        yesnoCheck();
    });
</script>

@endsection