@extends('layouts.user.main')

@section('title', 'Stocktakes')

@section('styles')
    <style>
        body {
            font-family: 'Poppins', sans-serif, monospace;
            background: #f7f8ff;
            color: #2F2F2F !important;
        }

        .dataTables_paginate .paginate_button.active a {
            background-color: #354A5F !important;
            color: white !important;
            border: 1px solid #354A5F;
            cursor: default;
        }

        .dataTables_paginate .paginate_button a {
            color: #2F2F2F !important;
        }

        .dataTables_paginate .paginate_button {
            font-size: 0.875rem;
            border-radius: 0.2rem;
            color: #2F2F2F !important;
        }

        .carousel-indicators li {
            background-color: #969696;
            /* Base color for all indicators */
            width: 12px;
            height: 12px;
            border-radius: 50%;
            width: 12px;
            height: 12px;
            border-radius: 50%
        }

        .carousel-indicators .active {
            background-color: #354A5F;
            /* Color for active indicator */
        }
    </style>
@endsection

@section('contents')
    <div class="content">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="table-container" style="height: 85vh; overflow:auto; width:100%; position:relative;">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="false" data-bs-interval="false">
                        <ol class="carousel-indicators" style="padding-bottom: 20px; position:fixed">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="mb-3">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon> Overview
                                        </div>
                                    </div>
                                    <div class="overflow-hidden">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Scanner Activity Per Area</small>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="stackedBarChart1"
                                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Item Per Area Distribution</small>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="stackedBarChart2"
                                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Transmission Activity / Status</small>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="stackedBarChart3"
                                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-8">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Rack Registry</small>
                                                    </div>
                                                    <div class="card-body" style="height: 530px">
                                                        <div class="row">
                                                            <div class="col-md-3" style="display:none">
                                                                <select class="custom-select custom-select-sm"
                                                                    id="rackRegistryZone" style="min-width: 150px">
                                                                    @foreach ($stock_zones as $index => $zone)
                                                                        <option value="{{ $zone_ids[$index] }}">
                                                                            {{ $zone }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            {{-- <div class="col-md-2">
                                                                <select class="custom-select custom-select-sm"
                                                                    id="rackRegistryCode" style="min-width: 150px">
                                                                </select>
                                                            </div> --}}
                                                            <div class="col-md-4">
                                                                <div class="form-inline mb-1">
                                                                    <div class="form-group">
                                                                        {{-- <button type="button"
                                                                            class="btn btn-primary btn-sm mr-1"
                                                                            id="easBatchTXTBtn">EAS Batch</button>
                                                                        <button type="button"
                                                                            class="btn btn-primary btn-sm"
                                                                            id="easNonBatchTXTBtn">EAS Non Batch</button> --}}
                                                                        <button type="button"
                                                                            class="btn btn-primary btn-sm mr-1"
                                                                            id="generateXTBtn">Generate File</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <table class="table table-sm table-hover" id="rackRegisterTable"
                                                            style="width: 100%;">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">Area</th>
                                                                    <th scope="col"><input type="text" id="rackSearch" placeholder="Rack" style="max-width: 100px;"></th>
                                                                    <th scope="col">Batch</th>
                                                                    <th scope="col">Total Qty</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody></tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Rack Checker</small>
                                                    </div>
                                                    <div class="card-body" style="height: 500px">
                                                        
                                                            <div class="form-group">
                                                                <small class="d-flex mb-2" for="">Area</small>
                                                                <select class="custom-select" id="areaRackChecker"
                                                                    style="min-width: 150px">
                                                                    @foreach ($areas as $area)
                                                                        <option value="{{ $area }}">
                                                                            {{ $area }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <small class="d-flex mb-2" for="">Total
                                                                    Racks</small>
                                                                <input type="text" class="form-control"
                                                                    placeholder="3" id="rackRackChecker">
                                                            </div>
                                                            <button type="button"
                                                                class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                                id="rackCheckerBtn">
                                                                <span class="mx-2">PDF</span>
                                                            </button>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item ">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon> Top
                                            Summary
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive text-center">
                                            <div class="form-inline">
                                                <div class="form-group">
                                                    <select
                                                        class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="areaTopSummary" style="min-width: 150px">
                                                        @foreach ($areas as $area)
                                                            <option value="{{ $area }}">{{ $area }}
                                                            </option>
                                                        @endforeach
                                                        <option value="all">All Area</option>
                                                    </select>

                                                    <select class="custom-select custom-select-sm" id="withIgnore"
                                                        style="min-width: 150px">
                                                        <option value="0">Select All Racks</option>
                                                        <option value="1">Ignore Invalid</option>
                                                    </select>

                                                    <button type="button"
                                                        class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="topSummaryBtn">
                                                        <span class="mx-2">PDF</span>
                                                    </button>

                                                    <button type="button" class="btn btn-sm btn-light bg-success border"
                                                        id="topSummaryCSVBtn">
                                                        <span class="mx-2">CSV</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <table class="table table-sm table-hover" id="topSummaryTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Rack Number</th>
                                                        <th scope="col">Batch</th>
                                                        <th scope="col">Brand</th>
                                                        <th scope="col">Total Qty</th>
                                                        <th scope="col">Personnel</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon> SKU
                                            Summary
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive text-center">
                                            <div class="form-inline">
                                                <div class="form-group">
                                                    <select
                                                        class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="areaSKUSummary" style="min-width: 150px">
                                                        @foreach ($areas as $area)
                                                            <option value="{{ $area }}">{{ $area }}
                                                            </option>
                                                        @endforeach
                                                        <option value="all">All Area</option>
                                                    </select>

                                                    <button type="button"
                                                        class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="skuSummaryBtn">
                                                        <span class="mx-2">PDF</span>
                                                    </button>

                                                    <button type="button"
                                                        class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="skuSummaryCSVBtn">
                                                        <span class="mx-2">CSV</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <table class="table table-sm table-hover" id="skuSummaryTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Store</th>
                                                        <th scope="col">Area</th>
                                                        <th scope="col">Brand</th>
                                                        <th scope="col">Item Code</th>
                                                        <th scope="col">Qty</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon> SKU
                                            Summary By Rack
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive text-center">
                                            <div class="form-inline">
                                                <div class="form-group">
                                                    <select
                                                        class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="areaSKUSummaryByRack" style="min-width: 150px">
                                                        @foreach ($areas as $area)
                                                            <option value="{{ $area }}">{{ $area }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    <select
                                                        class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="rackSKUSummaryByRack" style="min-width: 150px">
                                                    </select>

                                                    <button type="button"
                                                        class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="skuSummaryByRackBtn">
                                                        <span class="mx-2">PDF</span>
                                                    </button>

                                                    <button type="button"
                                                        class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                        id="skuSummaryByRackCSVBtn">
                                                        <span class="mx-2">CSV</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <table class="table table-sm table-hover" id="skuSummaryByRackTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Store</th>
                                                        <th scope="col">Area</th>
                                                        <th scope="col">Brand</th>
                                                        <th scope="col">Rack</th>
                                                        <th scope="col">Batch</th>
                                                        <th scope="col">Item Code</th>
                                                        <th scope="col">Qty</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon>
                                            Prooflist
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="areaProoflist" style="min-width: 150px">
                                                    @foreach ($areas as $area)
                                                        <option value="{{ $area }}">{{ $area }}</option>
                                                    @endforeach
                                                </select>
                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="rackProoflist" style="min-width: 150px">
                                                </select>
                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="prooflistBtn">
                                                    <span class="mx-2">PDF</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="prooflistCSVBtn">
                                                    <span class="mx-2">CSV</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive text-center">
                                            <table class="table table-sm table-hover" id="prooflistTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Seq #</th>
                                                        <th scope="col">Brand</th>
                                                        <th scope="col">Item Code</th>
                                                        <th scope="col">Description</th>
                                                        <th scope="col">Qty</th>
                                                        <th scope="col">Scanner</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon>
                                            List of Invalid SKU
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm"
                                                    id="invalidSkuFilter" placeholder="Search Item Code">
                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="invalidSKUBtn">
                                                    <span class="mx-2">PDF</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="invalidSKUCSVBtn">
                                                    <span class="mx-2">CSV</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive text-center">
                                            <table class="table table-sm table-hover" id="invalidSkuTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Rack</th>
                                                        <th scope="col">Batch</th>
                                                        <th scope="col">Area</th>
                                                        <th scope="col">Item Code</th>
                                                        <th scope="col">Qty</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon>
                                            Rack Discrepancy
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="areaRackDiscrepancy" style="min-width: 150px">
                                                    @foreach ($areas as $area)
                                                        <option value="{{ $area }}">{{ $area }}</option>
                                                    @endforeach
                                                </select>

                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="rackRackDiscrepancy" style="min-width: 150px">
                                                </select>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-light border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1">
                                                    <span class="mx-2" data-toggle="modal"
                                                        data-target="#fileDiscrepancyModal">Upload CSV</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="rackDiscrepancyBtn">
                                                    <span class="mx-2">PDF</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="rackDiscrepancyCSVBtn">
                                                    <span class="mx-2">CSV</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive text-center">
                                            <table class="table table-sm table-hover" id="rackDiscrepancyTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Rack</th>
                                                        <th scope="col">Batch</th>
                                                        <th scope="col">Actual Count</th>
                                                        <th scope="col">Precount</th>
                                                        <th scope="col">Variance</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon>
                                            Duplicated Racks
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-inline mb-1">
                                            <div class="form-group">
                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="areaDuplicatedRacks" style="min-width: 150px">
                                                    @foreach ($areas as $area)
                                                        <option value="{{ $area }}">{{ $area }}</option>
                                                    @endforeach
                                                </select>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="duplicatedRacksBtn">
                                                    <span class="mx-2">PDF</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="duplicatedRacksCSVBtn">
                                                    <span class="mx-2">CSV</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive text-center">
                                            <table class="table table-sm table-hover table-hover" id="duplicatedRackTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Area</th>
                                                        <th scope="col">Rack</th>
                                                        <th scope="col">Total</th>
                                                        <th scope="col">Stocktake Ref</th>
                                                        <th scope="col">Occurence</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="card" style="height: 80vh; overflow:auto; position:relative;">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center font-weight-bold">
                                            <ion-icon class="mr-2" name="file-tray-stacked-outline"></ion-icon>
                                            Verifier
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <select
                                                    class="custom-select custom-select-sm mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="areaVerifier" style="min-width: 150px">
                                                    @foreach ($areas as $area)
                                                        <option value="{{ $area }}">{{ $area }}</option>
                                                    @endforeach
                                                </select>
                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-danger border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="verifierBtn">
                                                    <span class="mx-2">PDF</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-light bg-success border  mx-0 mx-xl-1 mx-lg-1 mx-md-1 my-1 my-xl-1 my-lg-1 my-md-1"
                                                    id="verifierCSVBtn">
                                                    <span class="mx-2">CSV</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive text-center">
                                            <table class="table table-sm table-hover" id="verifierTable"
                                                style="width: 100%">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Area</th>
                                                        <th scope="col">Rack</th>
                                                        <th scope="col">Actual Count</th>
                                                        <th scope="col">Verifier Count</th>
                                                        <th scope="col">Variance</th>
                                                        <th scope="col">Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

    <div class="modal fade" id="fileDiscrepancyModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload File</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="fileDiscrepancyForm">
                        <div class="custom-file mb-3">
                            <input type="file" class="custom-file-input" id="rackDiscrepancyFile" required
                                accept=".csv" name="file">
                            <label class="custom-file-label" for="">Choose CSV File</label>
                        </div>
                    </form>

                    <table class="table table-sm table-hover table-hover" id="rackDiscrepancyPreviewTable"
                        style="width: 100%">
                        <thead>
                            <tr>
                                <th scope="col">Rack</th>
                                <th scope="col">Total</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" form="fileDiscrepancyForm">Process File</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createRecordModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                {{-- <div class="modal-header d-flex align-items-center pl-4 pr-4">
                    <small>Rack Registry</small>
                </div> --}}
                <div class="modal-body p-4">
                    <h6 class="mb-4 font-weight-bold">Update / Delete Stocktakes Entry</h6>
                    <form id="form"class="pl-2 pr-2">
                        @csrf
                        <input type="text" class="form-control" name="id" hidden>

                        <div class="form-row mb-3">
                            <small class="mb-1 d-block font-weight-bold" for="">SAP Article</small>
                            <div class="input-group">
                                <input type="text" class="form-control" id="sap_article" name="sap_article">
                                <div class="invalid-feedback" id="sap_articleFeedback"></div>
                                <span class="input-group-append">
                                    <button type="submit" class="btn btn-primary" form="form">Add</button>
                                </span>
                            </div>
                            <input type="hidden" id="inputKey" name="key">
                            <input type="hidden" id="inputStocktakesRef" name="stocktakes_ref">
                            <input type="hidden" id="inputArea" name="area">
                            <input type="hidden" id="inputRackNum" name="rack_num">
                            <input type="hidden" id="inputStockZone" name="stock_zone">
                            <input type="hidden" id="inputScannerCode" name="scanner_code">
                            <input type="hidden" id="inputButton" name="button">
                        </div>
                    </form>

                    <x-table-th-sm :th="['Seq','SAP Article', 'Qty', 'Actual Qty', 'Variance', 'Action']" />

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createEditModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body p-4">
                    <h6 class="mb-4 font-weight-bold">Update Area and Rack</h6>

                    <!-- Inputs directly without a form -->
                    @csrf
                    <input type="hidden" name="id" id="inputId">

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="inputArea2" class="font-weight-bold">Area</label>
                            <input type="text" class="form-control" id="inputArea2" name="area">
                        </div>

                        <div class="form-group col-md-6">
                            <label for="inputRackNum2" class="font-weight-bold">Rack #</label>
                            <input type="text" class="form-control" id="inputRackNum2" name="rack_num">
                        </div>
                    </div>

                    <!-- Hidden fields -->
                    <input type="hidden" id="inputKey2" name="key">

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light border" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="handleUpdateAreaRack">Update</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var scannerCodesByZone = @json($scanner_codes_by_zone);
    </script>
    <script src="{{ asset_adminlte('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset_js('user/stocktake-report-chart.js') }}"></script>
    <script src="{{ asset_js('user/stocktake-report-actions.js') }}"></script>
    <script src="{{ asset_js('user/stocktake-report.js') }}"></script>
    <script src="{{ asset_js('user/stocktake-report-rack-discrepancy.js') }}"></script>
@endsection