@extends('layouts.user.main')

@section('title', 'Racks')

@section('styles')
<style>
    #stocktake_ref{
        width: 63%;
        box-sizing: border-box;
        transition: border-color .1s, box-shadow .1s;
        border: 1px solid hsl(0, 0%, 85%);
        border-radius: .1875em;
        background: rgba(0, 0, 0, 0);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(0, 0, 0, 0);
        color: inherit;
        font-size: 1.125em;
    }
    #stocktake_ref{
        border: 1px solid #b4dbed;
        outline: none;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5);
    }
    #stock_zone{
        width: 70%;
        box-sizing: border-box;
        transition: border-color .1s, box-shadow .1s;
        border: 1px solid hsl(0, 0%, 85%);
        border-radius: .1875em;
        background: rgba(0, 0, 0, 0);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(0, 0, 0, 0);
        color: inherit;
        font-size: 1.125em;
    }
    #stock_zone{
        border: 1px solid #b4dbed;
        outline: none;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5);
    }
    #swal2-html-container {
        padding: 20px 0px 0px 0px !important;
    }
</style>
@endsection

@section('contents')
    <div class="container-fluid container-def p-3 mt-3">
        <div class="alert alert-light border shadow-sm alert-dismissible fade show" role="alert">
            <strong id="alert-message">Welcome, {{ Auth::user()->username }}!</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <!-- Hidden input to store stocktake ID -->
        <input type="hidden" id="stocktake-id" value="{{ $id }}">
    </div>

@endsection

@section('scripts')
    @if ($id == 0)
        <script src="{{ asset_js('/user/verifier.js') }}"></script>
    @else
        <script src="{{ asset_js('/user/racks.js') }}"></script>
    @endif
@endsection