@extends('root')
@section('title', 'Automasi AI')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Automasi Endpoint AI',
        'links' => [
            ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
            ['url' => route('client.ai-automations.index'), 'label' => 'Automasi AI'],
        ],
        'current' => 'Automasi API'
    ])
    <div class="d-flex justify-content-between align-items-center mb-4">
        <span></span>
        <a href="{{ route('client.ai-automations.create') }}" class="btn btn-primary shadow-sm">
            <i class="ti ti-plug me-1"></i> Tambah Automasi
        </a>
    </div>

    <div class="row row-cards">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-4 border-bottom-0 align-items-center">
                            <div>
                                <h3 class="card-title fw-bold text-dark"><i class="ti ti-api me-2 text-primary fs-2"></i>Daftar Automasi (Webhooks)</h3>
                                <p class="text-muted mb-0 mt-1 small">Sambungkan sistem internal atau API pihak ketiga Anda ketika AI mendeteksi Intent tertentu (misal: Cek Resi, Cek Tagihan).</p>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-vcenter card-table table-hover">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="px-4 py-3 text-secondary text-uppercase font-weight-bold" width="25%">Intent Pemicu</th>
                                        <th class="px-3 py-3 text-secondary text-uppercase font-weight-bold" width="35%">Data Endpoint (URL)</th>
                                        <th class="px-3 py-3 text-secondary text-uppercase font-weight-bold" width="10%">Method</th>
                                        <th class="px-3 py-3 text-secondary text-uppercase font-weight-bold" width="10%">Tipe</th>
                                        <th class="px-4 py-3 text-secondary text-uppercase font-weight-bold text-end" width="20%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($automations as $automation)
                                        <tr>
                                            <td class="px-4 fw-semibold text-dark">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar bg-primary-lt rounded me-3"><i class="ti ti-target"></i></div>
                                                    <div>
                                                        <span class="d-block">{{ $automation->intent->name ?? 'Unknown Intent' }}</span>
                                                        <div class="text-muted small mt-1">Dipicu oleh AI</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-3 text-muted">
                                                @if($automation->automation_type === 'webhook')
                                                    <span class="badge bg-light text-dark fw-normal border" style="font-family: monospace;">{{ $automation->endpoint_url }}</span>
                                                @else
                                                    <span class="text-secondary fst-italic">Internal Action</span>
                                                @endif
                                            </td>
                                            <td class="px-3">
                                                @if($automation->automation_type === 'webhook')
                                                    @php
                                                        $mcolor = match(strtoupper($automation->method)) {
                                                            'GET' => 'success', 'POST' => 'primary', 'PUT' => 'warning', 'DELETE' => 'danger', default => 'secondary'
                                                        };
                                                    @endphp
                                                    <span class="badge bg-{{ $mcolor }}-lt fw-bold">{{ strtoupper($automation->method) }}</span>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td class="px-3">
                                                <span class="badge bg-dark-lt text-dark border border-dark border-opacity-25">{{ ucfirst($automation->automation_type) }}</span>
                                            </td>
                                            <td class="px-4 text-end">
                                                <div class="btn-group">
                                                    <a href="{{ route('client.ai-automations.edit', $automation) }}" class="btn btn-sm btn-white text-primary border shadow-sm" data-bs-toggle="tooltip" title="Edit">
                                                        <i class="ti ti-edit"></i> Edit
                                                    </a>
                                                    <form action="{{ route('client.ai-automations.destroy', $automation) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus automasi secara permanen?');">
                                                        @csrf @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-white text-danger border shadow-sm" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" data-bs-toggle="tooltip" title="Hapus">
                                                            <i class="ti ti-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5">
                                                <div class="empty">
                                                    <div class="empty-img text-muted mb-3">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-webhook-off" width="48" height="48" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                          <path d="M4.876 13.61a4 4 0 1 0 6.124 -3.61"></path>
                                                          <path d="M15.066 20.502a4 4 0 1 0 4.136 -7.104l-4.136 7.104z"></path>
                                                          <path d="M16 8a4 4 0 1 0 -8 0c0 1.506 .833 2.815 2.062 3.5m1.938 -2.13l.63 -.37a5.06 5.06 0 0 1 2.37 -1v-2"></path>
                                                          <path d="M3 3l18 18"></path>
                                                        </svg>
                                                    </div>
                                                    <p class="empty-title fw-bold text-muted mb-1">Belum ada Automasi API</p>
                                                    <p class="empty-subtitle text-muted small">Buat webhook untuk mengambil data dari server Anda sendiri saat pelanggan menanyakan hal spesifik (seperti resi pengiriman).</p>
                                                    <div class="empty-action mt-3">
                                                        <a href="{{ route('client.ai-automations.create') }}" class="btn btn-primary shadow-sm">
                                                            <i class="ti ti-plug me-2"></i> Buat Koneksi Baru
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
@endsection