@extends('Admin.layout')
@section('content')
<h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2" onclick="window.history.back()" ;
        style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M15 6l-6 6l6 6" />
        </svg>
    </button>Create Stock</h5>
<div class="card p-5">

    <div class="container">
        <h5>Stock</h5>
        <form id="stockForm" method="POST" action="{{route('create_stock_form')}}">
            @csrf

            <div class="row">
                <div class="col-lg-6 mb-2">
                    <label class="form-label" for="Select_rack">Select Rack</label>
                    <select name="rack_size"
                        id="select_rack"
                        class="form-select">
                        <option value="">-- Select Rack --</option>
                        @foreach ($racks as $rack)
                        <option value="{{ $rack->size }}" {{ old('rack_size') == $rack->size ? 'selected' : '' }}>{{ $rack->size }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label" for="Select_wood">Select Wood</label>
                    <select name="select_wood"
                        id="select_wood"
                        class="form-select">
                        <option value="">-- Select wood --</option>
                        @if(old('select_wood'))
                        <option value="{{ old('select_wood') }}" selected>{{ old('select_wood') }}</option>
                        @endif
                    </select>

                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="Quantity">Quantity</label>
                    <input type="number"
                        class="form-control"
                        name="quantity"
                        id="quantity"
                        value="{{ old('quantity') }}"
                        placeholder="Enter Quantity">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="Rate">Rate</label>
                    <input type="text"
                        class="form-control"
                        name="rate" id="rate"
                        value="{{ old('rate') }}"
                        placeholder="Enter Rate">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="Rack Number">Rack Number</label>
                    <input type="text"
                        class="form-control"
                        name="rack_number"
                        id="rack_number"  value="{{ old('rack_number') }}" readonly>
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="CFT">CFT</label>
                    <input type="text"
                        class="form-control"
                        name="cft"
                        id="cft" value="{{ old('cft') }}" readonly>
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="Perukam">Perukam</label>
                    <input type="text"
                        class="form-control"
                        name="perukam"
                        id="perukam"  value="{{ old('perukam') }}" readonly>
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label" for="square_feet">Square Feet</label>
                    <input type="text"
                        class="form-control" name="square_feet" id="square_feet" value="{{ old('square_feet') }}" readonly>
                </div>
            </div>
            <input type="hidden" id="total" name="total">
            <input type="hidden" id="average" name="average">
            <input type="hidden" id="total_price" name="total_price">


            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#stock_submit">Submit</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>
</div>

<!-- submit -->
<div class="modal fade" id="stock_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</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('stockForm').submit();
    });

    // Rack selection -> fetch wood types
    $('#select_rack').change(function() {
        let rackSize = $(this).val();

        if (rackSize) {
            $.ajax({
                url: '{{ route("get_wood_by_rack") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    rack_size: rackSize
                },
                success: function(response) {
                    let woodSelect = $('#select_wood');
                    woodSelect.empty().append('<option value="">-- Select Wood --</option>');
                    $('#rack_number').val('');

                    if (response.success && response.type === 'wood_list') {
                        response.wood_types.forEach(function(wood) {
                            woodSelect.append('<option value="' + wood + '">' + wood + '</option>');
                        });
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('Error fetching wood types.');
                }
            });
        }
    });

    $('#select_wood').change(function() {
        let rackSize = $('#select_rack').val();
        let woodName = $(this).val();

        if (rackSize && woodName) {
            $.ajax({
                url: '{{ route("get_wood_by_rack") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    rack_size: rackSize,
                    wood_name: woodName
                },
                success: function(response) {
                    if (response.success && response.type === 'rack_details') {
                        $('#rack_number').val(response.rack_numbers.join(', '));
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('Error fetching rack number.');
                }
            });
        }
    });

    $('#quantity, #rate').on('input', function() {
        let rackNumber = $('#rack_number').val();
        let quantity = $('#quantity').val();
        let rate = $('#rate').val();

        if (rackNumber && quantity) {
            $.ajax({
                url: '{{ route("calculate_rack_values") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    rack_number: rackNumber,
                    quantity: quantity,
                    rate: rate
                },
                success: function(response) {
                    if (response.success) {
                        $('#perukam').val(response.perukam);
                        $('#square_feet').val(response.square_feet);
                        $('#cft').val(response.cft);

                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('Error calculating values.');
                }
            });
        } else {
            $('#perukam, #square_feet, #cft').val('');
        }
    });
</script>

@endsection