@extends('layouts.dashboard')

@section('title', 'WhatsApp Gateway Trial')
@section('page-title', 'WhatsApp Gateway Trial')

@section('content')
<div class="container-fluid py-4">
    <!-- Success / Error Alerts -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-check-circle-fill me-2 fs-5"></i>
                <div>{{ session('success') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
                <div>{{ session('error') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        <!-- Connection Status & QR Code Card -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h5 class="fw-bold mb-0 text-dark">Connection Status</h5>
                </div>
                <div class="card-body px-4 pb-4 d-flex flex-column align-items-center justify-content-center text-center">
                    @if($status === 'connected')
                        <div class="status-indicator connected mb-4">
                            <div class="pulse-ring"></div>
                            <i class="bi bi-whatsapp icon-display text-success"></i>
                        </div>
                        <h4 class="fw-bold text-success mb-1">Connected</h4>
                        <p class="text-muted mb-4 small">Logged in as: <strong class="text-dark">+{{ $phoneNumber }}</strong></p>
                        
                        <form action="{{ route('dashboard.whatsapp-gateway.logout') }}" method="POST" class="w-100 mt-auto">
                            @csrf
                            <button type="submit" class="btn btn-outline-danger w-100 py-2.5 fw-semibold rounded-3">
                                <i class="bi bi-power me-2"></i>Disconnect Session
                            </button>
                        </form>
                    @elseif($status === 'qr' && $qrCode)
                        <div class="status-indicator qr mb-3">
                            <div class="pulse-ring bg-warning"></div>
                            <i class="bi bi-qr-code icon-display text-warning"></i>
                        </div>
                        <h5 class="fw-bold text-warning mb-2">Scan QR Code</h5>
                        <p class="text-muted mb-4 px-2 small">Open WhatsApp on your mobile, go to Linked Devices, and scan this QR code to authenticate the gateway.</p>
                        
                        <div class="qr-container p-3 bg-light rounded-4 border border-light-subtle mb-4">
                            <img src="{{ $qrCode }}" alt="WhatsApp QR Code" class="img-fluid rounded-3 shadow-sm" style="max-width: 220px;">
                        </div>

                        <div class="d-flex align-items-center justify-content-center gap-2 text-muted small">
                            <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
                            <span>Waiting for connection...</span>
                        </div>
                    @else
                        <div class="status-indicator disconnected mb-4">
                            <div class="pulse-ring bg-danger"></div>
                            <i class="bi bi-whatsapp icon-display text-danger"></i>
                        </div>
                        <h4 class="fw-bold text-danger mb-1">Disconnected</h4>
                        <p class="text-muted mb-4 small">The gateway is not connected or initialized.</p>
                        
                        <div class="alert alert-secondary py-2 px-3 small border-0 mb-0 w-100 rounded-3">
                            <i class="bi bi-info-circle me-1.5"></i>Checking status or service starting up...
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Send Test Message Card -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h5 class="fw-bold mb-0 text-dark">Send Test Message</h5>
                </div>
                <div class="card-body px-4 pb-4">
                    <form action="{{ route('dashboard.whatsapp-gateway.test-send') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="phone" class="form-label fw-semibold text-secondary small">Recipient Number</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0 text-muted"><i class="bi bi-telephone"></i></span>
                                    <input type="text" class="form-control bg-light border-0 py-2.5" id="phone" name="phone" placeholder="e.g., 919999999999" required value="{{ old('phone') }}">
                                </div>
                                <div class="form-text text-muted small">Include country code (e.g. 91 for India) without '+' prefix or spaces.</div>
                            </div>
                            <div class="col-md-6">
                                <label for="media_type" class="form-label fw-semibold text-secondary small">Media Type (Optional)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0 text-muted"><i class="bi bi-file-earmark-image"></i></span>
                                    <select class="form-select bg-light border-0 py-2.5" id="media_type" name="media_type">
                                        <option value="image" selected>Image (PNG/JPG)</option>
                                        <option value="document">Document (PDF/Doc)</option>
                                        <option value="video">Video (MP4)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="media_url" class="form-label fw-semibold text-secondary small">Media URL (Optional)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0 text-muted"><i class="bi bi-link-45deg"></i></span>
                                    <input type="url" class="form-control bg-light border-0 py-2.5" id="media_url" name="media_url" placeholder="https://example.com/image.jpg" value="{{ old('media_url') }}">
                                </div>
                                <div class="form-text text-muted small">Provide a direct link to the image/document file.</div>
                            </div>
                            <div class="col-12">
                                <label for="message" class="form-label fw-semibold text-secondary small">Message Text</label>
                                <textarea class="form-control bg-light border-0 py-2.5" id="message" name="message" rows="4" placeholder="Enter test message body here..." {{ $status !== 'connected' ? 'disabled' : '' }}>{{ old('message') }}</textarea>
                            </div>
                            <div class="col-12 mt-4 text-end">
                                <button type="submit" class="btn btn-primary px-4 py-2.5 fw-semibold rounded-3" {{ $status !== 'connected' ? 'disabled' : '' }}>
                                    <i class="bi bi-send-fill me-2"></i>Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Recent Activity & Logs -->
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex align-items-center justify-content-between">
                    <h5 class="fw-bold mb-0 text-dark">Recent Gateway Activity</h5>
                    <span class="badge bg-light text-secondary border py-1.5 px-2.5 small rounded-pill">Last 50 Logs</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light-subtle">
                                <tr class="text-secondary small">
                                    <th class="px-4 py-3 border-0">ID</th>
                                    <th class="py-3 border-0">Recipient</th>
                                    <th class="py-3 border-0">Type</th>
                                    <th class="py-3 border-0">Template ID</th>
                                    <th class="py-3 border-0">Status</th>
                                    <th class="py-3 border-0">Response Detail</th>
                                    <th class="px-4 py-3 border-0 text-end">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs as $log)
                                    <tr class="small text-dark border-bottom border-light-subtle">
                                        <td class="px-4 py-3 font-monospace text-muted">#{{ $log->id }}</td>
                                        <td class="py-3 fw-medium">+{{ $log->mobile }}</td>
                                        <td class="py-3"><span class="badge bg-light text-dark border rounded-pill">{{ $log->message_type }}</span></td>
                                        <td class="py-3 text-muted">{{ $log->template_id ?? '-' }}</td>
                                        <td class="py-3">
                                            @if($log->status === 'sent')
                                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-check-circle-fill me-1"></i>Sent
                                                </span>
                                            @elseif($log->status === 'queued')
                                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-hourglass-split me-1"></i>Queued
                                                </span>
                                            @else
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-x-circle-fill me-1"></i>Failed
                                                </span>
                                            @endif
                                        </td>
                                        <td class="py-3 text-muted text-truncate" style="max-width: 250px;" title="{{ $log->response }}">
                                            {{ $log->response }}
                                        </td>
                                        <td class="px-4 py-3 text-end text-muted small font-monospace">{{ $log->inserted_on }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5 text-muted px-4">
                                            <div class="d-flex flex-column align-items-center justify-content-center">
                                                <i class="bi bi-chat-left-dots text-secondary mb-2" style="font-size: 2.5rem;"></i>
                                                <h6 class="fw-bold text-dark">No Logs Recorded</h6>
                                                <p class="small text-muted mb-0">Gateway actions and send attempts will be displayed here.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .status-indicator {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(25, 135, 84, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .status-indicator.qr {
        background-color: rgba(255, 193, 7, 0.1);
    }
    
    .status-indicator.disconnected {
        background-color: rgba(220, 53, 69, 0.1);
    }
    
    .icon-display {
        font-size: 2.5rem;
    }
    
    .pulse-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid #198754;
        animation: status-pulse 2s infinite ease-out;
        opacity: 0;
    }
    
    .pulse-ring.bg-warning {
        border-color: #ffc107;
    }
    
    .pulse-ring.bg-danger {
        border-color: #dc3545;
    }

    @keyframes status-pulse {
        0% {
            transform: scale(0.95);
            opacity: 0.8;
        }
        50% {
            opacity: 0.3;
        }
        100% {
            transform: scale(1.3);
            opacity: 0;
        }
    }
</style>
@endsection