<div class="content-wrapper">
    <section class="content-header">
        <h1>
            Toko
            <small>Data Toko</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="index.php"><i class="fa fa-dashboard"></i> Beranda</a></li>
            <li class="active">Data Toko</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <section class="col-lg-12 col-lg-offset-0">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Daftar Toko:</h3>
                        <button class="btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#inputtoko"><i class="fa-solid fa-pencil"></i> &nbsp; Tambah Toko Baru</button>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="tokoTable">
                                <thead>
                                    <tr>
                                        <th width="5%">No:</th>
                                        <th width="25%">Nama Toko:</th>
                                        <th width="25%">Alamat Toko:</th>
                                        <th width="20%">Kontak Toko:</th>
                                        <th width="15%">Status Toko:</th>
                                        <th width="5%">Ubah Data</th>
                                        <th width="5%">Hapus Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
</div>
<div class="modal fade" id="inputtoko">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Default Modal</h4>
            </div>
            <form id="tokoForm">
                <div class="modal-body">
                    <input type="hidden" id="tokoId">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input type="text" class="form-control" id="description" name="description" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="saveTokoBtn">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>