@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>
                </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 id="addonBody">
@forelse($addonMappings as $index => $mapping)
<tr data-id="{{ $mapping->id }}">
    <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="text" name="prices[{{ $child->id }}]" class="form-control"
               value="{{ $mapping->prices[$child->id] ?? '' }}">
    </td>
    @endforeach
    <td>
        <button type="button" class="btn btn-sm btn-primary" onclick="saveRow(this)">
            <i class="fa fa-save"></i> Save
        </button>
        <button type="button" class="btn btn-sm btn-danger" onclick="deleteRow(this)">
            <i class="fa fa-trash"></i> Delete
        </button>
    </td>
</tr>
@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="text" name="prices[{{ $child->id }}]" class="form-control"></td>
    @endforeach
    <td>
        <button type="button" class="btn btn-sm btn-primary" onclick="saveRow(this)">
            <i class="fa fa-save"></i> Save
        </button>
        <button type="button" class="btn btn-sm btn-danger" onclick="deleteRow(this)">
            <i class="fa fa-trash"></i> Delete
        </button>
    </td>
</tr>
@endforelse
</tbody>

                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function collectRowData(row) {
    const data = {};
    data.item_id = "{{ $parent_id }}";
    data.mapping_id = row.querySelector("[name='mapping_id']").value;
    data.addon_name = row.querySelector("[name='addon_name']").value;
    data.addon_id = row.querySelector("[name='addon_id']").value;
    data.addon_group_id = row.querySelector("[name='addon_group_id']").value;
    data.prices = {};

    row.querySelectorAll("input[name^='prices']").forEach(input => {
        const match = input.name.match(/\[(\d+)\]/);
        if (match) {
            data.prices[match[1]] = input.value;
        }
    });

    return data;
}

function saveRow(btn) {
    const row = btn.closest("tr");
    const data = collectRowData(row);

    fetch("{{ route('admin.addon_map.save_single') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(resp => {
        if (resp.success) {
            alert(resp.message);
            row.querySelector("[name='mapping_id']").value = resp.id;
            row.dataset.id = resp.id;
        } else {
            alert("Error: " + resp.message);
        }
    })
    .catch(err => console.error("Error saving:", err));
}

function deleteRow(btn) {
    const row = btn.closest("tr");
    const id = row.querySelector("[name='mapping_id']").value;

    if (!id) {
        row.remove();
        return;
    }

    if (!confirm("Are you sure you want to delete this mapping?")) return;

    fetch("{{ route('admin.addon_map.delete_single') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({ id })
    })
    .then(res => res.json())
    .then(resp => {
        if (resp.success) {
            alert(resp.message);
            row.remove();
        } else {
            alert("Error: " + resp.message);
        }
    })
    .catch(err => console.error("Error deleting:", err));
}

// Dynamically load groups when addon changes
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));
}
</script>
<script>
document.getElementById("addRowBtn").addEventListener("click", () => {
    const tbody = document.getElementById("addonBody");
    
    // Clone the first row as a template
    const templateRow = tbody.querySelector("tr");
    const newRow = templateRow.cloneNode(true);

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

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

    // Make sure the row has no mapping id
    newRow.querySelector("[name='mapping_id']").value = "";

    // Append to tbody
    tbody.appendChild(newRow);
});
</script>


@include('admin.layouts.footer')