@extends('layouts.master')
@section('body_id', 'room_details_page')
@section('content')

<style>
    .details-hero-banner {
        background: linear-gradient(rgba(49, 58, 69, 0.85), rgba(49, 58, 69, 0.95)), url("{{ asset('assets/img/lightslider-img/cS-22.jpg') }}") no-repeat center center;
        background-size: cover;
        padding: 60px 0;
        margin-bottom: 40px;
        border-bottom: 4px solid #f7c411;
    }
    .prop-badge {
        background: #f7c411;
        color: #313a45;
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .info-card-wrap {
        background: #ffffff;
        padding: 30px;
        border-radius: 12px;
        border: 1px solid #eef0f2;
        box-shadow: 0 5px 20px rgba(0,0,0,0.04);
        margin-bottom: 30px;
    }
    .section-sub-title {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        color: #313a45;
        margin-top: 0;
        margin-bottom: 20px;
        border-bottom: 2px solid #f7c411;
        padding-bottom: 10px;
        text-transform: uppercase;
        font-size: 20px;
    }
    .facility-pill {
        background: #f4f6f9;
        color: #495057;
        padding: 8px 16px;
        border-radius: 6px;
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #e9ecef;
    }
    .facility-pill i {
        color: #f7c411;
        margin-right: 6px;
    }
    .sticky-sidebar-box {
        position: -webkit-sticky;
        position: sticky;
        top: 40px;
        z-index: 10;
    }
    .meta-table td {
        padding: 12px 0 !important;
        border: none !important;
        font-size: 14px;
        vertical-align: top;
    }

    /* ⭐ MODERN REVIEWS CARD STYLES */
    .review-score-box {
        background: #fafbfc;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        border: 1px solid #edf2f7;
    }
    .single-user-review-row {
        padding: 20px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .single-user-review-row:last-child {
        border-bottom: none;
    }
    .review-user-badge {
        width: 45px;
        height: 45px;
        background: #313a45;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
    }
</style>

<div class="container-fluid details-hero-banner">
    <div class="container">
        <div class="prop-badge">
            <i class="fa fa-star"></i> Verified Accomodation
        </div>
        <h1 style="font-family: 'Playfair Display', serif; color: #fff; margin: 0; text-transform: uppercase; font-size: 38px; font-weight: 700;">
            {{ $room->room_type }}
        </h1>
        <p style="color: #f7c411; margin: 10px 0 0 0; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 1.5px;">
            <i class="fa fa-building"></i> Located In: {{ $room->hotel->hotel_name ?? 'Independent Property' }}
        </p>
    </div>
</div>

<div class="container" style="margin-bottom: 80px;">
    <div class="row">
        
        <div class="col-lg-8 col-md-8 col-sm-12">
            
            @php
                if (is_array($room->images)) {
                    $gallery = $room->images;
                } else {
                    $gallery = json_decode($room->images, true);
                }
                $primaryImg = (!empty($gallery) && is_array($gallery)) ? $gallery[0] : 'assets/img/hotel-facility-one.jpg';
            @endphp
            
            <div style="border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.07); margin-bottom: 25px; border: 1px solid #e9ecef; height: 420px;">
                <img src="{{ asset(ltrim($primaryImg, '/')) }}" alt="{{ $room->room_type }}" style="width: 100%; height: 100%; object-fit: cover;">
            </div>

            @if(is_array($gallery) && count($gallery) > 1)
                <div class="row" style="margin-bottom: 30px;">
                    @foreach($gallery as $imgItem)
                        <div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom: 15px;">
                            <div style="height: 100px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #ddd;">
                                <img src="{{ asset(ltrim($imgItem, '/')) }}" style="width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; cursor: zoom-in;" onmouseover="this.style.transform='scale(1.08)'" onmouseout="this.style.transform='scale(1)'">
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="info-card-wrap">
                <h4 class="section-sub-title">Room Overview & Comforts</h4>
                <p style="font-size: 15px; color: #62646a; line-height: 1.8; text-align: justify; margin-bottom: 20px;">
                    {{ $room->description ?? 'Experience world-class luxury setup with fully functional features optimized for corporate executives and holiday tourists alike.' }}
                </p>

                @if(!empty($room->amenities))
                    <div style="margin-top: 20px;">
                        @php
                            $roomAmenities = is_array($room->amenities) ? $room->amenities : json_decode($room->amenities, true);
                        @endphp
                        @if(is_array($roomAmenities))
                            @foreach($roomAmenities as $roomAmenity)
                                <div class="facility-pill">
                                    <i class="fa fa-check-circle"></i> {{ $roomAmenity }}
                                </div>
                            @endforeach
                        @endif
                    </div>
                @endif
            </div>

            @if(isset($room->hotel))
                <div class="info-card-wrap" style="background: #fafbfc; border: 1px solid #e3e6ec;">
                    <h4 class="section-sub-title">Hotel Profile: {{ $room->hotel->hotel_name }}</h4>
                    
                    <div class="row">
                        <div class="col-md-5" style="margin-bottom: 15px;">
                            <div style="border-radius: 8px; overflow: hidden; height: 210px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); border: 1px solid #ced4da;">
                                @if(!empty($room->hotel->cover_image))
                                    <img src="{{ asset(ltrim($room->hotel->cover_image, '/')) }}" alt="{{ $room->hotel->hotel_name }}" style="width: 100%; height: 100%; object-fit: cover;">
                                @else
                                    <img src="{{ asset('assets/img/hotel-facility-three.jpg') }}" alt="Hotel Default Cover" style="width: 100%; height: 100%; object-fit: cover;">
                                @endif
                            </div>
                        </div>

                        <div class="col-md-7">
                            <table class="table meta-table" style="background: transparent;">
                                <tbody>
    <tr>
        <td style="font-weight: 700; width: 30%; color: #313a45;"><i class="fa fa-map-marker" style="color: #f7c411; width: 18px;"></i> Full Address:</td>
        <td style="color: #555;">{{ $room->hotel->address }}</td>
    </tr>
    <tr>
        <td style="font-weight: 700; color: #313a45;"><i class="fa fa-globe" style="color: #f7c411; width: 18px;"></i> Region/City:</td>
        <td style="color: #555; text-transform: capitalize;">{{ $room->hotel->city }}, {{ $room->hotel->state }}</td>
    </tr>
    <tr>
        <td style="font-weight: 700; color: #313a45;"><i class="fa fa-phone" style="color: #f7c411; width: 18px;"></i> Support No:</td>
        <td style="color: #555; font-weight: 600;">
            {{ $room->hotel->user->phone_number ?? 'Contact Desk Available' }}
        </td>
    </tr>
    <tr>
        <td style="font-weight: 700; color: #313a45;"><i class="fa fa-envelope" style="color: #f7c411; width: 18px;"></i> Help Desk:</td>
        <td style="color: #555;">{{ $room->hotel->user->email ?? 'N/A' }}</td>
    </tr>
    <tr>
        <td style="font-weight: 700; color: #313a45;"><i class="fa fa-shield" style="color: #f7c411; width: 18px;"></i> Verification:</td>
        <td>
            @if(($room->hotel->status ?? 0) == 1)
                <span class="text-success" style="font-weight: 600;"><i class="fa fa-check-circle"></i> Approved Property</span>
            @else
                <span class="text-warning" style="font-weight: 600;"><i class="fa fa-clock-o"></i> Verification Pending</span>
            @endif
        </td>
    </tr>
</tbody>
                            </table>
                        </div>
                    </div>

                    @if(!empty($room->hotel->description))
                        <div style="margin-top: 15px; background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #eef0f2;">
                            <p style="font-size: 13px; color: #6c757d; font-style: italic; line-height: 1.6; margin: 0;">
                                "{{ $room->hotel->description }}"
                            </p>
                        </div>
                    @endif

                    @if(!empty($room->hotel->amenities))
                        @php
                            $hotelAmenities = is_array($room->hotel->amenities) ? $room->hotel->amenities : json_decode($room->hotel->amenities, true);
                        @endphp
                        @if(is_array($hotelAmenities))
                            <div style="margin-top: 25px; border-top: 1px dashed #dee2e6; padding-top: 20px;">
                                <h5 style="font-weight: 700; color: #313a45; margin-bottom: 12px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px;">Shared Hotel Facilities:</h5>
                                @foreach($hotelAmenities as $hotelAmenity)
                                    <div class="facility-pill" style="background: #ffffff;">
                                        <i class="fa fa-building-o" style="color: #313a45;"></i> {{ $hotelAmenity }}
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endif
                </div>
            @endif

            <div class="info-card-wrap">
                <h4 class="section-sub-title">Guest Reviews & Ratings</h4>
                
                @php
                    // Dynamic Database fetch operation tracking reviews matching this current room track
                    $roomReviews = \DB::table('reviews')
                        ->join('users', 'reviews.user_id', '=', 'users.id')
                        ->select('reviews.*', 'users.full_name')
                        ->where('reviews.room_id', $room->id)
                        ->where('reviews.status', 1)
                        ->latest()
                        ->get();

                    $totalReviewsCount = $roomReviews->count();
                    $avgRatingScore = $totalReviewsCount > 0 ? round($roomReviews->avg('rating'), 1) : 0;
                    
                    $ratingTexts = [
                        5 => 'Excellent',
                        4 => 'Very Good',
                        3 => 'Good',
                        2 => 'Average',
                        1 => 'Poor'
                    ];
                @endphp

                @if($totalReviewsCount > 0)
                    <div class="row align-items-center" style="display: flex; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 25px;">
                        <div class="col-md-4 text-center" style="margin-bottom: 15px;">
                            <div class="review-score-box">
                                <h1 style="margin: 0; font-size: 48px; font-weight: 800; color: #313a45;">{{ $avgRatingScore }}</h1>
                                <div style="color: #ffb800; margin: 5px 0; font-size: 16px;">
                                    {!! str_repeat('<i class="fa fa-star"></i>', floor($avgRatingScore)) !!}{!! $avgRatingScore - floor($avgRatingScore) >= 0.5 ? '<i class="fa fa-star-half-o"></i>' : '' !!}
                                </div>
                                <p style="margin: 0; font-size: 13px; font-weight: 700; color: #fe5d5d; text-transform: uppercase;">
                                    {{ $ratingTexts[round($avgRatingScore)] ?? 'Good Stay' }}
                                </p>
                                <small class="text-muted" style="font-size:12px;">Based on {{ $totalReviewsCount }} stays</small>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <h5 style="margin-top: 0; font-weight: 700; color: #313a45; font-size: 14px; text-transform: uppercase; margin-bottom: 15px;">Comfort Breakdown Metrics</h5>
                            @foreach([5, 4, 3, 2, 1] as $starRow)
                                @php
                                    $rowCount = $roomReviews->where('rating', $starRow)->count();
                                    $rowPercent = $totalReviewsCount > 0 ? ($rowCount / $totalReviewsCount) * 100 : 0;
                                @endphp
                                <div style="display: flex; align-items: center; margin-bottom: 6px; font-size: 13px;">
                                    <span style="width: 55px; color: #495057; font-weight: 500;">{{ $starRow }} Star</span>
                                    <div class="progress" style="flex: 1; height: 6px; margin: 0 12px; background: #eef1f6; box-shadow: none; border-radius: 10px;">
                                        <div class="progress-bar" role="progressbar" style="width: {{ $rowPercent }}%; background: #ffb800; border-radius: 10px; box-shadow: none;"></div>
                                    </div>
                                    <span class="text-muted" style="width: 30px; text-align: right;">{{ $rowCount }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="reviews-list-container">
                        @foreach($roomReviews as $revRow)
                            <div class="single-user-review-row">
                                <div style="display: flex; align-items: flex-start; flex-wrap: wrap;">
                                    <div class="review-user-badge" style="margin-right: 15px; margin-bottom: 10px;">
                                        {{ strtoupper(substr($revRow->full_name, 0, 1)) }}
                                    </div>
                                    <div style="flex: 1; min-width: 250px;">
                                        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 5px;">
                                            <h6 style="margin: 0; font-weight: 700; color: #313a45; font-size: 15px;">{{ $revRow->full_name }}</h6>
                                            <small class="text-muted" style="font-size: 12px;">
                                                <i class="fa fa-calendar-check-o"></i> {{ \Carbon\Carbon::parse($revRow->created_at)->format('d M, Y') }}
                                            </small>
                                        </div>
                                        <div style="margin-bottom: 8px;">
                                            <span style="color: #ffb800; font-size: 12px;">
                                                {!! str_repeat('<i class="fa fa-star"></i>', $revRow->rating) !!}
                                            </span>
                                            <span style="font-size: 11px; font-weight: 700; background: #e6fcf5; color: #0ca678; padding: 2px 8px; border-radius: 4px; margin-left: 6px; text-transform: uppercase;">
                                                {{ $ratingTexts[$revRow->rating] ?? 'Stay' }}
                                            </span>
                                        </div>
                                        <p style="margin: 0; color: #525f7f; font-size: 14px; line-height: 1.6; text-align: justify;">
                                            "{{ $revRow->comment ?? 'Guest profile submitted rating parameter without textual remarks context node.' }}"
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center" style="padding: 50px 20px; background: #fafbfc; border: 1px dashed #cbd5e1; border-radius: 12px; margin-top: 10px;">
                        <div style="margin-bottom: 15px;">
                            <span style="font-size: 24px; color: #e2e8f0;"><i class="fa fa-star"></i></span>
                            <span style="font-size: 36px; color: #cbd5e1; margin: 0 8px; position: relative; top: -5px;"><i class="fa fa-comments-o"></i></span>
                            <span style="font-size: 24px; color: #e2e8f0;"><i class="fa fa-star"></i></span>
                        </div>
                        
                        <h5 style="font-family: 'Poppins', sans-serif; font-weight: 700; color: #313a45; margin: 0 0 8px 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px;">
                            No Reviews Available Yet
                        </h5>
                        
                        <p style="color: #6c757d; font-size: 14px; max-width: 480px; margin: 0 auto 20px auto; line-height: 1.6;">
                            There are currently no verified guest reviews for this specific accommodation. Be the first to share your experience after your stay!
                        </p>
                
                        <div style="display: inline-flex; align-items: center; gap: 8px; background: #e6fcf5; color: #0ca678; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">
                            <i class="fa fa-shield" style="font-size: 14px;"></i> 100% Authentic & Verified Guest Reviews
                        </div>
                    </div>
                @endif
            </div>

        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">
            <div class="sticky-sidebar-box">
                
                <div style="background: #313a45; color: #fff; padding: 35px 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); border-top: 5px solid #f7c411;">
                    <span style="font-size: 11px; text-transform: uppercase; color: #adb5bd; letter-spacing: 1.5px; font-weight: 600; display: block;">Standard Night Tariff</span>
                    <h2 style="margin: 10px 0; font-weight: 700; color: #f7c411; font-size: 36px; font-family: 'Playfair Display', serif;">
                        Rs. {{ number_format($room->price_per_night, 2) }}
                    </h2>
                    <p style="font-size: 12px; color: #ced4da; margin-bottom: 25px; font-style: italic;">*Reservation values adapt based on holiday schedules</p>
                    
                    <form action="{{ route('booking.index') }}" method="POST">
                        @csrf
                        <input type="hidden" name="state_id" value="{{ $room->hotel->state_id ?? '' }}">
                        <input type="hidden" name="city_id" value="{{ $room->hotel->city_id ?? '' }}">
                        <input type="hidden" name="hotel_id" value="{{ $room->hotel_id }}">
                        <input type="hidden" name="room_id" value="{{ $room->id }}">
                        
                        <button type="submit" class="btn btn-block" style="background: #f7c411; color: #313a45; font-weight: 700; text-transform: uppercase; padding: 14px; font-size: 14px; border-radius: 6px; border: none; letter-spacing: 0.5px; transition: all 0.3s;" onmouseover="this.style.background='#ffffff'; this.style.color='#313a45';" onmouseout="this.style.background='#f7c411'; this.style.color='#313a45';">
                            Book This Room Now <i class="fa fa-chevron-right" style="margin-left: 6px; font-size: 12px;"></i>
                        </button>
                    </form>
                </div>

                <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #eef0f2; box-shadow: 0 4px 15px rgba(0,0,0,0.02);">
                    <h4 style="font-family: 'Playfair Display', serif; font-weight: 700; margin-top: 0; margin-bottom: 15px; color: #313a45; text-transform: uppercase; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 8px;">
                        Property Specs
                    </h4>
                    <ul class="list-unstyled" style="font-size: 14px; color: #495057; line-height: 2.5;">
                        <li style="border-bottom: 1px solid #f8f9fa; padding: 4px 0;">
                            <strong>Room Category:</strong> <span class="pull-right text-muted" style="color: #6c757d;">{{ $room->room_type }}</span>
                        </li>
                        <li style="border-bottom: 1px solid #f8f9fa; padding: 4px 0;">
                            <strong>Max Allowed Guests:</strong> <span class="pull-right text-muted" style="color: #6c757d;">{{ $room->max_occupancy }} Adults</span>
                        </li>
                        <li style="border-bottom: 1px solid #f8f9fa; padding: 4px 0;">
                            <strong>Available Inventory:</strong> <span class="pull-right text-success" style="font-weight: 600;">{{ $room->available_rooms }} Units Left</span>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection