@extends('layouts.app')
@section('title', 'New Campaign')
@section('page-title', 'New Campaign')
@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Create Campaign</h6></div>
            <div class="card-body">
                <form method="POST" action="{{ route('dashboard.campaigns.store') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Campaign Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Device</label>
                            <select name="device_id" class="form-select" required>
                                @foreach($devices as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Message Type</label>
                            <select name="type" class="form-select" id="msgType">
                                <option value="text">Text</option>
                                <option value="image">Image</option>
                                <option value="video">Video</option>
                                <option value="document">Document</option>
                            </select>
                        </div>
                        <div class="col-md-8" id="mediaUrlField" style="display:none;">
                            <label class="form-label">Media URL</label>
                            <input type="url" name="media_url" class="form-control" placeholder="https://...">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Message</label>
                            <textarea name="message" class="form-control" rows="3" required></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Recipients (one phone number per line)</label>
                            <textarea name="recipients" class="form-control" rows="5" placeholder="628xxx&#10;628yyy&#10;628zzz" required></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Schedule (optional)</label>
                            <input type="datetime-local" name="scheduled_at" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Delay Between Messages (seconds)</label>
                            <input type="number" name="delay_between_messages" class="form-control" value="5" min="1" max="60">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-whatsapp"><i class="bi bi-megaphone"></i> Create Campaign</button>
                            <a href="{{ route('dashboard.campaigns.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
document.getElementById('msgType').addEventListener('change', function() {
    document.getElementById('mediaUrlField').style.display = this.value === 'text' ? 'none' : 'block';
});
</script>
@endpush
@endsection