@extends('User.layout')

@section('header')
@include('components.header-inner', [
'title' => 'Create Rack',
'backUrl' => route('welcome'),

'rightButton' =>
'
<a href="' .
            route('rack_history') .
            '" class="link position-relative">
    <button class="btn btn-sm btn-success" style="border-radius: 6px; padding:4px 10px; font-size:12px;">
        View History
    </button>
</a>
',
])
@endsection

@section('content')
<style>
    .add-rack-container {
        margin: 0 auto;
        padding: 12px;
    }

    .add-rack-container label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    .input-box {
        background: #fff;
        border: 1px solid #54bd4e;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
        font-size: 13px;
        margin-bottom: 14px;
    }

    /* Hover state */
    .input-box:hover {
        background: #fff;
        border: 1px solid #54bd4e;
    }

    .input-box:focus {
        outline: none;
        border: 1px solid #54bd4e;
        box-shadow: 0 0 0 2px rgba(84, 189, 78, 0.15);
    }

    /* Sizes row */
    .sizes-wrapper {
        border: 1px solid #54bd4e;
        border-radius: 8px;
        display: flex;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .sizes-wrapper input {
        border: none;
        border-right: 1px solid #54bd4e;
        text-align: center;
        padding: 10px;
        font-size: 13px;
        width: 100%;
    }

    .sizes-wrapper input:hover {
        background: #fff;
        border: 1px solid #54bd4e;
    }

    .sizes-wrapper input:focus {
        outline: none;
        border: 1px solid #54bd4e;
        box-shadow: 0 0 0 2px rgba(84, 189, 78, 0.15);
    }

    .sizes-wrapper input:last-child {
        border-right: none;
    }

    .sizes-labels {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #777;
        margin-bottom: 15px;
    }

    /* Submit button */
    .submit-btn {
        width: 100%;
        padding: 12px;
        border-radius: 8px;
        border: none;
        color: white;
        background: linear-gradient(180deg, #33b02c90 0%, #33b02c 100%);
        font-size: 14px;
        margin-top: 25px;
    }

    .sizes-wrapper,
    .sizes-labels,
    .sizes-errors {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .sizes-wrapper input {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .sizes-labels span {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #777;
    }

    .sizes-errors span {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: red;
        min-height: 14px;
    }
</style>

<div class="add-rack-container mt-3">

    <form id="rackForm" action="{{route('user_create_rack_form')}}" method="POST">
        @csrf

        <!-- Wood Name -->
        <label>Wood Name</label>
        <input type="text"
            name="wood_name"
            class="input-box"
            value="{{ old('wood_name') }}"
            placeholder="Enter Wood Name">
        @error('wood_name') <small class="text-danger">{{ $message }}</small> @enderror


        <!-- Rack Number -->
        <label>Rack Number</label>
        <input type="text"
            name="rack_number"
            class="input-box"
            placeholder="Enter Number"
            value="{{ old('rack_number') }}">
        @error('rack_number') <small class="text-danger">{{ $message }}</small> @enderror


        <!-- Sizes -->
        <label>Sizes</label>
        <div class="sizes-wrapper">
            <input type="text" name="length" placeholder="0.0" value="{{ old('length') }}">
            <input type="text" name="width" placeholder="0.0" value="{{ old('width') }}">
            <input type="text" name="thickness" placeholder="0.0" value="{{ old('thickness') }}">
        </div>

        <div class="sizes-labels">
            <span>Length</span>
            <span>Width</span>
            <span>Thickness</span>
        </div>
        <div class="sizes-errors">
            <span> @error('length') <small class="text-danger">{{ $message }}</small> @enderror</span>
            <span> @error('width') <small class="text-danger">{{ $message }}</small> @enderror</span>
            <span>@error('thickness') <small class="text-danger">{{ $message }}</small> @enderror</span>
        </div>

        <!-- Submit -->
        <button type="submit" id="submit_rack" class="submit-btn">
            Submit
        </button>
    </form>

</div>

<script>
    document.getElementById('rackForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_rack');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>

@endsection