@extends('frontend.layouts.master')

@push('viewStyles')
    <link rel="stylesheet" href="{{ asset('lib/sweetalert/sweetalert.css') }}">
    <meta name="invoice-ordernum" content="{{ $invoice->order_num }}">
@endpush

@section('content')
    <div class="min-h-screen py-8" x-data="serviceControl()">
        <div class="container mx-auto px-4 max-w-full">
            <!-- Service Info Cards -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                @include('frontend.service.partials.service-header')
                @include('frontend.service.partials.configuration-info')
                @include('frontend.service.partials.transaction-info')
            </div>

            <!-- Main Content Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-3">
                    @if ($vmInfo)
                        @include('frontend.service.partials.vm-control-panel')
                    @else
                        @include('frontend.service.partials.no-vm-info')
                    @endif
                </div>
            </div>

        </div>
    </div>
@endsection

@push('viewScripts')
    <script>
        window.invoiceId = {{ $invoice->id }};
        window.vmId = '{{ $vmInfo['vm_id'] ?? '' }}';
        window.vmHostname = '{{ $vmInfo['hostname'] ?? '' }}';
        window.csrfToken = '{{ csrf_token() }}';

        function serviceControl() {
            return {
                passwordVisible: false,

                copyPassword() {
                    navigator.clipboard.writeText('TGS@123').then(() => {
                        showNotification('{{ __('Password copied to clipboard!') }}', 'success');
                    }).catch(() => {
                        showNotification('{{ __('Failed to copy password') }}', 'error');
                    });
                }
            }
        }
    </script>

    <script src="{{ asset('js/service/service.min.js') }}"></script>
    <script>
        // Fallback: ensure showNotification is globally available for Alpine/Livewire inline handlers
        window.showNotification = window.showNotification || function(message, type = 'success') {
            try {
                if (typeof FuiToast !== 'undefined') {
                    if (type === 'success') return FuiToast.success(message);
                    if (type === 'info' && typeof FuiToast.info === 'function') return FuiToast.info(message);
                    return FuiToast.error(message);
                }
            } catch (e) {}
            if (window.console && console.log) {
                console.log('[notify]', type, message);
            } else {
                alert(message);
            }
        };
    </script>
    <script src="{{ asset('lib/sweetalert/sweetalert.min.js') }}"></script>
@endpush