@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 */
        }
        /* PDF Status Alert Styles */
        #pdfStatusAlert.alert-info {
            background-color: #d1ecf1;
            border-color: #bee5eb;
            color: #0c5460;
        }

        #pdfStatusAlert.alert-success {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }

        #pdfStatusAlert.alert-warning {
            background-color: #fff3cd;
            border-color: #ffeaa7;
            color: #856404;
        }

        #pdfStatusAlert.alert-danger {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }

        /* Smooth transitions */
        #pdfStatusAlert {
            transition: all 0.3s ease-in-out;
        }

        /* Download button animation */
        @keyframes slideInRight {
            from {
                transform: translateX(20px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .download-btn-animate {
            animation: slideInRight 0.5s ease-out;
        }

        /* Pulse animation for generating status */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        .pulse-text {
            animation: pulse 2s ease-in-out infinite;
        }
    </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-2">
                                                <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-2">
                                                <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-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <small>Rack Checker</small>
                                                    </div>
                                                    <div class="card-body" style="min-height: 290px; height: 290px; max-height: 290px;">
                                                        
                                                            <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 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">
                                                
                                                {{-- Upload Form --}}
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <div class="d-flex align-items-center font-weight-bold">
                                                                    <small> Upload CSV File</small>
                                                                </div>
                                                            </div>
                                                            <div class="card-body" style="height: 530px;overflow-y:scroll;">

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

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

                                                                @if($errors->any())
                                                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                        <strong><ion-icon name="alert-circle-outline"></ion-icon> Validation Errors:</strong>
                                                                        <ul class="mb-0">
                                                                            @foreach($errors->all() as $error)
                                                                                <li>{{ $error }}</li>
                                                                            @endforeach
                                                                        </ul>
                                                                        <button type="button" class="close" data-dismiss="modal" 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'); @endphp
                                                                    <div class="card border-success mb-3">
                                                                        <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" class="alert" style="display: none;">
                                                                                <div class="d-flex align-items-center justify-content-between">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <div id="pdfSpinner" class="spinner-border spinner-border-sm text-primary mr-2" role="status" style="display: none;">
                                                                                            <span class="sr-only">Loading...</span>
                                                                                        </div>
                                                                                        <ion-icon id="pdfIcon" name="document-outline" class="mr-2" style="font-size: 20px;"></ion-icon>
                                                                                        <div>
                                                                                            <strong id="pdfStatusTitle">Prooflist Report Status</strong>
                                                                                            <div>
                                                                                                <small id="pdfStatusText" class="text-muted"></small>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div id="pdfActions">
                                                                                        <!-- Download button will appear here when ready -->
                                                                                    </div>
                                                                                </div>
                                                                                <div id="pdfProgressBar" class="progress mt-2" style="height: 4px; display: none;">
                                                                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                                                                                </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'] }}
                                                                                    {{-- <strong>Stock Zone:</strong> {{ $details['stock_zone'] }}<br>
                                                                                    <strong>Batch Key:</strong> <code>{{ $details['key'] }}</code> --}}
                                                                                </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 bg-danger me-1">{{ $article }}</span>
                                                                                        @endforeach
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                @endif

                                                                <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-2">
                                                                        <label for="csv_file" class="form-label fs-5 fw-bold text-secondary">
                                                                            CSV File <span class="text-danger">*</span>
                                                                        </label>
                                                                        <div class="input-group d-flex align-items-center">
                                                                            <!-- Custom File Button -->
                                                                            <input type="file" 
                                                                                class="form-control @error('csv_file') is-invalid @enderror" 
                                                                                id="csv_file" 
                                                                                name="csv_file" 
                                                                                accept=".csv,.txt"
                                                                                required
                                                                                style="display: none;">
                                                                            
                                                                            <button type="button" class="btn btn-warning btn-sm w-auto me-2" onclick="document.getElementById('csv_file').click()">
                                                                                Choose File
                                                                            </button>
                                                                            
                                                                            {{-- File Preview --}}
                                                                            <div id="filePreview" class="d-flex align-items-center ml-2" style="display: none !important;">
                                                                                <div class=" d-flex align-items-center">
                                                                                    <ion-icon name="document-text-outline" class="me-2"></ion-icon>
                                                                                    <strong>Selected File: </strong> 
                                                                                    <span id="fileName" class="ms-2"></span> (<span id="fileSize"></span>)
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <br>
                                                                        <small class="text-muted fs-6 mt-3">
                                                                            Max file size: 10MB. Accepted formats: .csv, .txt. The CSV file must contain: <code>stocktakes_ref, scanner_code, area, rack_num, stock_zone, sap_article, qty</code>
                                                                        </small>
                                                                        @error('csv_file')
                                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                                        @enderror
                                                                    </div>

                                                                    {{-- Submit Button --}}
                                                                    <div class="d-grid gap-2 mt-4" style="justify-self: center;">
                                                                        <button type="submit" class="btn btn-primary btn-sm align-item-center" id="submitBtn">
                                                                            <ion-icon name="cloud-upload-outline"></ion-icon> Upload and Process
                                                                        </button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Instructions --}}
                                                    {{-- <div class="col-lg-5">
                                                        <div class="card">
                                                            <div class="card-header bg-info text-white">
                                                                <ion-icon name="information-circle-outline"></ion-icon> Instructions
                                                            </div>
                                                            <div class="card-body">
                                                                <h6 class="font-weight-bold">CSV File Format:</h6>
                                                                <p class="small">Your CSV file must contain these columns:</p>
                                                                <ul class="small">
                                                                    <li><code>stocktakes_ref</code> - Stocktake reference number</li>
                                                                    <li><code>scanner_code</code> - Scanner device code</li>
                                                                    <li><code>area</code> - Warehouse area</li>
                                                                    <li><code>rack_num</code> - Rack number</li>
                                                                    <li><code>stock_zone</code> - Stock zone</li>
                                                                    <li><code>sap_article</code> - Product barcode/article number</li>
                                                                    <li><code>qty</code> - Quantity scanned</li>
                                                                </ul>

                                                                <h6 class="font-weight-bold mt-3">Example:</h6>
                                                                <pre class="bg-light p-2 rounded small" style="font-size: 12px;">stocktakes_ref,scanner_code,area,rack_num,stock_zone,sap_article,qty
94,I01,A,5,1,2000014889014 2023FW,50
94,I01,A,5,1,2000014889015 2024SS,30
94,I01,A,5,1,2000014889016,20
                                                                </pre>

                                                                <div class="alert alert-warning mt-3 small">
                                                                    <strong><ion-icon name="warning-outline"></ion-icon> Note:</strong>
                                                                    All fields must be present in every row. Invalid articles will be marked but still saved for review.
                                                                </div>

                                                                <div class="alert alert-info mt-2 small">
                                                                    <strong><ion-icon name="information-circle-outline"></ion-icon> Tip:</strong>
                                                                    All rows should have the same stocktakes_ref, scanner_code, area, rack_num, and stock_zone values.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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>

    <script>
        // File input change handler
        document.getElementById('csv_file').addEventListener('change', function(e) {
            updateFileName(); // This calls the function directly
        });

        // Update the file name and file size when a file is selected
        function updateFileName() {
            const fileInput = document.getElementById('csv_file');
            const file = fileInput.files[0];
            if (file) {
                document.getElementById('fileName').textContent = file.name;
                document.getElementById('fileSize').textContent = formatFileSize(file.size);
                document.getElementById('filePreview').style.display = 'block'; // Show file preview
            } else {
                document.getElementById('filePreview').style.display = 'none'; // Hide if no file selected
            }
        }

        // Format file size to a readable format
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
        }

        // Form submission handler
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
        });

        // Auto-hide success/error messages after 25 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert-dismissible');
            alerts.forEach(function(alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 25000);

        // ✅ PDF Generation Status Checker with Exponential Backoff
        @if(session('upload_details'))
            @php 
                $details = session('upload_details');
            @endphp
            
                console.log('PDF generation detected, checking if already ready...');
                console.log('Upload details:', @json($details));
                
                // Start PDF polling
                (function() {
                    const uploadDetails = @json($details);
                    let attempt = 0;
                    const maxAttempts = 40;
                    let isPolling = false;
                    
                    // Show initial status
                    document.getElementById('pdfStatusAlert').style.display = 'block';
                    document.getElementById('pdfStatusText').textContent = 'Checking PDF status...';
                    
                    function showPdfReady(url) {
                        document.getElementById('pdfStatusAlert').className = 'alert alert-success';
                        document.getElementById('pdfStatusTitle').textContent = 'Prooflist Report Ready!';
                        document.getElementById('pdfStatusText').textContent = 'Your report has been generated successfully.';
                        document.getElementById('pdfProgressBar').style.display = 'none';
                        document.getElementById('pdfSpinner').style.display = 'none';
                        
                        // Add download button
                        document.getElementById('pdfActions').innerHTML = `
                            <a href="${url}" target="_blank" class="btn btn-success btn-sm">
                                <ion-icon name="download-outline"></ion-icon> Download PDF
                            </a>
                        `;
                    }
                    
                    function showPdfFailed() {
                        document.getElementById('pdfStatusAlert').className = 'alert alert-danger';
                        document.getElementById('pdfStatusTitle').textContent = 'Prooflist Generation Failed';
                        document.getElementById('pdfStatusText').textContent = 'There was an error. Please try again.';
                        document.getElementById('pdfProgressBar').style.display = 'none';
                        document.getElementById('pdfSpinner').style.display = 'none';
                    }
                    
                    function showPdfTimeout() {
                        document.getElementById('pdfStatusAlert').className = 'alert alert-warning';
                        document.getElementById('pdfStatusTitle').textContent = 'Prooflist Report Taking Longer Than Expected';
                        document.getElementById('pdfStatusText').textContent = 'Please refresh the page and try uploading again.';
                        document.getElementById('pdfProgressBar').style.display = 'none';
                        document.getElementById('pdfSpinner').style.display = 'none';
                    }
                    
                    function checkPdfStatus() {
                        attempt++;
                        console.log('Checking PDF status, attempt:', attempt);
                        
                        if (attempt > maxAttempts) {
                            showPdfTimeout();
                            isPolling = false;
                            return;
                        }
                        
                        // Update status text
                        document.getElementById('pdfStatusText').textContent = `Checking status... (${attempt}/${maxAttempts})`;
                        
                        // Make request
                        fetch('{{ route("user.check-pdf-status") }}?view=prooflist&stk_ref=' + uploadDetails.stocktakes_ref + '&area=' + uploadDetails.area + '&rack=' + uploadDetails.rack_num + '&batch_key=' + uploadDetails.key)
                            .then(response => response.json())
                            .then(data => {
                                console.log('PDF Status Response:', data);
                                
                                if (data.status === 'ready') {
                                    // ✅ PDF is ready! Stop polling
                                    console.log('PDF is ready, stopping polling');
                                    isPolling = false;
                                    showPdfReady(data.url);
                                    
                                } else if (data.status === 'failed') {
                                    // ❌ Failed - Stop polling
                                    console.log('PDF generation failed, stopping polling');
                                    isPolling = false;
                                    showPdfFailed();
                                    
                                } else {
                                    // ⏳ Still generating, continue polling only if not stopped
                                    if (isPolling) {
                                        const delays = [3000, 5000, 8000, 10000];
                                        const delay = delays[Math.min(attempt - 1, delays.length - 1)] || 15000;
                                        setTimeout(checkPdfStatus, delay);
                                    }
                                }
                            })
                            .catch(error => {
                                console.error('Error checking PDF:', error);
                                // Retry on error only if still polling
                                if (isPolling && attempt <= maxAttempts) {
                                    setTimeout(checkPdfStatus, 5000);
                                }
                            });
                    }
                    
                    // ✅ INITIAL CHECK: See if PDF is already ready before starting polling
                    fetch('{{ route("user.check-pdf-status") }}?view=prooflist&stk_ref=' + uploadDetails.stocktakes_ref + '&area=' + uploadDetails.area + '&rack=' + uploadDetails.rack_num)
                        .then(response => response.json())
                        .then(data => {
                            console.log('Initial PDF check:', data);
                            
                            if (data.status === 'ready') {
                                // ✅ PDF is already ready! Don't start polling
                                console.log('PDF already exists in cache, no polling needed');
                                showPdfReady(data.url);
                                
                            } else if (data.status === 'failed') {
                                // ❌ Already failed
                                console.log('PDF generation previously failed');
                                showPdfFailed();
                                
                            } else {
                                // ⏳ Not ready yet, start polling
                                console.log('PDF not ready, starting polling...');
                                isPolling = true;
                                setTimeout(checkPdfStatus, 3000);
                            }
                        })
                        .catch(error => {
                            console.error('Error on initial check:', error);
                            // Start polling anyway if initial check fails
                            console.log('Initial check failed, starting polling...');
                            isPolling = true;
                            setTimeout(checkPdfStatus, 3000);
                        });
                        
                })();
        @else
            console.log('No upload_details in session');
        @endif
    </script>

@endsection