[e6c2521] | 1 | import {Button, Col, Container, Image, Modal, Row} from "react-bootstrap";
|
---|
| 2 | import {FaCalendarAlt} from "react-icons/fa";
|
---|
| 3 | import {MdBalcony, MdLocationOn} from "react-icons/md";
|
---|
| 4 | import {LuFan} from "react-icons/lu";
|
---|
| 5 | import {TbToolsKitchen2} from "react-icons/tb";
|
---|
| 6 | import React from "react";
|
---|
| 7 |
|
---|
| 8 | const HotelReservationModal = (props) => {
|
---|
| 9 |
|
---|
| 10 | const dateFormatter = (str) => {
|
---|
| 11 | const inputDate = new Date(str);
|
---|
| 12 |
|
---|
| 13 | const options = {
|
---|
| 14 | year: 'numeric',
|
---|
| 15 | month: '2-digit',
|
---|
| 16 | day: '2-digit',
|
---|
| 17 | hour12: false,
|
---|
| 18 | };
|
---|
| 19 |
|
---|
| 20 | return inputDate.toLocaleString('de-DE', options);
|
---|
| 21 |
|
---|
| 22 | }
|
---|
| 23 |
|
---|
| 24 | return (
|
---|
| 25 | <>
|
---|
| 26 | <Modal size={"xl"} show={props.show} onHide={props.handleClose}>
|
---|
| 27 | <Modal.Header closeButton>
|
---|
| 28 | <Modal.Title>Детали за резервација</Modal.Title>
|
---|
| 29 | </Modal.Header>
|
---|
| 30 | <Modal.Body>
|
---|
| 31 | <Container className="py-3 px-1 my-4" style={{maxWidth: "90%"}}>
|
---|
| 32 | <Row className={'mb-3'}>
|
---|
| 33 | <Col className={'px-4'}>
|
---|
| 34 | <h3>{props.data.hotelName}</h3>
|
---|
| 35 | </Col>
|
---|
| 36 | <Col>
|
---|
| 37 |
|
---|
| 38 | </Col>
|
---|
| 39 | </Row>
|
---|
| 40 | <Row className={'mb-3'}>
|
---|
| 41 | <Col className={'d-flex flex-column justify-content-between'}>
|
---|
| 42 | <Row>
|
---|
| 43 | <Col md={'auto'}
|
---|
| 44 | className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
|
---|
| 45 | <FaCalendarAlt size={'2em'}/>
|
---|
| 46 | </Col>
|
---|
| 47 | <Col md={'auto'} style={{borderRight: '1px solid black'}}>
|
---|
| 48 | <Row className={'w-75'}>
|
---|
| 49 | <h6>Пријавување</h6>
|
---|
| 50 | </Row>
|
---|
| 51 | <Row>
|
---|
| 52 | <h5>{dateFormatter(props.data.dateFrom)}</h5>
|
---|
| 53 | </Row>
|
---|
| 54 |
|
---|
| 55 | </Col>
|
---|
| 56 | <Col>
|
---|
| 57 | <Row>
|
---|
| 58 | <h6>Одјавување</h6>
|
---|
| 59 | </Row>
|
---|
| 60 | <Row>
|
---|
| 61 | <h5>{dateFormatter(props.data.dateTo)}</h5>
|
---|
| 62 | </Row>
|
---|
| 63 | </Col>
|
---|
| 64 | <Col md={7}>
|
---|
| 65 |
|
---|
| 66 | </Col>
|
---|
| 67 | </Row>
|
---|
| 68 | <Row>
|
---|
| 69 | <Col md={'auto'}
|
---|
| 70 | className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
|
---|
| 71 | <MdLocationOn size={'2em'}/>
|
---|
| 72 | </Col>
|
---|
| 73 | <Col md={'auto'}>
|
---|
| 74 | <Row className={'w-75'}>
|
---|
| 75 | <h6>Адреса</h6>
|
---|
| 76 | </Row>
|
---|
| 77 | <Row>
|
---|
| 78 | <h5>ул. Македонска бр. 10</h5>
|
---|
| 79 | </Row>
|
---|
| 80 | </Col>
|
---|
| 81 | <Col>
|
---|
| 82 | </Col>
|
---|
| 83 |
|
---|
| 84 | </Row>
|
---|
| 85 | </Col>
|
---|
| 86 | <Col className={'d-flex flex-column align-items-center'}>
|
---|
| 87 | <Image
|
---|
| 88 | src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
|
---|
| 89 | style={{
|
---|
| 90 | height: "10em",
|
---|
| 91 | borderRadius: "1em",
|
---|
| 92 | boxShadow: "0 4px 20px lightblue",
|
---|
| 93 | maxWidth: "100%",
|
---|
| 94 | }}
|
---|
| 95 | ></Image>
|
---|
| 96 | </Col>
|
---|
| 97 |
|
---|
| 98 | </Row>
|
---|
| 99 | </Container>
|
---|
| 100 | <Container>
|
---|
| 101 | <Row className={'mb-3'}>
|
---|
| 102 | <h4>Детали за собата</h4>
|
---|
| 103 | </Row>
|
---|
| 104 | <Row>
|
---|
| 105 | <Col className="d-flex justify-content-center">
|
---|
| 106 | <Image
|
---|
| 107 | src="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg?w=200"
|
---|
| 108 | style={{
|
---|
| 109 | height: "10em",
|
---|
| 110 | borderRadius: "1em",
|
---|
| 111 | boxShadow: "0 4px 20px lightblue",
|
---|
| 112 | maxWidth: "100%",
|
---|
| 113 | }}
|
---|
| 114 | ></Image>
|
---|
| 115 | </Col>
|
---|
| 116 | <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
|
---|
| 117 | <Row><h4>{props.data.hotelRoom.hotelRoomName}</h4></Row>
|
---|
| 118 | <Row>
|
---|
| 119 | {props.data.hotelRoom.airConditioning && <Col className="col-auto">
|
---|
| 120 | <Container className="py-1 px-1">
|
---|
| 121 | <Row className="d-flex flex-row">
|
---|
| 122 | <Col className="m-0 w-25 py-1">
|
---|
| 123 | <LuFan
|
---|
| 124 | className="my-0 "
|
---|
| 125 | color="#159895"
|
---|
| 126 | size={40}
|
---|
| 127 | ></LuFan>
|
---|
| 128 | </Col>
|
---|
| 129 | <Col className="w-75 d-flex p-0">
|
---|
| 130 | <h6 style={{fontSize: "14px"}} className="m-auto">
|
---|
| 131 | Климатизирано
|
---|
| 132 | </h6>
|
---|
| 133 | </Col>
|
---|
| 134 | </Row>
|
---|
| 135 | </Container>
|
---|
| 136 | </Col>}
|
---|
| 137 | {props.data.hotelRoom.kitchenAvailable && <Col className="col-auto">
|
---|
| 138 | <Container
|
---|
| 139 | className="py-1 px-1">
|
---|
| 140 | <Row className="d-flex flex-row">
|
---|
| 141 | <Col className="m-0 w-25 py-1">
|
---|
| 142 | <TbToolsKitchen2 className="my-0 " color="#159895"
|
---|
| 143 | size={40}></TbToolsKitchen2>
|
---|
| 144 | </Col>
|
---|
| 145 | <Col className="w-75 d-flex p-0">
|
---|
| 146 | <h6 style={{fontSize: "14px"}} className="m-auto">Кујна</h6>
|
---|
| 147 | </Col>
|
---|
| 148 | </Row>
|
---|
| 149 | </Container>
|
---|
| 150 | </Col>}
|
---|
| 151 | {props.data.hotelRoom.balcony && <Col className="col-auto">
|
---|
| 152 | <Container
|
---|
| 153 | className="py-1 px-1">
|
---|
| 154 | <Row className="d-flex flex-row">
|
---|
| 155 | <Col className="m-0 w-25 py-1">
|
---|
| 156 | <MdBalcony className="my-0 " color="#159895" size={40}></MdBalcony>
|
---|
| 157 | </Col>
|
---|
| 158 | <Col className="w-75 d-flex p-0">
|
---|
| 159 | <h6 style={{fontSize: "14px"}} className="m-auto">Тераса</h6>
|
---|
| 160 | </Col>
|
---|
| 161 | </Row>
|
---|
| 162 | </Container>
|
---|
| 163 | </Col>}
|
---|
| 164 | </Row>
|
---|
| 165 | </Col>
|
---|
| 166 | </Row>
|
---|
| 167 | </Container>
|
---|
| 168 | <Container className={'border mt-3 w-75 py-3 rounded-3'}>
|
---|
| 169 | <Row className={'mb-3'}>
|
---|
| 170 | <Col>
|
---|
| 171 | <h5>4 Ноќевања</h5>
|
---|
| 172 | </Col>
|
---|
| 173 | <Col>
|
---|
| 174 | <h5 className={'text-end'}>32$</h5>
|
---|
| 175 | </Col>
|
---|
| 176 | </Row>
|
---|
| 177 | <Row>
|
---|
| 178 | <Col>
|
---|
| 179 | <h5>Вкупно</h5>
|
---|
| 180 | </Col>
|
---|
| 181 | <Col>
|
---|
| 182 | <h4 className={'text-end'}>128$</h4>
|
---|
| 183 | </Col>
|
---|
| 184 | </Row>
|
---|
| 185 | </Container>
|
---|
| 186 | </Modal.Body>
|
---|
| 187 | <Modal.Footer>
|
---|
| 188 | <Button variant="secondary" onClick={props.handleClose}>
|
---|
| 189 | Затвори
|
---|
| 190 | </Button>
|
---|
| 191 | </Modal.Footer>
|
---|
| 192 | </Modal>
|
---|
| 193 |
|
---|
| 194 | </>
|
---|
| 195 | )
|
---|
| 196 | }
|
---|
| 197 |
|
---|
| 198 | export default HotelReservationModal; |
---|