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

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

    <div class="row">
        <div class="col-lg-3 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 bg-primary rounded-top text-center">
                    <div class="rounded-circle bg-white p-3 d-inline-block mb-2 text-primary">
                        <i class="ti ti-brand-whatsapp fs-2"></i>
                    </div>
                    <h5 class="text-white mb-0">{{ $wabaPool->whatsapp_name ?: 'WABA' }}</h5>
                    <small class="text-white-50">{{ $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 border-0 py-3 {{ request()->routeIs('client.autoreply.settings') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-settings me-3"></i> Pengaturan Umum
                    </a>
                    <a href="{{ route('client.autoreply.ai-config', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.ai-config') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-robot me-3"></i> Konfigurasi AI
                    </a>
                    <a href="{{ route('client.autoreply.buttons', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.buttons') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-click me-3"></i> Button Menu
                    </a>
                    <a href="{{ route('client.autoreply.flow', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.flow') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-chart-dots me-3"></i> Flow Builder
                    </a>
                    <a href="{{ route('client.autoreply.logs', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.logs') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-history me-3"></i> Log Aktivitas
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-settings text-primary me-2"></i>Pengaturan Umum</h5>
                </div>
                <div class="card-body">
                    <div id="loadingOverlay" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2 text-muted">Memuat data...</p>
                    </div>
                    
                    <form id="settingsForm" style="display:none;">
                        <div class="mb-4">
                            <label class="form-label fw-bold mb-3">Mode Autoreply</label>
                            <div class="row g-3">
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeOff" value="off">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeOff">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-secondary"><i class="ti ti-power-off fs-1"></i></div>
                                            <div class="fw-bold">Off</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">Tidak aktif</small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeAi" value="ai">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeAi">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-info"><i class="ti ti-robot fs-1"></i></div>
                                            <div class="fw-bold">AI Assistant</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">Balasan otomatis AI</small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeButton" value="button">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeButton">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-warning"><i class="ti ti-click fs-1"></i></div>
                                            <div class="fw-bold">Buttons</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">Menu interaktif</small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeHybrid" value="hybrid">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeHybrid">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-primary"><i class="ti ti-switch-2 fs-1"></i></div>
                                            <div class="fw-bold">Hybrid</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">AI + Buttons</small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeFlow" value="flow">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeFlow">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-success"><i class="ti ti-chart-dots fs-1"></i></div>
                                            <div class="fw-bold">Flow Builder</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">Drag & Drop</small>
                                        </div>
                                    </label>
                                </div>
                            </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="mode" id="modeN8n" value="n8n">
                                    <label class="card h-100 cursor-pointer shadow-none border mode-card" for="modeN8n">
                                        <div class="card-body text-center p-3">
                                            <div class="mode-icon mb-2 text-danger"><i class="ti ti-webhook fs-1"></i></div>
                                            <div class="fw-bold">N8n Webhook</div>
                                            <small class="text-muted d-block mt-1" style="font-size:0.75rem">External Automation</small>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="isActive" name="is_active">
                                <label class="form-check-label fw-bold" for="isActive">Aktifkan Autoreply</label>
                            </div>
                        </div>

                        <!-- N8n Specifc Config -->
                        <div id="n8nConfigSection" class="mb-4 p-3 bg-light rounded border border-danger border-opacity-25" style="display:none;">
                            <h6 class="text-danger mb-3"><i class="ti ti-webhook me-2"></i>Konfigurasi N8n</h6>
                            <div class="mb-3">
                                <label class="form-label">Webhook URL <span class="text-danger">*</span></label>
                                <input type="url" class="form-control" name="n8n_url" id="n8nUrl" placeholder="https://n8n.example.com/webhook/...">
                                <small class="text-muted">MeeChat akan mengirim event POST ke URL ini.</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Header / API Key (Opsional)</label>
                                <input type="text" class="form-control" name="n8n_api_key" id="n8nApiKey" placeholder="X-N8N-API-KEY or Bearer Token">
                                <small class="text-muted">Akan dikirim sebagai header <code>X-N8N-API-KEY</code>.</small>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-4">
                            <label class="form-label fw-bold"><i class="ti ti-clock me-1"></i> Jam Aktif (Opsional)</label>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Jam Mulai</label>
                                    <input type="time" class="form-control" name="active_hours_start" id="activeHoursStart">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Jam Selesai</label>
                                    <input type="time" class="form-control" name="active_hours_end" id="activeHoursEnd">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Hari Aktif</label>
                                    <div class="d-flex flex-wrap gap-2" id="activeDaysContainer">
                                        @php $days = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']; @endphp
                                        @foreach($days as $idx => $day)
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="active_days[]" value="{{ $idx + 1 }}" id="day{{ $idx }}">
                                            <label class="form-check-label" for="day{{ $idx }}">{{ $day }}</label>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-4">
                            <label class="form-label fw-bold"><i class="ti ti-template me-1"></i> Template Fallback (24h)</label>
                            <select class="form-select" name="fallback_template_id" id="fallbackTemplateId">
                                <option value="">-- Pilih Template --</option>
                                @foreach($templates as $template)
                                <option value="{{ $template->id }}">{{ $template->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold"><i class="ti ti-message-2 me-1"></i> Pesan Selamat Datang</label>
                            <textarea class="form-control" name="welcome_message" id="welcomeMessage" rows="2" maxlength="1024"></textarea>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Handover setelah N pesan AI</label>
                            <input type="number" class="form-control" style="width:100px" name="handover_after_messages" id="handoverAfterMessages" min="1" max="20">
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i> Simpan</button>
                            <a href="{{ route('client.autoreply.index') }}" class="btn btn-outline-secondary">Kembali</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Load data via AJAX on page load
    loadSettingsData();
    
    function loadSettingsData() {
        $.ajax({
            url: '{{ route("client.autoreply.settings.data", $wabaPool) }}',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    populateForm(response.data);
                    $('#loadingOverlay').hide();
                    $('#settingsForm').show();
                } else {
                    toastr.error('Gagal memuat data');
                }
            },
            error: function(xhr) {
                console.error('Load error:', xhr);
                toastr.error('Gagal memuat data pengaturan');
                $('#loadingOverlay').html('<p class="text-danger">Gagal memuat data. <a href="javascript:location.reload()">Refresh</a></p>');
            }
        });
    }
    
    function populateForm(data) {
        console.log('Populating form with:', data);
        
        // Mode
        $('input[name="mode"][value="' + (data.mode || 'off') + '"]').prop('checked', true);
        toggleRefinements(data.mode);
        
        // Is Active
        $('#isActive').prop('checked', data.is_active === true || data.is_active === 1);
        
        // Active Hours
        var activeHours = data.active_hours || {};
        $('#activeHoursStart').val(activeHours.start || '');
        $('#activeHoursEnd').val(activeHours.end || '');
        
        // Active Days
        var activeDays = activeHours.days || [];
        $('input[name="active_days[]"]').each(function() {
            var dayVal = parseInt($(this).val());
            $(this).prop('checked', activeDays.includes(dayVal));
        });
        
        // Fallback Template
        $('#fallbackTemplateId').val(data.fallback_template_id || '');
        
        // Welcome Message
        $('#welcomeMessage').val(data.welcome_message || '');
        
        // Handover
        $('#handoverAfterMessages').val(data.handover_after_messages || 5);
        
        // N8n
        $('#n8nUrl').val(data.n8n_url || '');
        if (data.has_n8n_key) {
            $('#n8nApiKey').attr('placeholder', '(Set) Leave empty to keep unchanged');
        }
    }
    
    // Toggle UI based on mode
    $('input[name="mode"]').on('change', function() {
        toggleRefinements($(this).val());
    });
    
    function toggleRefinements(mode) {
        if (mode === 'n8n') {
            $('#n8nConfigSection').slideDown();
        } else {
            $('#n8nConfigSection').slideUp();
        }
    }
    
    // Form submit
    $('#settingsForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            mode: $('input[name="mode"]:checked').val(),
            is_active: $('#isActive').is(':checked'),
            active_hours: {
                start: $('#activeHoursStart').val() || null,
                end: $('#activeHoursEnd').val() || null,
                days: $('input[name="active_days[]"]:checked').map(function() { return parseInt($(this).val()); }).get()
            },
            fallback_template_id: $('#fallbackTemplateId').val() || null,
            welcome_message: $('#welcomeMessage').val() || null,
            handover_after_messages: parseInt($('#handoverAfterMessages').val()) || 5,
            n8n_url: $('#n8nUrl').val() || null,
            n8n_api_key: $('#n8nApiKey').val() || null
        };

        console.log('Sending data:', formData);

        $.ajax({
            url: '{{ route("client.autoreply.settings.update", $wabaPool) }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                console.log('Response:', response);
                toastr.success(response.message || 'Berhasil disimpan');
                // Reload data to confirm
                loadSettingsData();
            },
            error: function(xhr) {
                console.log('Error:', xhr.responseJSON);
                toastr.error(xhr.responseJSON?.message || 'Terjadi kesalahan');
            }
        });
    });
});
</script>
@endpush

@push('styles')
<style>
.active-menu {
    border-left: 3px solid var(--bs-primary) !important;
    background-color: var(--bs-light) !important;
}
.mode-card {
    transition: all 0.2s;
}
.btn-check:checked + .mode-card {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.btn-check:checked + .mode-card .mode-icon {
    transform: scale(1.1);
    transition: transform 0.2s;
}
.cursor-pointer {
    cursor: pointer;
}
</style>
@endpush