@extends('admin.layouts.master')

@section('page-title', 'Manage Campaign Steps')

@section('content')
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <h3>Campaign: {{ $campaign->title }}</h3>
        </div>
        <div class="card-body">
            <form id="campaign-steps-form" method="POST" action="{{ route('admin.campaigns.steps.store', $campaign->id) }}">
                @csrf

                <!-- Root / Welcome message -->
                <div class="step-block p-3 border rounded mb-3 bg-light" data-step-id="1" data-level="0">
                    <strong>Welcome Message:</strong>
                    <p>{{ $campaign->welcome_message }}</p>

                    <!-- If Responded -->
                    <div class="form-group mt-3">
                        <label>If Responded:</label>
                        <select class="form-control if-respond" name="steps[1][if_respond]">
                            <option value="">-- Select Option --</option>
                            <option value="next_message">Next Message</option>
                            <option value="stop">Stop Campaign</option>
                            <option value="inform_client">Inform Client</option>
                        </select>
                    </div>
                    <div class="responded-children mt-2"></div>

                    <!-- If Not Responded -->
                    <div class="form-group mt-3">
                        <label>If Not Responded:</label>
                        <select class="form-control if-not-respond" name="steps[1][if_not_respond]">
                            <option value="">-- Select Option --</option>
                            <option value="next_message">Next Message</option>
                            <option value="stop">Stop Campaign</option>
                        </select>
                    </div>
                    <div class="not-responded-children mt-2"></div>
                </div>

                <button type="submit" class="btn btn-success">Save Campaign Steps</button>
            </form>
        </div>
    </div>
</div>
@endsection


@section('page_scripts')
<!-- ✅ Make sure jQuery loads BEFORE the script -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    console.log('✅ jQuery loaded and script running');

    let stepCount = 1;

    function createMessageBlock(parentId, level, type) {
        stepCount++;
        return `
        <div class="nested-block border p-3 rounded mt-3 bg-white" data-step-id="${stepCount}" data-parent-id="${parentId}" data-level="${level}">
            <h6 class="text-primary">${type === 'responded' ? 'If Responded → Next Message' : 'If Not Responded → Next Message'}</h6>

            <div class="form-group">
                <label>Message</label>
                <textarea name="steps[${stepCount}][message]" class="form-control" placeholder="Enter message text"></textarea>
            </div>

            <div class="form-group">
                <label>Delay (hours)</label>
                <input type="number" name="steps[${stepCount}][delay_hours]" class="form-control" placeholder="Delay before sending">
            </div>

            <div class="form-group">
                <label>Repeat Count</label>
                <input type="number" name="steps[${stepCount}][repeat_count]" class="form-control" placeholder="How many times to resend if no response">
            </div>

            <div class="form-group">
                <label>If Responded:</label>
                <select class="form-control if-respond" name="steps[${stepCount}][if_respond]">
                    <option value="">-- Select Option --</option>
                    <option value="next_message">Next Message</option>
                    <option value="stop">Stop Campaign</option>
                    <option value="inform_client">Inform Client</option>
                </select>
            </div>
            <div class="responded-children"></div>

            <div class="form-group mt-3">
                <label>If Not Responded:</label>
                <select class="form-control if-not-respond" name="steps[${stepCount}][if_not_respond]">
                    <option value="">-- Select Option --</option>
                    <option value="next_message">Next Message</option>
                    <option value="stop">Stop Campaign</option>
                </select>
            </div>
            <div class="not-responded-children"></div>
        </div>`;
    }

    function createInformClientBox(parentId, level) {
        return `
        <div class="inform-client-box p-3 border rounded mt-2 bg-light" data-parent-id="${parentId}" data-level="${level}">
            <h6 class="text-info">Inform Client</h6>
            <div class="form-check">
                <input type="checkbox" class="form-check-input alert-email" id="alert-email-${parentId}">
                <label class="form-check-label" for="alert-email-${parentId}">Alert by Email</label>
                <input type="email" class="form-control mt-1 alert-email-field d-none" placeholder="Enter Email" name="steps[${parentId}][alert_email]">
            </div>
            <div class="form-check mt-2">
                <input type="checkbox" class="form-check-input alert-sms" id="alert-sms-${parentId}">
                <label class="form-check-label" for="alert-sms-${parentId}">Alert by SMS</label>
                <input type="text" class="form-control mt-1 alert-sms-field d-none" placeholder="Enter Phone Number" name="steps[${parentId}][alert_sms]">
            </div>
        </div>`;
    }

    // 🔹 Responded change handler
    $(document).on('change', '.if-respond', function() {
        const val = $(this).val();
        const parent = $(this).closest('.step-block, .nested-block');
        const parentId = parent.data('step-id');
        const level = parseInt(parent.data('level')) + 1;
        const container = parent.children('.responded-children');
        container.empty();

        if (val === 'next_message') {
            container.append(createMessageBlock(parentId, level, 'responded'));
        } else if (val === 'inform_client') {
            container.append(createInformClientBox(parentId, level));
        }
    });

    // 🔹 Not responded change handler
    $(document).on('change', '.if-not-respond', function() {
        const val = $(this).val();
        const parent = $(this).closest('.step-block, .nested-block');
        const parentId = parent.data('step-id');
        const level = parseInt(parent.data('level')) + 1;
        const container = parent.children('.not-responded-children');
        container.empty();

        if (val === 'next_message') {
            container.append(createMessageBlock(parentId, level, 'not_responded'));
        }
    });

    // 🔹 Email/SMS toggle
    $(document).on('change', '.alert-email', function() {
        $(this).siblings('.alert-email-field').toggleClass('d-none', !$(this).is(':checked'));
    });
    $(document).on('change', '.alert-sms', function() {
        $(this).siblings('.alert-sms-field').toggleClass('d-none', !$(this).is(':checked'));
    });
});
</script>

<style>
.nested-block[data-level="1"] { margin-left: 30px; }
.nested-block[data-level="2"] { margin-left: 60px; }
.nested-block[data-level="3"] { margin-left: 90px; }
</style>
@endsection