@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">

            {{-- 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>

                            <div class="form-group">
                                <label>Message</label>
                                <textarea name="message_if_responded" class="form-control @error('message_if_responded') is-invalid @enderror" placeholder="Enter message">{{ old('message_if_responded', $step->message_if_responded ?? '') }}</textarea>
                                @error('message_if_responded')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Delay (hours)</label>
                                <input type="number" name="delay_hours" class="form-control @error('delay_hours') is-invalid @enderror" placeholder="Delay before sending" value="{{ old('delay_hours', $step->delay_hours ?? 24) }}">
                                @error('delay_hours')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Repeat Count</label>
                                <input type="number" name="repeat_count" class="form-control @error('repeat_count') is-invalid @enderror" placeholder="Repeat count" value="{{ old('repeat_count', $step->repeat_count ?? 0) }}">
                                @error('repeat_count')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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') ? 'checked' : '' }}>
                                <label class="form-check-label" for="alert_email">Send Email Alert</label>
                            </div>
                            <div class="form-group alert-email-field {{ old('send_email') ? '' : 'd-none' }}">
                                <label>Email Address</label>
                                <input type="email" name="if_responded_alert_email" class="form-control @error('if_responded_alert_email') is-invalid @enderror" placeholder="Enter email" value="{{ old('if_responded_alert_email', $step->if_responded_alert_email ?? '') }}">
                                @error('if_responded_alert_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-check">
                                <input type="checkbox" class="form-check-input alert-sms" id="alert_sms" name="send_sms" {{ old('send_sms') ? 'checked' : '' }}>
                                <label class="form-check-label" for="alert_sms">Send SMS Alert</label>
                            </div>
                            <div class="form-group alert-sms-field {{ old('send_sms') ? '' : 'd-none' }}">
                                <label>Phone Number</label>
                                <input type="text" name="if_responded_alert_sms" class="form-control @error('if_responded_alert_sms') is-invalid @enderror" placeholder="Enter phone number" value="{{ old('if_responded_alert_sms', $step->if_responded_alert_sms ?? '') }}">
                                @error('if_responded_alert_sms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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>
                        @error('if_not_respond')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- NOT RESPONDED CHILDREN --}}
                    <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>Message</label>
                                <textarea name="message_if_not_responded" class="form-control @error('message_if_not_responded') is-invalid @enderror" placeholder="Enter message">{{ old('message_if_not_responded', $step->message_if_not_responded ?? '') }}</textarea>
                                @error('message_if_not_responded')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Delay (hours)</label>
                                <input type="number" name="delay_hours_not" class="form-control @error('delay_hours_not') is-invalid @enderror" placeholder="Delay before sending" value="{{ old('delay_hours_not', $step->delay_hours ?? 24) }}">
                                @error('delay_hours_not')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Repeat Count</label>
                                <input type="number" name="repeat_count_not" class="form-control @error('repeat_count_not') is-invalid @enderror" placeholder="Repeat count" value="{{ old('repeat_count_not', $step->repeat_count ?? 0) }}">
                                @error('repeat_count_not')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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');
    });

    // Initialize visibility
    $('.alert-email').trigger('change');
    $('.alert-sms').trigger('change');
    $('.if-respond').trigger('change');
    $('.if-not-respond').trigger('change');
});
</script>
@endsection