@extends('root')
@section('title', 'Autoreply')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Autoreply',
        'links' => [],
        'current' => 'Autoreply'
    ])

    <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
        <i class="ti ti-info-circle fs-5 me-2"></i>
        <div>
            <strong>Autoreply</strong> memungkinkan Anda merespons pesan masuk secara otomatis menggunakan AI atau Button Menu.
            Fitur ini hanya tersedia untuk nomor <strong>Dedicated</strong>.
        </div>
    </div>

    @if(!$aiAvailable)
    <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
        <i class="ti ti-alert-triangle fs-5 me-2"></i>
        <div><strong>Perhatian:</strong> OpenRouter API key belum dikonfigurasi. Fitur AI tidak tersedia.</div>
    </div>
    @endif

    @if($wabaPools->isEmpty())
    <div class="card card-body text-center py-5">
        <i class="ti ti-phone-off display-3 text-muted mb-3"></i>
        <h5>Tidak Ada Nomor Dedicated</h5>
        <p class="text-muted mb-3">Anda belum memiliki nomor Dedicated.</p>
        <a href="{{ route('client.dedicated-numbers.index') }}" class="btn btn-primary">
            <i class="ti ti-plus me-1"></i> Ajukan Nomor Dedicated
        </a>
    </div>
    @else
    <div class="row">
        @foreach($wabaPools as $wabaPool)
        <div class="col-md-6 col-xl-4 mb-4">
            <div class="card h-100 border-0 shadow-sm transition-hover">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-md bg-light-primary text-primary rounded-circle me-3">
                                <i class="ti ti-brand-whatsapp fs-3"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-dark">{{ $wabaPool->whatsapp_name ?: $wabaPool->phone_number }}</h6>
                                <small class="text-muted">{{ $wabaPool->phone_number }}</small>
                            </div>
                        </div>
                        @if($wabaPool->autoreply_setting && $wabaPool->autoreply_setting->is_active && $wabaPool->autoreply_setting->mode !== 'off')
                        <span class="badge bg-light-success text-success rounded-pill px-3">
                            <span class="p-1 rounded-circle bg-success me-1 d-inline-block"></span> Aktif
                        </span>
                        @else
                        <span class="badge bg-light-secondary text-secondary rounded-pill px-3">Nonaktif</span>
                        @endif
                    </div>
                    
                    <div class="p-3 bg-light rounded-3 mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Current Mode</span>
                            @if($wabaPool->autoreply_setting)
                                @php $setting = $wabaPool->autoreply_setting; @endphp
                                @switch($setting->mode)
                                    @case('ai')
                                        <div class="d-flex align-items-center text-info fw-bold">
                                            <i class="ti ti-robot me-1"></i> AI Assistant
                                        </div>
                                        @break
                                    @case('button')
                                        <div class="d-flex align-items-center text-warning fw-bold">
                                            <i class="ti ti-click me-1"></i> Interactive Buttons
                                        </div>
                                        @break
                                    @case('hybrid')
                                        <div class="d-flex align-items-center text-primary fw-bold">
                                            <i class="ti ti-switch-2 me-1"></i> Hybrid
                                        </div>
                                        @break
                                    @default
                                        <div class="d-flex align-items-center text-secondary">
                                            <i class="ti ti-power-off me-1"></i> Disabled
                                        </div>
                                @endswitch
                            @else
                                <span class="text-muted small fst-italic">Not Configured</span>
                            @endif
                        </div>
                    </div>
                    
                    <a href="{{ route('client.autoreply.settings', $wabaPool) }}" class="btn btn-outline-primary w-100">
                        <i class="ti ti-settings me-1"></i> Konfigurasi
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
.transition-hover {
    transition: all 0.3s ease;
}
.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.bg-light-primary {
    background-color: rgba(93, 135, 255, 0.1);
}
.bg-light-success {
    background-color: rgba(19, 222, 185, 0.1);
}
.bg-light-secondary {
    background-color: rgba(108, 117, 125, 0.1);
}
</style>
@endpush