2026-04-03 15:54:05 +05:30

150 lines
6.9 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add doctor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?= base_url('css/app.css') ?>">
</head>
<body class="app-body app-page--admin"5>
<?php
$oldDoctors = old('doctors');
if (! is_array($oldDoctors) || $oldDoctors === []) {
$oldDoctors = [[
'name' => '',
'email' => '',
'password' => '',
'specialization' => '',
'experience' => '',
'fees' => '',
'available_from' => '',
'available_to' => '',
]];
}
?>
<div class="container py-5" style="max-width: 980px;">
<h2 class="text-center mb-4 app-heading">Add Doctors</h2>
<?php if (session()->getFlashdata('error')): ?>
<div class="alert alert-danger app-alert text-center"><?= esc(session()->getFlashdata('error')) ?></div>
<?php endif; ?>
<form method="post" action="<?= base_url('admin/doctors/add') ?>" class="app-form card app-card-dashboard p-4" novalidate id="bulk-doctor-form">
<?= csrf_field() ?>
<div class="d-flex justify-content-between align-items-center mb-3">
<p class="mb-0 text-muted">Add one or many doctors, then submit once.</p>
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3" id="add-doctor-row">+ Add another doctor</button>
</div>
<div id="doctor-rows">
<?php foreach ($oldDoctors as $index => $doctor): ?>
<div class="border rounded-4 p-3 mb-3 doctor-row" data-row>
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="mb-0">Doctor No: <span data-row-number><?= $index + 1 ?></span></h6>
<button type="button" class="btn btn-sm btn-outline-danger remove-row" <?= $index === 0 ? 'style="display:none"' : '' ?>>Remove</button>
</div>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Full name</label>
<input type="text" name="doctors[<?= $index ?>][name]" value="<?= esc($doctor['name'] ?? '') ?>" class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">Email (login)</label>
<input type="email" name="doctors[<?= $index ?>][email]" value="<?= esc($doctor['email'] ?? '') ?>" class="form-control" autocomplete="off">
</div>
<div class="col-md-6">
<label class="form-label">Password</label>
<input type="password" name="doctors[<?= $index ?>][password]" value="<?= esc($doctor['password'] ?? '') ?>" class="form-control" autocomplete="new-password">
</div>
<div class="col-md-6">
<label class="form-label">Specialization</label>
<input type="text" name="doctors[<?= $index ?>][specialization]" value="<?= esc($doctor['specialization'] ?? '') ?>" class="form-control" placeholder="e.g. Cardiology">
</div>
<div class="col-md-4">
<label class="form-label">Experience (optional)</label>
<input type="text" name="doctors[<?= $index ?>][experience]" value="<?= esc($doctor['experience'] ?? '') ?>" class="form-control" placeholder="e.g. 10 years">
</div>
<div class="col-md-4">
<label class="form-label">Consultation fee (optional)</label>
<input type="number" name="doctors[<?= $index ?>][fees]" value="<?= esc($doctor['fees'] ?? '') ?>" class="form-control" placeholder="e.g. 500.00" step="0.01" min="0">
</div>
<div class="col-md-2">
<label class="form-label">Available from</label>
<input type="time" name="doctors[<?= $index ?>][available_from]" value="<?= esc($doctor['available_from'] ?? '') ?>" class="form-control">
</div>
<div class="col-md-2">
<label class="form-label">Available to</label>
<input type="time" name="doctors[<?= $index ?>][available_to]" value="<?= esc($doctor['available_to'] ?? '') ?>" class="form-control">
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="d-flex flex-wrap gap-2 justify-content-between mt-4">
<a href="<?= base_url('admin/dashboard') ?>" class="btn btn-outline-secondary rounded-pill px-4">Cancel</a>
<button type="submit" class="btn btn-app-primary px-4">Create doctors</button>
</div>
</form>
</div>
<script>
(() => {
const rowsContainer = document.getElementById('doctor-rows');
const addBtn = document.getElementById('add-doctor-row');
const updateRowNumbers = () => {
const rows = rowsContainer.querySelectorAll('[data-row]');
rows.forEach((row, index) => {
const numberEl = row.querySelector('[data-row-number]');
if (numberEl) numberEl.textContent = String(index + 1);
row.querySelectorAll('input').forEach((input) => {
const name = input.getAttribute('name');
if (!name) return;
input.setAttribute('name', name.replace(/doctors\[\d+]/, `doctors[${index}]`));
});
const removeBtn = row.querySelector('.remove-row');
if (removeBtn) {
removeBtn.style.display = rows.length === 1 ? 'none' : 'inline-block';
}
});
};
addBtn.addEventListener('click', () => {
const firstRow = rowsContainer.querySelector('[data-row]');
if (!firstRow) return;
const clone = firstRow.cloneNode(true);
clone.querySelectorAll('input').forEach((input) => {
input.value = '';
});
rowsContainer.appendChild(clone);
updateRowNumbers();
});
rowsContainer.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof HTMLElement) || !target.classList.contains('remove-row')) {
return;
}
const row = target.closest('[data-row]');
if (!row) return;
row.remove();
updateRowNumbers();
});
updateRowNumbers();
})();
</script>
</body>
</html>