@extends('layouts.app')

@section('title', 'Detalhes do Dispositivo')

@section('page-title', 'Detalhes do Dispositivo WhatsApp')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('dispositivos.index') }}">Dispositivos</a></li>
    <li class="breadcrumb-item active">Detalhes</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">{{ $dispositivo->nome }}</h3>
                <div class="card-tools">
                    <a href="{{ route('dispositivos.edit', $dispositivo) }}" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                </div>
            </div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-sm-4">ID:</dt>
                    <dd class="col-sm-8">{{ $dispositivo->id }}</dd>
                    
                    <dt class="col-sm-4">Nome:</dt>
                    <dd class="col-sm-8">{{ $dispositivo->nome }}</dd>
                    
                    <dt class="col-sm-4">Session Name:</dt>
                    <dd class="col-sm-8"><code>{{ $dispositivo->session_name }}</code></dd>
                    
                    <dt class="col-sm-4">Unidade:</dt>
                    <dd class="col-sm-8"><a href="{{ route('unidades.show', $dispositivo->unidadeEmpresarial) }}">{{ $dispositivo->unidadeEmpresarial->nome }}</a></dd>
                    
                    <dt class="col-sm-4">Base URL:</dt>
                    <dd class="col-sm-8"><code>{{ $dispositivo->base_url }}</code></dd>
                    
                    <dt class="col-sm-4">Status:</dt>
                    <dd class="col-sm-8">
                        @if($dispositivo->status == 'WORKING')
                            <span class="badge badge-success">WORKING</span>
                        @elseif($dispositivo->status == 'SCAN_QR_CODE')
                            <span class="badge badge-warning">SCAN_QR_CODE</span>
                        @elseif($dispositivo->status == 'STARTING')
                            <span class="badge badge-info">STARTING</span>
                        @elseif($dispositivo->status == 'FAILED')
                            <span class="badge badge-danger">FAILED</span>
                        @else
                            <span class="badge badge-secondary">STOPPED</span>
                        @endif
                    </dd>
                    
                    <dt class="col-sm-4">Me ID:</dt>
                    <dd class="col-sm-8">{{ $dispositivo->me_id ?? 'N/A' }}</dd>
                    
                    <dt class="col-sm-4">Webhook URL:</dt>
                    <dd class="col-sm-8">{{ $dispositivo->webhook_url ?? 'N/A' }}</dd>
                    
                    <dt class="col-sm-4">Status Ativo:</dt>
                    <dd class="col-sm-8">
                        @if($dispositivo->ativo)
                            <span class="badge badge-success">Ativo</span>
                        @else
                            <span class="badge badge-secondary">Inativo</span>
                        @endif
                    </dd>
                </dl>

                <hr>
                <div class="d-flex gap-2 flex-wrap">
                    @if($dispositivo->status == 'STOPPED' || $dispositivo->status == 'FAILED')
                        <form action="{{ route('dispositivos.start', $dispositivo) }}" method="POST" class="mr-2">
                            @csrf
                            <button type="submit" class="btn btn-success" {{ !$dispositivo->ativo ? 'disabled' : '' }}>
                                <i class="fas fa-play"></i> Iniciar Sessão
                            </button>
                        </form>
                    @else
                        <form action="{{ route('dispositivos.stop', $dispositivo) }}" method="POST" class="mr-2">
                            @csrf
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-stop"></i> Parar Sessão
                            </button>
                        </form>
                    @endif
                    
                    <form action="{{ route('dispositivos.delete-session', $dispositivo) }}" method="POST" class="mr-2" onsubmit="return confirm('Tem certeza que deseja deletar a sessão na API externa? Esta ação não pode ser desfeita.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-warning" {{ !$dispositivo->ativo ? 'disabled' : '' }}>
                            <i class="fas fa-trash-alt"></i> Deletar Sessão
                        </button>
                    </form>
                    
                    <form action="{{ route('dispositivos.toggle-ativo', $dispositivo) }}" method="POST" class="mr-2">
                        @csrf
                        @if($dispositivo->ativo)
                            <button type="submit" class="btn btn-secondary">
                                <i class="fas fa-ban"></i> Inativar Dispositivo
                            </button>
                        @else
                            <button type="submit" class="btn btn-info">
                                <i class="fas fa-check"></i> Ativar Dispositivo
                            </button>
                        @endif
                    </form>
                    
                    <a href="{{ route('dispositivos.index') }}" class="btn btn-default">
                        <i class="fas fa-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        @if($dispositivo->status == 'SCAN_QR_CODE')
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">QR Code para Autenticação</h3>
                </div>
                <div class="card-body text-center">
                    <img src="{{ route('dispositivos.qrcode', [$dispositivo->id, 'image']) }}" alt="QR Code" class="img-fluid" id="qrCodeImage">
                    <p class="mt-2">Escaneie o QR Code com o WhatsApp</p>
                    <button class="btn btn-sm btn-info" onclick="location.reload()">
                        <i class="fas fa-sync"></i> Atualizar QR Code
                    </button>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
@if($dispositivo->status == 'SCAN_QR_CODE')
<script>
    // Atualizar QR Code a cada 5 segundos
    setInterval(function() {
        var img = document.getElementById('qrCodeImage');
        if (img) {
            img.src = "{{ route('dispositivos.qrcode', [$dispositivo->id, 'image']) }}?t=" + new Date().getTime();
        }
    }, 5000);
</script>
@endif
@endsection