@extends('admin.layouts.main')
@section('menu','System')
@section('title','Send SMS')

@section('content')
<form action="{{ route('admin.sms.send') }}" method="POST">
    @csrf
    <fieldset class="content-group">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Compose SMS</div>
                    <div class="panel-body">
                        <!-- Recipient Type -->
                        <div class="form-group">
                            <label class="control-label">Send To<span class="text-danger"> *</span></label>
                            <select name="recipient_type" id="recipientType" class="form-control" onchange="toggleRecipientFields()" required>
                                <option value="single">Single Number</option>
                                <option value="multiple">Multiple Numbers</option>
                                <option value="all_clients">All Clients</option>
                            </select>
                        </div>

                        <!-- Single Number -->
                        <div class="form-group" id="singleField">
                            <label class="control-label">Phone Number<span class="text-danger"> *</span></label>
                            <div class="input-group">
                                <input type="text" name="phone" class="form-control" placeholder="e.g. 01711111111" value="{{ old('phone') }}">
                                <span class="input-group-addon" style="padding:0;border:0;">
                                    <select id="clientSelect" class="form-control select2" style="width:250px;" onchange="document.querySelector('input[name=phone]').value=this.value;">
                                        <option value="">-- Or select client --</option>
                                        @foreach($clients as $client)
                                            <option value="{{ $client->phone }}">{{ $client->first_name }} {{ $client->last_name }} ({{ $client->phone }})</option>
                                        @endforeach
                                    </select>
                                </span>
                            </div>
                            @if ($errors->has('phone'))<span class="help-block text-danger">{{ $errors->first('phone') }}</span>@endif
                        </div>

                        <!-- Multiple Numbers -->
                        <div class="form-group" id="multipleField" style="display:none;">
                            <label class="control-label">Phone Numbers<span class="text-danger"> *</span></label>
                            <textarea name="phones" class="form-control" rows="4" placeholder="Enter numbers separated by comma or new line&#10;e.g.&#10;01711111111&#10;01822222222">{{ old('phones') }}</textarea>
                            <span class="help-block">Separate numbers by comma or new line</span>
                            @if ($errors->has('phones'))<span class="help-block text-danger">{{ $errors->first('phones') }}</span>@endif
                        </div>

                        <!-- All Clients Info -->
                        <div class="alert alert-warning" id="allClientsField" style="display:none;">
                            <i class="fa fa-exclamation-triangle"></i>
                            This will send SMS to <strong>all clients</strong> with phone numbers on file ({{ $clients->count() }} recipients).
                        </div>

                        <!-- Message -->
                        <div class="form-group">
                            <label class="control-label">Message<span class="text-danger"> *</span></label>
                            <textarea name="message" class="form-control" rows="5" required maxlength="1000" placeholder="Type your SMS message here..." id="smsMessage">{{ old('message') }}</textarea>
                            <span class="help-block"><span id="charCount">0</span>/1000 characters</span>
                            @if ($errors->has('message'))<span class="help-block text-danger">{{ $errors->first('message') }}</span>@endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-success">
                    <div class="panel-heading font-bold">Send</div>
                    <div class="panel-body">
                        <button type="submit" class="btn btn-success btn-block" onclick="return confirm('Send this SMS?')">
                            <i class="fa fa-paper-plane"></i> Send SMS
                        </button>
                        <a href="{{ route('admin.sms.logs') }}" class="btn btn-default btn-block margin-top-10">
                            <i class="fa fa-history"></i> View SMS Logs
                        </a>
                        <a href="{{ route('admin.settings.index', ['group' => 'sms']) }}" class="btn btn-default btn-block margin-top-10">
                            <i class="fa fa-cog"></i> SMS Settings
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
@endsection

@push('custom-stylesheets')
<link href="{{ asset('/back/assets/global/plugins/select2/select2.css') }}" rel="stylesheet">
<link href="{{ asset('/back/assets/global/plugins/select2/select2-bootstrap.css') }}" rel="stylesheet">
@endpush
@push('custom-scripts')
<script src="{{ asset('/back/assets/global/plugins/select2/select2.min.js') }}"></script>
<script>
jQuery(document).ready(function(){ jQuery('.select2').select2(); });

function toggleRecipientFields() {
    var type = document.getElementById('recipientType').value;
    document.getElementById('singleField').style.display = type === 'single' ? '' : 'none';
    document.getElementById('multipleField').style.display = type === 'multiple' ? '' : 'none';
    document.getElementById('allClientsField').style.display = type === 'all_clients' ? '' : 'none';
}

document.getElementById('smsMessage').addEventListener('input', function() {
    document.getElementById('charCount').textContent = this.value.length;
});
</script>
@endpush