@extends('layouts.admin')

@section('title', 'SMS Manager')

@section('breadcrumb')
    <li class="breadcrumb-item active">SMS Manager</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Send Bulk SMS</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form action="{{ route('admin.sms.send') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="recipient_type">Recipient Type</label>
                            <select class="form-control" id="recipient_type" name="recipient_type" onchange="toggleRecipientFields()">
                                <option value="all_users">All Users with Phone Numbers</option>
                                <option value="specific_users">Specific Users</option>
                                <option value="manual_input">Manual Input (Comma Separated)</option>
                            </select>
                        </div>

                        <div class="form-group" id="specific_users_group" style="display: none;">
                            <label for="specific_users">Select Users</label>
                            <select class="form-control select2" id="specific_users" name="specific_users[]" multiple="multiple" style="width: 100%;">
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->phone }})</option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple.</small>
                        </div>

                        <div class="form-group" id="manual_numbers_group" style="display: none;">
                            <label for="manual_numbers">Phone Numbers</label>
                            <textarea class="form-control" id="manual_numbers" name="manual_numbers" rows="3" placeholder="+1234567890, +9876543210"></textarea>
                            <small class="form-text text-muted">Enter phone numbers separated by commas.</small>
                        </div>

                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="4" placeholder="Enter your SMS message here..." required></textarea>
                            <small class="form-text text-muted">Standard SMS length is 160 characters.</small>
                        </div>
                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Send SMS</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleRecipientFields() {
        var type = document.getElementById('recipient_type').value;
        document.getElementById('specific_users_group').style.display = (type === 'specific_users') ? 'block' : 'none';
        document.getElementById('manual_numbers_group').style.display = (type === 'manual_input') ? 'block' : 'none';
    }
</script>
@endsection