@extends('root')
@section('title', 'Client Integration Detail')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Client Integration Detail',
        'links' => [
            ['url' => route('reseller.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('reseller.waba-integration.index'), 'label' => 'Integration'],
        ],
        'current' => $client->name
    ])

    <div class="row">
        <!-- Client Info -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ti ti-user me-2"></i>Info Client</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr>
                            <td class="text-muted">Nama</td>
                            <td><strong>{{ $client->name }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Email</td>
                            <td>{{ $client->email }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Balance</td>
                            <td>Rp {{ number_format($client->balance) }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Status</td>
                            <td>
                                @if($client->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-danger">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Integration Status -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ti ti-info-circle me-2"></i>Status Integrasi</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <p class="text-muted mb-1">Package Type</p>
                            <span class="badge bg-{{ $integrationStatus['package_type'] === 'shared' ? 'blue' : ($integrationStatus['package_type'] === 'dedicated' ? 'green' : 'purple') }} fs-6">
                                {{ $integrationStatus['package_type_label'] }}
                            </span>
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-1">Integration Mode</p>
                            <span class="badge bg-secondary fs-6">{{ ucfirst($integrationStatus['integration_mode']) }}</span>
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-1">WABA Status</p>
                            @if($integrationStatus['waba_status'] === 'connected')
                                <span class="text-success fs-6"><i class="ti ti-circle-check"></i> Connected</span>
                            @else
                                <span class="text-warning fs-6"><i class="ti ti-alert-triangle"></i> Not Connected</span>
                            @endif
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-4">
                            <p class="text-muted mb-1">Jumlah WABA</p>
                            <strong class="fs-5">{{ $integrationStatus['waba_count'] }}</strong>
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-1">Billing</p>
                            @if($integrationStatus['platform_handles_billing'])
                                <span class="badge bg-info">Dikelola Platform</span>
                            @else
                                <span class="badge bg-warning">Client Direct ke Meta</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WABA List -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0"><i class="ti ti-brand-whatsapp me-2"></i>WABA Terhubung</h5>
        </div>
        <div class="card-body">
            @if($wabas->isEmpty())
                <div class="text-center py-4">
                    <i class="ti ti-device-mobile-off" style="font-size: 48px;"></i>
                    <p class="text-muted mt-2">Belum ada WABA yang terhubung</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Account Name</th>
                                <th>Phone Number</th>
                                <th>Mode</th>
                                <th>Status</th>
                                <th>Usage Today</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($wabas as $waba)
                            <tr>
                                <td>{{ $waba->account_name }}</td>
                                <td>{{ $waba->phone_number }}</td>
                                <td><span class="badge bg-secondary">{{ $waba->getEffectiveIntegrationMode()->value }}</span></td>
                                <td>
                                    @if($waba->status === 'active')
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $waba->used_today }} / {{ $waba->limit_max }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="mt-3">
        <a href="{{ route('reseller.waba-integration.index') }}" class="btn btn-secondary">
            <i class="ti ti-arrow-left me-2"></i>Kembali
        </a>
    </div>
</div>
@endsection