@extends('layouts.master')

@section('title', 'Input BOM')

@section('content')
<div class="row">
    <x-page-title title="{{__('BOM')}}" pagetitle="{{__('BOM')}} Input" />
    <hr>
    <div class="container content">
        <h2>{{__('BOM')}} Input</h2>
        <form id="bom-form" action="{{ route('transaction.bom.store') }}" method="POST">
            @csrf

            <div class="card mb-3">
                <div class="card-header">{{__('BOM')}} Information</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="document_date">Tanggal Dokumen</label>
                                <input type="date" name="document_date" class="form-control date-picker" required value="{{ old('document_date', date('Y-m-d')) }}" id="document_date">
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="formula_id">Formula</label>
                                <select name="formula_id" id="formula_id" class="form-control" required>
                                    <option value="">-- Pilih Formula --</option>
                                    @foreach ($formulas as $formula)
                                        <option value="{{ $formula->id }}" data-materials="{{ json_encode(json_decode($formula->item_materials)) }}" data-result-item="{{ $formula->results->item_name }} ({{ $formula->item_result }})">{{ $formula->formula_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="qty">Jumlah Produksi</label>
                                <input type="number" name="qty" class="form-control text-end" required min="1" value="1">
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="add_expense">Biaya Tambahan</label>
                                <input type="text" name="add_expense" class="form-control text-end" oninput="formatNumber(this)" required value="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="notes">Note</label>
                                    <textarea name="notes" class="form-control" rows="5">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">{{__('BOM Details')}}</div>
                <div class="card-body">
                    <h5 id="result-item-display"></h5>
                    <h6>Materials:</h6>
                    <div id="materials-display">
                        <p>Pilih formula untuk melihat material.</p>
                    </div>
                </div>
            </div>

            <div class="form-group submit-btn mb-3">
                <button type="submit" class="btn btn-success" @if(!in_array('create', $privileges)) disabled @endif>Submit BOM</button>
            </div>
        </form>
    </div>

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
</div>
@endsection

@section('scripts')
<script>
    var now = new Date(),
    maxDate = now.toISOString().substring(0,10);
    $('#document_date').prop('max', maxDate);

    const items = @json($items);

    function formatNumber(input) {
        // Get the cursor position
        const cursorPosition = input.selectionStart;
        input.value = input.value.replace(/[^0-9]/g, '');
        // Remove any existing thousand separators
        let value = input.value.replace(/,/g, '');

        // Format the number with thousand separators
        let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Set the new value
        input.value = formattedValue;

        // Adjust the cursor position
        const newCursorPosition = formattedValue.length - (value.length - cursorPosition);
        input.setSelectionRange(newCursorPosition, newCursorPosition);
    }

    document.getElementById('formula_id').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const materialsData = selectedOption.getAttribute('data-materials');
        const resultItemDisplay = document.getElementById('result-item-display');
        const materialsDisplay = document.getElementById('materials-display');

        if (materialsData) {
            console.log(materialsData);
            const materials = JSON.parse(materialsData);

            const resultItemName = selectedOption.getAttribute('data-result-item');

            resultItemDisplay.innerText = `Result: ${resultItemName}`;

            let materialHtml = '<ul>';
            materials.forEach(material => {
                const materialItem = items.find(item => item.item_code === material.item_code);
                const itemName = materialItem ? materialItem.item_name : 'Item Not Found';
                materialHtml += `<li>${itemName} (${material.item_code}) [${material.quantity}]</li>`;
            });
            materialHtml += '</ul>';
            materialsDisplay.innerHTML = materialHtml;
        } else {
            resultItemDisplay.innerText = '';
            materialsDisplay.innerHTML = '<p>Pilih formula untuk melihat material.</p>';
        }
    });
</script>
@endsection