Notes

import React from "react";
import {
Card,
Typography,
Button,
FormControlLabel,
Checkbox,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

import ImageType from "./TypeImage";
import TotalCost from "./TotalCost";
const useStyles = makeStyles({
root: {
width: "100%",
marginTop: 50,
},
borderButton: {
"&:focus": {
outline: "none",
},
},
});
const ROOM_LIST = [
{
label: "Dashboard",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Payment",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Employee",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Department",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Department",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Department",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
{
label: "Department",
icon: <img src="images/Icon_app-36.png" width="70" height="70" />,
isSelected: false,
},
];
export default function TypeRoom(props) {
const classes = useStyles();
const [roomList, setRoomList] = React.useState(ROOM_LIST);

// /Code นี้
let element = props.detail?.data[0];
console.log(element?.unitinfo_list);
let room;
if (element) {
room = element.unitinfo_list?.map((value) => {
return {
roomType: value.unitinfo.name,
count: value.emptyroom_count,
image: value.unitinfo.image,
};
});
}
console.log(room);

/// value.unitinfo.name, value.emptyroom_count;

const handleClickRoomList = (index = 0) => {
setRoomList(
roomList.map((menu, menuIndex) =>
menuIndex === index
? {
...menu,
isSelected: !menu.isSelected,
}
: {
...menu,
}
)
);
};

const selected = roomList.filter((item) => item.isSelected === true);

return (
<>
<Card className={classes.root}>
<div className="bg-green p-3">
<Typography variant="h5" className="white">
Room Type
</Typography>
</div>
<div className="h-25">
<ImageType />
</div>

<div className="row p-3">
<div className="col-sm-9">
<Typography variant="h5" style={{ color: "#54C199" }}>
Luxury Room
</Typography>
</div>
<div className="col-sm-3">
<Typography variant="h6" className="text-right">
49,900 Bath
</Typography>
<Typography
variant="subtitle2"
style={{ fontSize: 10, textAlign: "right" }}
>
Prices include taxes and fees.
</Typography>
</div>
</div>
<div className="underline" />
<div className="row">
<div className="col-12 text-left">
{roomList.map((element, index) => (
<Button
key={index}
onClick={() => handleClickRoomList(index)}
className={element.isSelected ? "btn-check-room " : "btn-room"}
>
{element.icon}
</Button>
))}
</div>
</div>
<div className="underline" />

<div className="p-3">
<Typography variant="h5" style={{ color: "#54C199" }}>
Room Amenities
</Typography>
<div className="row ml-5">
<div className="w-25">
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Complete bath set"
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Drinks and Champagne"
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Espresso Machine"
/>
</div>
<div className="w-25 ml-5">
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Hair dryer"
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Pool towels"
/>
<br />
<FormControlLabel
disabled
control={
<Checkbox
checked={false}
name="checkedD"
style={{
color: "green",
backgroundColor: "green",
borderRadius: "0%",
width: 10,
height: 10,
margin: 10,
}}
/>
}
label="See more"
/>
</div>
</div>
</div>
</Card>

{/* บริการ */}

<Card className={classes.root}>
<div className="p-3">
<Typography variant="h5" style={{ color: "#54C199" }}>
Convenience service
</Typography>
</div>
<div className="row d-flex justify-content-center">
<div className="col-2">
<div className="img-icon flex-center">
<img
style={{ width: 70, height: 70 }}
src={"./images/mockup/icon/icon.png"}
/>
</div>
<Typography className="text-center mt-2 mb-2 mr-3">
Reception
</Typography>
</div>
<div className="col-2">
<div className="img-icon flex-center">
<img
style={{ width: 70, height: 70 }}
src={"./images/mockup/icon/icon2.png"}
/>
</div>
<Typography className="text-center mt-2 mb-2 mr-2">
Express check-in / check-out
</Typography>
</div>
<div className="col-2 ">
<div className="img-icon flex-center">
<img
style={{ width: 70, height: 70 }}
src={"./images/mockup/icon/icon3.png"}
/>
</div>
<Typography className="text-center mt-2 mb-2 mr-1">
Room service
</Typography>
</div>
<div className="col-2">
<div className="img-icon flex-center">
<img
style={{ width: 70, height: 70 }}
src={"./images/mockup/icon/icon4.png"}
/>
</div>
<Typography className="text-center mt-2 mb-2 mr-3">Spa</Typography>
</div>
<div className="col-2">
<div className="img-icon flex-center">
<img src={"./images/mockup/icon/icon5.png"} />
</div>
<Typography className="text-center mt-2 mb-2 mr-3">
See more
</Typography>
</div>
</div>
</Card>

{/* data hotel */}
<Card className={classes.root}>
<div className="bg-green col-3 text-center p-3">
<Typography variant="h5" className="white">
Hotel Information
</Typography>
<div className="underline" />
</div>
<div className="row mb-4">
<div className="col-2">
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/phone.png"}
/>
</Typography>
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/check-in.png"}
/>
</Typography>
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/check-out.png"}
/>
</Typography>
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/time-open.png"}
/>
</Typography>
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/payment.png"}
/>
</Typography>
<Typography className="text-right m-2" variant="h6">
<img
className="img-contain icon"
width="100%"
height="100%"
src={"images/mockup/icon/tax.png"}
/>
</Typography>
</div>
<div className="col-5">
<Typography className="m-2" variant="h6">
Contact number
</Typography>
<Typography className="m-2" variant="h6">
Check in
</Typography>
<Typography className="m-2" variant="h6">
Check out
</Typography>
<Typography className="m-2" variant="h6">
Open
</Typography>
<Typography className="m-2" variant="h6">
Payment mothod
</Typography>
<Typography className="m-2" variant="h6">
Tax
</Typography>
</div>
<div className="col-4">
<Typography className="text-center m-2" variant="h6">
081-655-9118
</Typography>
<Typography className="text-center m-2" variant="h6">
12.00 PM
</Typography>
<Typography className="text-center m-2" variant="h6">
8.00 AM
</Typography>
<Typography className="text-center m-2" variant="h6">
Open 24 hours.
</Typography>
<Typography className="text-center m-2" variant="h6">
Pay by bank
</Typography>
<Typography className="text-center m-2" variant="h6">
Can not request tax invoice
</Typography>
</div>
</div>
</Card>
{selected.length > 0 && <TotalCost selected={selected} />}
</>
);
}