{{>header}}
<title>User Details</title>
<style>
    .box-profile {
        background: linear-gradient(135deg, #083c30 0%, #015843 100%);
        color: white;
        border-radius: 12px 12px 0 0;
        padding: 2rem;
        text-align: center;
    }

    .profile-name {
        color: white;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .profile-email {
        color: #e0e0e0;
        margin-bottom: 0;
        font-size: 0.95rem;
    }

    .list-group-unbordered {
        background: linear-gradient(135deg, #083c30 0%, #015843 100%);
        border-radius: 0 0 12px 12px;
        margin-bottom: 0 !important;
    }

    .list-group-unbordered .list-group-item {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .list-group-unbordered .list-group-item:last-child {
        border-bottom: none;
    }

    .list-group-unbordered .list-group-item b {
        color: white;
        font-weight: 600;
        margin: 0;
    }

    .list-group-unbordered .list-group-item .float-right {
        float: none;
        text-align: right;
        color: #e0e0e0;
    }

    .card-primary.card-outline {
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .profile-user-img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.2);
    }

    .card-header h4 {
        margin: 0;
    }
</style>

<div class="container mt-4">
    {{#if success}}
    <div class="alert alert-success">{{success}}</div>
    {{/if}}
    {{#if error}}
    <div class="alert alert-danger">{{error}}</div>
    {{/if}}

    <div class="row">
        <div class="col-md-4">
            <div class="card card-primary card-outline">
                <div class="card-body box-profile text-center">
                    <img class="profile-user-img img-fluid img-circle mb-3"
                        src="{{#if userExists.profilePicture}}/{{userExists.profilePicture}}{{else}}/admin/images/dummy.png{{/if}}"
                        alt="User Image">

                    <h4 class="mb-2 profile-name">{{userExists.profile.name}}</h4>
                    <p class="profile-email">{{userExists.email}}</p>
                </div>

                <ul class="list-group list-group-unbordered">
                    <li class="list-group-item">
                        <b>Phone</b>
                        <span class="float-right">{{userExists.phoneNumber}}</span>
                    </li>
                    <li class="list-group-item">
                        <b>Email</b>
                        <span class="float-right">{{userExists.profile.email}}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background-color:#083c30; color:white;">
                    <h4>Order Details</h4>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-bordered datatable" id="example2">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Booking ID</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Pickup Address</th>
                                <th>Drop Address</th>
                                <th>Payment Status</th>
                                <th>Booking Type</th>

                            </tr>
                        </thead>
                        <tbody>
                           {{#each bookings}}
                            <tr>
                                <td>{{inc @index}}</td>
                                <td>{{this.bookingId}}</td>
                                <td>{{this.bookingDate}}</td>
                                <td>{{this.bookingTime}}</td>
                                <td>{{this.pickupLocation.address}}</td>
                                <td>{{this.dropLocation.address}}</td>
                                <td>{{this.status}}</td>
                                <td>{{this.type}}</td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <a href="/admin/allusers" class="btn btn-secondary mt-3" style="background-color:#083c30">Back to All Users</a>
</div>

{{>footer}}