@include('admin.layouts.header')

<div class="col-sm-9 col-md-10">
    <div class="content">
        <div class="panel panel-default">
            <div class="panel-heading d-flex justify-content-between align-items-center">
                <span>Map Addon ({{ $parent_name }})</span>
            </div>

            <div class="panel-body">
                <div class="mb-3">
                    <button type="button" class="btn btn-success btn-sm" id="addRowBtn">
                        <i class="fa fa-plus"></i> Add New
                    </button>
                    <button type="submit" form="addonMappingForm" class="btn btn-primary btn-sm">
                        <i class="fa fa-save"></i> Save Addon Mapping
                    </button>
                </div>

                <form action="{{ route('admin.addon_map.save') }}" method="POST" id="addonMappingForm">
                    @csrf
                    <input type="hidden" name="item_id" value="{{ $parent_id }}">

                    <div class="table-responsive" style="overflow-x:auto; white-space:nowrap;">
                        <table class="table table-bordered table-striped" id="addonTable">
                            <thead>
                                <tr>
                                    <th>Addon Name</th>
                                    <th>Addon Set</th>
                                    <th>Addon Group</th>
                                    @foreach($childs as $child)
                                        <th>{{ $child->item_name }}</th>
                                    @endforeach
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $rowIndex = 0; @endphp
                                @forelse($addonMappings as $mapping)
                                    <tr>
                                        <td>
                                            <input type="hidden" name="mapping_id[]" value="{{ $mapping->id }}">
                                            <input type="text" name="addon_name[]" class="form-control" value="{{ $mapping->addon_name }}">
                                        </td>
                                        <td>
                                            <select class="form-control addon-select" onchange="load_child(this)" name="addon_id[]" required>
                                                <option value="">-Select Addon Set-</option>
                                                @foreach($addons as $addon)
                                                    <option value="{{ $addon->id }}" {{ $addon->id == $mapping->addon_id ? 'selected' : '' }}>
                                                        {{ $addon->addon_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-control addon-group-dropdown" name="addon_group_id[]">
                                                <option value="">-Select Addon Group-</option>
                                                @foreach($mapping->addon_group_data as $group)
                                                    <option value="{{ $group->id }}" {{ $group->id == $mapping->addon_group_id ? 'selected' : '' }}>
                                                        {{ $group->group_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        @foreach($childs as $child)
                                            <td>
                                                <input type="number" name="prices[{{ $rowIndex }}][{{ $child->id }}]" class="form-control"
                                                       value="{{ $mapping->prices[$child->id] ?? '' }}">
                                            </td>
                                        @endforeach
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-row">Remove</button>
                                        </td>
                                    </tr>
                                    @php $rowIndex++; @endphp
                                @empty
                                    <tr>
                                        <td>
                                            <input type="hidden" name="mapping_id[]" value="">
                                            <input type="text" name="addon_name[]" class="form-control">
                                        </td>
                                        <td>
                                            <select class="form-control addon-select" onchange="load_child(this)" name="addon_id[]" required>
                                                <option value="">-Select Addon Set-</option>
                                                @foreach($addons as $addon)
                                                    <option value="{{ $addon->id }}">{{ $addon->addon_name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-control addon-group-dropdown" name="addon_group_id[]">
                                                <option value="">-Select Addon Group-</option>
                                            </select>
                                        </td>
                                        @foreach($childs as $child)
                                            <td><input type="number" name="prices[0][{{ $child->id }}]" class="form-control"></td>
                                        @endforeach
                                        <td><button type="button" class="btn btn-danger btn-sm remove-row">Remove</button></td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
let rowCount = {{ count($addonMappings) > 0 ? count($addonMappings) : 1 }};

function load_child(selectElement) {
    const addonId = selectElement.value;
    if (!addonId) return;

    const url = `{{ route('admin.addons.addon_groups') }}?addon_id=${addonId}`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            const row = selectElement.closest("tr");
            const groupSelect = row.querySelector(".addon-group-dropdown");

            groupSelect.innerHTML = `<option value="">-Select Addon Group-</option>`;
            data.forEach(group => {
                const opt = document.createElement("option");
                opt.value = group.id;
                opt.textContent = group.group_name;
                groupSelect.appendChild(opt);
            });
        })
        .catch(err => console.error("Error fetching addon groups:", err));
}

// Add new row
document.getElementById("addRowBtn").addEventListener("click", () => {
    const tableBody = document.querySelector("#addonTable tbody");
    const templateRow = tableBody.querySelector("tr");
    const newRow = templateRow.cloneNode(true);

    // Reset all inputs and selects
    newRow.querySelectorAll("input").forEach(input => {
        input.value = "";
    });

    newRow.querySelectorAll("select").forEach(select => {
        if (select.classList.contains("addon-group-dropdown")) {
            select.innerHTML = `<option value="">-Select Addon Group-</option>`;
        } else {
            select.selectedIndex = 0;
        }
    });

    // Reset prices index
    newRow.querySelectorAll("input[name^='prices']").forEach(input => {
        const match = input.name.match(/\[\d+\]\[(\d+)\]/);
        if (match) {
            const childId = match[1];
            input.name = `prices[${rowCount}][${childId}]`;
        }
    });

    // Clear mapping id
    newRow.querySelector("input[name='mapping_id[]']").value = "";

    tableBody.appendChild(newRow);
    rowCount++;
});

// Remove row
document.addEventListener("click", e => {
    if (e.target.classList.contains("remove-row")) {
        const row = e.target.closest("tr");
        row.remove();

        const rows = document.querySelectorAll("#addonTable tbody tr");
        if (rows.length === 0) {
            document.getElementById("addRowBtn").click();
        }
    }
});
</script>

@include('admin.layouts.footer')