@extends('layouts.app')

@section('title', 'Mail')

@section('content')


<section>
    @include('flash-message')
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="section-body">
        <form method="POST" action="{{ route('mail.compose') }}" id="mailForm" accept-charset="UTF-8" class="form form-validate">
            @csrf
            <div class="card">
                <div class="card-head">
                    <header class="text-capitalize">Compose</header>
                    <div class="tools">
                        <input class="btn btn-primary send-mail" type="submit" name="send" value="Send" data-loading-text="Sending...">
                        <input class="btn btn-primary send-mail" type="submit" name="draft" value="Save as Draft" data-loading-text="Saving...">
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- BEGIN INBOX NAV -->
                        <div class="col-sm-4 col-md-3 col-lg-2 hidden-xs">
                            @include('mail.partials.sidebar', [
                            'sentMail' => $sentMail,
                            'draftMail' => $draftMail,
                            ])
                        </div>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <div class="form-group">
                                <input class="form-control" id="to" readonly="" name="from" type="email" value="no-reply@accessworld.net">
                                <label for="to">From</label>
                                <p class="help-block">Use semicolons(;) to separate multiple recipients</p>
                            </div>

                            <!--end .form-group -->
                            <div class="form-group floating-label">
                                <select name="to[]" class="form-control select" id="to" multiple>
                                    @foreach($groups as $group)
                                    <option value="{{$group->group_name}}">{{ucfirst($group->group_name)}}</option>
                                    @endforeach
                                </select>
                                <label for="to">To</label>
                                <span class="text-danger">{{ $errors->has('to') ? $errors->first('to') : '' }} </span>

                            </div>


                            <div class="form-group floating-label">
                                <select name="cc[]" class="form-control select" id="cc" multiple>
                                    @foreach($groups as $group)
                                    <option value="{{$group->group_name}}">{{ucfirst($group->group_name)}}</option>
                                    @endforeach
                                </select>
                                <label for="cc">CC</label>
                                <span class="text-danger">{{ $errors->has('cc') ? $errors->first('cc') : '' }} </span>

                            </div>
                            <!--end .form-group -->
                            <div class="form-group floating-label">
                                <select name="bcc[]" class="form-control select" id="bcc" multiple>
                                    @foreach($groups as $group)
                                    <option value="{{$group->group_name}}">{{ucfirst($group->group_name)}}</option>
                                    @endforeach
                                </select>
                                <label for="bcc">BCC</label>
                                <span class="text-danger">{{ $errors->has('bcc') ? $errors->first('bcc') : '' }} </span>
                            </div>
                            <!--end .form-group -->
                            <!--end #emailOptions -->
                            <div class="form-group floating-label">
                                <input class="form-control" id="subject" name="subject" type="text">
                                <label for="subject">Subject</label>
                                <span class="text-danger">{{ $errors->has('subject') ? $errors->first('subject') : '' }}
                                </span>
                            </div>
                            <!--end .form-group -->
                            <div class="form-group">
                                <textarea class="form-control ckeditor" id="ckeditor" name="body" placeholder="Enter text ...">
                                    </textarea>
                                <span class="text-danger">{{ $errors->has('body') ? $errors->first('body') : '' }}
                                </span>

                            </div>
                            <!--end .form-group -->
                        </div>
                        <!--end .col -->
                    </div>
                    <!-- END MAIL COMPOSE -->
                </div>
                <div class="card-actionbar">
                    <div class="card-actionbar-row">
                        <input class="btn btn-primary send-mail" type="submit" name="send" value="Send" data-loading-text="Sending...">
                        <input class="btn btn-primary send-mail" type="submit" name="draft" value="Save as Draft" data-loading-text="Saving...">
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
@stop


@push('styles')
<link href="{{ asset('backend/assets/css/libs/dropify/dropify.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="//cdn.ckeditor.com/4.14.1/full/ckeditor.js"></script>
<script src="{{ asset('backend/assets/js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
<script src="{{ asset('backend/assets/js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>

<script>
    $(function() {
        $('.ckeditor').each(function(e) {});
        // $('.select').select2();

        setTimeout(() => {
            $('.alert-block').hide();
        }, 2000)

        $('.select').select2({
            tags: true
        });


    });
</script>
@endpush