@extends('layouts.master')

@section('title', 'Edit Penggunaan Bahan')

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

            <div class="card mb-3">
                <div class="card-header">{{__('Penggunaan Bahan')}} 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', $penggunaanBahan->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', $penggunaanBahan->document_date) }}" id="document_date">
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="acc_header">Akun Potongan</label>
                                <div class="form-group mb-3">
                                    <div class="input-group">
                                        <input type="text" id="search-acc" autocomplete="off" class="form-control" placeholder="Search by Account Number or Account Name" value="{{ $penggunaanBahan->acc_header ? $coas->firstWhere('account_number', $penggunaanBahan->acc_header)->account_number . ' - ' . $coas->firstWhere('account_number', $penggunaanBahan->acc_header)->account_name : '' }}">
                                        <button class="btn btn-outline-secondary" type="button" onclick="clearInput('search-acc')"><i class="material-icons-outlined">edit</i></button>
                                    </div>
                                    <div id="search-result-acc" class="list-group" style="display:none; position:relative; z-index:1000; width:100%; max-height:200px; overflow:scroll;">
                                        </div>
                                    <input type="hidden" name="acc_header" id="acc_header" value="{{ old('acc_header', $penggunaanBahan->acc_header) }}">
                                </div>
                            </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', $penggunaanBahan->notes ?? '') }}</textarea>
                            </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <input type="hidden" name="department_code" id="department_code" class="form-control" readonly value="{{ $departments->department_code }}" required>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <select hidden class="form-select" id="company_code" name="company_code" required>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->company_code }}" {{ old('company_code', $penggunaanBahan->company_code) == $company->company_code ? 'selected' : '' }}>
                                                {{ $company->company_name . ' (' . $company->company_code . ')' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">{{__('Penggunaan Bahan Details')}}</div>
                <div class="card-body">
                    <table class="table" id="details-table">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th style="max-width: 100px;">Qty</th>
                                <th>Unit</th>
                                <th>Notes</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($penggunaanBahan->details as $index => $detail)
                            <tr>
                                <td>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <input type="text" id="search-item-{{ $index }}" autocomplete="off" class="form-control" placeholder="Search by Item Code or Item Name" required value="{{ $detail->items->item_name}}" readonly>
                                            <button style="height:100%;" class="btn btn-outline-secondary" type="button" onclick="clearInput('search-item-{{ $index }}')"><i class="material-icons-outlined">edit</i></button>
                                        </div>
                                        <div id="search-result-item-{{ $index }}" class="list-group" style="display:none; position:relative; z-index:1000; width:100%; max-height:200px; overflow:scroll;">
                                            </div>
                                        <input type="hidden" name="details[{{ $index }}][item_id]" id="item_code_{{ $index }}" value="{{ $detail->item_id }}">
                                    </div>
                                </td>
                                <td style="max-width: 100px;">
                                    <input type="number" step="0.5" name="details[{{ $index }}][qty]" class="form-control qty text-end" required value="{{ $detail->qty }}">
                                </td>
                                <td>
                                    {{-- <input type="hidden" name="details[{{ $index }}][unit]" class="form-control" value="{{ $detail->unit }}" readonly />
                                    <input type="text" name="details[{{ $index }}][unit_name]" class="form-control" value="{{ $detail->units->unit_name }}" readonly /> --}}
                                    <select id="unit_{{$index}}" name="details[{{$index}}][unit]" class="form-control unit-dropdown">
                                        @php
                                            $a = $items->where('item_code',$detail->item_id)->toArray();
                                            $matchingItems = array_values($a)[0]['item_details'];

                                            // Collect all unit_conversion values into a single array
                                            $allowedUnits = [];
                                            foreach ($matchingItems as $item) {
                                                $units = is_array($item['unit_conversion']) ? $item['unit_conversion'] : explode(',', $item['unit_conversion']);
                                                $allowedUnits = array_merge($allowedUnits, $units);
                                            }
                                            // Remove duplicates
                                            $allowedUnits = array_unique($allowedUnits);
                                        @endphp
                                        @foreach ($itemUnits as $unit)
                                            @if (in_array($unit->unit, $allowedUnits))
                                                <option value="{{ $unit->unit }}" @if($detail->unit == $unit->unit) selected @endif>{{ $unit->unit_name }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name="details[{{ $index }}][notes]" class="form-control" placeholder="..." value="{{ $detail->notes }}">
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger remove-row"><i class="material-icons-outlined">delete</i></button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td colspan="2"></td>
                        </tfoot>
                    </table>
                    <button type="button" id="add-row" class="btn btn-primary">Tambah Detail</button>
                </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 Penggunaan Bahan</button>
            </div>
        </form>

        <form id="delete-form" action="{{ route('transaction.penggunaan_bahan.destroy', $penggunaanBahan->id) }}" method="POST" style="display:inline;">
            @csrf
            @method('DELETE')
            <button type="button" class="btn btn-sm btn-danger mb-3" onclick="confirmDelete(event, '{{ $penggunaanBahan->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.penggunaan_bahan.index') }}";
                }
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
</div>
@section('scripts')
<script>
var now = new Date(),
maxDate = now.toISOString().substring(0,10);
$('#document_date').prop('max', maxDate);

const items = @json($items);
const coas = @json($coas);

function setupSearch(inputId, resultsContainerId, inputHid) {
    const inputElement = document.getElementById(inputId);
    const resultsContainer = document.getElementById(resultsContainerId);
    inputElement.addEventListener('input', function () {
        let query = this.value.toLowerCase();
        resultsContainer.innerHTML = '';
        resultsContainer.style.display = 'none';
        if (query.length > 0) {
            let filteredResults = coas.filter(item =>
                item.account_number.toLowerCase().includes(query) ||
                item.account_name.toLowerCase().includes(query)
            );
            if (filteredResults.length > 0) {
                resultsContainer.style.display = 'block';
                filteredResults.forEach(item => {
                    let listItem = document.createElement('a');
                    listItem.className = 'list-group-item list-group-item-action';
                    listItem.href = '#';
                    listItem.innerHTML = `
                        <strong>${item.account_number}</strong> - ${item.account_name} <br>`;
                    listItem.addEventListener('click', function(e) {
                        e.preventDefault();
                        inputElement.value = item.account_number + ' - ' + item.account_name;
                        inputElement.readOnly = true;
                        document.getElementById(inputHid).value = item.account_number;
                        resultsContainer.style.display = 'none';
                    });
                    resultsContainer.appendChild(listItem);
                });
            }
        }
    });
}

function setupItemSearch(inputId, resultsContainerId, inputHid,rowId) {
    const inputElement = document.getElementById(inputId);
    const resultsContainer = document.getElementById(resultsContainerId);
    inputElement.addEventListener('input', function () {
        let query = this.value.toLowerCase();
        resultsContainer.innerHTML = '';
        resultsContainer.style.display = 'none';
        if (query.length > 0) {
            let filteredResults = items.filter(item =>
                item.item_code.toLowerCase().includes(query) ||
                item.item_name.toLowerCase().includes(query)
            );
            if (filteredResults.length > 0) {
                resultsContainer.style.display = 'block';
                filteredResults.forEach(item => {
                    let listItem = document.createElement('a');
                    listItem.className = 'list-group-item list-group-item-action';
                    listItem.href = '#';
                    listItem.innerHTML = `
                        <strong>${item.item_code}</strong> - ${item.item_name} <br>`;
                    listItem.addEventListener('click', function(e) {
                        e.preventDefault();
                        inputElement.value =  item.item_name;
                        inputElement.readOnly = true;
                        document.getElementById(inputHid).value = item.item_code;
                        resultsContainer.style.display = 'none';

                        let units = [];
                        let selectedUnit = '';
                        item.item_details.forEach(element => {
                            if(element.department_code==item.department_code){
                                units.push(element.unit_conversion);
                            }
                            selectedUnit = element.unit_conversion;
                        });

                        const unitSelect = document.getElementById(`unit_${rowId}`);
                        Array.from(unitSelect.options).forEach(option => {
                            option.style.display = units.includes(option.value) ? 'block' : 'none';
                        });
                        unitSelect.value = selectedUnit;
                    });
                    resultsContainer.appendChild(listItem);
                });
            }
        }
    });
}

function clearInput(inputId) {
    document.getElementById(inputId).value = '';
    document.getElementById(inputId).readOnly = false;
}

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

document.addEventListener('DOMContentLoaded', function () {
    let rowCount = {{ count($penggunaanBahan->details) }};

    document.getElementById('add-row').addEventListener('click', function () {
        const detailsTableBody = document.querySelector('#details-table tbody');
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>
                <div class="form-group mb-3">
                    <div class="input-group">
                        <input type="text" id="search-item-${rowCount}" autocomplete="off" class="form-control" placeholder="Search by Item Code or Item Name" required>
                        <button style="height:100%;" class="btn btn-outline-secondary" type="button" onclick="clearInput('search-item-${rowCount}')"><i class="material-icons-outlined">edit</i></button>
                    </div>
                    <div id="search-result-item-${rowCount}" class="list-group" style="display:none; position:relative; z-index:1000; width:100%; max-height:200px; overflow:scroll;">
                        </div>
                    <input type="hidden" name="details[${rowCount}][item_id]" id="item_code_${rowCount}">
                </div>
            </td>
            <td style="max-width: 100px;">
                <input type="number" step="0.5" name="details[${rowCount}][qty]" class="form-control qty text-end" required>
            </td>
            <td>
                <select id="unit_${rowCount}" name="details[${rowCount}][unit]" class="form-control unit-dropdown">
                    @foreach ($itemUnits as $unit)
                        <option value="{{$unit->unit}}">{{$unit->unit_name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="details[${rowCount}][notes]" class="form-control"  placeholder="...">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="material-icons-outlined">delete</i></button>
            </td>
        `;
        detailsTableBody.appendChild(newRow);
        setupItemSearch(`search-item-${rowCount}`, `search-result-item-${rowCount}`, `item_code_${rowCount}`,rowCount);
        rowCount++;
    });

    document.querySelector('#details-table tbody').addEventListener('click', function (e) {
        if (e.target.closest('.remove-row')) {
            e.target.closest('tr').remove();
        }
    });

    setupSearch('search-acc', 'search-result-acc', 'acc_header');
    @foreach($penggunaanBahan->details as $index => $detail)
        setupItemSearch('search-item-{{ $index }}', 'search-result-item-{{ $index }}', 'item_code_{{ $index }}',{{$index}});
    @endforeach
});
</script>
@endsection
@endsection