@extends('layouts.app')

@section('content')

<style>
    .sms-wrap { max-width: 1180px; }
    .sms-title { color:#1E4FA8; font-size:26px; font-weight:900; margin-bottom:14px; }
    .sms-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-bottom:14px; }
    .sms-card { background:#fff; border:2px solid #1E4FA8; border-radius:8px; padding:14px; }
    .sms-label { color:#0c0c0c; font-size:12px; font-weight:900; text-transform:uppercase; }
    .sms-value { color:#1E4FA8; font-size:24px; font-weight:900; margin-top:6px; }
    .sms-panel { background:#fff; border:2px solid #1E4FA8; border-radius:8px; margin-bottom:14px; padding:14px; }
    .panel-head { align-items:center; display:flex; gap:10px; justify-content:space-between; margin-bottom:12px; }
    .panel-head h3 { color:#1E4FA8; margin:0; }
    .form-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    .form-group label { color:#0c0c0c; display:block; font-size:13px; font-weight:900; margin-bottom:6px; }
    .form-control { border:1px solid #0c0c0c; border-radius:8px; box-sizing:border-box; min-height:40px; padding:9px 10px; width:100%; }
    textarea.form-control { min-height:95px; resize:vertical; }
    .btn { background:#1E4FA8; border:1px solid #1E4FA8; border-radius:8px; color:#fff; cursor:pointer; display:inline-block; font-weight:900; padding:9px 12px; text-decoration:none; }
    .btn-orange { background:#e84c0d; border-color:#e84c0d; }
    .btn-light { background:#fff; border-color:#1E4FA8; color:#1E4FA8; }
    .success-box, .notice-box { border-radius:8px; font-weight:900; margin-bottom:12px; padding:10px; }
    .success-box { background:#15803d; color:#fff; }
    .notice-box { background:#e84c0d; color:#fff; }
    table { border-collapse:collapse; width:100%; }
    th, td { border:1px solid #0c0c0c; font-size:13px; padding:8px; text-align:left; vertical-align:top; }
    th { background:#1E4FA8; color:#fff; font-weight:900; }
    .num { text-align:right; }
    .status { border-radius:999px; display:inline-block; font-weight:900; padding:4px 8px; }
    .status-pending { background:#e84c0d; color:#fff; }
    .status-sent { background:#15803d; color:#fff; }
    .status-draft { background:#1E4FA8; color:#fff; }
    .section-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    .customer-select { min-height:118px; }
    .message-meter { color:#0c0c0c; font-size:12px; font-weight:900; margin-top:4px; }
    .template-row { display:grid; gap:8px; grid-template-columns:180px 1fr 120px 150px; }
    @media(max-width:800px) { .template-row { grid-template-columns:1fr; } }
</style>

<div class="sms-wrap">
    <div class="sms-title">Bulk SMS</div>

    @if(session('success'))
        <div class="success-box">{{ session('success') }}</div>
    @endif

    @if(!$settingsReady)
        <div class="notice-box">Africa's Talking API settings are not complete. Campaigns will remain pending until the API setup is saved.</div>
    @endif

    <div class="sms-grid">
        <div class="sms-card"><div class="sms-label">Campaigns</div><div class="sms-value">{{ number_format($totals['campaigns']) }}</div></div>
        <div class="sms-card"><div class="sms-label">Pending</div><div class="sms-value">{{ number_format($totals['pending']) }}</div></div>
        <div class="sms-card"><div class="sms-label">Sent</div><div class="sms-value">{{ number_format($totals['sent']) }}</div></div>
        <div class="sms-card"><div class="sms-label">Recipients</div><div class="sms-value">{{ number_format($totals['recipients']) }}</div></div>
        <div class="sms-card"><div class="sms-label">SMS Balance</div><div class="sms-value">{{ $smsBalance !== '' ? $smsBalance : '-' }}</div></div>
    </div>

    <div class="sms-panel">
        <div class="panel-head">
            <h3>New SMS Campaign</h3>
            <a class="btn btn-light" href="{{ url('/system-configuration') }}">SMS Setup</a>
        </div>

        <form method="POST" action="{{ url('/bulk_sms/campaigns') }}">
            @csrf
            <div class="form-grid">
                <div class="form-group">
                    <label>Campaign Name</label>
                    <input class="form-control" type="text" name="name" required>
                </div>

                <div class="form-group">
                    <label>Template</label>
                    <select class="form-control" name="sms_template_id" id="templateSelect">
                        <option value="">No template</option>
                        @foreach($templates as $template)
                            <option value="{{ $template->id }}" data-message="{{ $template->message }}">{{ $template->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Recipient Source</label>
                    <select class="form-control" name="recipient_source" id="recipientSource" required>
                        <option value="all_customers">All customers</option>
                        <option value="selected_customers">Selected customers</option>
                        <option value="branch_customers">Customers by branch</option>
                        <option value="bought_between">Customers who bought within date range</option>
                        <option value="pending_balances">Customers with pending balances</option>
                        <option value="manual">Manual phone numbers</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Branch</label>
                    <select class="form-control" name="branch_id">
                        <option value="">All branches</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>From Date</label>
                    <input class="form-control" type="date" name="from_date">
                </div>

                <div class="form-group">
                    <label>To Date</label>
                    <input class="form-control" type="date" name="to_date">
                </div>

                <div class="form-group">
                    <label>Send Mode</label>
                    <select class="form-control" name="send_mode" id="sendMode">
                        <option value="draft">Save as pending</option>
                        @permission('bulk_sms.send')
                        <option value="send_now">Send now after API setup</option>
                        <option value="schedule">Schedule after API setup</option>
                        @endpermission
                    </select>
                </div>

                <div class="form-group">
                    <label>Schedule Time</label>
                    <input class="form-control" type="datetime-local" name="scheduled_at">
                </div>
            </div>

            <div class="form-grid" style="margin-top:12px;">
                <div class="form-group">
                    <label>Selected Customers</label>
                    <select class="form-control customer-select" name="customer_ids[]" multiple>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }} - {{ $customer->phone }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Manual Numbers</label>
                    <textarea class="form-control" name="manual_numbers" placeholder="One number per line, or separate using commas"></textarea>
                </div>

                <div class="form-group" style="grid-column:span 2;">
                    <label>Message</label>
                    <textarea class="form-control" name="message" id="smsMessage" required maxlength="1000"></textarea>
                    <div class="message-meter" id="messageMeter">0 characters, 1 SMS unit</div>
                </div>
            </div>

            <div class="section-actions">
                <button class="btn" type="submit">Save Campaign</button>
                <a class="btn btn-orange" href="{{ url('/customers') }}">Customers</a>
            </div>
        </form>
    </div>

    <div class="sms-panel">
        <div class="panel-head"><h3>SMS Templates</h3></div>
        <form method="POST" action="{{ url('/bulk_sms/templates') }}" class="template-row">
            @csrf
            <input class="form-control" type="text" name="name" placeholder="Template name" required>
            <input class="form-control" type="text" name="message" placeholder="Message" required>
            <button class="btn" type="submit">Add Template</button>
            <a class="btn btn-light" href="{{ url('/bulk_sms') }}">Refresh</a>
        </form>

        <div style="margin-top:12px; overflow-x:auto;">
            <table>
                <thead><tr><th>Name</th><th>Message</th><th>Status</th><th>Action</th></tr></thead>
                <tbody>
                    @forelse($templates as $template)
                        <tr>
                            <form method="POST" action="{{ url('/bulk_sms/templates/'.$template->id) }}">
                                @csrf
                                @method('PUT')
                                <td><input class="form-control" type="text" name="name" value="{{ $template->name }}"></td>
                                <td><input class="form-control" type="text" name="message" value="{{ $template->message }}"></td>
                                <td>
                                    <select class="form-control" name="is_active">
                                        <option value="1" {{ $template->is_active ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ !$template->is_active ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </td>
                                <td>
                                    <button class="btn" type="submit">Save</button>
                            </form>
                                    <form method="POST" action="{{ url('/bulk_sms/templates/'.$template->id) }}" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-orange" type="submit">Delete</button>
                                    </form>
                                </td>
                        </tr>
                    @empty
                        <tr><td colspan="4">No SMS templates added.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="sms-panel">
        <div class="panel-head"><h3>Campaign History</h3></div>
        <form class="form-grid auto-filter-form" method="GET" action="{{ url('/bulk_sms') }}">
            <div class="form-group">
                <label>Search</label>
                <input class="form-control" type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Campaign no, name or message">
            </div>
            <div class="form-group">
                <label>Status</label>
                <select class="form-control" name="status">
                    <option value="">All</option>
                    <option value="pending" {{ ($filters['status'] ?? '') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="sent" {{ ($filters['status'] ?? '') === 'sent' ? 'selected' : '' }}>Sent</option>
                    <option value="failed" {{ ($filters['status'] ?? '') === 'failed' ? 'selected' : '' }}>Failed</option>
                </select>
            </div>
        </form>

        <div style="margin-top:12px; overflow-x:auto;">
            <table>
                <thead>
                    <tr>
                        <th>Campaign No</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th class="num">Recipients</th>
                        <th class="num">Units</th>
                        <th class="num">Estimated Cost</th>
                        <th>Added By</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($campaigns as $campaign)
                        <tr>
                            <td><strong>{{ $campaign->campaign_no }}</strong></td>
                            <td>{{ $campaign->name }}</td>
                            <td><span class="status status-{{ $campaign->status }}">{{ ucfirst($campaign->status) }}</span></td>
                            <td class="num">{{ number_format($campaign->recipient_count) }}</td>
                            <td class="num">{{ number_format($campaign->sms_units) }}</td>
                            <td class="num">{{ number_format($campaign->estimated_cost, 2) }}</td>
                            <td>{{ $campaign->user?->name ?: '-' }}</td>
                            <td><a class="btn btn-light" href="{{ url('/bulk_sms/campaigns/'.$campaign->id) }}">View</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="8">No SMS campaigns found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top:12px;">{{ $campaigns->links() }}</div>
    </div>
</div>

<script>
    const templateSelect = document.getElementById('templateSelect');
    const smsMessage = document.getElementById('smsMessage');
    const messageMeter = document.getElementById('messageMeter');

    function updateMeter() {
        const length = smsMessage.value.length;
        const units = Math.max(Math.ceil(length / 160), 1);
        messageMeter.textContent = `${length} characters, ${units} SMS unit${units === 1 ? '' : 's'}`;
    }

    templateSelect?.addEventListener('change', () => {
        const selected = templateSelect.selectedOptions[0];
        if (selected?.dataset?.message) {
            smsMessage.value = selected.dataset.message;
            updateMeter();
        }
    });

    smsMessage?.addEventListener('input', updateMeter);
    updateMeter();
</script>

@endsection