<template>

<t t-name="HotelCalendar.ConfirmReservationChanges">
	<div class="content">
		<p>The following changes will be made...</p>
		<p t-if="hasReservsLinked" style="color:red">This reservation belongs to a folio with more reservations!</p>
		<div class="row">
			<div class="col-xl-6 col-lg-6">
				<strong>Reserve unchanged:</strong>
				<div class="well well-small">
					<t t-if="ocheckin != ncheckin">
						<strong>Checkin:</strong> <t t-esc="ocheckin"/><br/>
					</t>
					<t t-if="ocheckout != ncheckout">
						<strong>Checkout:</strong> <t t-esc="ocheckout"/><br/>
					</t>
					<t t-if="oroom != nroom">
						<strong>Room:</strong> <t t-esc="oroom"/><br/>
					</t>
					<t t-if="oadults != nadults">
						<strong>Adults:</strong> <t t-esc="oadults"/><br/>
					</t>
<!--
					<t t-if="oprice != nprice">
						<strong>Price:</strong> <t t-esc="oprice" widget="monetary"/><br/>
					</t>
-->
				</div>
			</div>
			<div class="col-xl-6 col-lg-6">
				<strong>Reserve changed:</strong>
				<div class="well well-small">
					<t t-if="ocheckin != ncheckin">
						<strong>Checkin:</strong> <t t-esc="ncheckin"/><br/>
					</t>
					<t t-if="ocheckout != ncheckout">
						<strong>Checkout:</strong> <t t-esc="ncheckout"/><br/>
					</t>
					<t t-if="oroom != nroom">
						<strong>Room:</strong> <t t-esc="nroom"/><br/>
					</t>
					<t t-if="oadults != nadults">
						<strong>Adults:</strong> <t t-esc="nadults"/><br/>
					</t>
<!--
					<t t-if="oprice != nprice">
						<strong>Price:</strong> <t t-esc="nprice" widget="monetary"/><br/>
					</t>
-->
				</div>
			</div>
		</div>
		<p>Are you sure you want to make this changes?</p>
	</div>
</t>

<t t-name="HotelCalendar.ConfirmPriceChange">
	<div class="content">
		<p>Are you sure you want to change these prices?</p>
	</div>
</t>

<t t-name="HotelCalendar.ConfirmSwapOperation">
	<div class="content">
		<p>The following changes will be made...</p>
		<span><strong>Swap Reservations</strong></span><br/>
		<p>Are you sure you want to make this changes?</p>
	</div>
</t>

<t t-name="HotelCalendar.InvalidSwapOperation">
	<div class="content">
		<p>Invalid Swap Operation, can't make this movement :/</p>
	</div>
</t>

<t t-name="HotelCalendar.ConfirmSplitOperation">
	<div class="content">
		<p>The following changes will be made...</p>
		<span><strong>Split Reservation</strong></span><br/>
		<p>Are you sure you want to make this changes?</p>
	</div>
</t>

<t t-name="HotelCalendar.ConfirmUnifyOperation">
	<div class="content">
		<p>The following changes will be made...</p>
		<span><strong>Unify Reservations</strong></span><br/>
		<p>Are you sure you want to make this changes?</p>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Channel.ota">
	<div id="channel_info"></div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Channel.direct">
	<div class="row row-eq-height">
		<div class="col-sm-12 col-xs-12  bg-gray-light">
			Sales Channel: <b class="mt-10"><t t-esc="channel_type"/></b>
		</div>
	</div>
	<div class="row row-eq-height">
		<div class="col-sm-12 col-xs-12 bg-gray-light">
			<t t-if="channel_type =='call'">
				TODO: add call center information
			</t>
		</div>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Customer">
	<div class="row row-eq-height">
		<div class="col-sm-6 col-xs-6 bg-gray-light">
			<i class="fa fa-user-circle fa-2x fa-pull-left mt-5"/>
			<header><t t-esc="name"/></header>
			<p><t t-esc="phone"/></p>
			<p class="email"><t t-esc="email"/></p>
		</div>
		<div class="col-sm-6 col-xs-6 bg-gray-lighter">
			<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5 text-gray-dark"/>
			<header class="mt-5"><t t-esc="room_type_name"/></header>

				<p><t t-esc="board_service_name"/></p>

			<span class="circle pull-left" id="price_room">
				<t t-if="!splitted">
					<t t-esc="price_room_services_set" t-widget="monetary"/>€
				</t>
				<t t-else="">
					<i class="fa fa-chain-broken fa-1_5x pt-9"/>
				</t>
			</span>
			<p>Adults: <t t-esc="adults"/></p>
			<p class="children">Children: <t t-esc="children"/></p>
		</div>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Sale">
	<div class="row row-eq-height mt-3">
		<div id="folio_pending_amount"
			 t-attf-class="col-sm-6 col-xs-6 bg-gray-light pb-3 pr-0 diagonal {{pending_amount gt 0 ? 'diagonal_pending_amount':''}}">
			<div class="on-top">
				<div class="pull-left">
					<p>Folio Pending</p>
					<t t-if="pending_amount.length > '6'">
						<h3 t-attf-style="font-size:calc(22px - #{pending_amount.length}px)"><t t-esc="pending_amount" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
					</t>
					<t t-else="">
						<h3><t t-esc="pending_amount" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
					</t>
				</div>
				<div class="pull-right-custom">
					<t t-if="invoices_paid.length > '6'">
						<h3 t-attf-style="font-size:calc(22px - #{invoices_paid.length}px)"><t t-esc="invoices_paid" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
					</t>
					<t t-else="">
						<h3><t t-esc="invoices_paid" t-widget="monetary"/>€</h3> <!-- FIXME: HARD CURRENCY -->
					</t>
					<p>Total Paid</p>
				</div>
			</div>
		</div>

		<div class="col-sm-6 col-xs-6 bg-gray-light">
			<t t-if="channel_type == 'web'">
				<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>
			</t>
			<t t-else="">
				<t t-call="HotelCalendar.TooltipReservation.Channel.direct"/>
			</t>
		</div>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Dates">
	<div class="row row-eq-height mt-3">
		<div class="col-sm-12 col-xs-12 triangle-right">
			<div class="col-sm-6 col-xs-6 px-0">
				<i class="fa fa-sign-in fa-2x fa-pull-left pl-5 py-5"/>
				<h3><t t-esc="checkin"/></h3>
				<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
			</div>
			<div class="col-sm-6 col-xs-6 text-gray-dark">
				<i class="fa fa-sign-out fa-2x fa-pull-left pl-5 py-5"/>
				<h3><t t-esc="checkout"/></h3>
				<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
			</div>
		</div>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.Footer">
	<div class="row row-eq-height mt-10">
		<div class="col-sm-4 btn_popover_open_folio pr-0">
			<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button"
			   title="View Folio Details"> <span class="fa-text-inside"><t t-esc="folio_name"/></span></i>
		</div>
		<div class="col-sm-2 btn_popover_open_reservation">
			<span class="fa fa-suitcase fa-2x" role="button"
				title="View Reservation Details" />
		</div>
		<div class="col-sm-2 btn_popover_open_checkin">
			<span class="fa fa-user-plus fa-2x" role="button"
				title="Checkin" />
		</div>
		<div class="col-sm-2">
			<span class="fa fa-envelope fa-2x" role="button"
				title="Send Reservation Email" />
		</div>
		<div class="col-sm-2 btn_popover_open_payment_folio" data-toggle="collapse" data-target="#payment_reservation">
			<span class="fa fa-money fa-2x" role="button"
				title="Folio Payments" id="payment_folio" />
			<span class="fa fa-money fa-2x collapse btn_popover_open_payment_reservation" role="button"
				title="Reservation Payments" id="payment_reservation" />
		</div>
		<t t-if="reservation_type =='normal'">
			<div class="col-sm-2 btn_popover_open_invoice">
				<span class="fa fa-pencil-square-o fa-2x" role="button"
					title="Invoice Folio" />
			</div>
		</t>
	</div>
	<div class="row row-eq-height mt-10">
		<div class="col-sm-12">
			<t t-if="services">
        			<t t-foreach='services' t-as='ps'>
            			<i class="fa fa-exclamation-circle"/> <t t-esc='ps'/>
        			</t>
			</t>
			<t t-if="splitted">
				<p><i class="fa fa-exclamation-circle"/> This reservation is part of splitted reservation.</p>
			</t>
		</div>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.normal">
	<div class="container">
		<t t-call="HotelCalendar.TooltipReservation.Customer"/>
		<t t-call="HotelCalendar.TooltipReservation.Sale"/>
		<t t-call="HotelCalendar.TooltipReservation.Dates"/>
		<t t-call="HotelCalendar.TooltipReservation.Footer"/>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.staff">
	<div class="container">
		<div class="row row-eq-height">
			<div class="col-sm-6 col-xs-6 bg-danger">
				<i class="fa fa-black-tie fa-2x fa-pull-left mt-5"/>
				<header><t t-esc="name"/></header>
				<p><t t-esc="phone"/></p>
				<p class="email"><t t-esc="email"/></p>
			</div>
			<div class="col-sm-6 col-xs-6 bg-gray-lighter">
				<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5"/>
				<header class="mt-5"><t t-esc="room_type_name"/></header>
				<p><t t-esc="board_service_name"/></p>

				<p>Adults: <t t-esc="adults"/></p>
				<p class="children">Children: <t t-esc="children"/></p>
			</div>
		</div>
		<t t-call="HotelCalendar.TooltipReservation.Dates"/>
		<t t-call="HotelCalendar.TooltipReservation.Footer"/>
	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation.out">
	<div class="container">
		<div class="row row-eq-height">
			<div class="col-sm-6 col-xs-6 bg-gray-lighter">
				<i class="fa fa-ban fa-2x fa-pull-left"/>
				<header><t t-esc="name"/></header>
				<p><t t-esc="out_service_description"/></p>
			</div>
			<div class="col-sm-6 col-xs-6 bg-gray-light">
				<i class="fa fa-hotel fa-2x fa-pull-left"/>
				<header><t t-esc="room_type_name"/></header>

				<p><t t-esc="closure_reason"/></p>
			</div>
		</div>
		<t t-call="HotelCalendar.TooltipReservation.Dates"/>
		<div class="row row-eq-height my-10">
			<div class="col-sm-4 btn_popover_open_folio">
				<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button"
				   title="View Folio Details"> <span class="fa-text-inside"><t t-esc="folio_name"/></span></i>
			</div>
			<div class="col-sm-2 btn_popover_open_reservation">
				<span class="fa fa-suitcase fa-2x" role="button"
					title="View Reservation Details" />
			</div>
		</div>

	</div>
</t>

<t t-name="HotelCalendar.TooltipReservation">
	<t t-call="HotelCalendar.TooltipReservation.#{ reservation_type }"/>
</t>

<t t-name="HotelCalendar.TooltipRoom">
	<div class="oe_tooltip_string"><t t-esc="name"/></div>
	<p><b>Room Type:</b> <t t-esc="room_type_name"/></p>
</t>

<t t-name="HotelCalendar.TooltipEvent">
	<div class="oe_tooltip_string"><t t-esc="date"/></div>
	<ul>
		<li t-foreach="events" t-as="event">
			<t t-esc="event.name"/>
		</li>
	</ul>
</t>

<t t-name="HotelCalendar.TooltipRoomOverbooking">
	<div class="oe_tooltip_string"><t t-esc="name"/></div>
	<p><b>Overbooking Management</b></p>
</t>

<t t-name="HotelCalendar.TooltipSelection">
	<!-- FIXME: HARD CURRENCY -->
	<span><b t-esc="nights"/> Nights: <b t-esc="total_price" t-widget="monetary"/>€</span>
</t>

<t t-name="HotelCalendar.TooltipRestriction">
	<ul class="oe_tooltip_technical">
		<li><b>Min. Stay:</b> <t t-esc="min_stay"/></li>
		<li><b>Max. Stay:</b> <t t-esc="max_stay"/></li>
		<li><b>Max. Stay Arrival:</b> <t t-esc="max_stay_arrival"/></li>
		<li><b>Closed:</b> <t t-esc="closed"/></li>
		<li><b>Closed Arrival:</b> <t t-esc="closed_arrival"/></li>
		<li><b>Closed Departure:</b> <t t-esc="closed_departure"/></li>
	</ul>
</t>

<t t-name="HotelCalendar.ConfirmFolio">
	<div class="content">
		<p>Do you want to confirm this folio?</p>
	</div>
</t>

<t t-name="HotelCalendar.Notification">
	<ul>
		<li><b>Name:</b> <t t-esc="partner_name"/></li>
		<li><b>Room:</b> <t t-esc="room_name"/></li>
		<li><b>Check-In:</b> <t t-esc="checkin"/></li>
		<li><b>Check-Out:</b> <t t-esc="checkout"/></li>
		<li><b>Made by:</b> <t t-esc="username"/></li>
	</ul>
</t>

<t t-name="HotelCalendarManagement.UnsavedChanges">
	<div class="content">
		<p>Have unsaved changes!</p>
		<p>Do you want to save these changes?</p>
	</div>
</t>

<t t-name="HotelCalendar.SettingsMenu">
    <li class="o_calendar_settings">
        <a href="#" title="Calendar Settings" class="dropdown-toggle" data-toggle="dropdown">
            <span class="fa fa-calendar"/>
        </a>
        <ul class="dropdown-menu o_calendar_settings_dropdown" role="menu"/>
    </li>
</t>

<t t-name="HotelCalendar.SettingsMenu.Global">
    <li><a href="#" data-action="toggle_show_notification"><span t-if="manager._show_notifications" class="fa fa-check"/> Show Notifications</a></li>
	<li><a href="#" data-action="toggle_show_pricelist"><span t-if="manager._show_pricelist" class="fa fa-check"/> Show Pricelist</a></li>
	<li><a href="#" data-action="toggle_show_availability"><span t-if="manager._show_availability" class="fa fa-check"/> Show Availability</a></li>
</t>

</template>
