<!DOCTYPE html>

<html lang="en">

<head>
</head>
<!--end::Head-->
<!--begin::Body-->

<body id="kt_body" class="app-blank">

    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column flex-column-fluid">


            <div class="scroll-y flex-column-fluid px-10 py-10" data-kt-scroll="true" data-kt-scroll-activate="true"
                data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_header_nav" data-kt-scroll-offset="5px"
                data-kt-scroll-save-state="true"
                style="background-color:#D5D9E2; --kt-scrollbar-color: #d9d0cc; --kt-scrollbar-hover-color: #d9d0cc">
                <!--begin::Email template-->
                <style>
                    html,
                    body {
                        padding: 0;
                        margin: 0;
                        font-family: Inter, Helvetica, "sans-serif";
                    }

                    a:hover {
                        color: #009ef7;
                    }
                </style>
                <div id="#kt_app_body_content"
                    style="background-color:#D5D9E2; font-family:Arial,Helvetica,sans-serif; line-height: 1.5; min-height: 100%; font-weight: normal; font-size: 15px; color: #2F3044; margin:0; padding:0; width:100%;">
                    <div
                        style="background-color:#ffffff; padding: 45px 0 34px 0; border-radius: 24px; margin:40px auto; max-width: 600px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                            height="auto" style="border-collapse:collapse">
                            <tbody>
                                <tr>
                                    <td align="center" valign="center" style="text-align:center; padding-bottom: 10px">
                                        <!--begin:Email content-->
                                        <div style="text-align:center; margin:0 60px 34px 60px">

                                            <!--begin:Media-->
                                            <div style="margin-bottom:15px">
                                                <p
                                                    style="margin-bottom:9px; color:#181C32; font-size: 28px; font-weight:600">
                                                    The Greater Chiangmai</p>
                                            </div>
                                            <!--end:Media-->

                                            <div
                                                style="font-size: 14px; font-weight: 500; margin-bottom: 42px; font-family:Arial,Helvetica,sans-serif">
                                                <p
                                                    style="margin-bottom:9px; color:#181C32; font-size: 22px; font-weight:700">
                                                    Approve Booking {{ $booking_number }}
                                                </p>

                                            </div>


                                            <div style="margin-bottom: 15px">
                                                <!--begin:Title-->
                                                <h3
                                                    style="text-align:left; color:#181C32; font-size: 18px; font-weight:600; margin-bottom: 22px">
                                                    Booking summary</h3>

                                                <div style="padding-bottom:9px">

                                                    <!-- Room -->
                                                    @foreach ($room_detail as $item)
                                                        <div
                                                            style="display:flex; justify-content: space-between; color:#7E8299; font-size: 14px; font-weight:500;">

                                                            <div style="font-family:Arial,Helvetica,sans-serif">
                                                                {{ $item->room_type_name }} ({{ $item->room_name }}) x 1
                                                            </div>

                                                            <div style="font-family:Arial,Helvetica,sans-serif">
                                                                {{ $item->price }}
                                                            </div>

                                                        </div>
                                                    @endforeach

                                                    <!-- Free -->
                                                    <div class="separator separator-dashed" style="margin:35px 0">
                                                    </div>

                                                    <!-- Fee -->
                                                    <div
                                                        style="display:flex; justify-content: space-between; color:#7E8299; font-size: 14px; font-weight:500">
                                                        <div style="font-family:Arial,Helvetica,sans-serif">
                                                            Fee
                                                        </div>
                                                        <div
                                                            style="color:#50cd89; font-weight:700; font-family:Arial,Helvetica,sans-serif">
                                                            {{ $fee }}
                                                        </div>
                                                    </div>

                                                    <!-- Free -->
                                                    <div class="separator separator-dashed" style="margin:35px 0">
                                                    </div>

                                                    <!-- Total -->
                                                    <div
                                                        style="display:flex; justify-content: space-between; color:#7E8299; font-size: 14px; font-weight:500">
                                                        <div style="font-family:Arial,Helvetica,sans-serif">
                                                            Total
                                                        </div>
                                                        <div
                                                            style="color:#50cd89; font-weight:700; font-family:Arial,Helvetica,sans-serif">
                                                            {{ $total }}
                                                        </div>
                                                    </div>

                                                    <!-- Free -->
                                                    <div class="separator separator-dashed" style="margin:15px 0">
                                                    </div>


                                                    <!-- Grand Total -->
                                                    <div
                                                        style="display:flex; justify-content: space-between; color:#7E8299; font-size: 14px; font-weight:500">
                                                        <div style="font-family:Arial,Helvetica,sans-serif">
                                                            Grand Total
                                                        </div>
                                                        <div
                                                            style="color:#50cd89; font-weight:700; font-family:Arial,Helvetica,sans-serif">
                                                            {{ $grand_total }}
                                                        </div>
                                                    </div>


                                                </div>
                                            </div>


                                        </div>
                                        <!--end:Email content-->
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <!--end::Email template-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Wrapper-->
    </div>

</body>
<!--end::Body-->

</html>
