@extends('root')
@php
    $isEdit = isset($aiAutomation);
    $headers = $isEdit && $aiAutomation->headers ? $aiAutomation->headers : [];
    $payloads = $isEdit && $aiAutomation->mapping_payload ? $aiAutomation->mapping_payload : [];
@endphp
@section('title', $isEdit ? 'Edit Automasi AI' : 'Tambah Automasi AI')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => $isEdit ? 'Edit Automasi API' : 'Tambah Automasi API',
        'links' => [
            ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
            ['url' => route('client.ai-automations.index'), 'label' => 'Automasi AI'],
        ],
        'current' => $isEdit ? 'Edit API' : 'Tambah API'
    ])

    <div class="row row-cards justify-content-center">
                <div class="col-lg-8">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                            <h3 class="card-title fw-bold text-primary"><i class="ti ti-plug-connected me-2"></i> Integrasi Webhook Setup</h3>
                            <a href="{{ route('client.ai-automations.index') }}" class="btn btn-sm btn-white border shadow-sm rounded-pill px-3">
                                <i class="ti ti-arrow-left me-1"></i> Kembali
                            </a>
                        </div>
                        <div class="card-body p-4 pt-2">
                            <form action="{{ $isEdit ? route('client.ai-automations.update', $aiAutomation) : route('client.ai-automations.store') }}" method="POST">
                                @csrf
                                @if($isEdit) @method('PUT') @endif

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-dark">Pilih Intent Pemicu <span class="text-danger">*</span></label>
                                    @if($intents->isEmpty())
                                        <div class="alert alert-warning small">
                                            <i class="ti ti-alert-triangle me-1"></i> Anda tidak memiliki Intent aktif. Silakan buat Intent terlebih dahulu.
                                        </div>
                                    @endif
                                    <select class="form-select @error('ai_intent_id') is-invalid @enderror" name="ai_intent_id" required>
                                        <option value="">-- Pilih Intent --</option>
                                        @foreach($intents as $intent)
                                            <option value="{{ $intent->id }}" {{ old('ai_intent_id', $isEdit ? $aiAutomation->ai_intent_id : '') == $intent->id ? 'selected' : '' }}>
                                                {{ $intent->name }} - {{ Str::limit($intent->description, 50) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="form-text text-muted">Aksi API ini akan dijalankan jika AI mendeteksi pelanggan memiliki maksud ini.</div>
                                    @error('ai_intent_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-dark">Tipe Automasi <span class="text-danger">*</span></label>
                                    <select class="form-select @error('automation_type') is-invalid @enderror" name="automation_type" id="automation_type" required>
                                        <option value="webhook" {{ old('automation_type', $isEdit ? $aiAutomation->automation_type : '') == 'webhook' ? 'selected' : '' }}>Webhook (Kirim Request HTTP)</option>
                                        <option value="internal_action" {{ old('automation_type', $isEdit ? $aiAutomation->automation_type : '') == 'internal_action' ? 'selected' : '' }}>Aksi Internal WABA (Contoh: Notifikasi)</option>
                                    </select>
                                </div>

                                <div id="webhook_settings">
                                    <hr class="my-4">
                                    <h4 class="fw-bold mb-3 text-dark">Konfigurasi Webhook / API Target</h4>
                                    
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-3">
                                            <label class="form-label fw-semibold text-dark">Method</label>
                                            <select class="form-select @error('method') is-invalid @enderror" name="method">
                                                <option value="GET" {{ old('method', $isEdit ? $aiAutomation->method : '') == 'GET' ? 'selected' : '' }}>GET</option>
                                                <option value="POST" {{ old('method', $isEdit ? $aiAutomation->method : '') == 'POST' ? 'selected' : '' }}>POST</option>
                                                <option value="PUT" {{ old('method', $isEdit ? $aiAutomation->method : '') == 'PUT' ? 'selected' : '' }}>PUT</option>
                                            </select>
                                        </div>
                                        <div class="col-md-9">
                                            <label class="form-label fw-semibold text-dark">Endpoint URL <span class="text-danger">*</span></label>
                                            <input type="url" class="form-control @error('endpoint_url') is-invalid @enderror" name="endpoint_url" 
                                                value="{{ old('endpoint_url', $isEdit ? $aiAutomation->endpoint_url : '') }}" 
                                                placeholder="https://api.domainanda.com/cek-status">
                                            @error('endpoint_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label fw-semibold text-dark mb-0">HTTP Headers (Opsional)</label>
                                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-header"><i class="ti ti-plus"></i></button>
                                        </div>
                                        <div class="form-text text-muted mb-2">Tambahkan Authorization token atau header lain yang dibutuhkan server Anda.</div>
                                        <div id="headers-container">
                                            @foreach($headers as $key => $value)
                                                <div class="input-group mb-2 header-row">
                                                    <input type="text" class="form-control" name="headers[{{ $loop->index }}][key]" value="{{ $key }}" placeholder="Key (contoh: Authorization)">
                                                    <input type="text" class="form-control" name="headers[{{ $loop->index }}][value]" value="{{ $value }}" placeholder="Value (contoh: Bearer token)">
                                                    <button type="button" class="btn btn-outline-danger btn-remove-header"><i class="ti ti-x"></i></button>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label fw-semibold text-dark mb-0">Pemetaan Payload / Parameter</label>
                                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-payload"><i class="ti ti-plus"></i></button>
                                        </div>
                                        <div class="form-text text-muted mb-2">Parameter apa yang harus diekstrak AI dari chat user lalu dikirim ke server Anda? <br>Contoh Key: <code>order_id</code>, Value: <code>ID Pesanan</code>.</div>
                                        <div id="payloads-container">
                                            @foreach($payloads as $key => $value)
                                                <div class="input-group mb-2 payload-row">
                                                    <input type="text" class="form-control" name="mapping_payload[{{ $loop->index }}][key]" value="{{ $key }}" placeholder="JSON/Query Key (ex: no_resi)">
                                                    <input type="text" class="form-control" name="mapping_payload[{{ $loop->index }}][value]" value="{{ $value }}" placeholder="Deskripsi untuk AI (ex: Nomor Resi JNE)">
                                                    <button type="button" class="btn btn-outline-danger btn-remove-payload"><i class="ti ti-x"></i></button>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                </div>

                                <div class="d-grid mt-5">
                                    <button type="submit" class="btn btn-primary btn-lg shadow-sm">
                                        <i class="ti ti-device-floppy me-2"></i> {{ $isEdit ? 'Simpan Perubahan' : 'Deploy Automasi' }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card shadow-sm border-0 info-card h-100 bg-success text-white bg-opacity-10 p-4">
                        <div class="mb-3 text-center">
                            <span class="bg-success text-white p-3 rounded-circle d-inline-flex fs-1"><i class="ti ti-api"></i></span>
                        </div>
                        <h4 class="fw-bold text-success mb-2 text-center">Contoh Kasus "Cek Resi"</h4>
                        <p class="small text-dark text-opacity-75 mb-3 text-start">
                            1. Buat Intent <strong>cek_resi</strong>.<br>
                            2. Pilih Intent tersebut di form ini.<br>
                            3. Masukkan Endpoint URL ke server eksternal Anda.<br>
                            4. Di <strong>Payload</strong> tambahkan:
                                <ul class="mt-1 mb-0 ps-3">
                                    <li>Key: <code>awb</code></li>
                                    <li>Value: <code>Nomor Resi Pengiriman</code></li>
                                </ul>
                        </p>
                        <hr class="text-success opacity-25 my-2">
                        <p class="small text-dark text-opacity-75 mb-0 text-start fst-italic">
                            Saat user bilang "Tolong cek resi JP22331", AI otomatis mengirim parameter {"awb": "JP22331"} ke server Anda, menunggu balasan, lalu merangkumkan hasilnya ke user.
                        </p>
                    </div>
                </div>
            </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle webhook settings display based on dropdown
    function toggleSettings() {
        if ($('#automation_type').val() === 'webhook') {
            $('#webhook_settings').slideDown();
        } else {
            $('#webhook_settings').slideUp();
        }
    }

    $('#automation_type').change(toggleSettings);
    toggleSettings();

    // Headers generator
    let headerIdx = {{ count($headers) + 10 }}; 
    $('#btn-add-header').click(function() {
        const row = `
            <div class="input-group mb-2 header-row">
                <input type="text" class="form-control" name="headers[${headerIdx}][key]" placeholder="Key (contoh: Authorization)">
                <input type="text" class="form-control" name="headers[${headerIdx}][value]" placeholder="Value (contoh: Bearer token)">
                <button type="button" class="btn btn-outline-danger btn-remove-header"><i class="ti ti-x"></i></button>
            </div>
        `;
        $('#headers-container').append(row);
        headerIdx++;
    });

    $(document).on('click', '.btn-remove-header', function() {
        $(this).closest('.header-row').remove();
    });

    // Payloads generator
    let payloadIdx = {{ count($payloads) + 10 }};
    $('#btn-add-payload').click(function() {
        const row = `
            <div class="input-group mb-2 payload-row">
                <input type="text" class="form-control" name="mapping_payload[${payloadIdx}][key]" placeholder="JSON/Query Key (ex: no_resi)">
                <input type="text" class="form-control" name="mapping_payload[${payloadIdx}][value]" placeholder="Deskripsi untuk AI (ex: Nomor Resi JNE)">
                <button type="button" class="btn btn-outline-danger btn-remove-payload"><i class="ti ti-x"></i></button>
            </div>
        `;
        $('#payloads-container').append(row);
        payloadIdx++;
    });

    $(document).on('click', '.btn-remove-payload', function() {
        $(this).closest('.payload-row').remove();
    });
});
</script>
@endpush