@extends('layoutfrontend')

@section('title', 'Cari Booking')
@section('css')
    <style>
        .header {
            display: grid;
            grid-template-columns: 1fr 1fr;   
        }
        .title {
            border-bottom: 2px solid #eaeaea;
        }

        .fields {
            display: grid;
            grid-template-columns: 100px 1fr;
            column-gap: 16px;
            align-items: flex-start;
            margin-bottom: 6px;
            line-height: 24px;
        }

         .fields .label {
            font-weight: 400;
         }

         .fields .value {
            font-size: 16px;
            font-weight: 600;
         }

         @media only screen and (max-width: 600px) {
            .title {
                text-align: left !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row mb-3">
            <h2 class="title col-md-6">ID: <b>{{ @$booking->kode_booking }}</b></h2>
            <h2 class="title col-md-6 text-right">
                Check In: <b>{{ @$booking->start_date ? date_format(@$booking->start_date, "d/m/Y") : ""}}</b> - 
                Check Out: <b>{{ @$booking->end_date ? date_format(@$booking->end_date, "d/m/Y") : ""}}</b>
            </h2>
        </div>
        <div class="row">
            <div class="col-md-6 mb-5">
                <h4>Guest Information</h4>
                <div class="fields">
                    <div class="label">
                        Name:
                    </div>
                    <div class="value">
                        {{@$booking->nama}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        ID Number:
                    </div>
                    <div class="value">
                        {{config("custom.jenis_identitas")[@$booking->jns_identitas]}} - {{@$booking->no_identitas}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Email:
                    </div>
                    <div class="value">
                        {{@$booking->email}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Phone Number:
                    </div>
                    <div class="value">
                        {{@$booking->telp}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Address:
                    </div>
                    <div class="value" style="width: 50%;">
                        {{@$booking->alamat}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        City:
                    </div>
                    <div class="value">
                        {{@$booking->kota}}, {{@$booking->propinsi}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Country:
                    </div>
                    <div class="value">
                        {{@$booking->negara}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Postcode:
                    </div>
                    <div class="value">
                        {{@$booking->kode_pos}}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Status & Payment</h4>
                <div class="fields">
                    <div class="label">
                        Status:
                    </div>
                    <div class="value">
                        {{config('custom.status_booking')[@$booking->tipe_booking]}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Payment Type:
                    </div>
                    <div class="value">
                        {{config('custom.jenis_pembayaran_eng')[@$booking->jns_pembayaran]}}
                    </div>
                </div>
                <div class="fields">
                    <div class="label">
                        Booked Room(s):
                    </div>
                    <div class="value">
                        {{implode(", ", @$booking->jns_kamar)}}
                    </div>
                </div>
                @if (@$booking->diskon)
                    <div class="fields">
                        <div class="label">
                            Discount:
                        </div>
                        <div class="value">
                            {{@$booking->diskon}} %
                        </div>
                    </div>
                @endif
                <div class="fields">
                    <div class="label">
                        Grandtotal:
                    </div>
                    <div class="value">
                        Rp {{ribuan(@$booking->total_biaya)}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

@endsection