@extends('User.layout')

@section('header')
@include('components.header-inner', [
'title' => 'Edit Stock',
'backUrl' => route('user_stock_history'),
])
@endsection

@section('content')
<style>
    .stock-container {
        padding: 12px;
        margin: auto;
        width: 100%;
        margin-top: 30px;
    }

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

    .form-control-custom {
        width: 100%;
        padding: 11px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        margin-bottom: 14px;
        background: #fff;
    }

    .form-control-custom:focus {
        outline: none;
        border-color: #54bd4e;
        box-shadow: 0 0 0 2px rgba(84, 189, 78, .15);
    }

    select.form-control-custom {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }

    .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .submit-btn {
        width: 100%;
        padding: 13px;
        border-radius: 10px;
        border: none;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(180deg, #6edc64, #38b12f);
        margin-top: 20px;
    }

    .submit-btn:active {
        transform: scale(0.98);
    }
</style>

<div class="stock-container">

    <form id="UpdateForm" method="POST" action="{{route('user_edit_stock_form')}}">
        @csrf
        <input type="hidden" name="id" value="{{ $stock->id }}">

        <!-- Select Rock -->
        <label>Select Rock</label>
        <input type="text" class="form-control-custom" name="rack_size"
            id="select_rack"
            class="form-control"
            value="{{ old('rack_size', $stock->rack_size) }}" readonly disabled>
        @error('rack_size') <div class="text-danger">{{ $message }}</div> @enderror
        </input>

        <!-- Select Wood -->
        <label>Select Wood</label>
        <input type="text" class=" form-control-custom" name="wood_name"
            id="wood_name"
            class="form-control"
            value="{{ old('wood_name', $stock->wood_name) }}" readonly disabled>
        @error('wood_name') <div class="text-danger">{{ $message }}</div> @enderror
        </input>

        <!-- Quantity -->
        <label>Quantity</label>
        <input type="number" class="form-control-custom" name="quantity"
            id="quantity"
            value="{{ old('quantity', $stock->quantity) }}"
            placeholder="Enter Quantity">
        @error('quantity') <div class="text-danger">{{ $message }}</div> @enderror

        <!-- Rate -->
        <label>Rate</label>
        <input type="number"
            class="form-control-custom"
            name="rate" id="rate"
            value="{{ old('rate', $stock->rate) }}"
            placeholder="Enter Rate">
        @error('rate') <div class="text-danger">{{ $message }}</div> @enderror

        <!-- Rack No & CFT -->
        <div class="two-col">
            <div>
                <label>Rack Number</label>
                <input type="text"
                    class="form-control-custom"
                    name="rack_number"
                    id="rack_number"
                    value="{{ old('rack_number', $stock->rack_number) }}"
                    readonly disabled>
                @error('rack_number') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
            <div>
                <label>CFT</label>
                <input type="text"
                    class="form-control-custom"
                    name="cft"
                    id="cft"
                    value="{{ old('cft', $stock->cft) }}"
                    readonly>
                @error('cft') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
        </div>

        <!-- Perukam & Sq Ft -->
        <div class="two-col">
            <div>
                <label>Perukam</label>
                <input type="text"
                    class="form-control-custom"
                    name="perukam"
                    id="perukam"
                    value="{{ old('perukam', $stock->perukam) }}"
                    readonly>
                @error('perukam') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
            <div>
                <label>Square Feet</label>
                <input type="text"
                    class="form-control-custom"
                    name="square_feet"
                    id="square_feet"
                    value="{{ old('square_feet', $stock->square_feet) }}" readonly>
                @error('square_feet') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
        </div>

        <!-- Submit -->
        <button class="submit-btn" type="submit" id="submit_btn">
            Update
        </button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Disable button on submit
    document.getElementById('submit_btn')?.addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('UpdateForm').submit();
    });
</script>

<script>
    $(document).ready(function() {

        function recalculate() {
            let inputQty = parseFloat($('#quantity').val());
            if (isNaN(inputQty) || inputQty <= 0) {
                $('#perukam').val('');
                $('#square_feet').val('');
                $('#cft').val('');
                return;
            }

            let oldQty    = parseFloat({{ $stock->quantity }});
            let length    = parseFloat({{ $stock->length }});
            let width     = parseFloat({{ $stock->width }});
            let thickness = parseFloat({{ $stock->thickness }});


            let totalQty = oldQty + inputQty;

            let perukam    = (length * width * thickness * totalQty) / 4;
            let squareFeet = perukam / 3;
            let cft        = perukam / 36;

            $('#perukam').val(perukam.toFixed(2));
            $('#square_feet').val(squareFeet.toFixed(2));
            $('#cft').val(cft.toFixed(2));
        }

        $('#quantity').on('input', recalculate);

        recalculate();
    });
</script>
@endsection