// managecars.js
import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "@/app/components/Navbar";
const ManageCars = () => {
const [cars, setCars] = useState([]);
const [editingCar, setEditingCar] = useState(null);
const [model, setModel] = useState("");
const [description, setDescription] = useState("");
const [pricePerDay, setPricePerDay] = useState("");
const [ownerName, setOwnerName] = useState("");
const [ownerContact, setOwnerContact] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [features, setFeatures] = useState({
ac: false,
cng: false,
sunroof: false,
automatic: false,
});
useEffect(() => {
const storedCars = localStorage.getItem("cars");
if (storedCars) {
setCars(JSON.parse(storedCars));
}
}, []);
const handleEdit = (car) => {
setEditingCar(car);
setModel(car.model);
setDescription(car.description);
setPricePerDay(car.pricePerDay);
setOwnerName(car.ownerName);
setOwnerContact(car.ownerContact);
setImageUrl(car.imageUrl);
setFeatures(car.features);
};
const handleUpdate = (e) => {
e.preventDefault();
const updatedCars = cars.map((car) =>
car.id === editingCar.id
? {
...car,
model,
description,
pricePerDay,
ownerName,
ownerContact,
imageUrl,
features,
}
: car
);
setCars(updatedCars);
localStorage.setItem("cars", JSON.stringify(updatedCars));
resetForm();
};
const handleDelete = (carId) => {
const updatedCars = cars.filter((car) => car.id !== carId);
setCars(updatedCars);
localStorage.setItem("cars", JSON.stringify(updatedCars));
};
const resetForm = () => {
setEditingCar(null);
setModel("");
setDescription("");
setPricePerDay("");
setOwnerName("");
setOwnerContact("");
setImageUrl("");
setFeatures({
ac: false,
cng: false,
sunroof: false,
automatic: false,
});
};
const handleFeatureChange = (e) => {
const { name, checked } = e.target;
setFeatures({ ...features, [name]: checked });
};
return (
<>
<Navbar />
<div className="container mt-5">
<h2 className="mb-4">Manage Cars</h2>
{editingCar ? (
<form onSubmit={handleUpdate}>
<div className="mb-3">
<label htmlFor="model" className="form-label">
Model
</label>
<input
type="text"
className="form-control"
id="model"
value={model}
onChange={(e) => setModel(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="description" className="form-label">
Description
</label>
<textarea
className="form-control"
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
required
></textarea>
</div>
<div className="mb-3">
<label htmlFor="pricePerDay" className="form-label">
Price per Day
</label>
<input
type="text"
className="form-control"
id="pricePerDay"
value={pricePerDay}
onChange={(e) => setPricePerDay(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="ownerName" className="form-label">
Owner Name
</label>
<input
type="text"
className="form-control"
id="ownerName"
value={ownerName}
onChange={(e) => setOwnerName(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="ownerContact" className="form-label">
Owner Contact
</label>
<input
type="text"
className="form-control"
id="ownerContact"
value={ownerContact}
onChange={(e) => setOwnerContact(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="imageUrl" className="form-label">
Image URL
</label>
<input
type="text"
className="form-control"
id="imageUrl"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label className="form-label">Features</label>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="ac"
name="ac"
checked={features.ac}
onChange={handleFeatureChange}
/>
<label htmlFor="ac" className="form-check-label">
AC
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="cng"
name="cng"
checked={features.cng}
onChange={handleFeatureChange}
/>
<label htmlFor="cng" className="form-check-label">
CNG
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="sunroof"
name="sunroof"
checked={features.sunroof}
onChange={handleFeatureChange}
/>
<label htmlFor="sunroof" className="form-check-label">
Sunroof
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="automatic"
name="automatic"
checked={features.automatic}
onChange={handleFeatureChange}
/>
<label htmlFor="automatic" className="form-check-label">
Automatic Transmission
</label>
</div>
</div>
<button type="submit" className="btn btn-primary">
Update Car
</button>
<button
type="button"
className="btn btn-secondary ms-2"
onClick={resetForm}
>
Cancel
</button>
</form>
) : (
<div className="row">
{cars.map((car) => (
<div key={car.id} className="col-lg-4 col-md-6 mb-4">
<div className="card">
{car.imageUrl ? (
<img
src={car.imageUrl}
className="card-img-top"
alt={car.model}
style={{ height: "200px", objectFit: "cover" }}
/>
) : (
<div
className="card-img-top"
style={{
height: "200px",
backgroundColor: "#f0f0f0",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<span>No Image</span>
</div>
)}
<div className="card-body">
<h5 className="card-title">{car.model}</h5>
<p className="card-text">₹{car.pricePerDay} per day</p>
<p className="card-text">Owner: {car.ownerName}</p>
<button
className="btn btn-primary"
onClick={() => handleEdit(car)}
>
Edit
</button>
<button
className="btn btn-danger ms-2"
onClick={() => handleDelete(car.id)}
>
Delete
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
<style jsx>{`
.card:hover {
border-radius: 8px;
transition: box-shadow 0.3s;
width: 101%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
`}</style>
</>
);
};
export default ManageCars;