@extends('layouts.admin')

@section('content')

<script src="https://dsbstudio.web.id/asset/js/jquery-1.10.2.min.js"></script>

<form role="form" id="form" enctype="multipart/form-data" 
    action="{{ route('mailbox.send_mail') }}" 
    method="POST" class="form-horizontal form-groups-bordered">
    @csrf 
    @method('POST')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="col-sm-12">
            <span >
                <b style="font-size: 25px;">Compose New Message</b> 
            </span>        
        </div>
    </section>           
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
                <section class="content">    
                    <div class="box box-primary">                        
                        <div class="box-body">
                            <div class="form-group mb-3">                                
                                <select id="selectContact" multiple="multiple" placeholder="To" name="to[]" style="width: 100%" class="select_2_to" >  
                                    <option value=""></option>
                                                                    </select>
                            </div>
                            <div class="form-group mb-3">
                                <input class="form-control" type="hidden" name="contact_id" id="contact_id" readonly/>
                            </div>
                            <div class="form-group mb-3">
                                <input class="form-control" type="text" name="subject" placeholder="Subject:"/>
                            </div>
                            <div class="form-group mb-3">
                                <textarea class="form-control text-justify" id="editor" name="message_body" style="height: 350px"></textarea>
                            </div>
                            <div class="form-group mb-3">                                
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                                            <span class="btn btn-default btn-file"><span class="fileinput-new" ><i class="fa fa-paperclip"></i> Attachment</span>
                                            <span class="fileinput-exists" >Change</span>                                            
                                            <input type="file" name="attach_file" >
                                        </span> 
                                        <span class="fileinput-filename"></span>                                        
                                        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none;">&times;</a>                                                                                                            
                                                                        <p class="help-block">Max. 15 MB</p>
                                </div>  
                                <div id="msg_pdf" style="color: #e11221"></div>                                
                            </div>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <div class="pull-right">
                                <button class="btn btn-default" 
                                    action="action"
                                    onclick="history.go(-1);"
                                    name="discard" 
                                    data-toggle="tooltip" 
                                    data-placement="top" 
                                    title="Close">
                                    <i class="fa fa-times"></i> Discard
                                </button>                                
                                <button type="submit" 
                                    name="send" 
                                    value="" 
                                    class="btn btn-primary">
                                    <i class="fa fa-envelope-o"></i> Send
                                </button>
                            </div>

                        </div><!-- /.box-footer -->
                    </div><!-- /. box -->
                </section><!-- /.content -->
            </div><!-- /.col -->
        </div>
    </div>      
</form>

<link href="{{ asset('vendor/css/select2.css') }}" rel="stylesheet"/>
<script src="{{ asset('vendor/js/select2.js') }}"></script>

<script>
    CKEDITOR.replace('editor');

    $(document).ready(function() {
        $('.select_2_to').select2();
    });
</script>

<script>
    
    $(document).ready(function() {
        // Add change event handler to the select element
        $('#selectContact').change(function() {
            // Get all selected options
            const selectedOptions = $(this).find('option:selected');
            
            // Iterate over the selected options
            let selectedData = '';
            selectedOptions.each(function() {
            // Get the data-info attribute value of each selected option
            const dataInfo = $(this).data('contactid');
            selectedData += dataInfo + ', ';
            });
            
            // Remove the trailing comma and space
            selectedData = selectedData.slice(0, -2);
            
            // Set the selected data to the input field
            $('#contact_id').val(selectedData);
        });
    });

</script>

@endsection