@extends('layouts.user.main')

@section('title', 'Login Account')

@section('styles')
    <style>
        .sticky-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 1000;
        }
    </style>
@endsection

@section('contents')
    @if ($recent->isNotEmpty())
        @php
            $reference = $recent->first()->stocktakes_ref;
            $area = $recent->first()->area;
            $rackNumber = $recent->first()->rack_num;
        @endphp
    @else
        @php
            $reference = session('stocktakes_ref');
            $area = session('area');
            $rackNumber = session('rack_num');
        @endphp
    @endif

    <div class="bg-white border p-3">
        <h5 class="font-weight-bold">Reference: #{{ str_pad($reference, 7, '0', STR_PAD_LEFT) }}</h5>
        <span class="d-block" style="margin-top: -5px">Area: {{ $area }} </span>
        <span class="d-block">Rack: {{ $rackNumber }}</span>
    </div>

    <input type="text" id="key" value="{{ $key }}" hidden>

    <div class="container-fluid container-def p-3 mt-3">
        <form id="form">
            @csrf
            <input type="text" class="form-control w-100 p-4 bg-white" id="searchRecord" name="sap_batch"
                placeholder="Enter Batch Number ..." autofocus required>
            <span class="text-sm text-muted" id="recentScanned"></span>
        </form>

        <x-table-th :th="['id', 'SAP Article', 'Qty']" />

        <div class="p-5"></div>

        <div class="sticky-bottom bg-white p-3">
            <button class="btn btn-light border d-block w-100" id="handleUploadFile">
                <b>Transmit Data</b><br>
                <small>Stocktake</small>
            </button>
        </div>
    </div>
@endsection

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