@extends('layouts.admin')

@section('title', 'Send Notification')

@section('breadcrumb')
    <li class="breadcrumb-item active">Send Notification</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Send Notification</h3>
                </div>
                <form action="{{ route('admin.notifications.store') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" name="title" class="form-control" id="title" placeholder="Enter title" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea name="message" class="form-control" id="message" rows="3" placeholder="Enter message" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>Type</label>
                            <select class="form-control" name="type" id="type" onchange="toggleUserSelect()">
                                <option value="all">All Users</option>
                                <option value="individual">Individual User</option>
                            </select>
                        </div>
                        <div class="form-group" id="user-select-group" style="display: none;">
                            <label>Select User</label>
                            <select class="form-control select2" name="user_id" style="width: 100%;">
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Send Notification</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function toggleUserSelect() {
        var type = document.getElementById('type').value;
        var userSelect = document.getElementById('user-select-group');
        if (type === 'individual') {
            userSelect.style.display = 'block';
        } else {
            userSelect.style.display = 'none';
        }
    }
</script>
@endpush
@endsection