@extends('layouts.app')

@section('title', 'Create Campaign')

@section('content')
<div class="container py-5">
    <h2>Create New Campaign</h2>

    <form method="POST" action="{{ route('campaigns.store') }}">
        @csrf

        <div class="mb-3">
            <input type="text" name="name" placeholder="Campaign Name" class="form-control" required>
        </div>

        <div class="mb-3">
            <input type="text" name="subject" placeholder="Email Subject" class="form-control" required>
        </div>

        <div class="mb-3">
            <textarea name="message" class="form-control" rows="5" placeholder="Message" required></textarea>
        </div>

        {{-- Select Groups --}}
        <div class="mb-3">
            <label>Select Groups</label>
            <select name="groups[]" class="form-select select2-multiple" multiple>
                @foreach($groups as $group)
                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- Select Countries --}}
        <div class="mb-3">
            <label>Select Countries</label>
            <select name="countries[]" class="form-select select2-multiple" multiple>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
        </div>

        <button class="btn btn-primary">Create Campaign</button>
    </form>
</div>

{{-- Initialize Select2 --}}
<script>
    $(document).ready(function() {
        $('.select2-multiple').select2({
            placeholder: "Select options",
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endsection