@extends('root')
@section('title', 'Button Menu - ' . ($wabaPool->whatsapp_name ?: $wabaPool->phone_number))

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Button Menu',
        'links' => [
            ['label' => 'Autoreply', 'url' => route('client.autoreply.index')],
            ['label' => $wabaPool->whatsapp_name ?: $wabaPool->phone_number, 'url' => route('client.autoreply.settings', $wabaPool)]
        ],
        'current' => 'Button Menu'
    ])

    <div class="row">
        <div class="col-lg-3 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0 text-white">{{ $wabaPool->whatsapp_name ?: 'WABA' }}</h6>
                    <small class="opacity-75">{{ $wabaPool->phone_number }}</small>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('client.autoreply.settings', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-settings me-2"></i> Pengaturan Umum
                    </a>
                    <a href="{{ route('client.autoreply.ai-config', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-robot me-2"></i> Konfigurasi AI
                    </a>
                    <a href="{{ route('client.autoreply.buttons', $wabaPool) }}" class="list-group-item list-group-item-action active">
                        <i class="ti ti-click me-2"></i> Button Menu
                    </a>
                    <a href="{{ route('client.autoreply.logs', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-history me-2"></i> Log Aktivitas
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-click text-warning me-2"></i>Button Menu Builder</h5>
                    <button type="button" class="btn btn-primary btn-sm" id="addButtonMenu">
                        <i class="ti ti-plus me-1"></i> Tambah Menu
                    </button>
                </div>
                <div class="card-body">
                    <form id="buttonsForm">
                        <div id="buttonMenus">
                            @forelse($buttons as $index => $button)
                            <div class="button-menu card mb-3 border-warning" data-index="{{ $index }}">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <span class="menu-name fw-bold">{{ $button->name ?: 'Menu ' . ($index + 1) }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-menu"><i class="ti ti-trash"></i></button>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="buttons[{{ $index }}][id]" value="{{ $button->id }}">
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Nama Menu</label>
                                            <input type="text" class="form-control menu-name-input" name="buttons[{{ $index }}][name]" value="{{ $button->name }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Trigger</label>
                                            <select class="form-select trigger-type" name="buttons[{{ $index }}][trigger_type]">
                                                <option value="first_message" {{ $button->trigger_type === 'first_message' ? 'selected' : '' }}>Pesan Pertama</option>
                                                <option value="keyword" {{ $button->trigger_type === 'keyword' ? 'selected' : '' }}>Keyword</option>
                                                <option value="always" {{ $button->trigger_type === 'always' ? 'selected' : '' }}>Selalu</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mb-3 keyword-row" style="{{ $button->trigger_type === 'keyword' ? '' : 'display:none' }}">
                                        <label class="form-label">Keywords</label>
                                        <input type="text" class="form-control" name="buttons[{{ $index }}][trigger_keywords]" value="{{ $button->trigger_keywords }}" placeholder="halo, hai">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Body Text <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="buttons[{{ $index }}][body_text]" rows="2" required>{{ $button->body_text }}</textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Buttons (max 3)</label>
                                        <div class="button-actions">
                                            @foreach($button->buttons as $btnIdx => $btn)
                                            <div class="input-group mb-2 button-action-row">
                                                <input type="text" class="form-control" name="buttons[{{ $index }}][buttons][{{ $btnIdx }}][id]" value="{{ $btn['id'] ?? 'btn_'.($btnIdx+1) }}" style="max-width:80px">
                                                <input type="text" class="form-control" name="buttons[{{ $index }}][buttons][{{ $btnIdx }}][title]" value="{{ $btn['title'] ?? '' }}" placeholder="Title" required maxlength="20">
                                                <select class="form-select" name="buttons[{{ $index }}][buttons][{{ $btnIdx }}][action_type]" style="max-width:100px">
                                                    <option value="text" {{ ($btn['action_type'] ?? '') === 'text' ? 'selected' : '' }}>Text</option>
                                                    <option value="handover" {{ ($btn['action_type'] ?? '') === 'handover' ? 'selected' : '' }}>Handover</option>
                                                    <option value="ai" {{ ($btn['action_type'] ?? '') === 'ai' ? 'selected' : '' }}>AI</option>
                                                </select>
                                                <input type="text" class="form-control" name="buttons[{{ $index }}][buttons][{{ $btnIdx }}][action_value]" value="{{ $btn['action_value'] ?? '' }}" placeholder="Value">
                                                <button type="button" class="btn btn-outline-danger remove-btn"><i class="ti ti-x"></i></button>
                                            </div>
                                            @endforeach
                                        </div>
                                        <button type="button" class="btn btn-outline-primary btn-sm add-btn"><i class="ti ti-plus me-1"></i>Button</button>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="buttons[{{ $index }}][is_active]" value="1" {{ $button->is_active ? 'checked' : '' }}>
                                        <label class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="text-center py-5 text-muted" id="emptyState">
                                <i class="ti ti-click display-4"></i>
                                <p>Belum ada button menu.</p>
                            </div>
                            @endforelse
                        </div>
                        <button type="submit" class="btn btn-primary mt-3"><i class="ti ti-device-floppy me-1"></i> Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="menuTemplate">
    <div class="button-menu card mb-3 border-warning" data-index="__IDX__">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <span class="menu-name fw-bold">Menu Baru</span>
            <button type="button" class="btn btn-sm btn-outline-danger delete-menu"><i class="ti ti-trash"></i></button>
        </div>
        <div class="card-body">
            <input type="hidden" name="buttons[__IDX__][id]" value="">
            <div class="row g-3 mb-3">
                <div class="col-md-6"><label class="form-label">Nama</label><input type="text" class="form-control menu-name-input" name="buttons[__IDX__][name]" required></div>
                <div class="col-md-6"><label class="form-label">Trigger</label><select class="form-select trigger-type" name="buttons[__IDX__][trigger_type]"><option value="first_message">Pesan Pertama</option><option value="keyword">Keyword</option><option value="always">Selalu</option></select></div>
            </div>
            <div class="mb-3 keyword-row" style="display:none"><label class="form-label">Keywords</label><input type="text" class="form-control" name="buttons[__IDX__][trigger_keywords]"></div>
            <div class="mb-3"><label class="form-label">Body <span class="text-danger">*</span></label><textarea class="form-control" name="buttons[__IDX__][body_text]" rows="2" required></textarea></div>
            <div class="mb-3">
                <label class="form-label fw-bold">Buttons</label>
                <div class="button-actions">
                    <div class="input-group mb-2 button-action-row">
                        <input type="text" class="form-control" name="buttons[__IDX__][buttons][0][id]" value="btn_1" style="max-width:80px">
                        <input type="text" class="form-control" name="buttons[__IDX__][buttons][0][title]" placeholder="Title" required maxlength="20">
                        <select class="form-select" name="buttons[__IDX__][buttons][0][action_type]" style="max-width:100px"><option value="text">Text</option><option value="handover">Handover</option><option value="ai">AI</option></select>
                        <input type="text" class="form-control" name="buttons[__IDX__][buttons][0][action_value]" placeholder="Value">
                        <button type="button" class="btn btn-outline-danger remove-btn"><i class="ti ti-x"></i></button>
                    </div>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm add-btn"><i class="ti ti-plus me-1"></i>Button</button>
            </div>
            <div class="form-check"><input class="form-check-input" type="checkbox" name="buttons[__IDX__][is_active]" value="1" checked><label class="form-check-label">Aktif</label></div>
        </div>
    </div>
</template>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let idx = {{ count($buttons) }};

    $('#addButtonMenu').on('click', function() {
        $('#emptyState').hide();
        $('#buttonMenus').append($('#menuTemplate').html().replace(/__IDX__/g, idx++));
    });

    $(document).on('click', '.delete-menu', function() { $(this).closest('.button-menu').remove(); });
    $(document).on('input', '.menu-name-input', function() { $(this).closest('.button-menu').find('.menu-name').text($(this).val() || 'Menu'); });
    $(document).on('change', '.trigger-type', function() { $(this).closest('.card-body').find('.keyword-row').toggle($(this).val() === 'keyword'); });

    $(document).on('click', '.add-btn', function() {
        const container = $(this).siblings('.button-actions');
        const count = container.find('.button-action-row').length;
        if (count >= 3) return toastr.warning('Max 3 button');
        const menuIdx = $(this).closest('.button-menu').data('index');
        container.append(`<div class="input-group mb-2 button-action-row">
            <input type="text" class="form-control" name="buttons[${menuIdx}][buttons][${count}][id]" value="btn_${count+1}" style="max-width:80px">
            <input type="text" class="form-control" name="buttons[${menuIdx}][buttons][${count}][title]" placeholder="Title" required maxlength="20">
            <select class="form-select" name="buttons[${menuIdx}][buttons][${count}][action_type]" style="max-width:100px"><option value="text">Text</option><option value="handover">Handover</option><option value="ai">AI</option></select>
            <input type="text" class="form-control" name="buttons[${menuIdx}][buttons][${count}][action_value]" placeholder="Value">
            <button type="button" class="btn btn-outline-danger remove-btn"><i class="ti ti-x"></i></button>
        </div>`);
    });

    $(document).on('click', '.remove-btn', function() {
        if ($(this).closest('.button-actions').find('.button-action-row').length > 1) $(this).closest('.button-action-row').remove();
    });

    $('#buttonsForm').on('submit', function(e) {
        e.preventDefault();
        const buttons = [];
        $('.button-menu').each(function(i) {
            const m = $(this);
            const btns = [];
            m.find('.button-action-row').each(function(j) {
                btns.push({
                    id: $(this).find('input[name*="[id]"]').val(),
                    title: $(this).find('input[name*="[title]"]').val(),
                    action_type: $(this).find('select').val(),
                    action_value: $(this).find('input[name*="[action_value]"]').val()
                });
            });
            buttons.push({
                id: m.find('input[name*="[id]"]').val() || null,
                name: m.find('.menu-name-input').val(),
                trigger_type: m.find('.trigger-type').val(),
                trigger_keywords: m.find('input[name*="trigger_keywords"]').val() || null,
                body_text: m.find('textarea').val(),
                buttons: btns,
                is_active: m.find('input[type="checkbox"]').is(':checked')
            });
        });
        $.ajax({
            url: '{{ route('client.autoreply.buttons.save', $wabaPool) }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ buttons }),
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(r) { toastr.success(r.message); },
            error: function() { toastr.error('Error'); }
        });
    });
});
</script>
@endpush