@extends('layouts.app')

@push('head-script')
<style>
    #map {
        height: 300px;
        width: 100%;
        border: solid 1px #ccc;
        margin: 10px auto;
        border-radius: 10px;
    }
    .message-item {
        margin-bottom: 25px;
        margin-left: 40px;
        position: relative;
    }
    .message-item .message-inner {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        position: relative;
    }
    .message-item .message-inner:before {
        border-right: 10px solid #ddd;
        border-style: solid;
        border-width: 10px;
        color: rgba(0,0,0,0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -20px;
        top: 6px;
        width: 0;
    }
    .message-item .message-inner:after {
        border-right: 10px solid #fff;
        border-style: solid;
        border-width: 10px;
        color: rgba(0,0,0,0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -18px;
        top: 6px;
        width: 0;
    }
    .message-item:before {
        background: #fff;
        border-radius: 2px;
        bottom: -30px;
        box-shadow: 0 0 3px rgba(0,0,0,0.2);
        content: "";
        height: 100%;
        left: -30px;
        position: absolute;
        width: 3px;
    }
    .message-item:after {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        content: "";
        height: 15px;
        left: -36px;
        position: absolute;
        top: 10px;
        width: 15px;
    }
    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .message-item .message-head {
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    .message-item .message-head .avatar {
        margin-right: 20px;
    }
    .message-item .message-head .user-detail {
        overflow: hidden;
    }
    .message-item .message-head .user-detail h5 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }
    .message-item .message-head .post-meta {
        float: left;
        padding: 0 15px 0 0;
    }
    .message-item .message-head .post-meta >div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }
    .post-meta > div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }
    .message-item .message-head .post-meta >div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }
    .post-meta > div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }
    #wallmessages img {
        min-height: 40px;
        max-height: 40px;
    }
    .table {
        border-left: 1px solid #f2f2f3 !important;
        border-right: 1px solid #f2f2f3 !important;
    }
</style>


@endpush

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.clients.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.menu.projects')</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Booking Detail</div>
                        <div class="panel-body custom-panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>Code</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Booking Date</td>
                                            <td>01 January 1970</td>
                                        </tr>
                                        <tr>
                                            <td>Check In</td>
                                            <td>00:00</td>
                                        </tr>
                                        <tr>
                                            <td>Check Out</td>
                                            <td>00:00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Tenant Detail</div>
                        <div class="panel-body custom-panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>Name</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Unit</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Email</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Phone</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Facility Detail</div>
                        <div class="panel-body custom-panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>Name</td>
                                            <td><img src="/user-uploads/bookings/" style="width:50px;height:50px"></td>
                                        </tr>
                                        <tr>
                                            <td>Description</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Type</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Rating</td>
                                            <td> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


</div>

@endsection

@push('footer-script')

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyANABngwjq91LDRPCuv5ExNOJ2LigCqSdY"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

</script>
@endpush