@extends('layouts.app')

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

        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('apk.index') }}">APK Management</a></li>
                <li class="breadcrumb-item active">Assign to Rooms</li>
            </ol>

            <h1 class="page-header">Assign APK to Rooms</h1>

            <!-- APK Information Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">APK Information</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="font-weight-bold">Version Name:</td>
                                    <td>{{ $apkVersion->version_name }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">File Size:</td>
                                    <td>{{ $apkVersion->formatted_file_size }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Original Filename:</td>
                                    <td>{{ $apkVersion->original_filename }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="font-weight-bold">Uploaded:</td>
                                    <td>{{ $apkVersion->created_at->format('M j, Y g:i A') }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Uploaded by:</td>
                                    <td>{{ $apkVersion->uploader->name ?? 'Unknown' }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Status:</td>
                                    <td>
                                        <span
                                            class="badge badge-{{ $apkVersion->status === 'active' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($apkVersion->status) }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    @if ($apkVersion->description)
                        <div class="mt-3">
                            <strong>Description:</strong>
                            <p class="mt-2">{{ $apkVersion->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Room Assignment Form -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Select Rooms for Assignment</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form action="{{ route('apk.assign.store', $apkVersion->id) }}" method="POST" id="assignmentForm">
                        @csrf

                        <!-- Room Selection Controls -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="search">Search Rooms</label>
                                    <input type="text" class="form-control" id="search"
                                        placeholder="Search by room name or guest name..." onkeyup="filterRooms()">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="d-block">
                                        <button type="button" class="btn btn-sm btn-custom" onclick="selectAll()">
                                            <i class="fa fa-check-square"></i> Select All
                                        </button>
                                        <button type="button" class="btn btn-sm btn-custom" onclick="selectNone()">
                                            <i class="fa fa-square-o"></i> Select None
                                        </button>
                                        <button type="button" class="btn btn-sm btn-custom" onclick="selectUnassigned()">
                                            <i class="fa fa-plus-square"></i> Select Unassigned
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Rooms Grid -->
                        <div class="row" id="roomsContainer">
                            @foreach ($rooms as $room)
                                @php
                                    $isAssigned = isset($currentAssignments[$room->id]);
                                    $assignment = $currentAssignments[$room->id] ?? null;
                                    $hasPendingAssignment = $room->pendingApkAssignment !== null;
                                    $currentApk = $room->currentApkAssignment;
                                    $isDisabled = $hasPendingAssignment; // Disable if room has pending assignment
                                @endphp
                                <div class="col-md-6 col-lg-4 mb-3 room-item"
                                    data-room-name="{{ strtolower($room->room) }}"
                                    data-guest-name="{{ strtolower($room->guestname ?? '') }}">
                                    <div
                                        class="card {{ $isAssigned ? 'border-info' : '' }} {{ $isDisabled ? 'disabled-room' : '' }}">
                                        <div class="card-body">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input room-checkbox"
                                                    id="room_{{ $room->id }}" name="room_ids[]"
                                                    value="{{ $room->id }}" {{ $isAssigned ? 'checked' : '' }}
                                                    {{ $isDisabled ? 'disabled' : '' }}
                                                    data-assigned="{{ $isAssigned ? 'true' : 'false' }}"
                                                    data-disabled="{{ $isDisabled ? 'true' : 'false' }}">
                                                <label class="custom-control-label" for="room_{{ $room->id }}">
                                                    <strong>{{ $room->room }}</strong>
                                                    @if ($isDisabled)
                                                        <i class="fa fa-lock text-warning ml-1"
                                                            title="Room has pending assignment"></i>
                                                    @endif
                                                </label>
                                            </div>

                                            @if ($room->guestname)
                                                <p class="text-muted small mb-2">
                                                    <i class="fa fa-user"></i> {{ $room->guestname }}
                                                </p>
                                            @endif

                                            <!-- Current APK Status -->
                                            @if ($currentApk)
                                                <div class="mt-2 mb-2">
                                                    <small class="text-muted">Current APK:</small>
                                                    <div class="small">
                                                        <strong>{{ $currentApk->apkVersion->version_name }}</strong>
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => $currentApk->status,
                                                        ])
                                                    </div>
                                                </div>
                                            @endif

                                            @if ($isAssigned)
                                                <div class="mt-2">
                                                    <span class="badge badge-info" style="color: white !important">Currently
                                                        Assigned</span>
                                                    <div class="small text-muted mt-1">
                                                        Status:
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => $assignment->status,
                                                        ])
                                                    </div>
                                                    @if ($assignment->assigned_at)
                                                        <div class="small text-muted">
                                                            Assigned: {{ $assignment->assigned_at->format('M j, g:i A') }}
                                                        </div>
                                                    @endif
                                                </div>
                                            @elseif($isDisabled)
                                                <div class="mt-2">
                                                    <span class="badge badge-warning"
                                                        style="color: white !important">Pending Assignment</span>
                                                    <div class="small text-warning mt-1">
                                                        <i class="fa fa-exclamation-triangle"></i>
                                                        Cannot assign until pending status resolves
                                                    </div>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <span class="badge badge-secondary"
                                                        style="color: white !important">Available for Assignment</span>
                                                </div>
                                            @endif

                                            @if ($room->status_room)
                                                <div class="small text-muted mt-1">
                                                    Room Status: {{ $room->status_room }}
                                                </div>
                                            @endif

                                            <!-- Room History Link -->
                                            <div class="mt-2">
                                                <a href="{{ route('apk.room.history', $room->id) }}"
                                                    class="btn btn-custom btn-sm">
                                                    <i class="fa fa-history"></i> View History
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- No rooms message -->
                        <div id="noRoomsMessage" class="text-center text-muted py-4" style="display: none;">
                            <i class="fa fa-search fa-3x mb-3"></i>
                            <p>No rooms match your search criteria.</p>
                        </div>

                        <!-- Assignment Notes -->
                        <div class="form-group mt-4">
                            <label for="notes">Assignment Notes</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"
                                placeholder="Optional notes about this assignment...">{{ old('notes') }}</textarea>
                            <small class="form-text text-muted">
                                These notes will be visible in the assignment history and logs.
                            </small>
                        </div>

                        <!-- Assignment Summary -->
                        <div class="alert alert-info" id="assignmentSummary">
                            <h6><i class="fa fa-info-circle"></i> Assignment Summary</h6>
                            <p class="mb-0">
                                <span id="selectedCount">0</span> room(s) selected for assignment.
                                <span id="newAssignmentCount">0</span> new assignment(s) will be created.
                            </p>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group mb-0">
                            <button type="submit" class="btn btn-custom" id="assignBtn">
                                <i class="fa fa-share"></i> Assign to Selected Rooms
                            </button>
                            <a href="{{ route('apk.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back to APK List
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Current Assignments Panel -->
            @if ($currentAssignments->isNotEmpty())
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h4 class="panel-title">Current Assignments for this APK</h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Room</th>
                                        <th>Guest</th>
                                        <th>Status</th>
                                        <th>Assigned</th>
                                        <th>Installed</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($currentAssignments as $assignment)
                                        <tr>
                                            <td>{{ $assignment->room->room }}</td>
                                            <td>{{ $assignment->room->guestname ?? '-' }}</td>
                                            <td>
                                                @include('pages.apk.components.status-badge', [
                                                    'status' => $assignment->status,
                                                ])
                                            </td>
                                            <td>{{ $assignment->assigned_at->format('M j, Y g:i A') }}</td>
                                            <td>
                                                {{ $assignment->installed_at ? $assignment->installed_at->format('M j, Y g:i A') : '-' }}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-custom"
                                                    onclick="showAssignmentDetails({{ $assignment->id }})">
                                                    <i class="fa fa-eye"></i> Details
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <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>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            updateAssignmentSummary();

            // Add event listeners to checkboxes
            document.querySelectorAll('.room-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', updateAssignmentSummary);
            });
        });

        function filterRooms() {
            const searchTerm = document.getElementById('search').value.toLowerCase();
            const roomItems = document.querySelectorAll('.room-item');
            let visibleCount = 0;

            roomItems.forEach(item => {
                const roomName = item.getAttribute('data-room-name');
                const guestName = item.getAttribute('data-guest-name');
                const isVisible = roomName.includes(searchTerm) || guestName.includes(searchTerm);

                if (isVisible) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            // Show/hide no results message
            const noRoomsMessage = document.getElementById('noRoomsMessage');
            if (visibleCount === 0) {
                noRoomsMessage.style.display = 'block';
            } else {
                noRoomsMessage.style.display = 'none';
            }
        }

        function selectAll() {
            const visibleCheckboxes = getVisibleCheckboxes();
            visibleCheckboxes.forEach(checkbox => {
                checkbox.checked = true;
            });
            updateAssignmentSummary();
        }

        function selectNone() {
            const visibleCheckboxes = getVisibleCheckboxes();
            visibleCheckboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
            updateAssignmentSummary();
        }

        function selectUnassigned() {
            const visibleCheckboxes = getVisibleCheckboxes();
            visibleCheckboxes.forEach(checkbox => {
                const isAssigned = checkbox.getAttribute('data-assigned') === 'true';
                const isDisabled = checkbox.disabled;
                if (!isDisabled) {
                    checkbox.checked = !isAssigned;
                }
            });
            updateAssignmentSummary();
        }

        function getVisibleCheckboxes() {
            const visibleItems = Array.from(document.querySelectorAll('.room-item'))
                .filter(item => item.style.display !== 'none');

            return visibleItems.map(item => item.querySelector('.room-checkbox'))
                .filter(checkbox => !checkbox.disabled); // Exclude disabled checkboxes
        }

        function updateAssignmentSummary() {
            const allCheckboxes = document.querySelectorAll('.room-checkbox');
            const checkedCheckboxes = document.querySelectorAll('.room-checkbox:checked');

            let newAssignments = 0;
            checkedCheckboxes.forEach(checkbox => {
                const isCurrentlyAssigned = checkbox.getAttribute('data-assigned') === 'true';
                if (!isCurrentlyAssigned) {
                    newAssignments++;
                }
            });

            document.getElementById('selectedCount').textContent = checkedCheckboxes.length;
            document.getElementById('newAssignmentCount').textContent = newAssignments;

            // Enable/disable submit button
            const assignBtn = document.getElementById('assignBtn');
            if (checkedCheckboxes.length > 0) {
                assignBtn.disabled = false;
                assignBtn.innerHTML = '<i class="fa fa-share"></i> Assign to Selected Rooms';
            } else {
                assignBtn.disabled = true;
                assignBtn.innerHTML = '<i class="fa fa-share"></i> Select Rooms to Assign';
            }
        }

        function showAssignmentDetails(assignmentId) {
            // This function can be implemented to show detailed assignment information
            // For now, we'll just show an alert
            alert('Assignment details functionality can be implemented here.');
        }
    </script>

    <style>
        .card {
            transition: all 0.2s ease-in-out;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .card.border-info {
            border-width: 2px;
        }

        .custom-control-label {
            cursor: pointer;
        }

        .room-item {
            transition: opacity 0.3s ease;
        }

        .badge {
            font-size: 0.75em;
        }

        .alert-info {
            background-color: #d1ecf1;
            border-color: #bee5eb;
            color: #0c5460;
        }

        .disabled-room {
            opacity: 0.6;
            background-color: #f8f9fa;
        }

        .disabled-room .custom-control-input:disabled+.custom-control-label {
            color: #6c757d;
            cursor: not-allowed;
        }

        #assignmentSummary {
            position: sticky;
            bottom: 20px;
            z-index: 1000;
        }
    </style>
@endsection