@extends('root')

@section('title', $isEdit ? 'Edit Rule Auto Reply Custom' : 'Tambah Rule Auto Reply Custom')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => $isEdit ? 'Edit Rule' : 'Tambah Rule',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('client.simple-autoreply.index'), 'label' => 'Auto Reply'],
            ['url' => route('client.custom-autoreply.index'), 'label' => 'Auto Reply Custom'],
        ],
        'current' => $isEdit ? 'Edit Rule' : 'Tambah Rule'
    ])

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0 small">
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ $isEdit ? route('client.custom-autoreply.update', $rule) : route('client.custom-autoreply.store') }}" id="customRuleForm">
        @csrf
        @if($isEdit) @method('PUT') @endif
        <input type="hidden" name="reply_type" id="reply_type" value="{{ old('reply_type', $rule->reply_type) }}">
        <input type="hidden" name="reply_payload" id="reply_payload" value="">

        <div class="row">
            <div class="col-12 col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">{{ $isEdit ? 'Edit Rule' : 'Tambah Rule' }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Kata kunci <span class="text-danger">*</span></label>
                                <input type="text" name="keyword" class="form-control" value="{{ old('keyword', $rule->keyword) }}" placeholder="Contoh: halo" maxlength="255" required>
                                <small class="text-muted">Pesan masuk akan dicek terhadap kata kunci ini.</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Jenis pencocokan</label>
                                <select name="keyword_type" class="form-select">
                                    <option value="contains" {{ old('keyword_type', $rule->keyword_type) === 'contains' ? 'selected' : '' }}>Mengandung (pesan berisi kata kunci)</option>
                                    <option value="exact" {{ old('keyword_type', $rule->keyword_type) === 'exact' ? 'selected' : '' }}>Persis (pesan sama persis)</option>
                                    <option value="starts_with" {{ old('keyword_type', $rule->keyword_type) === 'starts_with' ? 'selected' : '' }}>Awalan (pesan diawali kata kunci)</option>
                                </select>
                            </div>
                        </div>

                        @if($wabaPools->isNotEmpty())
                        <div class="mb-3">
                            <label class="form-label">WABA <small class="text-muted">(opsional: kosongkan = semua WABA)</small></label>
                            <select name="waba_pool_id" class="form-select form-select-sm" style="max-width: 300px;">
                                <option value="">— Semua WABA —</option>
                                @foreach($wabaPools as $pool)
                                    <option value="{{ $pool->id }}" {{ old('waba_pool_id', $rule->waba_pool_id) == $pool->id ? 'selected' : '' }}>{{ $pool->account_name ?? $pool->phone_number ?? 'WABA #'.$pool->id }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label">Balasan (teks) <span class="text-danger">*</span></label>
                            <textarea name="message_text" id="message_text" class="form-control" rows="4" placeholder="Contoh: Hai kak, ada yang bisa dibantu?" required>{{ old('message_text', $rule->reply_type === 'text' ? ($rule->reply_payload['message'] ?? '') : '') }}</textarea>
                            <small class="text-muted">Balasan otomatis yang dikirim ketika kata kunci cocok.</small>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Urutan</label>
                                <input type="number" name="sort_order" class="form-control form-control-sm" value="{{ old('sort_order', $rule->sort_order) }}" min="0" style="max-width: 100px;">
                                <small class="text-muted">Rule dengan urutan lebih kecil dicek lebih dulu.</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $rule->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">Aktif</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i> Simpan</button>
                        @php $cancelWaba = $isEdit ? $rule->waba_pool_id : request('waba_pool_id'); @endphp
                        <a href="{{ route('client.custom-autoreply.index', $cancelWaba ? ['waba_pool_id' => $cancelWaba] : []) }}" class="btn btn-outline-secondary">Batal</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Contoh cepat</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-2">Klik untuk mengisi form dengan contoh:</p>
                        <div class="d-flex flex-column gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start preset" data-keyword="halo" data-type="contains" data-message="Hai kak, ada yang bisa dibantu?">
                                <i class="ti ti-message-circle me-1"></i> Halo → Hai kak
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start preset" data-keyword="harga" data-type="contains" data-message="Untuk info harga silakan ketik 'katalog' atau hubungi CS kami.">
                                <i class="ti ti-currency-dollar me-1"></i> Harga → Info harga
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start preset" data-keyword="info" data-type="starts_with" data-message="Berikut info layanan kami. Ketik 'order' untuk pemesanan.">
                                <i class="ti ti-info-circle me-1"></i> Info → Info layanan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
$(function() {
    function buildPayload() {
        var msg = $('#message_text').val().trim();
        return JSON.stringify({ message: msg });
    }

    $('#customRuleForm').on('submit', function() {
        $('#reply_type').val('text');
        $('#reply_payload').val(buildPayload());
    });

    $('.preset').on('click', function() {
        var keyword = $(this).data('keyword');
        var type = $(this).data('type');
        var message = $(this).data('message');
        $('input[name="keyword"]').val(keyword);
        $('select[name="keyword_type"]').val(type);
        $('#message_text').val(message);
    });
});
</script>
@endpush
@endsection