@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Room</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Room</h1>
            <!-- end page-header -->

            <!-- Success/Error Messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa fa-exclamation-triangle"></i> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <div class="btn-group" role="group">
                            <a href="{{ route('rooms.create') }}" class="btn btn-custom">
                                <i class="fa fa-plus"></i> Add Room
                            </a>
                            @hasrole('admin')
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-custom dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                        <i class="fa fa-upload"></i> Import
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="{{ route('rooms.showImportForm') }}">
                                            <i class="fa fa-file-excel"></i> Import from Excel
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="{{ route('rooms.downloadTemplate') }}">
                                            <i class="fa fa-download"></i> Download Template
                                        </a>
                                    </div>
                                </div>
                            @endhasrole
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <!-- Room Statistics -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="room-stats">
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">{{ $rooms->count() }}</div>
                                            <div class="stat-label">Total Rooms</div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">
                                                {{ $rooms->where('status_room', 'checked_in')->count() }}</div>
                                            <div class="stat-label">Checked In</div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">
                                                {{ $rooms->where('status_room', 'checked_out')->count() }}</div>
                                            <div class="stat-label">Checked Out</div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">
                                                {{ $rooms->whereNotNull('guestname')->where('guestname', '!=', '')->count() }}
                                            </div>
                                            <div class="stat-label">With Guests</div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">{{ $rooms->where('status_bg', true)->count() }}</div>
                                            <div class="stat-label">BG Active</div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="stat-card">
                                            <div class="stat-number">
                                                {{ $rooms->whereNotNull('qrcode_cast')->where('qrcode_cast', '!=', 'noimage.jpg')->count() }}
                                            </div>
                                            <div class="stat-label">With QR Code</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th class="text-nowrap">ID</th>
                                <th class="text-nowrap">Room</th>
                                <th class="text-nowrap">Room Type</th>
                                <th class="text-nowrap">Guest Name</th>
                                <th class="text-nowrap">Guest Image</th>
                                <th class="text-wrap">Description</th>
                                <th class="text-nowrap">WiFi Cast</th>
                                <th class="text-nowrap">Background Image</th>
                                <th class="text-nowrap">Background Active</th>
                                <th class="text-nowrap">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rooms as $room)
                                <tr>
                                    <td>{{ $room->id }}</td>
                                    <td>
                                        <div class="room-info">
                                            <strong>{{ $room->room }}</strong>
                                            @if ($room->status_room === 'checked_in')
                                                <span class="badge badge-success badge-xs ml-1">Checked In</span>
                                            @elseif ($room->status_room === 'vacant')
                                                <span class="badge badge-warning badge-xs ml-1">Vacant</span>
                                            @else
                                                <span class="badge badge-secondary badge-xs ml-1">Checked Out</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{{ $room->roomType->name ?? 'No Room Type' }}</td>
                                    <td>{{ $room->guestname ?: '-' }}</td>
                                    <td>
                                        @if ($room->guest_image && $room->guest_image != 'noimage.jpg')
                                            <img src="{{ asset('storage/welcome_guest/' . $room->guest_image) }}"
                                                alt="{{ $room->guestname }}" width="50" height="50"
                                                style="object-fit: cover; border-radius: 4px;" class="img-thumbnail">
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-user-circle fa-2x text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($room->description)
                                            <span title="{{ $room->description }}" style="color: black !important;">
                                                {{ Str::limit($room->description, 50) }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($room->qrcode_cast && $room->qrcode_cast != 'noimage.jpg')
                                            <div class="qr-code-preview">
                                                <img src="{{ asset('storage/qr_codes/' . $room->qrcode_cast) }}"
                                                    alt="QR Code" width="50" height="50" class="img-thumbnail"
                                                    title="WiFi: {{ $room->username_cast }}">
                                                <small class="d-block text-muted mt-1">
                                                    {{ Str::limit($room->username_cast, 15) }}
                                                </small>
                                            </div>
                                        @else
                                            <div class="no-qr-placeholder text-center">
                                                <i class="fa fa-qrcode fa-2x text-muted"></i>
                                                <small class="d-block text-muted">No QR</small>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($room->background_img && $room->background_img != 'noimage.jpg')
                                            <img src="{{ asset('storage/room_background/' . $room->background_img) }}"
                                                alt="Background Image" width="50" height="50"
                                                style="object-fit: cover; border-radius: 4px;" class="img-thumbnail">
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="switcher">
                                            <input type="checkbox" class="active-checkbox"
                                                name="switcher_checkbox_{{ $room->id }}"
                                                id="switcher_checkbox_{{ $room->id }}"
                                                {{ $room->status_bg ? 'checked' : '' }} value="1"
                                                data-id="{{ $room->id }}">
                                            <label for="switcher_checkbox_{{ $room->id }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('rooms.show', $room->id) }}" class="btn btn-custom"
                                                title="View">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{{ route('rooms.edit', $room->id) }}" class="btn btn-custom"
                                                title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <!-- Improved delete button with proper disabled state -->
                                            @if ($room->status_room === 'checked_in')
                                                <button type="button" class="btn btn-custom btn-delete-disabled"
                                                    title="Cannot delete - Room is checked in"
                                                    onclick="showCheckedInAlert('{{ $room->room }}')" disabled>
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            @else
                                                <button type="button" class="btn btn-custom btn-delete-enabled"
                                                    title="Delete room"
                                                    onclick="confirmDelete({{ $room->id }}, '{{ $room->room }}')">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            @endif
                                        </div>

                                        <form id="delete-form-{{ $room->id }}"
                                            action="{{ route('rooms.destroy', $room->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <style>
        .room-stats {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            margin-bottom: 1rem;
        }

        .stat-card {
            text-align: center;
            padding: 0.75rem;
            background-color: white;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: bold;
            color: #495057;
            margin-bottom: 0.25rem;
        }

        .stat-label {
            font-size: 0.75rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .room-info {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .badge-xs {
            font-size: 0.65rem;
            padding: 0.15rem 0.4rem;
        }

        .no-image-placeholder,
        .no-qr-placeholder {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            border: 1px dashed #dee2e6;
            border-radius: 4px;
        }

        .qr-code-preview {
            text-align: center;
        }

        .img-thumbnail {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            max-width: 50px;
            max-height: 50px;
        }

        .btn-group .btn {
            margin-right: 2px;
        }

        .btn-group .btn:last-child {
            margin-right: 0;
        }

        .switcher {
            display: flex;
            justify-content: center;
        }

        .dropdown-menu {
            border-radius: 6px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid #dee2e6;
            min-width: 180px;
        }

        .dropdown-menu-right {
            right: 0;
            left: auto;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            color: #495057;
            transition: all 0.2s ease;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #007bff;
        }

        .dropdown-item i {
            margin-right: 0.5rem;
            width: 16px;
            text-align: center;
        }

        .dropdown-divider {
            margin: 0.25rem 0;
            border-top: 1px solid #e9ecef;
        }

        .alert {
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
            .stat-card {
                margin-bottom: 0.5rem;
            }

            .btn-group {
                flex-direction: column;
            }

            .btn-group .btn {
                margin-bottom: 2px;
                margin-right: 0;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Wait for DataTable to be initialized
            setTimeout(function() {
                const searchInput = document.querySelector('#data-table-default_filter input');
                if (searchInput) {
                    searchInput.placeholder = 'Search rooms, guests, descriptions...';
                }
            }, 100);
        });

        document.addEventListener('DOMContentLoaded', (event) => {
            const switches = document.querySelectorAll('.active-checkbox');
            let pendingUpdates = [];
            let updateTimeout;

            switches.forEach(switchEl => {
                switchEl.addEventListener('change', function() {
                    const roomId = this.dataset.id;
                    const isChecked = this.checked;

                    // Add this update to pending updates
                    pendingUpdates.push({
                        id: roomId,
                        status_bg: isChecked ? 1 : 0
                    });

                    // Clear existing timeout
                    if (updateTimeout) {
                        clearTimeout(updateTimeout);
                    }

                    // Set a new timeout to send updates
                    updateTimeout = setTimeout(() => {
                        sendUpdates();
                    }, 500); // Wait for 500ms before sending updates
                });
            });

            function sendUpdates() {
                if (pendingUpdates.length === 0) return;

                fetch('{{ route('rooms.updateStatus') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            updates: pendingUpdates
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error(
                                    `HTTP error! status: ${response.status}, message: ${text}`);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Statuses updated successfully:', data);
                        // Clear pending updates
                        pendingUpdates = [];
                    })
                    .catch(error => {
                        console.error('Error:', error.message);
                        // Revert switch states on error
                        pendingUpdates.forEach(update => {
                            const switchEl = document.querySelector(`#switcher_checkbox_${update.id}`);
                            if (switchEl) {
                                switchEl.checked = !switchEl.checked;
                            }
                        });
                        // Clear pending updates
                        pendingUpdates = [];
                    });
            }

            // Enhanced delete confirmation function with status check
            window.confirmDelete = function(roomId, roomName, roomStatus) {
                // Check if room is checked in
                if (roomStatus === 'checked_in') {
                    alert(
                        `Cannot delete room "${roomName}" because it is currently checked in. Please check out the guest first.`
                    );
                    return false;
                }

                // Standard confirmation for checked out rooms
                if (confirm(
                        `Are you sure you want to delete room "${roomName}"? This action cannot be undone.`)) {
                    document.getElementById(`delete-form-${roomId}`).submit();
                }
            };

            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    if (alert.querySelector('.close')) {
                        alert.querySelector('.close').click();
                    }
                });
            }, 5000);
        });
    </script>
@endsection