JezK

Edit File: addCareClub.php

<?php
include "sidemenu-start.php";
include "app/adminObject.php";

$where['type'] = 3;
$services = $admin->getServices($where);
$branches = $admin->getAllBraches();
?>

<div class="container-fluid">
    <h1>Add Ceramic Club</h1>

<div class="mb-3">
            <label>Title</label>
            <input type="text" class="form-control" name="title" required>
        </div>

<button type="button" class="btn btn-success mb-3" id="addBranchBtn">
            + Add Branch
        </button>

<div class="branch-block border p-3 mb-4" data-branch="0">

<div class="row mb-3">
                    <div class="col-md-4">
                        <label>Branch</label>
                        <select class="form-select" name="branches[0][branch_id]" required>
                            <option value="">Select Branch</option>
                            <?php foreach ($branches as $b): ?>
                                <option value="<?= $b['brach_id'] ?>"><?= $b['name'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

<div class="col-md-4">
                        <label>Quantity</label>
                        <input type="number"
                            class="form-control"
                            name="branches[0][quantity]"
                            min="1"
                            placeholder="Quantity">
                    </div>

<div class="col-md-4 d-flex align-items-end">
                        <button type="button" class="btn btn-danger remove-branch">
                            Remove Branch
                        </button>
                    </div>
                </div>

<?php for ($year = 1; $year <= 5; $year++): ?>
                    <div class="card mb-3 year-card">
                        <div class="card-header"><strong><?= $year ?> Year</strong></div>

<div class="mb-3">
                                <label>Allowed Services</label>
                                <input type="number"
                                    class="form-control service-limit"
                                    name="branches[0][years][<?= $year ?>][limit]"
                                    min="0">
                                <small class="text-danger limit-error"></small>
                            </div>

<div class="row">
                                <?php foreach ($services as $s): ?>
                                    <div class="col-md-6 mb-2">
                                        <label class="d-flex justify-content-between">
                                            <?= $s['name'] ?>
                                            <div>
                                                <button type="button" class="btn btn-sm btn-secondary"
                                                    onclick="changeService(this, 1)">+</button>
                                                <span>0</span>
                                                <button type="button" class="btn btn-sm btn-secondary"
                                                    onclick="changeService(this, -1)">-</button>
                                            </div>
                                        </label>

<input type="hidden"
                                            name="branches[0][years][<?= $year ?>][services][<?= $s['service_id'] ?>]"
                                            value="0">
                                    </div>
                                <?php endforeach; ?>
                            </div>

<div class="row mt-3">
                                <div class="col-md-3">
                                    <label>Sedan ₹</label>
                                    <input type="number"
                                        class="form-control"
                                        name="branches[0][years][<?= $year ?>][pricing][sedan]"
                                        min="0">
                                </div>
                                <div class="col-md-3">
                                    <label>MUV ₹</label>
                                    <input type="number"
                                        class="form-control"
                                        name="branches[0][years][<?= $year ?>][pricing][muv]"
                                        min="0">
                                </div>
                                <div class="col-md-3">
                                    <label>SUV ₹</label>
                                    <input type="number"
                                        class="form-control"
                                        name="branches[0][years][<?= $year ?>][pricing][suv]"
                                        min="0">
                                </div>
                                <div class="col-md-3">
                                    <label>HatchBack ₹</label>
                                    <input type="number"
                                        class="form-control"
                                        name="branches[0][years][<?= $year ?>][pricing][hatchback]"
                                        min="0">
                                </div>
                            </div>

</div>
                    </div>
                <?php endfor; ?>

</div>
        </div>

<button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<?php include "sidemenu-end.php"; ?>
<script>
    let branchIndex = 0;

// ADD BRANCH
    document.getElementById('addBranchBtn').addEventListener('click', () => {
        branchIndex++;

let container = document.getElementById('branchContainer');
        let clone = container.firstElementChild.cloneNode(true);

clone.dataset.branch = branchIndex;

clone.querySelectorAll('input, select').forEach(el => {
            if (el.name) {
                el.name = el.name.replace(/\[0\]/, `[${branchIndex}]`);
            }
            if (el.tagName === 'INPUT') el.value = 0;
            if (el.tagName === 'SELECT') el.selectedIndex = 0;
        });

clone.querySelectorAll('span').forEach(s => s.innerText = '0');
        clone.querySelectorAll('.limit-error').forEach(e => e.innerText = '');

container.appendChild(clone);
    });

// REMOVE BRANCH
    document.addEventListener('click', e => {
        if (e.target.classList.contains('remove-branch')) {
            let blocks = document.querySelectorAll('.branch-block');
            if (blocks.length > 1) {
                e.target.closest('.branch-block').remove();
            }
        }
    });

// CHANGE SERVICE
    function changeService(btn, delta) {

let yearCard = btn.closest('.year-card');
        let limitInput = yearCard.querySelector('.service-limit');
        let error = yearCard.querySelector('.limit-error');

let limit = parseInt(limitInput.value || 0);
        let hiddenInputs = yearCard.querySelectorAll('input[type="hidden"]');

let used = 0;
        hiddenInputs.forEach(i => used += parseInt(i.value));

if (used + delta > limit) {
            error.innerText = 'Service limit exceeded';
            return;
        }

error.innerText = '';

let hidden = btn.closest('.col-md-6').querySelector('input[type="hidden"]');
        let span = btn.closest('label').querySelector('span');

let val = parseInt(hidden.value) + delta;
        if (val < 0) return;

hidden.value = val;
        span.innerText = val;
    }
</script>

let valid = true;
        let totalSelectedServices = 0;

// TITLE
        const title = document.querySelector('input[name="title"]');
        if (!title.value.trim()) {
            toastr.error('Title is required');
            title.focus();
            return false;
        }

const branchBlocks = document.querySelectorAll('.branch-block');
        if (branchBlocks.length === 0) {
            toastr.error('At least one branch is required');
            return false;
        }

branchBlocks.forEach((branch, bIndex) => {

// BRANCH SELECT
            const branchSelect = branch.querySelector('select[name*="[branch_id]"]');
            if (!branchSelect.value) {
                toastr.error(`Please select branch for block ${bIndex + 1}`);
                branchSelect.focus();
                valid = false;
                return;
            }

// QUANTITY
            const qtyInput = branch.querySelector('input[name*="[quantity]"]');
            if (!qtyInput.value || parseInt(qtyInput.value) <= 0) {
                toastr.error(`Quantity must be greater than 0 for branch ${bIndex + 1}`);
                qtyInput.focus();
                valid = false;
                return;
            }

// YEARS
            branch.querySelectorAll('.year-card').forEach(card => {

const limitInput = card.querySelector('.service-limit');
                const limit = parseInt(limitInput.value || 0);

let used = 0;
                card.querySelectorAll('input[type="hidden"]').forEach(i => {
                    used += parseInt(i.value || 0);
                });

totalSelectedServices += used;

if (used > limit) {
                    card.querySelector('.limit-error').innerText = 'Service limit exceeded';
                    valid = false;
                }

if (used > 0 && limit === 0) {
                    card.querySelector('.limit-error').innerText = 'Set allowed services';
                    valid = false;
                }
            });
        });

if (totalSelectedServices === 0) {
            toastr.error('Select at least one service');
            return false;
        }

return valid;
    }
</script>

if (!validateAddCareClubForm()) return;

let valid = true;

document.querySelectorAll('.year-card').forEach(card => {
            let limit = parseInt(card.querySelector('.service-limit').value || 0);
            let used = 0;

card.querySelectorAll('input[type="hidden"]').forEach(i => {
                used += parseInt(i.value || 0);
            });

if (used > limit) {
                card.querySelector('.limit-error').innerText = 'Service limit exceeded';
                valid = false;
            }
        });

if (!valid) {
            alert('Fix service limits before submitting');
            return;
        }

let formData = new FormData(this);
        formData.append('addCareClub', 'addCareClub');
        formData.append('addedBy', '1');

fetch('app/careClub.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.text())
            .then(res => {
                if (res.trim() === '1') {
                    toastr.success('Ceramic Club added');
                    setTimeout(() => window.location = 'careClubs.php', 1500);
                } else {
                    toastr.error(res || 'Error occurred');
                }
            })
            .catch(() => toastr.error('Server error'));
    });
</script>