<?php
$page_title = 'Picker Activity Record';
require_once('includes/load.php');
?>

<?php include_once('layouts/header.php'); ?>

<div class="row">
    <div class="col-md-12">
        <?php echo display_msg($msg); ?>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>
                    <span class="glyphicon glyphicon-th"></span>
                    <span>Picker Activity</span>
                </strong>
            </div>
            <div class="panel-body">
                <div class="container">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab1">Masukkan ID Card</a></li>
                        <li><a data-toggle="tab" href="#tab2">Masukkan ID Packing List</a></li>
                        <li><a data-toggle="tab" href="#tab3">Masukkan ID Barang</a></li>
                        <li><a data-toggle="tab" href="#tab4">Masukkan ID Packing List</a></li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content">
                        <!-- Tab 1 -->
                        <div id="tab1" class="tab-pane fade in active">
                            <h3>Masukkan ID Card</h3>
                            <form>
                                <div class="form-group">
                                    <label for="idCard">ID Card:</label>
                                    <input type="text" class="form-control" id="idCard" placeholder="Masukkan ID Card">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>

                        <!-- Tab 2 -->
                        <div id="tab2" class="tab-pane fade">
                            <h3>Masukkan ID Packing List</h3>
                            <form>
                                <div class="form-group">
                                    <label for="idPackingList1">ID Packing List:</label>
                                    <input type="text" class="form-control" id="idPackingList1"
                                        placeholder="Masukkan ID Packing List">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>

                        <!-- Tab 3 -->
                        <div id="tab3" class="tab-pane fade">
                            <h3>Masukkan Barang</h3>
                            <form id="barangForm">
                                <div class="form-group">
                                    <label for="idBarang">Scan Barang:</label>
                                    <input type="text" class="form-control" id="idBarang"
                                        placeholder="Masukkan ID Barang">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>

                            <hr>

                            <h3>Detail Barang</h3>
                            <table class="table table-bordered" id="barangTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>ID Barang</th>
                                        <th>Q Required</th>
                                        <th>Q Saat Ini</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data akan diisi dengan AJAX -->
                                </tbody>
                            </table>

                            <hr>

                            <h3>Ganti Varian Barang</h3>
                            <form id="variantForm">
                                <div class="form-group">
                                    <label for="variantID">ID Barang:</label>
                                    <input type="text" class="form-control" id="variantID"
                                        placeholder="Masukkan ID Barang">
                                </div>
                                <div class="form-group">
                                    <label for="newVariant">Varian Baru:</label>
                                    <input type="text" class="form-control" id="newVariant"
                                        placeholder="Masukkan Varian Baru">
                                </div>
                                <div class="form-group">
                                    <label for="reason">Alasan:</label>
                                    <textarea class="form-control" id="reason" rows="3"
                                        placeholder="Masukkan alasan penggantian varian"></textarea>
                                </div>
                                <button type="submit" class="btn btn-warning">Ganti Varian</button>
                            </form>

                            <hr>

                            <h3>Riwayat Ganti Varian</h3>
                            <table class="table table-bordered" id="variantTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>ID Barang</th>
                                        <th>Varian Lama</th>
                                        <th>Varian Baru</th>
                                        <th>Alasan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data akan diisi melalui JavaScript -->
                                </tbody>
                            </table>
                        </div>


                        <!-- Tab 4 -->
                        <div id="tab4" class="tab-pane fade">
                            <h3>Masukkan ID Packing List</h3>
                            <form>
                                <div class="form-group">
                                    <label for="idPackingList2">ID Packing List:</label>
                                    <input type="text" class="form-control" id="idPackingList2"
                                        placeholder="Masukkan ID Packing List">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include_once('layouts/footer.php'); ?>