@extends('layouts.reseller')

@section('title', 'Send SMS')
@section('page-title', 'Send SMS')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0">Send SMS</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('reseller.sms.send') }}" method="POST" id="smsForm">
                    @csrf
                    
                    <div class="form-group mb-3">
                        <label for="sender_id" class="form-label">Sender ID *</label>
                        <select class="form-control @error('sender_id') is-invalid @enderror" 
                                id="sender_id" name="sender_id" required>
                            <option value="">Select Sender ID</option>
                            @foreach($senderIDs as $senderID)
                                <option value="{{ $senderID->sender_id }}" 
                                        {{ old('sender_id') == $senderID->sender_id ? 'selected' : '' }}>
                                    {{ $senderID->sender_id }}
                                    @if($senderID->is_default)
                                        (Default)
                                    @endif
                                </option>
                            @endforeach
                        </select>
                        @error('sender_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="recipients" class="form-label">Recipients *</label>
                        <textarea class="form-control @error('recipients') is-invalid @enderror" 
                                  id="recipients" name="recipients" rows="3" 
                                  placeholder="Enter mobile numbers separated by commas (e.g., 8801712345678,8801812345678)"
                                  required>{{ old('recipients') }}</textarea>
                        @error('recipients')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                    data-bs-toggle="modal" data-bs-target="#bulkRecipientsModal">
                                <i class="fas fa-upload me-1"></i>Bulk Upload
                            </button>
                            <small class="text-muted ms-2">
                                Separate numbers with commas. Maximum 1000 numbers per batch.
                            </small>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="message" class="form-label">Message *</label>
                        <textarea class="form-control @error('message') is-invalid @enderror calculate-sms-cost" 
                                  id="message" name="message" rows="6" 
                                  placeholder="Type your message here..." 
                                  maxlength="1600" required>{{ old('message') }}</textarea>
                        @error('message')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="d-flex justify-content-between mt-2">
                            <small class="text-muted">
                                <span id="char-count">0</span>/1600 characters
                            </small>
                            <small class="text-muted">
                                <span id="sms-parts">1</span> part(s)
                            </small>
                        </div>
                    </div>

                    <!-- SMS Preview -->
                    <div class="card mb-3 d-none" id="smsPreview">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">SMS Preview</h6>
                        </div>
                        <div class="card-body">
                            <div class="sms-preview">
                                <div class="preview-header">
                                    <strong>From:</strong> <span id="preview-sender">TEST</span>
                                </div>
                                <div class="preview-message" id="preview-message">
                                    Your message will appear here...
                                </div>
                                <div class="preview-footer">
                                    <small class="text-muted" id="preview-length">Length: 0 chars</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cost Calculation -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">Cost Calculation</h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <div class="cost-item">
                                        <div class="cost-label">Recipients</div>
                                        <div class="cost-value" id="total-recipients">0</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="cost-item">
                                        <div class="cost-label">SMS Parts</div>
                                        <div class="cost-value" id="sms-parts-cost">1</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="cost-item">
                                        <div class="cost-label">Your Rate</div>
                                        <div class="cost-value">৳<span id="reseller-rate">{{ $resellerRate }}</span></div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="cost-item">
                                        <div class="cost-label">Total Cost</div>
                                        <div class="cost-value text-success" id="total-cost">৳0.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Please ensure your message complies with Bangladesh Telecommunication Regulatory Commission (BTRC) guidelines. Avoid sending spam messages.
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>Your Balance:</strong> 
                            <span class="text-success" id="current-balance">৳{{ number_format(auth()->user()->balance, 2) }}</span>
                            <button type="button" class="btn btn-sm btn-outline-primary ms-2" id="check-balance"
                                    data-url="{{ route('reseller.balance.check') }}">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                        <button type="submit" class="btn btn-primary" id="sendSMSBtn">
                            <i class="fas fa-paper-plane me-2"></i>Send SMS
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Balance Info -->
        <div class="card shadow mb-4">
            <div class="card-header bg-success text-white py-3">
                <h5 class="mb-0">Balance Information</h5>
            </div>
            <div class="card-body">
                <div class="balance-info">
                    <div class="balance-item">
                        <strong>Current Balance:</strong>
                        <span class="text-success">৳{{ number_format(auth()->user()->balance, 2) }}</span>
                    </div>
                    <div class="balance-item">
                        <strong>Your SMS Rate:</strong>
                        <span class="text-info">৳{{ $resellerRate }}/SMS</span>
                    </div>
                    <div class="balance-item">
                        <strong>Commission Rate:</strong>
                        <span class="text-warning">{{ auth()->user()->reseller->commission_rate }}%</span>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('reseller.payments.topup') }}" class="btn btn-success w-100">
                        <i class="fas fa-plus-circle me-2"></i>Top Up Balance
                    </a>
                </div>
            </div>
        </div>

        <!-- Quick Templates -->
        <div class="card shadow">
            <div class="card-header bg-info text-white py-3">
                <h5 class="mb-0">Quick Templates</h5>
            </div>
            <div class="card-body">
                <div class="template-list">
                    @foreach($templates as $template)
                    <div class="template-item mb-2">
                        <button type="button" class="btn btn-sm btn-outline-info w-100 text-start template-btn"
                                data-template="{{ $template->content }}">
                            <small>{{ Str::limit($template->content, 50) }}</small>
                        </button>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Recipients Modal -->
<div class="modal fade" id="bulkRecipientsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Recipients Upload</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label class="form-label">Upload Numbers</label>
                    <textarea class="form-control" id="bulk_recipients" rows="8" 
                              placeholder="Enter mobile numbers (one per line or separated by commas)"></textarea>
                    <small class="text-muted">
                        You can paste numbers separated by new lines or commas. Invalid numbers will be automatically filtered.
                    </small>
                </div>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Format:</strong> 8801712345678, 8801812345678, 8801912345678 or one number per line
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="process-bulk-recipients">Process Numbers</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const resellerRate = parseFloat('{{ $resellerRate }}');
    
    // Calculate SMS cost in real-time
    function calculateCost() {
        const message = $('#message').val();
        const recipientsText = $('#recipients').val();
        const recipients = recipientsText.split(',').filter(r => r.trim()).length;
        
        if (message && recipients > 0) {
            const smsInfo = SMSGateway.calculateSMSParts(message);
            const totalCost = (smsInfo.parts * recipients * resellerRate).toFixed(2);
            
            $('#sms-parts').text(smsInfo.parts);
            $('#sms-parts-cost').text(smsInfo.parts);
            $('#total-cost').text('৳' + totalCost);
            $('#total-recipients').text(recipients);
            
            // Show/hide preview
            if (message.length > 0) {
                $('#smsPreview').removeClass('d-none');
                $('#preview-message').text(message);
                $('#preview-length').text('Length: ' + smsInfo.length + ' chars');
            } else {
                $('#smsPreview').addClass('d-none');
            }
        }
    }
    
    // Update character count
    $('#message').on('input', function() {
        const length = $(this).val().length;
        $('#char-count').text(length);
        calculateCost();
    });
    
    // Update sender ID preview
    $('#sender_id').change(function() {
        $('#preview-sender').text($(this).val() || 'TEST');
    });
    
    // Recipients count update
    $('#recipients').on('input', calculateCost);
    
    // Template buttons
    $('.template-btn').click(function() {
        const template = $(this).data('template');
        $('#message').val(template).trigger('input');
    });
    
    // Bulk recipients processing
    $('#process-bulk-recipients').click(function() {
        const bulkInput = $('#bulk_recipients').val();
        if (bulkInput) {
            const numbers = bulkInput.split(/[\n,]/)
                .map(num => num.trim().replace(/\D/g, ''))
                .filter(num => num.length === 11 && num.startsWith('01'))
                .filter((num, index, self) => self.indexOf(num) === index);
            
            $('#recipients').val(numbers.join(','));
            $('#total-recipients').text(numbers.length);
            $('#bulkRecipientsModal').modal('hide');
            
            toastr.success(`Processed ${numbers.length} valid numbers`);
            calculateCost();
        }
    });
    
    // Form submission
    $('#smsForm').submit(function(e) {
        const totalCost = parseFloat($('#total-cost').text().replace('৳', ''));
        const balance = parseFloat('{{ auth()->user()->balance }}');
        
        if (totalCost > balance) {
            e.preventDefault();
            toastr.error('Insufficient balance. Please top up your account.');
            return false;
        }
        
        $('#sendSMSBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Sending...');
    });
    
    // Initial calculation
    calculateCost();
    $('#preview-sender').text($('#sender_id').val() || 'TEST');
});
</script>

@push('styles')
<style>
.sms-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    font-family: Arial, sans-serif;
}

.preview-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.preview-message {
    min-height: 100px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.preview-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 12px;
}

.cost-item {
    padding: 10px;
}

.cost-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.cost-value {
    font-size: 18px;
    font-weight: bold;
}

.balance-info .balance-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.balance-info .balance-item:last-child {
    border-bottom: none;
}

.template-item .btn {
    text-align: left;
    white-space: normal;
    height: auto;
    padding: 8px 12px;
}
</style>
@endpush