@extends('app')

@section('page_title')
    Send Targeted SMS
@endsection

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/examples/css/pages/profile.min3f0d.css?v2.2.0')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker-ltie9.min.css')}}" />
    <link rel="stylesheet" href="{{asset('css/bootstrap-multiselect.css')}}" />
    <script type="text/javascript" src="{{asset('js/DateTimePicker-ltie9.min.js')}}"></script>
    <style>
        .demographics-section {
            background-color: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .demographics-title {
            font-weight: bold;
            margin-bottom: 15px;
            color: #212121;
        }

        .demographic-item {
            margin-bottom: 10px;
        }

        .reach-info {
            background-color: #212121;
            color: #ffc107;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .reach-badge {
            background-color: #ffc107;
            color: #212121;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: bold;
            margin-left: 5px;
        }

        .demographic-badge {
            background-color: #8e0d0e;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            margin-right: 5px;
            margin-bottom: 5px;
            display: inline-block;
        }

        .badge-close {
            margin-left: 5px;
            cursor: pointer;
        }

        .age-range-slider {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        /* Age Range Slider Styling */
        .age-range-slider {
            padding: 10px 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            margin-top: 8px;
            border: 1px solid #e0e0e0;
        }

        .ui-slider {
            position: relative;
            text-align: left;
            margin: 15px 0;
        }

        .ui-slider .ui-slider-handle {
            position: absolute;
            z-index: 2;
            width: 20px;
            height: 20px;
            cursor: pointer;
            background: #8e0d0e;
            border-radius: 50%;
            border: none;
            outline: none;
            top: -8px;
            margin-left: -10px;
        }

        .ui-slider .ui-slider-range {
            position: absolute;
            z-index: 1;
            display: block;
            border: 0;
            background: #ffc107;
            height: 100%;
        }

        .ui-slider-horizontal {
            height: 4px;
            background: #e0e0e0;
            border: none;
        }

        .ui-slider-horizontal .ui-slider-range {
            top: 0;
            height: 100%;
        }

        .age-distribution {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0 10px;
        }

        .age-distribution .col-xs-2 {
            position: relative;
        }

        .age-distribution .col-xs-2:before {
            content: '';
            position: absolute;
            height: 5px;
            width: 1px;
            background: #ccc;
            bottom: 15px;
            left: 50%;
        }
    </style>
@endpush

@section('page_content')
    <div class="page-content container-fluid" style="margin-top: 5em">
        <div class="row">
            @include('includes.side_profile')

            <div class="col-md-9">
                <!-- Panel Wizard Form -->
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <h3 class="panel-title">Send Targeted SMS</h3>
                    </div>
                    <div class="panel-body">
                        <!-- Steps -->
                        @if(session('success'))
                            <div style="height: 350px;">
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ session('success') }}</li>
                                    </ul>
                                </div>
                                @if(session('alert') && !empty(session('alert')))
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach(session('alert') as $error)
                                                <li>{{$error}}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="steps steps-sm row" data-plugin="matchHeight" data-by-row="true" role="tablist">
                                <div class="step col-md-4 {{$step===1?'current':''}}" data-target="#target_audience" role="tab" style="background-color: {{$step===1?'#212121':''}}">
                                    <div class="step-desc">
                                        <span class="step-title" style="color:{{$step===1?'#ffc107':'#212121'}}">Target Audience</span>
                                        <p>Select Demographics - Step 1</p>
                                    </div>
                                </div>

{{--                                <div class="step col-md-4 {{$step===2?'current':''}}" data-target="#sms_details" role="tab" style="background-color: {{$step===2?'#212121':''}}">--}}
{{--                                    <div class="step-desc">--}}
{{--                                        <span class="step-title" style="color:{{$step===2?'#ffc107':'#212121'}}">SMS Message</span>--}}
{{--                                        <p>SMS Message Details - Step 2</p>--}}
{{--                                    </div>--}}
{{--                                </div>--}}

                                <div class="step col-md-4 {{$step===2?'current':''}}" data-target="#confirmation" role="tab" style="background-color: {{$step===2?'#212121':''}}">
                                    <div class="step-desc">
                                        <span class="step-title" style="color:{{$step===2?'#ffc107':'#212121'}}">Confirmation</span>
                                        <p>Confirm the SMS details - Step 2</p>
                                    </div>
                                </div>
                            </div>
                            <!-- End Steps -->

                            <!-- Wizard Content -->
                            <div class="wizard-content">
                                @if($step===1)
                                    <div class="wizard-pane {{("$step"==="1") ? 'active' : ''}}" id="target_audience" role="tabpanel">
                                        <form method="post" id="targeting_form">
                                            @if(count($errors)>0)
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach($errors->all() as $error)
                                                            <li>{{$error}}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            @csrf
                                            <input type="hidden" name="step" value="{{$step}}">

                                            <div class="reach-info">
                                                <div class="row">
                                                    <div class="col-md-8">
                                                        <h4 style="color: white !important;">Estimated Audience Reach</h4>
                                                        <p>Select demographics to target specific audiences</p>
                                                    </div>
                                                    <div class="col-md-4 text-right">
                                                        <h3><span id="total-reach" style="color: lightgrey !important;">0</span> <span class="reach-badge">of 28,691,097</span></h3>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="selected-demographics-container" style="margin-bottom: 20px; display: none;">
                                                <h5>Selected Demographics:</h5>
                                                <div id="selected-demographics"></div>
                                            </div>

                                                <input type="hidden" name="total_reach" id="total_reach">

                                            <div class="demographics-section">
                                                <h4 class="demographics-title">Target Demographics</h4>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Banks" class="demographic-checkbox">
                                                                Banks
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Utilities" class="demographic-checkbox">
                                                                Utilities
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Voters" class="demographic-checkbox">
                                                                Voters
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Parents" class="demographic-checkbox">
                                                                Parents
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Drivers" class="demographic-checkbox">
                                                                Drivers
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="NHIA" class="demographic-checkbox">
                                                                NHIA
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Insurance" class="demographic-checkbox">
                                                                Insurance
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Pensioners" class="demographic-checkbox">
                                                                Pensioners
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Students" class="demographic-checkbox">
                                                                Students
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Farmers" class="demographic-checkbox">
                                                                Farmers
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" name="demographics[]" value="Gaming" class="demographic-checkbox">
                                                                Gaming
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group demographic-item">
                                                            <label class="control-label">
                                                                <input type="checkbox" id="age-range-checkbox" name="demographics[]" value="Age Range" class="demographic-checkbox">
                                                                Age Range
                                                                <span class="reach-count" style="display: none">(0)</span>
                                                            </label>
                                                            <div id="age-range-container" style="display: none;" class="age-range-slider">
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <input type="text" id="age-range" name="age_range" value="18 - 65 years" readonly style="border:0; color:#f6931f; font-weight:bold; background-color: transparent; width: 100%; text-align: center;">
                                                                    </div>
                                                                </div>
                                                                <div id="age-slider-range"></div>
                                                                <div class="age-distribution" style="margin-top: 10px; font-size: 12px; color: #666;">
                                                                    <div class="row">
                                                                        <div class="col-xs-2 text-center">18-25</div>
                                                                        <div class="col-xs-2 text-center">26-35</div>
                                                                        <div class="col-xs-2 text-center">36-45</div>
                                                                        <div class="col-xs-2 text-center">46-55</div>
                                                                        <div class="col-xs-2 text-center">56-65</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>


                                            {{--                                        @if(!auth()->user()->username == 'GCBCARDS')--}}

                                            {{--                                        @endif--}}
                                            <input type="hidden" name="step" value="{{$step}}">
                                            <div class="form-group" style="display: none">
                                                <label class="control-label" for="phone_numbers">Mobile Number </label>
                                                <input type="tel" class="form-control round" id="phone_numbers" placeholder="024xxxxxxx" name="phone_numbers" maxlength="13" >
                                                <span style="float: right; padding-right: 30px"><small>Only one mobile number can be inputted at a time. For more than one, kindly use the Bulk or Personalized SMS</small></span>
                                                {{--                                                <small>Mobile numbers should be separated with a comma(,)</small></span>--}}
                                            </div>

                                                <div class="form-group">
                                                    <label class="control-label" for="campaign_name">Campaign Name </label>
                                                    <input type="text" class="form-control round" id="campaign_name" placeholder="2025 Campaign" name="campaign_name" >
                                                </div>

                                            <div class="form-group">
                                                <label class="control-label" for="sender_id">Sender ID <a href="{{route('new-sender-id',['panel'=>'sender_id'])}}" class="btn btn-xs" style="color: #ffc107; background-color: black"><i class="fa fa-plus-circle"></i> Add New</a></label>
                                                <select class="form-control round" name="sender_id">
                                                    @foreach($sender_ids as $id)
                                                        <option value="{{$id->sender_id}}">{{$id->sender_id}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label" for="schedule_date">Schedule Date</label>
                                                <input type="text" class="form-control round pick-me" id="sendschedule_dateer_id" name="schedule_date" value="">
                                            </div>

                                            {{--                                            <div class="form-group">--}}
                                            {{--                                                <label class="control-label" for="flash">Message Type  </label>--}}
                                            {{--                                                <div id="dtBox"></div>--}}
                                            {{--                                                <div class="form-control round" style="background: #f3f7f9;">--}}
                                            {{--                                                    <label><input checked="checked" type="radio" name="flash" value="text"><b>Text</b>&nbsp;&nbsp;&nbsp; </label>--}}
                                            {{--                                                    <label><input type="radio" name="flash" value="flash"><b>Flash</b></label>--}}
                                            {{--                                                </div>--}}
                                            {{--                                            </div>--}}

                                            <div class="form-group">
                                                <label class="control-label" for="image_upload">Add a picture to the message</label>
                                                <input type="file" class="form-control round" id="image_upload" name="image_upload" >
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="message_content">Message Content
                                                    @include('sms.snwolley_toggle_button')
                                                    {{-- <a> <button type="button" class="btn" data-toggle="modal" data-target="#aiMessageGenerator" style="background-color: #0b0c0f; color: #FFCB05;">SnwolleyAI assist my campaign</button></a> --}}
                                                </label>
                                                @include('sms.snwolley_tone_select')
                                                <div class="help-block" style="color: brown; float: right; padding-right: 100px; font-weight:bold;"><span id="char_span_s"> 0</span></div>
                                                <textarea rows="5" name="message_content" id="message_content" class="form-control" rows="10" cols="60" maxlength="1528">{{!empty(old('message_content')) ? old('message_content') : @session('single_sms_data')['message_content']}}</textarea>
                                            </div>

                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    &nbsp;
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="submit" name="next" class="btn btn-primary btn-block" value="NEXT &raquo;" style="background-color: #8e0d0e;border: 1em #fff">
                                                </div>
                                            </div>
                                        </form>
                                    </div>


                                @elseif($step===2)
                                    <div class="wizard-pane {{("$step"==="3") ? 'active' : ''}}" id="confirmation" role="tabpanel">
                                        <form method="post" id="confirmation_form">
                                            @if(count($errors)>0)
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach($errors->all() as $error)
                                                            <li>{{$error}}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <input type="hidden" name="step" value="{{$step}}">
                                            @csrf

                                                <div class="reach-info" style="margin-bottom: 30px;">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <h4 style="color: white !important;">Target Audience</h4>
                                                            <div id="confirmation-demographics">
                                                                @foreach(session('targeted_sms_data')['demographics'] as $demo)
                                                                    <span class="demographic-badge">{{$demo}}</span>
                                                                @endforeach
                                                            </div>
                                                            <div style="margin-top: 10px;">
                                                                <h5 style="color: lightgrey !important;">Estimated Reach: <b>{{number_format(session('targeted_sms_data')['total_reach'])}} recipients</b></h5>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div style="font-size: 15px; text-align: center;">
                                                You're about to send a targeted SMS message with sender Id <b style="font-weight: bold;color: #212121;text-transform: uppercase">{{session('targeted_sms_data')['sender_id']}}</b><br /><br />
                                            </div>



                                            <div class="row">
                                                <div class="col-md-3">
                                            <span>
                                                <img style="width: 40%" src="{{asset('NewUI/dashboard/assets/images/three.png')}}">
                                            </span>
                                                    <br>
                                                    <br>
                                                    <div style="font-weight: bold; color: green">
                                                        Schedule date
                                                    </div>
                                                    <b>{{empty(session('targeted_sms_data')['schedule_date']) ? 'Send Now' : session('targeted_sms_data')['schedule_date']}}</b>
                                                </div>

                                                <div class="col-md-3">
                                            <span>
                                                <img style="width: 40%" src="{{asset('NewUI/dashboard/assets/images/one.png')}}">
                                            </span>
                                                    <br>
                                                    <br>
                                                    <div style="font-weight: bold; color: green">
                                                        Total Recipients
                                                    </div>
                                                    <b>{{number_format(session('targeted_sms_data')['total_reach'])}} Recipients</b>
                                                </div>

                                                <div class="col-md-3">
                                                    <span><img style="width: 38%" src="{{asset('NewUI/dashboard/assets/images/circle.png')}}"></span>
                                                    <br />
                                                    <br />
                                                    <div style="font-weight: bold; color: green">
                                                        Message Count
                                                    </div>
                                                    <b>{{number_format(session('targeted_sms_data')['total_reach'] * $sms_count)}} SMS</b>
                                                </div>

{{--                                                <div class="col-md-3">--}}
{{--                                            <span>--}}
{{--                                                <img style="width: 45%;" src="{{asset('NewUI/dashboard/assets/images/two.png')}}">--}}
{{--                                            </span>--}}
{{--                                                    <br>--}}
{{--                                                    <br>--}}
{{--                                                    <div style="font-weight: bold; color: green">--}}
{{--                                                        Total Price--}}
{{--                                                    </div>--}}
{{--                                                    <b>{{session('targeted_sms_data')['total_price']}} {{auth()->user()->currency}}</b>--}}
{{--                                                </div>--}}
                                                <div class="col-md-3">
                                            <span>
                                                <img style="width: 30%;margin-top: 1em" src="{{asset('NewUI/dashboard/assets/images/usedprice.png')}}">
                                            </span>
                                                    <br>
                                                    <br>
                                                    <div style="font-weight: bold; color: green">
                                                        Credit Available
                                                    </div>
                                                    <b>{{session('targeted_sms_data')['credit_available']}} GHc</b>
                                                </div>
                                            </div>

{{--                                            <div class="row" style="margin-top: 20px;">--}}
{{--                                                <div class="col-md-3">--}}
{{--                                            <span>--}}
{{--                                                <img style="width: 30%;margin-top: 1em" src="{{asset('NewUI/dashboard/assets/images/usedprice.png')}}">--}}
{{--                                            </span>--}}
{{--                                                    <br>--}}
{{--                                                    <br>--}}
{{--                                                    <div style="font-weight: bold; color: green">--}}
{{--                                                        Credit Available--}}
{{--                                                    </div>--}}
{{--                                                    <b>{{session('targeted_sms_data')['credit_available']}} {{auth()->user()->currency}}</b>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
                                            <br />

                                            <div class="mobile__wrapper">
                                                <div class="mobile__outline--top"></div>
                                                <div class="mobile__outline--body">
                                                    <div class="mobile__screen">
                                                        <div class="from-me loud">
                                                            <p>{!! nl2br(session('targeted_sms_data')['message_content']) !!}</p>
                                                            <p id="senderid">Sent by: {{session('targeted_sms_data')['sender_id']}}</p>
                                                        </div>
                                                        <div class="clear"></div>
                                                    </div>
                                                </div>
                                                <div class="mobile__outline--bottom"></div>
                                            </div>

                                            <br>
                                            <br>

                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    <input type="submit" name="back" class="btn btn-warning btn-block" value="&laquo; BACK" style="background-color: #8e0d0e">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="submit" name="submit" class="btn btn-primary btn-block submit" value="SUBMIT">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                @endif
                            </div>
                            <!-- End Wizard Content -->
                        @endif
                    </div>
                </div>
                <!-- End Panel Wizard One Form -->
            </div>
        </div>
    </div>

    @include('sms.snwolley_modal')

@endsection

@push('scripts')
    <script type="text/javascript" src="{{asset('js/DateTimePicker.min.js')}}"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{asset('js/bootstrap-multiselect.js')}}"></script>

    <script>
        $(document).ready(function() {
            // Initialize the date picker
            $("#dtBox").DateTimePicker();

            $('.submit').on('click', function() {
                $(this).hide();
                $('#confirmation_form').submit();
            });

            // Initialize age range slider
            $("#age-slider-range").slider({
                range: true,
                min: 18,
                max: 65,
                values: [18, 65],
                slide: function(event, ui) {
                    $("#age-range").val(ui.values[0] + " - " + ui.values[1] + " years");
                    updateAgeRangeReach(ui.values[0], ui.values[1]);
                }
            });

            $("#age-range").val($("#age-slider-range").slider("values", 0) + " - " + $("#age-slider-range").slider("values", 1) + " years");

            // Toggle age range slider visibility
            $("#age-range-checkbox").on('change', function() {
                if ($(this).is(':checked')) {
                    $("#age-range-container").show();
                    updateAgeRangeReach(
                        $("#age-slider-range").slider("values", 0),
                        $("#age-slider-range").slider("values", 1)
                    );
                } else {
                    $("#age-range-container").hide();
                    $(this).data('reach', 0);
                    updateReach();
                }
            });

            // Function to calculate reach based on selected age range
            // Function to calculate reach based on selected age range
            function updateAgeRangeReach(minAge, maxAge) {
                // Define age groups and their corresponding reach values - with more reasonable numbers
                // Total sum is now approximately 5 million instead of 19 million
                const ageGroups = {
                    '18-25': 1374219,
                    '26-35': 1690432,
                    '36-45': 1524673,
                    '46-55': 1282346,
                    '56-65': 1128427
                };

                // Calculate total population in all age groups
                const totalPopulation = Object.values(ageGroups).reduce((sum, value) => sum + value, 0);

                // Calculate proportion of population in selected range
                let selectedRangePopulation = 0;

                Object.entries(ageGroups).forEach(([range, population]) => {
                    const [groupMin, groupMax] = range.split('-').map(Number);

                    // Calculate overlap between selected range and this age group
                    if (maxAge >= groupMin && minAge <= groupMax) {
                        const overlapMin = Math.max(minAge, groupMin);
                        const overlapMax = Math.min(maxAge, groupMax);
                        const groupRange = groupMax - groupMin + 1;
                        const overlapRange = overlapMax - overlapMin + 1;

                        // Add proportional population from this group
                        selectedRangePopulation += (overlapRange / groupRange) * population;
                    }
                });

                // Update the checkbox's reach data attribute
                $('#age-range-checkbox').data('reach', Math.round(selectedRangePopulation));

                // Update the reach display
                $('#age-range-checkbox').closest('.demographic-item')
                    .find('.reach-count')
                    .text("(" + new Intl.NumberFormat().format(Math.round(selectedRangePopulation)) + ")")
                    .show();

                // Update total reach
                updateReach();
            }

            // Update the main updateReach function to better handle the age range
            function updateReach() {
                let totalReach = 0;
                $('.demographic-checkbox:checked').each(function() {
                    totalReach += $(this).data('reach') || 0;
                });

                // Format the number with commas
                const formattedReach = new Intl.NumberFormat().format(totalReach);
                $('#total-reach').text(formattedReach);
                $('#total_reach').val(totalReach);
            }

            // Assign random reach values to demographics
            const demographicsList = [
                'Banks', 'Utilities', 'Voters', 'Parents', 'Drivers', 'NHIA',
                'Insurance', 'Pensioners', 'Students', 'Farmers', 'Gaming', 'Age Range'
            ];

            // Generate random reach values that sum to 21 million
            const totalReach = 28691097;
            let reaches = [];
            let sum = 0;

            for (let i = 0; i < demographicsList.length - 1; i++) {
                // Generate random number between 1,000,000 and 3,500,000
                let reach = Math.floor(Math.random() * 2500000) + 1000000;
                reaches.push(reach);
                sum += reach;
            }

            // Add the last segment to make it sum up to exactly 28,691,097
            const lastReach = totalReach - sum;
            reaches.push(lastReach);

            // Assign reach values to each demographic
            $('.demographic-checkbox').each(function(index) {
                const formattedReach = new Intl.NumberFormat().format(reaches[index]);
                $(this).closest('.demographic-item').find('.reach-count').text("(" + formattedReach + ")");
                $(this).data('reach', reaches[index]);
            });

            // Update total reach when demographics are selected/deselected
            $('.demographic-checkbox').on('change', function() {
                updateReach();
                updateSelectedDemographics();
            });

            // Function to update selected demographics display
            function updateSelectedDemographics() {
                let selectedDemos = [];
                $('.demographic-checkbox:checked').each(function() {
                    const demoName = $(this).val();
                    selectedDemos.push(demoName);
                });

                if (selectedDemos.length > 0) {
                    $('#selected-demographics-container').show();
                    $('#selected-demographics').html('');

                    selectedDemos.forEach(function(demo) {
                        $('#selected-demographics').append(
                            '<span class="demographic-badge">' + demo +
                            '<span class="badge-close" data-demo="' + demo + '">×</span></span> '
                        );
                    });
                } else {
                    $('#selected-demographics-container').hide();
                }

                // Add click handlers for removing badges
                $('.badge-close').on('click', function() {
                    const demo = $(this).data('demo');
                    $('input[value="' + demo + '"]').prop('checked', false);
                    updateReach();
                    updateSelectedDemographics();
                });
            }

            // Display selected demographics in Step 2
            @if($step === 2)
            const demographics = {!! json_encode(session('targeted_sms_data')['demographics'] ?? []) !!};
            let demoHtml = '';

            demographics.forEach(function(demo) {
                demoHtml += '<span class="demographic-badge">' + demo + '</span> ';
            });

            $('#audience-demographics').html(demoHtml);
            @endif

            $('#message_content').bind("keydown keyup keypress mousemove paste", function() {
                var char_count = $('#message_content').val().length;
                // $('#char_span_s').text(char_count);
                if (char_count <= 160) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 1 page');
                };
                if (char_count > 160 && char_count <= 306) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 2 pages');
                };
                if (char_count > 306 && char_count <= 459) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 3 pages');
                };
                if (char_count > 459 && char_count <= 621) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 4 pages');
                }
                if (char_count > 621) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 5 pages');
                }
                if (char_count > 766) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 6 pages');
                }
                if (char_count > 919) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 7 pages');
                }
                if (char_count > 1072) {
                    $('#char_span_s').text(' ' + char_count + ' character(s), 8 pages');
                }
            });

            // Form validation before submission
            $('#targeting_form').on('submit', function(e) {
                let isValid = true;
                let errorMessages = [];

                // Validate demographics selection
                if ($('.demographic-checkbox:checked').length === 0) {
                    isValid = false;
                    errorMessages.push('Please select at least one demographic group');
                }

                // Validate sender ID
                if (!$('select[name="sender_id"]').val()) {
                    isValid = false;
                    errorMessages.push('Please select a sender ID');
                }

                // Validate message content
                const messageContent = $('#message_content').val();
                if (!messageContent.trim()) {
                    isValid = false;
                    errorMessages.push('Message content is required');
                } else if (messageContent.length > 1528) {
                    isValid = false;
                    errorMessages.push('Message content exceeds maximum length');
                }

                // Validate schedule date if provided
                const scheduleDate = $('#schedule_date').val();
                if (scheduleDate) {
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);
                    const selectedDate = new Date(scheduleDate);
                    if (selectedDate < today) {
                        isValid = false;
                        errorMessages.push('Schedule date must be today or a future date');
                    }
                }

                // Validate image upload if provided
                const imageInput = $('#image_upload')[0];
                if (imageInput.files.length > 0) {
                    const file = imageInput.files[0];
                    const fileSize = file.size / 1024 / 1024; // Convert to MB
                    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];

                    if (!allowedTypes.includes(file.type)) {
                        isValid = false;
                        errorMessages.push('Invalid image format. Allowed formats: JPEG, JPG, PNG, GIF');
                    }

                    if (fileSize > 2) {
                        isValid = false;
                        errorMessages.push('Image size should not exceed 2MB');
                    }
                }

                // Display errors if validation fails
                if (!isValid) {
                    e.preventDefault();
                    const errorHtml = '<div class="alert alert-danger"><ul>' +
                        errorMessages.map(msg => '<li>' + msg + '</li>').join('') +
                        '</ul></div>';

                    // Remove existing error messages
                    $('.alert-danger').remove();

                    // Add new error messages at the top of the form
                    $(this).prepend(errorHtml);

                    // Scroll to error messages
                    $('html, body').animate({
                        scrollTop: $('.alert-danger').offset().top - 100
                    }, 500);
                }
            });

            // Real-time message length validation
            $('#message_content').on('input', function() {
                const maxLength = 1528;
                if (this.value.length > maxLength) {
                    this.value = this.value.substring(0, maxLength);
                }
            });
        });
    </script>
@endpush