@extends('admin.layouts.app')

@section('panel')
<form action="{{ route('admin.setting.notification.broadcast.send') }}" method="post">
    @csrf
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header bg--primary">
                    <h5 class="card-title text-white mb-0">@lang('Broadcast Center')</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Audience')</label>
                                <select class="form-control" name="audience" id="audienceSelect" required>
                                    <option value="all" @selected(old('audience') === 'all')>@lang('All Active Users')</option>
                                    <option value="role" @selected(old('audience') === 'role')>@lang('Role')</option>
                                    <option value="user" @selected(old('audience') === 'user')>@lang('Single User')</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 role-target">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Role')</label>
                                <select class="form-control" name="role">
                                    <option value="">@lang('Select role')</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}" @selected(old('role') === $role->name)>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 user-target">
                            <div class="form-group">
                                <label class="fw-bold">@lang('User')</label>
                                <select class="form-control" name="user_id">
                                    <option value="">@lang('Select user')</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" @selected((int) old('user_id') === (int) $user->id)>
                                            #{{ $user->id }} - {{ $user->username }} ({{ trim($user->firstname.' '.$user->lastname) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Event Key')</label>
                                <input type="text" class="form-control" name="event_key" value="{{ old('event_key', 'ADMIN_BROADCAST') }}" placeholder="ADMIN_BROADCAST">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Title')</label>
                                <input type="text" class="form-control" name="title" value="{{ old('title') }}" required>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Message')</label>
                                <textarea name="message" rows="8" class="form-control trumEdit">{{ old('message') }}</textarea>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Action URL (optional)')</label>
                                <input type="text" class="form-control" name="action_url" value="{{ old('action_url') }}" placeholder="/orders/products/123">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="fw-bold">@lang('Priority')</label>
                                <input type="number" min="0" max="9" class="form-control" name="priority" value="{{ old('priority', 1) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-header bg--primary">
                    <h5 class="card-title text-white mb-0">@lang('Delivery Channels')</h5>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="channels[]" value="in_app" id="channelInApp" checked>
                            <label class="form-check-label" for="channelInApp">In-App</label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="channels[]" value="email" id="channelEmail">
                            <label class="form-check-label" for="channelEmail">Email</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="channels[]" value="sms" id="channelSms">
                            <label class="form-check-label" for="channelSms">SMS</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <input type="hidden" name="respect_preferences" value="0">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" name="respect_preferences" id="respectPreferences" checked>
                            <label class="form-check-label" for="respectPreferences">
                                Respect user notification preferences
                            </label>
                        </div>
                    </div>

                    <div class="alert alert--info mt-3 mb-0">
                        Use this page for targeted announcements and operational broadcasts.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="text-end mt-3">
        <button type="submit" class="btn btn--primary">
            <i class="las la-paper-plane"></i> @lang('Send Broadcast')
        </button>
    </div>
</form>
@endsection

@push('breadcrumb-plugins')
<a href="{{ route('admin.setting.notification.templates') }}" class="btn btn-sm btn--primary">
    <i class="las la-undo"></i> @lang('Back')
</a>
@endpush

@push('script')
<script>
    (function($){
        "use strict";
        const $audience = $('#audienceSelect');
        const $roleTarget = $('.role-target');
        const $userTarget = $('.user-target');

        function syncAudienceTargets() {
            const audience = $audience.val();
            $roleTarget.toggle(audience === 'role');
            $userTarget.toggle(audience === 'user');
        }

        $audience.on('change', syncAudienceTargets);
        syncAudienceTargets();
    })(jQuery);
</script>
@endpush