@php $page = 'users' @endphp
@extends('includes.layout')

@push('head')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush


@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>Send Users Mail</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a>
                </li>
                <li class="breadcrumb-item active">Send Users Mail</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Basic Forms -->
            <div class="box box-solid bg-dark">
                <div class="box-body">
                    <div class="row">
                        <div class="col">
                            <form action="{{ route('send.message') }}" method="POST"> @csrf
                                <div class="row">
                                    <div class="col-lg-12 col-12">
                                        <div class="form-group">
                                            <label for="category">Category <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <select name="category" id="category" class="form-control" required>
                                                    <option value="All">All Users</option>
                                                    {{-- <option value="No active plans">Users without investment plan</option>
                                                    <option value="No deposit">Users without any Deposit (likely to be new users)</option> --}}
                                                    <option value="Select Users">Choose Users</option>
                                                </select>
                                            </div>
                                            <x-input-error :messages="$errors->get('category')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12" id="all-users">
                                        <div class="form-group">
                                            <label for="users">Select Users</label>
                                            <div class="controls">
                                                <select name="users[]" id="users" class="form-control select2"  multiple="multiple">
                                                    @forelse ($users as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->email }})</option>
                                                    @empty
                                                        <option value="">No User Found</option>
                                                    @endforelse
                                                </select>
                                            </div>
                                            <x-input-error :messages="$errors->get('users')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-12">
                                        <div class="form-group">
                                            <label for="greeting">Greeting <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="text" name="greeting" id="greeting" class="form-control" required placeholder="Greeting">
                                            </div>
                                            <x-input-error :messages="$errors->get('greeting')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-12">
                                        <div class="form-group">
                                            <label for="title">Title</label>
                                            <div class="controls">
                                                <input type="text" name="title" id="title" class="form-control" placeholder="Title">
                                            </div>
                                            <x-input-error :messages="$errors->get('title')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12">
                                        <div class="form-group">
                                            <label for="subject">Subject<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="text" name="subject" id="subject" class="form-control" required placeholder="Subject">
                                            </div>
                                            <x-input-error :messages="$errors->get('subject')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12">
                                        <div class="form-group">
                                            <label for="message">Message<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <textarea name="message" id="message" rows="10" required placeholder="Message"></textarea>
                                            </div>
                                            <x-input-error :messages="$errors->get('message')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                </div>
                                <div class="text-xs-right">
                                    <button type="submit" class="btn btn-info">Proceed To Send Mail</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- CK Editor -->
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

    <script>
        $(document).ready(function(){
            CKEDITOR.replace('message');
            $('.select2').select2({
                 placeholder: 'Select Users'
            });
            $('#all-users').hide();
            $('#category').change(function() {
                if ($(this).val() == 'Select Users') {
                    $('#all-users').show();
                } else {
                    $('#all-users').hide();
                }
            });

        });
    </script>
@endpush