@extends('admin.layouts.master')

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

@section('subheader')
<div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader">
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <div class="d-flex align-items-center flex-wrap mr-1">
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <h5 class="text-dark font-weight-bold my-1 mr-5">Edit Campaign Steps</h5>
            </div>
        </div>
        <div class="d-flex align-items-center">
            <a href="{{route('admin.campaigns.index')}}" class="btn btn-light-primary font-weight-bolder btn-sm">
                <i class="fa fa-reply" aria-hidden="true"></i> Return To Campaigns
            </a>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="container mt-4">

    @include('admin.layouts.flash_messages')

    <div class="card">
        <div class="card-header">
            <h3>Campaign: {{ $campaign->title }}</h3>
        </div>

        <div class="card-body">

            {{-- Global Error Alert --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>There were some errors with your submission:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.campaigns.steps.store', $campaign->id) }}">
                @csrf

                <div class="step-block p-3 border rounded mb-3 bg-light">
                    <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 @error('if_respond') is-invalid @enderror" name="if_respond">
                            <option value="">-- Select Option --</option>
                            <option value="next_message" {{ old('if_respond', $step->if_respond ?? '') == 'next_message' ? 'selected' : '' }}>Next Message</option>
                            <option value="stop" {{ old('if_respond', $step->if_respond ?? '') == 'stop' ? 'selected' : '' }}>Stop Campaign</option>
                            <option value="inform_client" {{ old('if_respond', $step->if_respond ?? '') == 'inform_client' ? 'selected' : '' }}>Inform Client</option>
                        </select>
                        @error('if_respond')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- RESPONDED CHILDREN --}}
                    <div class="responded-children">

                        {{-- NEXT MESSAGE --}}
                        <div class="message-block border p-3 rounded mt-3 bg-white {{ old('if_respond', $step->if_respond ?? '') !== 'next_message' ? 'd-none' : '' }}">
                            <h6 class="text-primary">Next Message (If Responded)</h6>

                            {{-- Repeat Count Dropdown --}}
                            <div class="form-group">
                                <label>Repeat Count</label>
                                <select name="repeat_count"
                                        class="form-control repeat-count"
                                        data-target="responded">
                                    <option value="">-- Select Count --</option>
                                    @for($i=1; $i<=10; $i++)
                                        <option value="{{ $i }}" {{ old('repeat_count', $step->repeat_count ?? '') == $i ? 'selected':'' }}>
                                            {{ $i }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            {{-- Dynamic Messages --}}
                            @php
                                $respondedMessages = old('messages_responded',
                                    is_array($step->messages_responded) ? $step->messages_responded : json_decode($step->messages_responded ?? '[]', true)
                                );
                            @endphp

                            <div class="dynamic-messages-responded">
                                @foreach($respondedMessages as $i => $msg)
                                    <div class="form-group mt-3">
                                        <label>Message #{{ $i+1 }}</label>
                                        <textarea name="messages_responded[{{ $i }}][message]" class="form-control">{{ $msg['message'] ?? '' }}</textarea>
                                    </div>
                                    <div class="form-row mb-3">
                                        <div class="col">
                                            <label>Delay Type</label>
                                            <select name="messages_responded[{{ $i }}][delay_type]" class="form-control">
                                                <option value="hours" {{ (old("messages_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'hours' ? 'selected' : '' }}>Hours</option>
                                                <option value="daily" {{ (old("messages_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'daily' ? 'selected' : '' }}>Daily</option>
                                                <option value="weekly" {{ (old("messages_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'weekly' ? 'selected' : '' }}>Weekly</option>
                                            </select>
                                        </div>
                                        <div class="col">
                                            <label>Delay Value</label>
                                            <input type="number" name="messages_responded[{{ $i }}][delay_value]" class="form-control" value="{{ old("messages_responded.$i.delay_value") ?? ($msg['delay_value'] ?? '') }}" placeholder="Enter delay value">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- INFORM CLIENT --}}
                        <div class="inform-client-box border p-3 rounded mt-3 bg-light {{ old('if_respond', $step->if_respond ?? '') !== 'inform_client' ? 'd-none' : '' }}">
                            <h6 class="text-info">Inform Client (If Responded)</h6>

                            <div class="form-check">
                                <input type="checkbox" class="form-check-input alert-email" id="alert_email" name="send_email" {{ old('send_email', $step->send_email ?? 0) ? 'checked' : '' }}>
                                <label class="form-check-label" for="alert_email">Send Email Alert</label>
                            </div>
                            <div class="form-group alert-email-field {{ old('send_email', $step->send_email ?? 0) ? '' : 'd-none' }}">
                                <label>Email Address</label>
                                <input type="email" name="if_responded_alert_email" class="form-control" placeholder="Enter email" value="{{ old('if_responded_alert_email', $step->if_responded_alert_email ?? '') }}">
                            </div>

                            <div class="form-check">
                                <input type="checkbox" class="form-check-input alert-sms" id="alert_sms" name="send_sms" {{ old('send_sms', $step->send_sms ?? 0) ? 'checked' : '' }}>
                                <label class="form-check-label" for="alert_sms">Send SMS Alert</label>
                            </div>
                            <div class="form-group alert-sms-field {{ old('send_sms', $step->send_sms ?? 0) ? '' : 'd-none' }}">
                                <label>Phone Number</label>
                                <input type="text" name="if_responded_alert_sms" class="form-control" placeholder="Enter phone number" value="{{ old('if_responded_alert_sms', $step->if_responded_alert_sms ?? '') }}">
                            </div>
                        </div>
                    </div>

                    {{-- IF NOT RESPONDED --}}
                    <div class="form-group mt-3">
                        <label>If Not Responded:</label>
                        <select class="form-control if-not-respond @error('if_not_respond') is-invalid @enderror" name="if_not_respond">
                            <option value="">-- Select Option --</option>
                            <option value="next_message" {{ old('if_not_respond', $step->if_not_respond ?? '') == 'next_message' ? 'selected' : '' }}>Next Message</option>
                            <option value="stop" {{ old('if_not_respond', $step->if_not_respond ?? '') == 'stop' ? 'selected' : '' }}>Stop Campaign</option>
                        </select>
                    </div>

                    {{-- NOT RESPONDED CHILDREN --}}
                    @php
                        $notRespondedMessages = old('messages_not_responded',
                            is_array($step->messages_not_responded) ? $step->messages_not_responded : json_decode($step->messages_not_responded ?? '[]', true)
                        );
                    @endphp
                    <div class="not-responded-children">
                        <div class="message-block-not border p-3 rounded mt-3 bg-white {{ old('if_not_respond', $step->if_not_respond ?? '') !== 'next_message' ? 'd-none' : '' }}">
                            <h6 class="text-primary">Next Message (If Not Responded)</h6>

                            <div class="form-group">
                                <label>Repeat Count</label>
                                <select name="repeat_count_not" class="form-control repeat-count" data-target="not_responded">
                                    <option value="">-- Select Count --</option>
                                    @for($i=1; $i<=10; $i++)
                                        <option value="{{ $i }}" {{ old('repeat_count_not', $step->repeat_count_not ?? '') == $i ? 'selected':'' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>

                            <div class="dynamic-messages-not-responded">
                                @foreach($notRespondedMessages as $i => $msg)
                                    <div class="form-group mt-3">
                                        <label>Message #{{ $i+1 }}</label>
                                        <textarea name="messages_not_responded[{{ $i }}][message]" class="form-control">{{ $msg['message'] ?? '' }}</textarea>
                                    </div>
                                    <div class="form-row mb-3">
                                        <div class="col">
                                            <label>Delay Type</label>
                                            <select name="messages_not_responded[{{ $i }}][delay_type]" class="form-control">
                                                <option value="hours" {{ (old("messages_not_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'hours' ? 'selected' : '' }}>Hours</option>
                                                <option value="daily" {{ (old("messages_not_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'daily' ? 'selected' : '' }}>Daily</option>
                                                <option value="weekly" {{ (old("messages_not_responded.$i.delay_type") ?? ($msg['delay_type'] ?? '')) == 'weekly' ? 'selected' : '' }}>Weekly</option>
                                            </select>
                                        </div>
                                        <div class="col">
                                            <label>Delay Value</label>
                                            <input type="number" name="messages_not_responded[{{ $i }}][delay_value]" class="form-control" value="{{ old("messages_not_responded.$i.delay_value") ?? ($msg['delay_value'] ?? '') }}" placeholder="Enter delay value">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>

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

        </div>
    </div>
</div>
@endsection

@section('page_scripts')
<script>
$(function() {

    // Toggle Email/SMS input fields
    $(document).on('change', '.alert-email', function() {
        $('.alert-email-field').toggleClass('d-none', !this.checked);
    });
    $(document).on('change', '.alert-sms', function() {
        $('.alert-sms-field').toggleClass('d-none', !this.checked);
    });

    // Toggle Responded blocks
    $(document).on('change', '.if-respond', function() {
        const val = $(this).val();
        $('.responded-children .message-block').toggleClass('d-none', val !== 'next_message');
        $('.responded-children .inform-client-box').toggleClass('d-none', val !== 'inform_client');
    });

    // Toggle Not Responded blocks
    $(document).on('change', '.if-not-respond', function() {
        const val = $(this).val();
        $('.not-responded-children .message-block-not').toggleClass('d-none', val !== 'next_message');
    });

    $(document).on('change', '.repeat-count', function () {

        let count = parseInt($(this).val());
        let target = $(this).data('target');

        let container =
            target === "responded"
                ? $('.dynamic-messages-responded')
                : $('.dynamic-messages-not-responded');

        let existingValues = [];

        container.find('textarea, select, input').each(function () {
            const name = $(this).attr('name');
            const val = $(this).val();
            existingValues.push({elementName: name, value: val});
        });

        container.empty();

        if (!count || count < 1) return;

        for (let i = 1; i <= count; i++) {
            const oldValue = existingValues[i - 1] ?? {};
            container.append(`
                <div class="form-group mt-3">
                    <label>Message #${i}</label>
                    <textarea name="messages_${target}[${i-1}][message]" class="form-control">${oldValue.value ?? ''}</textarea>
                </div>
                <div class="form-row mb-3">
                    <div class="col">
                        <label>Delay Type</label>
                        <select name="messages_${target}[${i-1}][delay_type]" class="form-control">
                            <option value="hours">Hours</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                        </select>
                    </div>
                    <div class="col">
                        <label>Delay Value</label>
                        <input type="number" name="messages_${target}[${i-1}][delay_value]" class="form-control" placeholder="Enter delay value" value="">
                    </div>
                </div>
            `);
        }
    });

    // Initialize visibility on page load
    $('.alert-email').trigger('change');
    $('.alert-sms').trigger('change');
    $('.if-respond').trigger('change');
    $('.if-not-respond').trigger('change');

});
</script>
@endsection