@extends('layouts.template')

@section('title')
Tambah Satuan Obat | SIMRS
@endsection

@section('pagetitle')
Tambah Satuan Obat
@endsection

@section('breadcumb')
<nav aria-label="breadcrumb" role="navigation" class="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Beranda</a></li>
        <li class="breadcrumb-item"><a href="#">Data Master</a></li>
        <li class="breadcrumb-item"><a href="#">Obat</a></li>
        <li class="breadcrumb-item"><a href="#">Satuan Obat</a></li>
        <li class="breadcrumb-item active" aria-current="page">Tambah Satuan Obat</li>
    </ol>
</nav>
@endsection

@section('content')

<style>
    .form-group label {
        margin-top: 20px;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="card">
                <form method="#" action="#">
                    <div class="card-header">
                        <h4 class="card-title">
                            <strong>Form Tambah Satuan Obat</strong>
                        </h4>
                    </div>
                    <br>
                    <div class="card-content">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label>Satuan Obat</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label>Description</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                        <center>
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label>Active</label>
                                    <input type="checkbox" class="switch-icon" checked>
                                    <label>Inactive</label>
                                </div>
                                <div class="col-md-6">
                                    <label>Base UOM</label>
                                    <input type="checkbox" class="switch-icon" id="show_box" checked>
                                </div>
                            </div>
                        </center>
                        </div>
                        <div class="row" id="hiddenDiv">
                            <div class="form-group column-sizing">
                                <div class="col-sm-12">
                                    <div class="row">
                                        <label class="col-md-12 control-label">Parent Qty</label>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="selectpicker">
                                                <select class="selectpicker black"
                                                    data-style="btn form-control form-custom btn-block"
                                                    title="--  Satuan --" data-size="7">
                                                    <option value="id">Buah</option>
                                                    <option value="pf">Lembar</option>
                                                    <option value="pf">Amp</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div style="display: flex; justify-content: flex-end">
                            <button type="cancel" class="btn btn-fill btn-danger">Cancel</button>
                            <button type="submit" class="btn btn-fill btn-info">Submit</button>
                        </div>
                    </div>
                </form>
            </div> <!-- end card -->
        </div> <!--  end col-md-6  -->
    </div>
</div>

<!-- <script>
    $(document).ready(function(){

// HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
if ($([id="show_box"]).is(':checked') == false)
      $("#hiddenDiv").hide();

// SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
$('[id="show_box"]').change(function()
{
  if ($(this).is(':checked'))
      $("#hiddenDiv").fadeIn();
  else
      $("#hiddenDiv").fadeOut();
});

});
</script> -->
@endsection