<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.buttons input[type="radio"] {
    display: none;
 
}
.buttons input[type="picked"] {
    display: none;
}
.buttons input[type="done"] {
    display: none;
}

input[type="radio"]:checked + label {
  
    padding: 15px;
    color: #fff;
    font-size: 25px;
    background: #7FFF00;
    width : 55px;
    text-align:center;

}


input[type="radioo"] + label {
    padding: 15px;
    background: #fff;
    color: black;
    font-size: 25px;
    width: 1080px;
    text-align: center;

}


input[type="radio"] + label {
    padding: 15px;
    background: #007bff;
    color: #fff;
    font-size: 25px;
    width : 55px;
    text-align:center;
 

}
input[type="picked"] + label {
    padding: 15px;
    background: #FF0000;
    color: #fff;
    font-size: 25px;
    width : 55px;
    cursor:not-allowed; 
    text-align:center;
}


input[type="done"] + label {
    padding: 15px;
    background: #808080;
    color: #fff;
    font-size: 25px;
    width : 55px;
    cursor:not-allowed; 
    text-align:center;
    
 

}


 
.table1 tr th{
    background: #007bff;
    color: #fff;
}
 
.table1, th, td {
    padding: 10px 20px;
    text-align: center;
    
}
 

.table2 tr th{
    background: #7FFF00;
    color: #fff;
}
 
.table2, th, td {
    padding: 10px 20px;
    text-align: center;
    
}
 

 
.table3 tr th{
    background: #FF0000;
    color: #fff;
}
 
.table3, th, td {
    padding: 10px 20px;
    text-align: center;
    
}


 
.table4 tr th{
    background: #808080;
    color: #fff;
}
 
.table4, th, td {
    padding: 10px 20px;
    text-align: center;
    
}
 </style>

<hr>
  <hr>
  <hr>
  <hr>
 
    <section class="breadcrumb_part breadcrumb_bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>Data</h2>
                            <h2>Pasien</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb start-->

         
    <div class="container">
        <div class="card" >
        <div class="card-header">
                <h2>Registrasi</h2>
                </div>
            <div class="card-body">
                <form id="myForm" class="form-row">

                    <input type="hidden" id="id_pasien"  class="form-control" disabled/></input>
                    
                    <div class="form-group col-md-6">
                        <label> <h5>No Rekam Medis :</h5></label>
                        <input type="text" id="no_rekam_medis"  class="form-control" disabled/></input>
                    </div>
                    <div class="form-group col-md-6">
                    <label> <h5>Nama :</h5></label>
                        <input type="text" id="nama"  class="form-control" disabled/></input>
                    </div>
                    <div class="form-group col-md-6">
                        <label> <h5>Jenis Kedatangan :</h5></label>
                        <select name="jenis_kedatangan" id="jenis_kedatangan"  class="form-control">
                        <option disabled selected> Pilih </option>
                        </select> 
                    </div>
                    <div class="form-group col-md-6">
                        <label> <h5>Fakses/Dokter Rujukan :</h5></label>
                        <input type="text" id="dokter_rujukan"  class="form-control" ></input>
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>Cara Bayar :</h5></label>
                        <select name="cara_bayar" id="cara_bayar"  class="form-control">
                        <option disabled selected> Pilih </option>
                        </select> 
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>Penjamin :</h5></label>
                        <select name="penjamin" id="penjamin"  class="form-control">
                        <option disabled selected> </option>
                        </select> 
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>No Asuransi :</h5></label>
                        <input type="text" id="dokter_rujukan"  class="form-control" /></input>
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>Instalasi :</h5></label>
                        <select name="instalasi" id="instalasi"  class="form-control">
                        <option disabled selected> Pilih </option>
                        </select> 
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>Poli :</h5></label>
                        <select name="poli" id="poli"  class="form-control">
                        <option disabled selected> </option>
                        </select> 
                    </div>
                    <div class="form-group col-md-4">
                        <label> <h5>Dokter :</h5></label>
                        <select id="dokter" name="dokter" class="form-control">
                        <option disabled selected> </option>
                        </select>
                    </div>
                   
                    <!-- <div class="form-group col-md-4"> -->
                        <input type="hidden" id="ktp"  class="form-control"  disabled   /></input>
                    <!-- </div> -->


                    <!-- <div class="form-group col-md-4"> -->
                        <input  type="hidden" id="tempat_lahir"  class="form-control "disabled ></input>
                    <!-- </div> -->
                    <!-- <div class="form-group col-md-4"> -->
                        <input  type="hidden" id="sisa_antrian"  class="form-control "disabled ></input>
                    <!-- </div> -->

                    <!-- <div class="form-group col-md-4"> -->
                        <input type="hidden" id="tanggal_lahir"  class="form-control"disabled /></input>
                    <!-- </div> -->
                    <!-- <div class="form-group col-md-4" > -->
                        <input  type="hidden" id="alamat" rows="3" class="form-control"disabled ></input>
                    <!-- </div> -->

                    <!-- <div class="form-group col-md-4"> -->
                        <input type="hidden" id="no_telepon"  class="form-control "disabled  ></input>
                    <!-- </div>  -->
                </form>
                </div>
                 
            </div>
            <br>
        <div class="card" >
            <div class="card-header">
                <h4>Penanggung Jawab</h4>
                </div>
            <div class="card-body">
                <form id="myForm" class="form-row">
                    <div class="form-group col-md-3">
                        <label> <h5>Nama :</h5></label>
                        <input type="text" id="nama_penanggung"  class="form-control" ></input>
                    </div>
                    <div class="form-group col-md-3">
                        <label> <h5>Hubungan Keluarga :</h5></label>
                        <select id="hubkel" name="hubkel" class="form-control">
                        <option disabled selected> Pilih </option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label> <h5>Alamat :</h5></label>
                        <input type="text" id="alamatpen"  class="form-control" ></input>
                    </div>
                    <div class="form-group col-md-3">
                        <label> <h5>No Telepon :</h5></label>
                        <input type="text" id="notelpen"  class="form-control" ></input>
                    </div>

                </form>
            </div>         
        </div>
    
    </div> 
    <br>
        <div class="container">
            <button type="button" id="pilihno" class="btn btn-primary"  data-toggle="modal" data-target="#pilihantrian" style="float: left;width: 49%;"> Daftar Antrian</button> 
            <button type="button" id="kembali" class="btn btn-danger"  style="float: right;width: 49%;"> Kembali</button> 
        </div>  
    
    <br>
    <br>

<!-- Trigger the modal with a button -->

<!-- Modal -->
  <div class="modal fade modalPalingesar" id="pilihantrian" tabindex="-1" role="dialog" aria-hidden="true">
  
     <div class="modal-dialog modal-xl">

    <!-- Modal content-->
        <div class="modal-content">
    
            <div class="modal-header">
                <button type="button" class="-close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Daftar Antrian</h4>
            </div>
            <div class="modal-body">
                    
                <div class="row  col-lg-12 antrian" id="seat">
                
                    
                </div> 
                <div class="modal-footer">
                        <div class="container"  >  
                            <div class="row col-lg-12">
                                <div class="col-sm-3">
                                <h6>Antrian Belum Dipilih</h6>
                                </div>
                                <div class="col-sm-1">
                                    <h6>:</h6>
                                </div>
                                <div>
                                    <table class="table1"><tr><th></th></tr></table>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="col-sm-3">
                                    <h6>Antrian Yang Dipilih</h6> 
                                </div>
                                <div class="col-sm-1">
                                    <h6>:</h6>
                                </div>
                                <div>
                                    <table class="table2"><tr><th></th></tr></table>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="col-sm-3">
                                    <h6>Antrian Telah Diisi</h6>
                                </div>
                                <div class="col-sm-1">
                                    <h6>:</h6>
                                </div>
                                <div>
                                    <table class="table3"><tr><th></th></tr></table>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="col-sm-3">
                                    <h6>Antrian Telah Selesai</h6>
                                </div>
                                <div class="col-sm-1">
                                    <h6>:</h6>
                                </div>
                                <div>
                                    <table class="table4"><tr><th></th></tr></table>
                                </div>
                            </div>
                        </div>
                    <button  button type="button" class="btn btn-primary" id="tambah">Selesai</button>
                    <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
                    
                </div>
            </div>
        </div>
    </div>
</div>

