@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 active">APK Management</li>
            </ol>

            <h1 class="page-header">APK Management</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <div class="panel-heading-btn">
                            <a href="{{ route('apk.create') }}" class="btn btn-custom">
                                <i class="fa fa-plus"></i> Upload New APK
                            </a>
                        </div>
                    </h4>
                </div>
                <div class="panel-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @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

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Version</th>
                                    <th>File Info</th>
                                    <th>Status</th>
                                    <th>Assignments</th>
                                    <th>Uploaded</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($apkVersions as $apk)
                                    <tr>
                                        <td>
                                            <strong>{{ $apk->version_name }}</strong><br>
                                            @if ($apk->description)
                                                <em class="text-info">{{ Str::limit($apk->description, 50) }}</em>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="text-sm">
                                                <strong>{{ $apk->original_filename }}</strong><br>
                                                Size: {{ $apk->formatted_file_size }}<br>
                                                <small class="text-muted">Hash:
                                                    {{ substr($apk->file_hash, 0, 8) }}...</small>
                                            </div>
                                        </td>
                                        <td>
                                            @if ($apk->status === 'active')
                                                <span class="badge badge-success">Active</span>
                                            @elseif($apk->status === 'inactive')
                                                <span class="badge badge-warning">Inactive</span>
                                            @else
                                                <span class="badge badge-secondary">Deprecated</span>
                                            @endif

                                            @if (!$apk->fileExists())
                                                <br><span class="badge badge-danger">File Missing</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $assignments = $apk->roomAssignments;
                                                $totalAssignments = $assignments->count();
                                                $installedCount = $assignments->where('status', 'installed')->count();
                                                $pendingCount = $assignments->where('status', 'pending')->count();
                                                $failedCount = $assignments->where('status', 'failed')->count();
                                            @endphp

                                            @if ($totalAssignments > 0)
                                                <div class="text-sm">
                                                    <div><strong>Total: {{ $totalAssignments }}</strong></div>
                                                    @if ($installedCount > 0)
                                                        <div class="text-success">Installed: {{ $installedCount }}</div>
                                                    @endif
                                                    @if ($pendingCount > 0)
                                                        <div class="text-warning">Pending: {{ $pendingCount }}</div>
                                                    @endif
                                                    @if ($failedCount > 0)
                                                        <div class="text-danger">Failed: {{ $failedCount }}</div>
                                                    @endif
                                                </div>
                                            @else
                                                <span class="text-muted">Not assigned</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="text-sm">
                                                {{ $apk->created_at->format('M j, Y') }}<br>
                                                <small
                                                    class="text-muted">{{ $apk->created_at->format('g:i A') }}</small><br>
                                                <small class="text-muted">by
                                                    {{ $apk->uploader->name ?? 'Unknown' }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('apk.assign', $apk->id) }}" class="btn btn-custom">
                                                    <i class="fa fa-share"></i> Assign to Rooms
                                                </a>

                                                @if ($apk->fileExists())
                                                    <a href="{{ route('apk.download', $apk->id) }}" class="btn btn-custom"
                                                        download>
                                                        <i class="fa fa-download"></i> Download
                                                    </a>
                                                @endif

                                                <button type="button" class="btn btn-custom"
                                                    onclick="showApkDetails({{ $apk->id }})">
                                                    <i class="fa fa-eye"></i> Details
                                                </button>

                                                @if ($apk->status === 'active')
                                                    <form action="{{ route('apk.destroy', $apk->id) }}" method="POST"
                                                        class="d-inline"
                                                        onsubmit="return confirm('Are you sure you want to delete this APK version?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-custom">
                                                            <i class="fa fa-trash"></i> Delete
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">
                                            No APK versions uploaded yet.
                                            <br><br>
                                            <a href="{{ route('apk.create') }}" class="btn btn-success">
                                                <i class="fa fa-plus"></i> Upload First APK
                                            </a>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if ($apkVersions->hasPages())
                        <div class="d-flex justify-content-center">
                            {{ $apkVersions->links() }}
                        </div>
                    @endif
                </div>
            </div>

            <!-- Room Status Overview Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Room Status Overview</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        @foreach ($rooms->take(12) as $room)
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card">
                                    <div class="card-body p-3">
                                        <h6 class="card-title mb-2">{{ $room->room }}</h6>
                                        @php
                                            $currentAssignment = $room->currentApkAssignment;
                                        @endphp

                                        @if ($currentAssignment)
                                            <div class="text-sm">
                                                <div><strong>{{ $currentAssignment->apkVersion->version_name }}</strong>
                                                </div>
                                                <div class="mt-1">
                                                    @if ($currentAssignment->status === 'installed')
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => 'installed',
                                                        ])
                                                    @elseif($currentAssignment->status === 'pending')
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => 'pending',
                                                        ])
                                                    @elseif($currentAssignment->status === 'downloading')
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => 'downloading',
                                                        ])
                                                    @else
                                                        @include('pages.apk.components.status-badge', [
                                                            'status' => 'failed',
                                                        ])
                                                    @endif
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">No APK assigned</span>
                                        @endif

                                        <button type="button" class="btn btn-custom btn-sm mt-2"
                                            onclick="showRoomStatus({{ $room->id }})">
                                            View Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if ($rooms->count() > 12)
                        <div class="text-center mt-3">
                            <button type="button" class="btn btn-custom" onclick="showAllRooms()">
                                View All {{ $rooms->count() }} Rooms
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </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>

    <!-- APK Details Modal -->
    <div class="modal fade" id="apkDetailsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">APK Version Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="apkDetailsContent">
                    <div class="text-center">
                        <i class="fa fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-custom" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Room Status Modal -->
    <div class="modal fade" id="roomStatusModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Room Status Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="roomStatusContent">
                    <div class="text-center">
                        <i class="fa fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Make Laravel routes available to JavaScript
        const routes = {
            apkDetails: "{{ route('apk.details', ':id') }}",
            roomStatus: "{{ route('apk.room.status', ':roomId') }}"
        };

        function showApkDetails(apkId) {
            $('#apkDetailsModal').modal('show');
            $('#apkDetailsContent').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');

            // Use Laravel route helper
            const url = routes.apkDetails.replace(':id', apkId);

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    $('#apkDetailsContent').html(buildApkDetailsHtml(data));
                })
                .catch(error => {
                    console.error('Error loading APK details:', error);
                    $('#apkDetailsContent').html(
                        '<div class="alert alert-danger">Failed to load APK details. Please try again.</div>');
                });
        }

        function showRoomStatus(roomId) {
            $('#roomStatusModal').modal('show');
            $('#roomStatusContent').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');

            // Use Laravel route helper
            const url = routes.roomStatus.replace(':roomId', roomId);

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    $('#roomStatusContent').html(buildRoomStatusHtml(data));
                })
                .catch(error => {
                    console.error('Error loading room status:', error);
                    $('#roomStatusContent').html(
                        '<div class="alert alert-danger">Failed to load room status. Please try again.</div>');
                });
        }

        function buildApkDetailsHtml(data) {
            return `
        <div class="row">
            <div class="col-md-6">
                <h6>APK Information</h6>
                <table class="table table-sm table-borderless">
                    <tr><td><strong>Version:</strong></td><td>${data.version_name}</td></tr>
                    <tr><td><strong>Filename:</strong></td><td>${data.original_filename}</td></tr>
                    <tr><td><strong>File Size:</strong></td><td>${data.formatted_file_size}</td></tr>
                    <tr><td><strong>Status:</strong></td><td><span class="badge badge-${data.status === 'active' ? 'success' : 'secondary'}">${data.status}</span></td></tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6>Upload Information</h6>
                <table class="table table-sm table-borderless">
                    <tr><td><strong>Uploaded:</strong></td><td>${data.created_at}</td></tr>
                    <tr><td><strong>Uploaded By:</strong></td><td>${data.uploaded_by}</td></tr>
                    <tr><td><strong>File Exists:</strong></td><td>${data.file_exists ? '<span class="text-success">Yes</span>' : '<span class="text-danger">No</span>'}</td></tr>
                    <tr><td><strong>File Hash:</strong></td><td><code>${data.file_hash.substring(0, 16)}...</code></td></tr>
                </table>
            </div>
        </div>
        ${data.description ? `<div class="mt-3"><h6>Description</h6><p>${data.description}</p></div>` : ''}
        <div class="mt-3">
            <h6>Assignment Statistics</h6>
            <div class="row">
                <div class="col-md-3 text-center">
                    <h4 class="text-primary">${data.assignments_summary.total}</h4>
                    <small>Total</small>
                </div>
                <div class="col-md-3 text-center">
                    <h4 class="text-success">${data.assignments_summary.installed}</h4>
                    <small>Installed</small>
                </div>
                <div class="col-md-3 text-center">
                    <h4 class="text-warning">${data.assignments_summary.pending}</h4>
                    <small>Pending</small>
                </div>
                <div class="col-md-3 text-center">
                    <h4 class="text-danger">${data.assignments_summary.failed}</h4>
                    <small>Failed</small>
                </div>
            </div>
        </div>
        ${data.recent_assignments.length > 0 ? `
                                                                <div class="mt-3">
                                                                    <h6>Recent Assignments</h6>
                                                                    <div class="table-responsive">
                                                                        <table class="table table-sm">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Room</th>
                                                                                    <th>Guest</th>
                                                                                    <th>Status</th>
                                                                                    <th>Assigned</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                ${data.recent_assignments.map(assignment => `
                                <tr>
                                    <td>${assignment.room_name}</td>
                                    <td>${assignment.guest_name || '-'}</td>
                                    <td><span class="badge badge-${getStatusColor(assignment.status)}">${assignment.status}</span></td>
                                    <td>${assignment.assigned_at}</td>
                                </tr>
                            `).join('')}
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            ` : ''}
    `;
        }

        function buildRoomStatusHtml(data) {
            let html = `
        <div class="row">
            <div class="col-md-6">
                <h6>Room Information</h6>
                <table class="table table-sm table-borderless">
                    <tr><td><strong>Room:</strong></td><td>${data.room_name}</td></tr>
                    <tr><td><strong>Guest:</strong></td><td>${data.guest_name || 'No Guest'}</td></tr>
                    <tr><td><strong>Status:</strong></td><td>${data.room_status || 'Active'}</td></tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6>Statistics</h6>
                <table class="table table-sm table-borderless">
                    <tr><td><strong>Total Assignments:</strong></td><td>${data.statistics.total_assignments}</td></tr>
                    <tr><td><strong>Successful:</strong></td><td><span class="text-success">${data.statistics.successful_installations}</span></td></tr>
                    <tr><td><strong>Failed:</strong></td><td><span class="text-danger">${data.statistics.failed_installations}</span></td></tr>
                    <tr><td><strong>Pending:</strong></td><td><span class="text-warning">${data.statistics.pending_assignments}</span></td></tr>
                </table>
            </div>
        </div>
        <hr>
    `;

            if (data.current_assignment) {
                html += `
            <div class="mb-3">
                <h6>Current Assignment</h6>
                <table class="table table-sm table-borderless">
                    <tr><td><strong>Version:</strong></td><td>${data.current_assignment.apk_version}</td></tr>
                    <tr><td><strong>Status:</strong></td><td><span class="badge badge-${getStatusColor(data.current_assignment.status)}">${data.current_assignment.status}</span></td></tr>
                    <tr><td><strong>Assigned:</strong></td><td>${data.current_assignment.assigned_at}</td></tr>
                    ${data.current_assignment.installed_at ? `<tr><td><strong>Installed:</strong></td><td>${data.current_assignment.installed_at}</td></tr>` : ''}
                    ${data.current_assignment.installation_notes ? `<tr><td><strong>Notes:</strong></td><td>${data.current_assignment.installation_notes}</td></tr>` : ''}
                </table>
            </div>
        `;
            } else {
                html += '<p class="text-muted">No APK currently assigned to this room.</p>';
            }

            if (data.assignment_history && data.assignment_history.length > 0) {
                html += `
            <div class="mb-3">
                <h6>Recent Assignment History</h6>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Version</th>
                                <th>Status</th>
                                <th>Assigned</th>
                                <th>Installed</th>
                            </tr>
                        </thead>
                        <tbody>
        `;

                data.assignment_history.forEach(assignment => {
                    html += `
                <tr>
                    <td>${assignment.version_name}</td>
                    <td><span class="badge badge-${getStatusColor(assignment.status)}">${assignment.status}</span></td>
                    <td>${assignment.assigned_at}</td>
                    <td>${assignment.installed_at || '-'}</td>
                </tr>
            `;
                });

                html += `
                        </tbody>
                    </table>
                </div>
            </div>
        `;
            }

            return html;
        }

        function getStatusColor(status) {
            const colors = {
                'pending': 'warning',
                'downloading': 'info',
                'installed': 'success',
                'failed': 'danger',
                'initiated': 'secondary',
                'completed': 'success'
            };
            return colors[status] || 'secondary';
        }

        function showAllRooms() {
            // Implementation for showing all rooms in a modal or separate page
            window.location.href = '{{ route('rooms.index') }}';
        }

        // Auto-refresh room status every 30 seconds
        setInterval(function() {
            // You can implement auto-refresh logic here
        }, 30000);
    </script>
@endsection