@extends('layouts.master')

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

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

            <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_number">{{__('Document Number')}}</label>
                                <input type="text" name="document_number" class="form-control" readonly required value="{{ old('document_number', $bom->document_number) }}">
                            </div>
                            <br>
                            <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', $bom->document_date) }}" 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 }})" @if($bom->formula_id == $formula->id) selected @endif>{{ $formula->formula_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="qty">Quantity Produced</label>
                                <input type="number" name="qty" class="form-control text-end" required min="1" value="{{ old('qty', $bom->qty) }}">
                            </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="{{ number_format($bom->add_expense)}}">
                            </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', $bom->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('update', $privileges)) disabled @endif>Edit BOM</button>
            </div>
        </form>

        <form id="delete-form" action="{{ route('transaction.bom.destroy', $bom->id) }}" method="POST" style="display:inline;">
            @csrf
            @method('DELETE')
            <button type="button" class="btn btn-sm btn-danger mb-3" onclick="confirmDelete(event, '{{ $bom->id }}')"
                @if(!in_array('delete', $privileges)) disabled @endif
            ><i class="material-icons-outlined">delete</i></button>
        </form>
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Success!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ route('transaction.bom.index') }}";
                }
            });
        </script>
    @endif

    @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);

    document.addEventListener('DOMContentLoaded', function() {
        const formulaSelect = document.getElementById('formula_id');
        const selectedOption = formulaSelect.options[formulaSelect.selectedIndex];
        if (selectedOption.value) {
            updateMaterialsDisplay(selectedOption);
        }

        formulaSelect.addEventListener('change', function() {
            updateMaterialsDisplay(this.options[this.selectedIndex]);
        });
    });

    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);
    }

    function updateMaterialsDisplay(selectedOption) {
        const materialsData = selectedOption.getAttribute('data-materials');
        const resultItemDisplay = document.getElementById('result-item-display');
        const materialsDisplay = document.getElementById('materials-display');

        if (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>';
        }
    }

    function confirmDelete(event, id) {
        event.preventDefault();
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to delete this record?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            confirmButtonColor: '#0c6efd',
            cancelButtonColor: '#d33',
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form').submit();
            }
        });
    }
</script>
@endsection