@extends('layouts.user.main')

@section('title', 'Stocktakes')

@section('styles')

@endsection

@section('contents')
    <div class="content">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row">
                    <div class="col-sm-2">
                        <h1 class="m-0 mt-4">Reference # : {{ $id }}</h1>
                        <input type="hidden" id="stocktakes_ref" value="{{ $id }}">
                    </div>
                    <div class="col-sm-1">
                        <div class="form-group">
                            <label>Area:</label>
                            <select class="select2 select2-hidden-accessible" id="selectArea" style="width: 100%;"
                                tabindex="-1" aria-hidden="true">
                                @foreach ($area as $detail)
                                    <option value="{{ $detail->area }}">{{ $detail->area }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Report:</label>
                            <select class="select2 select2-hidden-accessible" id="selectReport" style="width: 100%;"
                                tabindex="-1" aria-hidden="true">
                                <option value="prooflist">Prooflist</option>
                                <option value="rack_discrepancy">Rack Discrepancy</option>
                                <option value="unscanned_racks">Unscanned Racks</option>
                                <option value="duplicate_racks">Duplicated Racks</option>
                                <option value="invalid_sku">Invalid SKU</option>
                                <option value="sku_by_racks">SKU Summary By Rack</option>
                                <option value="sku_by_area">SKU Summary By Area/Brand</option>
                                <option value="top_summary">Top Summary</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-1" style="display:none" id="rackNumSelectContainer">
                        <label for="rackNumSelect">Rack:</label>
                        <select id="rackNumSelect" class="select2" style="width: 100%;">
                        </select>
                    </div>
                    <div class="col-sm-1 mt-2">
                        <button id="submitButton" class="btn btn-primary mt-4"><ion-icon name="log-in-outline"></ion-icon>
                            Submit</button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-10">
                        <input type="text" class="form-control w-100 mt-4 p-4" id="searchRecord"
                            placeholder="Search Filter, ex. Rack Num, SAP Article, Batch, Brand, Description">
                    </div>
                    <div class="col-md-2 mt-1">
                        <button id="downloadCsv" style="float:right;display:none"
                            class="btn btn-block btn-success mt-4"><ion-icon name="cloud-download-outline"></ion-icon>
                            Download CSV</button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                Prooflist
                            </div>
                            <div class="card-body">
                                <table id="datatable" class="table table-striped table-bordered text-sm table-sm"
                                    style="width:100%">
                                    <thead>
                                        <tr id="datatable-header">
                                            <!-- Headers will be injected here dynamically -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be populated here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                Prooflist
                            </div>
                            <div class="card-body">
                           
                            </div>
                        </div>
                    </div>
                </div>




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

@endsection

@section('scripts')
    <script src="{{ asset_js('user/stocktakes-view.js') }}"></script>
@endsection