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

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700&family=Poppins:wght=400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        :root {
            --primary-color: #fe5d5d;
            --secondary-color: #333;
            --bg-light: #f4f7f6;
            --text-muted: #8898aa;
            --font-main: 'Inter', sans-serif;
            --font-heading: 'Poppins', sans-serif;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg-light);
            color: #32325d;
        }

        .dashboard-header {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/assets/img/about-us-breadcrumb.jpg") no-repeat center center / cover;
            padding: 100px 0 140px;
            color: #fff;
            margin-bottom: -60px;
            text-align: center;
        }

        .dashboard-header h2 {
            font-family: var(--font-heading);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 10px;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
            background: #fff;
            transition: all 0.3s ease;
        }

        .profile-sidebar {
            position: sticky;
            top: 20px;
        }

        .user-info-card {
            padding: 40px 20px;
            text-align: center;
        }

        .user-avatar {
            width: 90px;
            height: 90px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: 700;
            margin: 0 auto 20px;
            box-shadow: 0 10px 20px rgba(254, 93, 93, 0.2);
        }

        .nav-pills-custom .nav-link-btn {
            color: #525f7f;
            padding: 15px 25px;
            font-weight: 500;
            border-radius: 8px;
            margin-bottom: 5px;
            transition: all 0.2s;
            display: block;
            text-decoration: none;
            cursor: pointer;
        }

        .nav-pills-custom .nav-item.active .nav-link-btn {
            background-color: #f6f9fc;
            color: var(--primary-color);
            box-shadow: inset 4px 0 0 var(--primary-color);
            font-weight: 600;
        }

        .booking-item {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #edf2f7;
        }

        .booking-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .room-thumb {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            object-fit: cover;
        }

        .status-pill {
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-block;
        }

        .status-confirmed, .status-checked_in, .status-checked_out {
            background: #e6fcf5;
            color: #0ca678;
        }

        .status-pending {
            background: #fff9db;
            color: #f08c00;
        }

        .status-cancelled {
            background: #fff5f5;
            color: #f03e3e;
        }

        .rating-input-section {
            background: #fcfdfe;
            border: 1px dashed #e2e8f0;
            border-radius: 10px;
            padding: 18px;
            margin-top: 15px;
        }

        .star-box-wrapper {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            margin-bottom: 4px;
        }

        .star-box-wrapper input {
            display: none;
        }

        .star-box-wrapper label {
            font-size: 26px;
            color: #cbd5e1;
            cursor: pointer;
            transition: color 0.15s ease-in-out;
            margin-right: 6px;
        }

        .star-box-wrapper label:hover,
        .star-box-wrapper label:hover ~ label,
        .star-box-wrapper input:checked ~ label {
            color: #ffb800;
        }

        .review-text-field {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            width: 100%;
            box-sizing: border-box;
            resize: none;
            transition: all 0.3s;
        }

        .review-text-field:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(254, 93, 93, 0.1);
        }

        .btn-review-send {
            background: var(--secondary-color);
            color: white;
            border: none;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 10px 22px;
            border-radius: 6px;
            transition: all 0.2s;
            height: 42px;
        }

        .btn-review-send:hover {
            background: var(--primary-color);
            transform: translateY(-1px);
        }

        .custom-modal-overlay {
            display: none;
            position: fixed;
            z-index: 99999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(18, 38, 63, 0.5);
            backdrop-filter: blur(4px);
        }

        .modal-premium {
            background: #fff;
            margin: 5% auto;
            width: 90%;
            max-width: 750px;
            border-radius: 20px;
            overflow: hidden;
            border: none;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            position: relative;
        }

        .modal-premium .modal-header {
            background: var(--primary-color);
            color: #fff;
            padding: 25px 35px;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-info-box {
            background: #f8fafc;
            border-radius: 15px;
            padding: 20px;
            margin-top: 15px;
        }

        .modal-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .modal-info-item span {
            color: var(--text-muted);
        }

        .modal-info-item strong {
            color: #32325d;
        }
    </style>

    <div class="dashboard-header">
        <div class="container">
            <h2 style="color:white;">Welcome Back, {{ explode(' ', Auth::user()->full_name)[0] }}!</h2>
            <p style="color:white;">You have {{ $bookings->count() }} bookings in your history.</p>
        </div>
    </div>

    <div class="container" style="padding-bottom: 100px;">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible" role="alert" style="margin-top: 80px; border-radius: 8px;">
                <strong>Success!</strong> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger" style="margin-top: 80px; border-radius: 8px;">
                <strong>Error!</strong> {{ session('error') }}
            </div>
        @endif

        <div class="row" style="margin-top: 20px;">
            <div class="col-lg-3 col-md-4">
                <div class="profile-sidebar">
                    <div class="card user-info-card" style="margin-bottom: 20px;">
                        <div class="user-avatar">
                            {{ strtoupper(substr(Auth::user()->full_name, 0, 1)) }}
                        </div>
                        <h5 style="font-weight: 700; margin-bottom: 5px;">{{ Auth::user()->full_name }}</h5>
                        <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 15px;">{{ Auth::user()->email }}</p>
                        <div style="display: inline-block; background: #f0f3f6; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--primary-color);">
                            Member since {{ Auth::user()->created_at ? Auth::user()->created_at->format('M Y') : 'N/A' }}
                        </div>
                    </div>

                    <div class="card p-2" style="padding: 10px;">
                        <ul class="nav nav-pills nav-stacked nav-pills-custom" style="padding-left: 0; list-style: none; margin-bottom: 0;">
                            <li class="nav-item active">
                                <a class="nav-link-btn">
                                    <i class="fa fa-home" style="margin-right: 10px; width: 20px;"></i> Dashboard
                                </a>
                            </li>
                            <li class="divider" style="height: 1px; background: #eee; margin: 10px 0;"></li>
                            <li>
                                <a class="text-danger nav-link-btn" style="color: #dc3545;" href="#"
                                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                    <i class="fa fa-sign-out" style="margin-right: 10px; width: 20px;"></i> Logout
                                </a>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-9 col-md-8">
                <div id="panel-dashboard" class="card p-4" style="padding: 25px;">
                    <h4 class="mt-3" style="font-family: var(--font-heading); font-weight: 700; padding: 15px 0 15px 10px; margin: 0;">
                        Recent Activities
                    </h4>

                    @forelse($bookings as $booking)
                        @php
                            $bStatus = strtolower($booking->status ?? 'pending');
                            $reviewRecord = DB::table('reviews')->where('booking_id', $booking->id)->first();
                            
                            // 👑 REAL TIME FIX: Native pure PHP date parser string token interpolation
                            $formattedIn = $booking->check_in_date ? date('d M Y h:i A', strtotime($booking->check_in_date)) : 'N/A';
                            $formattedOut = $booking->check_out_date ? date('d M Y h:i A', strtotime($booking->check_out_date)) : 'N/A';
                        @endphp
                        <div class="card booking-item">
                            <div class="row align-items-center" style="display: flex; flex-wrap: wrap; align-items: center;">
                                <div class="col-md-2 col-sm-3 col-xs-12">
                                    @php
                                        $roomImage = asset('assets/img/room-image-five.png'); 
                                        if ($booking->room && $booking->room->images) {
                                            $imagesArray = is_array($booking->room->images) ? $booking->room->images : json_decode($booking->room->images, true);
                                            if (!empty($imagesArray) && is_array($imagesArray)) {
                                                $roomImage = asset(reset($imagesArray)); 
                                            } else {
                                                $roomImage = asset($booking->room->images);
                                            }
                                        }
                                    @endphp
                                    <img src="{{ $roomImage }}" class="room-thumb" style="width: 100%; height: 80px; object-fit: cover; border-radius: 8px;">
                                </div>
                                <div class="col-md-4 col-sm-5 col-xs-12" style="padding-left: 20px;">
                                    <h5 style="font-family: var(--font-heading); font-weight: 700; margin: 0 0 5px; color: #444;">
                                        {{ $booking->room->room_type ?? 'Room' }}
                                    </h5>
                                    <p style="font-size: 13px; color: #878787; margin: 0 0 5px 0; line-height: 1.4;">
                                        <i class="fa fa-calendar-check-o text-success"></i> <strong>In:</strong> {{ $formattedIn }}<br>
                                        <i class="fa fa-calendar-times-o text-danger"></i> <strong>Out:</strong> {{ $formattedOut }}
                                    </p>
                                    <span class="status-pill status-{{ $bStatus }}">
                                        {{ str_replace('_', ' ', strtoupper($bStatus)) }}
                                    </span>
                                </div>
                                <div class="col-md-3 col-sm-4 col-xs-6 text-md-center mt-3 mt-md-0">
                                    <p style="font-size: 12px; text-transform: uppercase; color: #878787; margin-bottom: 2px; font-weight: 700;">Amount Paid</p>
                                    <h5 style="font-family: 'Inter', sans-serif; font-weight: 700; color: #444; margin: 0;">
                                        ₹{{ number_format($booking->total_price, 2) }}
                                    </h5>
                                </div>
                                <div class="col-md-3 col-sm-12 col-xs-6 text-right mt-3 mt-md-0" style="text-align: right;">
                                    <button class="btn btn-warning btn-md" onclick="window.openDetail({{ $booking->id }})"
                                            data-in-formatted="{{ $formattedIn }}"
                                            data-out-formatted="{{ $formattedOut }}"
                                            id="btn-view-{{ $booking->id }}"
                                            style="text-transform: uppercase; font-weight: 700; background: #ffc107; border: none; padding: 10px 20px; border-radius: 4px; color:#000;">
                                        View Details
                                    </button>
                                </div>
                            </div>

                            @if(($bStatus == 'confirmed' || $bStatus == 'checked_in' || $bStatus == 'checked_out') && !$reviewRecord)
                                <div class="rating-input-section">
                                    <h6 style="font-weight:600; font-size:13px; margin-bottom:10px; color:#4a5568;">
                                        <i class="fa fa-star text-warning"></i> Share Your Stay Experience & Rate this Room
                                    </h6>
                                    <form action="{{ route('submit.review') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="booking_id" value="{{ $booking->id }}">
                                        <input type="hidden" name="room_id" value="{{ $booking->room_id }}">
                                        
                                        <div class="star-box-wrapper">
                                            <input type="radio" id="star5-{{ $booking->id }}" name="rating" value="5" data-label="Excellent" required onclick="updateStarLabel(this, '{{ $booking->id }}')" />
                                            <label for="star5-{{ $booking->id }}"><i class="fa fa-star"></i></label>
                                            
                                            <input type="radio" id="star4-{{ $booking->id }}" name="rating" value="4" data-label="Very Good" onclick="updateStarLabel(this, '{{ $booking->id }}')" />
                                            <label for="star4-{{ $booking->id }}"><i class="fa fa-star"></i></label>
                                            
                                            <input type="radio" id="star3-{{ $booking->id }}" name="rating" value="3" data-label="Good" onclick="updateStarLabel(this, '{{ $booking->id }}')" />
                                            <label for="star3-{{ $booking->id }}"><i class="fa fa-star"></i></label>
                                            
                                            <input type="radio" id="star2-{{ $booking->id }}" name="rating" value="2" data-label="Average" onclick="updateStarLabel(this, '{{ $booking->id }}')" />
                                            <label for="star2-{{ $booking->id }}"><i class="fa fa-star"></i></label>
                                            
                                            <input type="radio" id="star1-{{ $booking->id }}" name="rating" value="1" data-label="Poor" onclick="updateStarLabel(this, '{{ $booking->id }}')" />
                                            <label for="star1-{{ $booking->id }}"><i class="fa fa-star"></i></label>
                                        </div>

                                        <div style="margin-top: -5px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #ffb800;">
                                            Rating: <span id="star-text-{{ $booking->id }}">Select Stars</span>
                                        </div>
                                        
                                        <div style="display:flex; gap:12px; align-items: center; margin-top: 5px; flex-wrap:wrap;">
                                            <div style="flex:1; min-width: 240px;">
                                                <textarea name="comment" class="review-text-field" rows="1" placeholder="Type room cleanliness, behavior, or feedback here..."></textarea>
                                            </div>
                                            <button type="submit" class="btn-review-send">Submit Review</button>
                                        </div>
                                    </form>
                                </div>
                            @elseif($reviewRecord)
                                @php
                                    $ratingLabels = [
                                        1 => 'Poor',
                                        2 => 'Average',
                                        3 => 'Good',
                                        4 => 'Very Good',
                                        5 => 'Excellent'
                                    ];
                                    $currentLabel = $ratingLabels[$reviewRecord->rating] ?? 'Rated';
                                @endphp
                                <div class="mt-3 p-2" style="font-size:12px; color: #718096; background: #f8fafc; border-radius: 6px; display: inline-block;">
                                    <span style="color:#0ca678; font-weight: 600;"><i class="fa fa-check-circle"></i> Review Submitted:</span> 
                                    <span style="color: #ffb800; margin-left: 5px;">{!! str_repeat('<i class="fa fa-star"></i>', $reviewRecord->rating) !!}</span>
                                    
                                    <span style="background: #fff9db; color: #f08c00; font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 5px;">
                                        {{ strtoupper($currentLabel) }}
                                    </span>

                                    @if($reviewRecord->comment)
                                        <span class="text-muted" style="font-style: italic; margin-left: 8px;">"{{ $reviewRecord->comment }}"</span>
                                    @endif
                                </div>
                            @endif

                        </div>
                    @empty
                        <div class="text-center" style="padding: 50px 0;">
                            <p style="color: var(--text-muted);">No recent bookings found.</p>
                            <a href="{{ route('home') }}" class="btn" style="background: var(--primary-color); color: #fff; border-radius: 50px; padding: 10px 30px;">Book Now</a>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="custom-modal-overlay" id="myDetailModal">
        <div class="modal-premium">
            <div class="modal-header">
                <h4 id="m_title" style="margin: 0; font-family: var(--font-heading); font-weight: 700; color: #fff;">Room Details</h4>
                <span onclick="closeMyModal()" style="font-size: 28px; cursor: pointer; color: #fff; line-height: 1;">&times;</span>
            </div>
            <div class="modal-body" id="m_body" style="padding: 40px;"></div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function updateStarLabel(element, bookingId) {
            var labelText = element.getAttribute('data-label');
            document.getElementById('star-text-' + bookingId).innerText = labelText;
        }

        window.openDetail = function (id) {
            try {
                var data = {!! $bookings->toJson() !!};
                var b = data.find(function (item) { return item.id == id; });
                if (!b) return;

                var room = b.room || { room_type: 'Room', images: '' };
                var pStatus = b.payment_status ? b.payment_status.toUpperCase() : 'PENDING';
                
                // Fetching formatted dynamic raw date-time strings from targeted data-attributes safely
                var checkIn = jQuery('#btn-view-' + id).attr('data-in-formatted') || 'N/A';
                var checkOut = jQuery('#btn-view-' + id).attr('data-out-formatted') || 'N/A';
                
                var bookingStatusText = b.status ? b.status.toUpperCase().replace('_', ' ') : 'PENDING';
                var roomNameDisplay = room.room_type ? room.room_type : 'Room';

                var singleImage = '';
                if (room.images) {
                    if (Array.isArray(room.images)) {
                        singleImage = room.images[0];
                    } else if (typeof room.images === 'string') {
                        var cleanStr = room.images.replace(/[\[\]"']/g, '').trim();
                        singleImage = cleanStr.split(',')[0].trim();
                    }
                }

                var baseUrl = window.location.origin + '/disha_vishram_sthan/public/';
                var imageUrl = singleImage ? baseUrl + singleImage : baseUrl + 'assets/img/room-image-five.png';

                var badgeBg = '#fff9db';
                var badgeColor = '#f08c00';
                if(pStatus === 'PAID' || pStatus === 'SUCCESS') {
                    badgeBg = '#e6fcf5';
                    badgeColor = '#0ca678';
                } else if(pStatus === 'FAILED') {
                    badgeBg = '#fff5f5';
                    badgeColor = '#f03e3e';
                }

                var content = '<div class="row" style="display: flex; flex-wrap: wrap;">' +
                    '<div class="col-md-5" style="margin-bottom: 20px;">' +
                        '<img src="' + imageUrl + '" style="width:100%; border-radius:15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); object-fit: cover; height: 200px;" onerror="this.src=\'' + baseUrl + 'assets/img/room-image-five.png\'">' +
                    '</div>' +
                    '<div class="col-md-7">' +
                    '<h4 style="font-weight: 700; margin-top: 0; margin-bottom: 20px; color: #32325d; font-family: var(--font-heading);">' + roomNameDisplay + '</h4>' +
                    '<div class="modal-info-box">' +
                    '<div class="modal-info-item"><span>Check In</span><strong>' + checkIn + '</strong></div>' +
                    '<div class="modal-info-item"><span>Check Out</span><strong>' + checkOut + '</strong></div>' +
                    '<div class="modal-info-item"><span>Booking Number</span><strong>' + (b.booking_number || 'N/A') + '</strong></div>' +
                    '<div class="modal-info-item"><span>Booking Status</span><strong style="color:#fe5d5d">' + bookingStatusText + '</strong></div>' +
                    '</div>' +
                    '<div style="margin-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">' +
                    '<div><p style="font-size: 13px; color: #8898aa; margin:0;">Total Amount Paid</p><h3 style="margin:0; font-weight: 800; color: #32325d;">₹' + Number(b.total_price).toLocaleString('en-IN', {minimumFractionDigits: 2}) + '</h3></div>' +
                    '<div style="text-align:right;"><span style="display:inline-block; padding: 6px 16px; border-radius:50px; font-size:12px; font-weight:700; background:'+badgeBg+'; color:'+badgeColor+'; text-transform: uppercase;">PAYMENT: ' + pStatus + '</span></div>' +
                    '</div>' +
                    '</div></div>';

                document.getElementById('m_body').innerHTML = content;
                document.getElementById('m_title').innerText = "Booking Details (" + (b.booking_number || '#'+b.id) + ")";
                document.getElementById('myDetailModal').style.display = 'block';
                document.body.style.overflow = 'hidden';
            } catch (e) { 
                console.error("Modal Error logs captured: ", e); 
            }
        };

        window.closeMyModal = function () {
            document.getElementById('myDetailModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        };

        window.onclick = function (e) { 
            if (e.target.id == 'myDetailModal') closeMyModal(); 
        }
    </script>
@endpush