@extends('layouts.master')

@section('title', 'Formula')
@section('css')
    <style>
        .clickable-row {
            cursor: pointer;
        }

        .clickable-row:hover,
        .clickable-row:focus {
            background-color: #f1f1f1;
        }
        .list-group {
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
@endsection

@section('content')
    <x-page-title title="Master" pagetitle="Formula" />
    <hr>
    <div class="card">
        <div class="card-body">
            <h6 class="mb-2 text-uppercase">Formula</h6>

            <button type="button" class="mb-3 btn btn-primary" data-bs-toggle="modal" onclick="cancelEdit()"
                data-bs-target="#modalInput" @if(!in_array('create', $privileges)) disabled @endif>
                Tambah Baru
            </button>

            <div class="table-responsive">
                <table id="example" class="table table-hover table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Formula</th>
                            <th>Hasil</th>
                            <th>Bahan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($formulas as $formula)
                            <tr class='clickable-row' data-bs-toggle="modal" data-bs-target="#modalInput" onclick="editFormula(
                                            '{{ $formula->id }}',
                                            '{{ $formula->formula_name }}',
                                            '{{ $formula->item_result }}',
                                            '{{ $formula->item_result_unit }}',
                                            '{{ addslashes(json_encode(json_decode($formula->item_materials, true))) }}'
                                        )">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $formula->formula_name }}</td>
                                <td>{{ $formula->results->item_name }} ({{$formula->item_result}})</td>
                                <td>
                                    <ul>
                                        @foreach ($formula->processed_materials as $material)
                                            <li>
                                                {{ $material['item_name'] }} ({{ $material['item_code'] }}) [{{ $material['quantity'] }}]
                                                <br>
                                                <small class="text-muted">
                                                    Harga: Rp {{ number_format($material['price'], 2) }} |
                                                    Tgl Beli Terakhir: {{ $material['document_date'] !== 'N/A' ? date('d M Y', strtotime($material['document_date'])) : 'N/A' }}
                                                    @if(isset($material['source']) && $material['source'] !== 'N/A')
                                                        <span class="badge bg-secondary text-uppercase">
                                                            {{ $material['source'] }}
                                                        </span>
                                                    @endif
                                                </small>
                                            </li>
                                        @endforeach
                                    </ul>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#modalInput"
                                        onclick="editFormula(
                                            '{{ $formula->id }}',
                                            '{{ $formula->formula_name }}',
                                            '{{ $formula->item_result }}',
                                            '{{ $formula->item_result_unit }}',
                                            '{{ addslashes(json_encode(json_decode($formula->item_materials, true))) }}'
                                        )"><i class="material-icons-outlined">edit</i></button>

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

    <div class="modal fade" id="modalInput" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="legendForm">Formula Insert</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form name="Formula-form" id="Formula-form" method="post" action="{{ route('formula.store') }}">
                        @csrf
                        <div id="method-spoofing"></div>
                        <label for="formula_name" class="form-label">Nama Formula</label>
                        <div class="mb-3 input-group">
                            <input type="text" id="formula_name" name="formula_name" class="form-control"
                                placeholder="Formula Name" required>
                        </div>

                        <label for="item_result" class="form-label">Barang Hasil</label>
                        <div class="form-group mb-3">
                            <input type="hidden" class="form-control" name="item_result" id="item_result">
                            <input type="text" class="form-control" id="item_result_name" placeholder="{{__('Search Item')}}" autocomplete="off" required>
                            <div id="item_result_search-results" class="list-group" style="display:none; position:relative; z-index:1000; width:100%;">
                                </div>
                        </div>
                        <div class="mb-3">
                            <label for="item_result_unit" class="form-label">Unit</label>
                            <select name="item_result_unit" id="item_result_unit" class="form-control">
                                @foreach($itemUnits as $itemUnit)
                                    <option value="{{ $itemUnit->unit }}">{{ $itemUnit->unit }}</option>
                                @endforeach
                            </select>
                        </div>

                        <label for="item_materials" class="form-label">Bahan</label>
                        <div id="materials-container">
                            </div>
                        <button type="button" class="btn btn-secondary mt-2" onclick="addMaterialField()">Add Material</button>

                        <button id="btn-action" name="btn-action" type="submit"
                            class="btn btn-primary btn-md mt-3">Insert</button>
                        <button type="button" class="btn btn-danger mt-3" id="cancelButton" style="display:none;"
                            data-bs-dismiss="modal" onclick="cancelEdit()">Cancel</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="cancelEdit()">Close</button>
                </div>
            </div>
        </div>
    </div>

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

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

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $(document).ready(function() {
        var table = $('#example').DataTable({
            lengthChange: false,
            buttons: ['copy', 'excel', 'pdf', 'print']
        });
        table.buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');
    });

    function confirmDelete(event, id) {
        event.stopPropagation();
        event.preventDefault();
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0c6efd',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    let privileges = @json($privileges);
    const items = @json($items);
    const itemUnits = @json($itemUnits);


    function filterUnits(selectElement, item, selectedUnit = null) {
        let units = [];
        if (item && item.item_details) {
            item.item_details.forEach(detail => {
                if (detail.department_code === item.department_code) {
                    units.push(detail.unit_conversion);
                }
            });
        }

        // Clear existing options
        selectElement.innerHTML = '';

        // Add options based on the units available for the item
        itemUnits.forEach(unit => {
            if (units.includes(unit.unit)) {
                const option = document.createElement('option');
                option.value = unit.unit;
                option.text = unit.unit;
                selectElement.appendChild(option);
            }
        });

        // If no units found, add all units
        if (units.length === 0) {
            itemUnits.forEach(unit => {
                const option = document.createElement('option');
                option.value = unit.unit;
                option.text = unit.unit;
                selectElement.appendChild(option);
            });
        }

        if (selectedUnit) {
            selectElement.value = selectedUnit;
        }
    }


    function selectItem(item, nameInput, codeInput, resultsContainer, unitSelectId) {
        nameInput.value = `${item.item_name} (${item.item_code})`;
        codeInput.value = item.item_code;
        resultsContainer.style.display = 'none';

        if (unitSelectId) {
            const unitSelect = document.getElementById(unitSelectId);
            filterUnits(unitSelect, item);
        }
    }

    function setupItemSearch(nameInputId, codeInputId, resultsContainerId, unitSelectId = null) {
        let activeIndex = -1;
        const searchInput = document.getElementById(nameInputId);
        const codeInput = document.getElementById(codeInputId);
        const resultsContainer = document.getElementById(resultsContainerId);

        searchInput.addEventListener('input', function() {
            activeIndex = -1;
            let query = this.value.toLowerCase();
            resultsContainer.innerHTML = '';
            resultsContainer.style.display = 'none';

            if (query.length > 0) {
                let filteredItems = items.filter(item =>
                    item.item_code.toLowerCase().includes(query) ||
                    item.item_name.toLowerCase().includes(query)
                );

                if (filteredItems.length > 0) {
                    resultsContainer.style.display = 'block';
                    filteredItems.forEach((item, index) => {
                        let listItem = document.createElement('a');
                        listItem.className = 'list-group-item list-group-item-action';
                        listItem.href = '#';
                        listItem.innerHTML = `
                            <small><strong>${item.item_name}</strong> (${item.item_code})</small>
                        `;

                        listItem.addEventListener('click', function(e) {
                            e.preventDefault();
                            selectItem(item, searchInput, codeInput, resultsContainer, unitSelectId);
                        });
                        resultsContainer.appendChild(listItem);
                    });
                }
            }
        });

        searchInput.addEventListener('keydown', function(e) {
            const items = resultsContainer.querySelectorAll('.list-group-item');
            if (items.length === 0) return;

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (activeIndex < items.length - 1) {
                    activeIndex++;
                    updateActiveItem(items, activeIndex);
                }
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (activeIndex > 0) {
                    activeIndex--;
                    updateActiveItem(items, activeIndex);
                }
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (activeIndex >= 0 && items[activeIndex]) {
                    items[activeIndex].click();
                }
            }
        });

        function updateActiveItem(items, index) {
            items.forEach(item => item.classList.remove('active'));
            if (index >= 0 && items[index]) {
                items[index].classList.add('active');
            }
        }
    }

    function addMaterialField(item_code = '', quantity = '', item_name = '', unit = '') {
        const container = document.getElementById('materials-container');
        const materialIndex = container.children.length;
        const materialDiv = document.createElement('div');
        materialDiv.classList.add('input-group', 'mb-2');

        materialDiv.innerHTML = `
            <div class="form-group flex-grow-1">
                <input type="hidden" class="form-control" name="item_materials[${materialIndex}][item_code]" id="material_${materialIndex}_item_code" value="${item_code}">
                <input type="text" class="form-control" id="material_${materialIndex}_item_name" placeholder="{{__('Search Item')}}" autocomplete="off" value="${item_name}">
                <div id="material_${materialIndex}_search-results" class="list-group" style="display:none; position:relative; z-index:1000; width:100%;">
                    </div>
            </div>
            <input type="number" step="0.01" class="form-control ms-2" name="item_materials[${materialIndex}][quantity]" placeholder="Quantity" required value="${quantity}">
            <select id="material_${materialIndex}_unit" name="item_materials[${materialIndex}][unit]" class="form-control unit-dropdown">
            </select>
            <button type="button" class="btn btn-danger ms-2" onclick="this.parentNode.remove()"><i class="material-icons-outlined remove-row">delete</i></button>
        `;

        container.appendChild(materialDiv);

        setupItemSearch(`material_${materialIndex}_item_name`, `material_${materialIndex}_item_code`, `material_${materialIndex}_search-results`, `material_${materialIndex}_unit`);

        if (item_code) {
            const materialItem = items.find(item => item.item_code == item_code);
            const unitSelect = document.getElementById(`material_${materialIndex}_unit`);
            filterUnits(unitSelect, materialItem, unit);
        } else {
            const unitSelect = document.getElementById(`material_${materialIndex}_unit`);
            filterUnits(unitSelect, null);
        }
    }

    function cancelEdit() {
        document.getElementById('formula_name').value = '';
        document.getElementById('item_result').value = '';
        document.getElementById('item_result_name').value = '';
        document.getElementById('item_result_unit').value = '';
        document.getElementById('materials-container').innerHTML = '';
        document.getElementById('legendForm').innerText = 'Formula Insert';
        document.getElementById('cancelButton').style.display = 'none';
        document.getElementById('btn-action').innerText = 'Insert';
        document.getElementById('Formula-form').action = `{{ route('formula.store') }}`;
        document.getElementById('method-spoofing').innerHTML = '';
        if (!privileges.includes('create')) {
            document.getElementById('btn-action').disabled = true;
        } else {
            document.getElementById('btn-action').disabled = false;
        }
    }

    function editFormula(id, formula_name, item_result_code, item_result_unit, item_materials_json) {
        document.getElementById('formula_name').value = formula_name;

        // Populate result item
        const resultItem = items.find(item => item.item_code === item_result_code);
        if (resultItem) {
            document.getElementById('item_result').value = resultItem.item_code;
            document.getElementById('item_result_name').value = `${resultItem.item_name} (${resultItem.item_code})`;
            const resultUnitSelect = document.getElementById('item_result_unit');
            filterUnits(resultUnitSelect, resultItem, item_result_unit);
        } else {
            document.getElementById('item_result').value = '';
            document.getElementById('item_result_name').value = '';
            document.getElementById('item_result_unit').value = '';
        }

        document.getElementById('materials-container').innerHTML = '';
        const materials = JSON.parse(item_materials_json);
        if (materials && Array.isArray(materials)) {
            materials.forEach(material => {
                const materialItem = items.find(item => item.item_code == material.item_code);
                if (materialItem) {
                    addMaterialField(material.item_code, material.quantity, `${materialItem.item_name} (${materialItem.item_code})`, material.unit);
                } else {
                    addMaterialField(material.item_code, material.quantity, `Item not found (${material.item_code})`, material.unit);
                }
            });
        }

        document.getElementById('legendForm').innerText = 'Formula Update';
        document.getElementById('cancelButton').style.display = 'inline-block';
        document.getElementById('btn-action').innerText = 'Edit';

        if (!privileges.includes('update')) {
            document.getElementById('btn-action').disabled = true;
        } else {
            document.getElementById('btn-action').disabled = false;
        }

        document.getElementById('Formula-form').action = `{{ route('formula.update', ['formula' => ':id']) }}`.replace(':id', id);
        document.getElementById('method-spoofing').innerHTML = '@method("PUT")';
    }

    setupItemSearch('item_result_name', 'item_result', 'item_result_search-results', 'item_result_unit');
</script>
@endsection