@extends('layouts.user.main')

@section('title', 'Stocktakes')

@section('styles')
    {{-- Link to external stylesheet --}}
    <link rel="stylesheet" href="{{ asset('app/css/user/stocktake-reports.css') }}">
@endsection

@section('contents')
    <!-- Main Container -->
    <div class="main-container">
        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="sidebar-title">Reports</div>
            <nav class="nav flex-column">
                <a href="#" class="nav-links active" data-report="overview">
                    <ion-icon name="bar-chart-outline"></ion-icon>
                    Overview
                </a>
                <a href="#" class="nav-links" data-report="top-summary">
                    <ion-icon name="trophy-outline"></ion-icon>
                    Top Summary
                </a>
                <a href="#" class="nav-links" data-report="sku-summary">
                    <ion-icon name="cube-outline"></ion-icon>
                    SKU Summary
                </a>
                <a href="#" class="nav-links" data-report="sku-summary-per-rack">
                    <ion-icon name="grid-outline"></ion-icon>
                    SKU Summary Per Rack
                </a>
                <a href="#" class="nav-links" data-report="prooflist">
                    <ion-icon name="list-outline"></ion-icon>
                    Prooflist
                </a>
                <a href="#" class="nav-links" data-report="invalid-sku">
                    <ion-icon name="alert-circle-outline"></ion-icon>
                    Invalid SKU
                    @if(isset($invalidSkuCount) && $invalidSkuCount > 0)
                        <span class="badge-count">{{ $invalidSkuCount }}</span>
                    @endif
                </a>
                <a href="#" class="nav-links" data-report="rack-discrepancy">
                    <ion-icon name="warning-outline"></ion-icon>
                    Rack Discrepancy
                </a>
                <a href="#" class="nav-links" data-report="duplicated-racks">
                    <ion-icon name="copy-outline"></ion-icon>
                    Duplicated Racks
                </a>
                <a href="#" class="nav-links" data-report="verifier">
                    <ion-icon name="checkmark-done-outline"></ion-icon>
                    Verifier
                </a>
            </nav>
            
            <div class="sidebar-title mt-4">Actions</div>
            <nav class="nav flex-column">
                <a href="#" class="nav-links" data-report="rack-registry">
                    <ion-icon name="file-tray-stacked-outline"></ion-icon>
                    Rack Registry
                </a>
                <a href="#" class="nav-links" data-report="rack-checker">
                    <ion-icon name="checkbox-outline"></ion-icon>
                    Rack Checker
                </a>
                <a href="#" class="nav-links" data-report="upload">
                    <ion-icon name="cloud-upload-outline"></ion-icon>
                    Upload CSV
                </a>
            </nav>
        </aside>

        <!-- Content Area -->
        <main class="content-area">

            {{-- Overview Report --}}
            <div id="overview" class="report-content active">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="bar-chart-outline"></ion-icon>
                        Overview
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-4">
                        <h6 class="mb-3">Scanner Activity Per Area</h6>
                        <canvas id="stackedBarChart1" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h6 class="mb-3">Item Distribution</h6>
                        <canvas id="stackedBarChart2" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h6 class="mb-3">Transmission Activity / Status</h6>
                        <canvas id="stackedBarChart3" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>

            {{-- Top Summary Report --}}
            <div id="top-summary" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="trophy-outline"></ion-icon>
                        Top Summary
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" 
                                id="topSummaryBtn" 
                                data-view="top-summary" 
                                data-area="#areaTopSummary" 
                                data-extra="#withIgnore">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="topSummaryCSVBtn"
                                data-view="top-summary" 
                                data-area="#areaTopSummary" 
                                data-extra="#withIgnore">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaTopSummary">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                            <option value="all">All Areas</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">Status</label>
                        <select class="custom-select" id="withIgnore">
                            <option value="0">All Racks</option>
                            <option value="1">Ignore Invalid</option>
                        </select>
                    </div>
                </div>

                {{-- PDF Status Alert for Top Summary --}}
                <div id="pdfStatusAlert-top-summary" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="topSummaryTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Rack Number</th>
                                <th>Batch</th>
                                <th>Brand</th>
                                <th>Total Qty</th>
                                <th>Personnel</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- SKU Summary Report --}}
            <div id="sku-summary" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="cube-outline"></ion-icon>
                        SKU Summary
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="sku-summary" data-area="#areaSKUSummary" id="skuSummaryBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="skuSummaryCSVBtn" data-view="sku-summary" data-area="#areaSKUSummary">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaSKUSummary">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                            <option value="all">All Areas</option>
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-sku-summary" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="skuSummaryTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Store</th>
                                <th>Area</th>
                                <th>Brand</th>
                                <th>Item Code</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- SKU by Rack Report --}}
            <div id="sku-summary-per-rack" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="grid-outline"></ion-icon>
                        SKU Summary by Rack
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="sku-summary-per-rack" data-area="#areaSKUSummaryByRack" data-rack="#rackSKUSummaryByRack" id="skuSummaryByRackBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="skuSummaryByRackCSVBtn" data-view="sku-summary-per-rack" data-area="#areaSKUSummaryByRack" data-rack="#rackSKUSummaryByRack">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaSKUSummaryByRack">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">Rack</label>
                        <select class="custom-select" id="rackSKUSummaryByRack">
                            <option value="0">All Racks</option>
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-sku-summary-per-rack" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="skuSummaryByRackTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Store</th>
                                <th>Area</th>
                                <th>Brand</th>
                                <th>Rack</th>
                                <th>Batch</th>
                                <th>Item Code</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Prooflist Report --}}
            <div id="prooflist" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="list-outline"></ion-icon>
                        Prooflist
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="prooflist" data-area="#areaProoflist" data-rack="#rackProoflist" id="prooflistBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="prooflistCSVBtn" data-view="prooflist" data-area="#areaProoflist" data-rack="#rackProoflist">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaProoflist">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">Rack</label>
                        <select class="custom-select" id="rackProoflist">
                            <option value="0">All Racks</option>
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-prooflist" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="prooflistTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Seq #</th>
                                <th>Brand</th>
                                <th>Item Code</th>
                                <th>Description</th>
                                <th>Qty</th>
                                <th>Scanner</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Invalid SKU Report --}}
            <div id="invalid-sku" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="alert-circle-outline"></ion-icon>
                        List of Invalid SKU
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="invalid-sku" id="invalidSKUBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="invalidSKUCSVBtn" data-view="invalid-sku">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                {{-- <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Search Item Code</label>
                        <input type="text" class="custom-select" id="invalidSkuFilter" placeholder="Enter item code...">
                    </div>
                </div> --}}

                <div id="pdfStatusAlert-invalid-sku" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="invalidSkuTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Rack</th>
                                <th>Batch</th>
                                <th>Area</th>
                                <th>Item Code</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Rack Discrepancy Report --}}
            <div id="rack-discrepancy" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="warning-outline"></ion-icon>
                        Rack Discrepancy
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-upload-csv" data-toggle="modal" data-target="#fileDiscrepancyModal">
                            <ion-icon name="document-outline"></ion-icon>
                            Upload CSV
                        </button>
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="rack-discrepancy" data-area="#areaRackDiscrepancy" data-rack="#rackRackDiscrepancy" id="rackDiscrepancyBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="rackDiscrepancyCSVBtn" data-view="rack-discrepancy" data-area="#areaRackDiscrepancy" data-rack="#rackRackDiscrepancy">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaRackDiscrepancy">
                            <option value="all">All Areas</option>
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">Rack</label>
                        <select class="custom-select" id="rackRackDiscrepancy">
                            <option value="0">All Racks</option>
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-rack-discrepancy" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="rackDiscrepancyTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th>Rack</th>
                                <th>Batch</th>
                                <th>Actual Count</th>
                                <th>Precount</th>
                                <th>Variance</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Duplicated Racks Report --}}
            <div id="duplicated-racks" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="copy-outline"></ion-icon>
                        Duplicated Racks
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="duplicated-racks" data-area="#areaDuplicatedRacks" id="duplicatedRacksBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="duplicatedRacksCSVBtn" data-view="duplicated-racks" data-area="#areaDuplicatedRacks">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaDuplicatedRacks">
                            <option value="all">All Areas</option>
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-duplicated-racks" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="duplicatedRackTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th>Rack</th>
                                <th>Total</th>
                                <th>Stocktake Ref</th>
                                <th>Occurrence</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Verifier Report --}}
            <div id="verifier" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="checkmark-done-outline"></ion-icon>
                        Verifier
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" data-view="verifier" data-area="#areaVerifier" id="verifierBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                        <button class="btn-action btn-csv" id="verifierCSVBtn" data-view="verifier" data-area="#areaVerifier">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Export CSV
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaVerifier">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div id="pdfStatusAlert-verifier" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating ...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>

                <div class="table-container">
                    <table class="data-table table table-sm table-hover" id="verifierTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th>Rack</th>
                                <th>Actual Count</th>
                                <th>Verifier Count</th>
                                <th>Variance</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Rack Checker Report --}}
            <div id="rack-checker" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="checkbox-outline"></ion-icon>
                        Rack Checker
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-pdf pdfReportBtn" 
                                data-view="rack-checker" 
                                data-area="#areaRackChecker" 
                                data-rack="#rackRackChecker" 
                                id="rackCheckerBtn">
                            <ion-icon name="document-outline"></ion-icon>
                            Export PDF
                        </button>
                    </div>
                </div>

                <div class="filters-container">
                    <div class="filter-group">
                        <label class="filter-label">Area</label>
                        <select class="custom-select" id="areaRackChecker">
                            @foreach ($areas as $area)
                                <option value="{{ $area }}">{{ $area }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">Total Racks</label>
                        <input type="number" class="custom-select" id="rackRackChecker" placeholder="Enter number of racks" min="1">
                    </div>
                </div>

                <div id="pdfStatusAlert-rack-checker" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div class="pdfSpinner" style="display: inline-block;">
                            <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                        </div>
                        <div style="flex: 1;">
                            <strong class="pdfStatusTitle">Generating PDF...</strong>
                            <p class="pdfStatusText" style="margin: 0;"></p>
                        </div>
                    </div>
                    <div class="pdfActions" style="margin-top: 10px;"></div>
                </div>
            </div>

            {{-- Upload CSV Section --}}
            <div id="upload" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="cloud-upload-outline"></ion-icon>
                        Upload CSV File
                    </div>
                </div>

                {{-- Success/Error Messages --}}
                @if(session('success'))
                    <div class="alert-custom alert-success alert-dismissible fade show" role="alert">
                        <ion-icon name="checkmark-circle-outline" class="alert-icon"></ion-icon>
                        <div>
                            <strong>Success!</strong> {{ session('success') }}
                        </div>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert-custom alert-danger alert-dismissible fade show" role="alert">
                        <ion-icon name="alert-circle-outline" class="alert-icon"></ion-icon>
                        <div>
                            <strong>Error!</strong> {{ session('error') }}
                        </div>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert-custom alert-danger alert-dismissible fade show" role="alert">
                        <ion-icon name="alert-circle-outline" class="alert-icon"></ion-icon>
                        <div>
                            <strong>Validation Errors:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                {{-- Upload Details (shown after successful upload) --}}
                @if(session('upload_details'))
                    @php 
                        $details = session('upload_details');
                        $details['context'] = 'upload';
                        $details['view'] = 'prooflist';
                    @endphp
                    
                    {{-- Hidden element to pass data to JavaScript --}}
                    {{-- ✅ Add id="uploadSessionDetails" so JS can find it --}}
                    <div id="uploadSessionDetails" data-upload-details='@json($details)' style="display: none;"></div>
                    
                    <div class="card border-success mb-3" style="border-left: 4px solid #28a745;">
                        <div class="card-header bg-success text-white">
                            <ion-icon name="information-circle-outline"></ion-icon> Last Upload Summary
                        </div>
                        <div class="card-body">
                            {{-- PDF Generation Status Alert --}}
                            <div id="pdfStatusAlert-prooflist-upload" class="pdfStatusAlert alert" style="display: none; margin-top: 10px;">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <div class="pdfSpinner" style="display: inline-block;">
                                        <ion-icon name="refresh-outline" class="spin" style="width: 35px;height: 35px;"></ion-icon>
                                    </div>
                                    <div style="flex: 1;">
                                        <strong class="pdfStatusTitle">Generating PDF...</strong>
                                        <p class="pdfStatusText" style="margin: 0;"></p>
                                    </div>
                                </div>
                                <div class="pdfActions" style="margin-top: 10px;"></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>Stocktake Ref:</strong> #{{ $details['stocktakes_ref'] }}<br>
                                    <strong>Scanner Code:</strong> {{ $details['scanner_code'] }}
                                </div>
                                <div class="col-md-6">
                                    <strong>Area:</strong> {{ $details['area'] }}<br>
                                    <strong>Rack Number:</strong> {{ $details['rack_num'] }}
                                </div>
                            </div>
                            
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="text-center">
                                        <h3 class="text-primary">{{ $details['total'] }}</h3>
                                        <small class="text-muted">Total Records</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-center">
                                        <h3 class="text-success">{{ $details['valid'] }}</h3>
                                        <small class="text-muted">Valid Articles</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-center">
                                        <h3 class="text-danger">{{ $details['invalid'] }}</h3>
                                        <small class="text-muted">Invalid Articles</small>
                                    </div>
                                </div>
                            </div>

                            @if(!empty($details['invalid_articles']))
                                <hr>
                                <div class="mt-3">
                                    <strong class="text-danger">Invalid Articles:</strong>
                                    <div class="mt-2">
                                        @foreach($details['invalid_articles'] as $article)
                                            <span class="badge badge-danger mr-1">{{ $article }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Upload Progress Bar (Optional - if you want to show upload progress) --}}
                <div id="uploadProgressContainer" class="alert alert-info" style="display: none;">
                    <div class="d-flex align-items-center mb-2">
                        <div class="mr-2" style="display: inline-block;">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </div>
                        <div style="flex: 1;">
                            <strong id="uploadProgressText">Uploading...</strong>
                        </div>
                    </div>
                    <div class="progress mt-1" style="height: 15px;">
                        <div id="uploadProgressFill" class="progress-bar progress-bar-animated" 
                            role="progressbar" style="width: 0%">
                            <span id="uploadProgressPercentage" style="font-size: 0.75rem;">0%</span>
                        </div>
                    </div>
                </div>

                {{-- Upload Form --}}
                <div class="upload-section">
                    <ion-icon name="cloud-upload-outline" class="upload-icon"></ion-icon>
                    <div class="upload-title">Upload Stocktake Data</div>
                    <div class="upload-subtitle">Select your CSV file to upload stocktake data</div>
                    
                    <form action="{{ route('user.stocktake-upload.process', ['stocktake_ref' => request('stocktake_ref')]) }}" 
                        method="POST" 
                        enctype="multipart/form-data"
                        id="uploadForm">
                        @csrf

                        {{-- CSV File --}}
                        <div class="mb-3">
                            <div class="file-input-wrapper">
                                <input type="file" 
                                    class="file-input @error('csv_file') is-invalid @enderror" 
                                    id="csv_file" 
                                    name="csv_file" 
                                    accept=".csv,.txt"
                                    required>
                                <label for="csv_file" class="btn-upload" id="fileLabel">
                                    <ion-icon name="folder-open-outline"></ion-icon>
                                    Choose File
                                </label>
                            </div>

                            {{-- File Preview --}}
                            <div id="filePreview" class="mt-3" style="display: none;">
                                <div class="alert-info" style="padding: 1rem 1.25rem;border-radius: 8px;margin-bottom: 1.5rem;display: flex;align-items: center;gap: 1rem;">
                                    <ion-icon name="document-text-outline" class="alert-icon"></ion-icon>
                                    <div>
                                        <strong>Selected File:</strong> <span id="fileName"></span><br>
                                        <small>Size: <span id="fileSize"></span></small>
                                    </div>
                                </div>
                            </div>

                            @error('csv_file')
                                <div class="alert-custom alert-danger mt-2">
                                    <ion-icon name="alert-circle-outline" class="alert-icon"></ion-icon>
                                    <small>{{ $message }}</small>
                                </div>
                            @enderror
                        </div>

                        <div class="mt-3 mb-3">
                            <small class="text-muted">
                                Max file size: 10MB. Accepted formats: .csv, .txt<br>
                                The CSV file must contain: <code>stocktakes_ref, scanner_code, area, rack_num, stock_zone, sap_article, qty</code>
                            </small>
                        </div>

                        {{-- Submit Button --}}
                        <div class="text-center mt-4">
                            <button type="submit" class="btn-upload" id="submitBtn">
                                <ion-icon name="cloud-upload-outline"></ion-icon>
                                Upload and Process
                            </button>
                        </div>
                    </form>

                </div>
            </div>

            {{-- Add this script in your @section('scripts') to set the PDF check URL --}}
            <script>
                // Set the PDF check URL for the upload manager
                window.pdfCheckUrl = '{{ route("user.check-pdf-status") }}';
            </script>

            {{-- Rack Registry Section --}}
            <div id="rack-registry" class="report-content">
                <div class="action-bar">
                    <div class="report-title">
                        <ion-icon name="file-tray-stacked-outline"></ion-icon>
                        Rack Registry
                    </div>
                    <div class="action-buttons">
                        <button class="btn-action btn-txt" id="generateTXTBtn">
                            <ion-icon name="document-text-outline"></ion-icon>
                            Generate File
                        </button>
                        <button class="btn-action btn-refresh" onclick="rackRegisterFn.init()">
                            <ion-icon name="refresh-outline"></ion-icon>
                        </button>
                    </div>
                </div>

                <div class="table-container table-responsive">
                    <table class="data-table table table-sm table-hover text-nowrap" id="rackRegisterTable" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th><input class="form-control form-control-sm" type="text" id="rackSearch" placeholder="Rack" style="max-width: 100px;"></th>
                                <th>Batch</th>
                                <th>Total Qty</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

             <div id="report-loader" style="display:none; text-align:center; padding:20px;">
                <div class="spinner"></div>
                <br>
                <p>Loading...</p>
            </div>

        </main>
    </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">Area</th>
                                <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', '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">
                    <input type="hidden" id="inputStocktakesRef2" name="stocktakes_ref">

                </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')
    {{-- Chart.js must load first --}}
    <script src="{{ asset_adminlte('plugins/chart.js/Chart.min.js') }}"></script>
    
    {{-- Chart initialization --}}
    <script src="{{ asset_js('user/stocktake-report-chart.js') }}"></script>
    
    {{-- Report functions must load before navigation --}}
    <script src="{{ asset_js('user/stocktake-report.js') }}"></script>
    
    {{-- Upload Manager - NEW FILE --}}
    <script src="{{ asset_js('user/stocktake-upload.js') }}"></script>
    
    {{-- Navigation loads after upload manager --}}
    <script src="{{ asset_js('user/stocktake-navigation.js') }}"></script>

    {{-- Other report action scripts --}}
    <script src="{{ asset_js('user/stocktake-report-actions.js') }}"></script>
    <script src="{{ asset_js('user/stocktake-report-rack-discrepancy.js') }}"></script>

    {{-- Set the PDF check URL --}}
    <script>
        window.pdfCheckUrl = '{{ route("user.check-pdf-status") }}';
        window.csvCheckUrl = '{{ route("user.check-csv-status") }}';
    </script>
@endsection