<script>
    $(document).ready(function(){
        $('#email-group-listing').select2();
        $('#email-staff-listing').select2();
        $('.add_more').click(function(e){
            e.preventDefault();
            $(this).before("<input class='input-text-height' name='uploaded-file[]' type='file'/>");
        });

        /**Whenever we change the Email Group, use jquery to fetch the list**/
        $('#email-group-listing').on('change', function (){
            let groupId = $(this).val();

            if(groupId != ""){
                $.ajax({
                    method: "GET",
                    url: '/get-email-group-list/'+groupId,
                    data: groupId,
                    success: function (res){
                        if(res != ""){
                            $('#email-recipients').val(res.to);
                            $('#email-ccs').val(res.cc);
                            $('#email-bccs').val(res.bcc);
                        }else{
                            $('#email-recipients').val('');
                            $('#email-ccs').val('');
                            $('#email-bccs').val('');
                        }
                    }
                });
            }else{
                $('#email-recipients').val('');
            }
        });

        /**Changing the User**/
        $('#email-staff-listing').on('change', function (){
            let userEmail = $(this).val();
            $('#email-recipients').val(userEmail);
        });
    });

    (function(){
        var measurer = $('<span>', {
            style: "display:inline-block;word-break:break-word;visibility:hidden;white-space:pre-wrap;"})
            .appendTo('body');
        function initMeasurerFor(textarea){
            if(!textarea[0].originalOverflowY){
                textarea[0].originalOverflowY = textarea.css("overflow-y");
            }
            var maxWidth = textarea.css("max-width");
            measurer.text(textarea.text())
                .css("max-width", maxWidth == "none" ? textarea.width() + "px" : maxWidth)
                .css('font',textarea.css('font'))
                .css('overflow-y', textarea.css('overflow-y'))
                .css("max-height", textarea.css("max-height"))
                .css("min-height", textarea.css("min-height"))
                .css("min-width", textarea.css("min-width"))
                .css("padding", textarea.css("padding"))
                .css("border", textarea.css("border"))
                .css("box-sizing", textarea.css("box-sizing"))
        }
        function updateTextAreaSize(textarea){
            textarea.height(measurer.height());
            var w = measurer.width();
            if(textarea[0].originalOverflowY == "auto"){
                var mw = textarea.css("max-width");
                if(mw != "none"){
                    if(w == parseInt(mw)){
                        textarea.css("overflow-y", "auto");
                    } else {
                        textarea.css("overflow-y", "hidden");
                    }
                }
            }
            textarea.width(w + 2);
        }
        $('textarea.autofit').on({
            input: function(){
                var text = $(this).val();
                if($(this).attr("preventEnter") == undefined){
                    text = text.replace(/[\n]/g, "<br>&#8203;");
                }
                measurer.html(text);
                updateTextAreaSize($(this));
            },
            focus: function(){
                initMeasurerFor($(this));
            },
            keypress: function(e){
                if(e.which == 13 && $(this).attr("preventEnter") != undefined){
                    e.preventDefault();
                }
            }
        });
    })();

    /*SC EDITOR*/
    $(".email-message").sceditor({
        plugins: "bbcode",
        emoticonsEnabled: false,
        autoUpdate : true
    }).sceditor({
        plugins: "xhtml"
    });
</script>
<style>
    .autofit  {
        min-width:350px;
        width:350px;
        max-width:350px;
        resize:none;
        overflow-x:auto;
        overflow-y:auto;
        min-height:2em;
        height:2em;
        max-height:5em;
        /*position:absolute;*/
        /*left:0px;*/
    }
</style>
{!! Form::open(['action'=>'Emails\EmailController@storeSendEmailModal', 'files'=>true, 'method'=>'POST', 'id'=>'send-email-data']) !!}
<div class="error" style="text-align: center;"><b>On this Window, You can Send an Email to any Email Address. cc and bcc options are also supported.</b></div><br>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
@if(auth()->user()->smtp_email != null)
    {{--We include Email Groups--}}
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('email-group', 'To Quickly provide the Email Recipients, Please selected an Email Group') !!}:<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            <select name="email-groups" style="width: 350px" id="email-group-listing">
                <option value="">--Select an Email Group--</option>
                @foreach($groups as $group)
                    <option value="{{$group->id}}">{!! $group->name !!}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('email-group', 'or Select Staff Members to Send Email to') !!}:<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            <select name="email-staff" style="width: 350px" id="email-staff-listing">
                <option value="">--Select an Staff Members--</option>
                @foreach(app('BranchUsers') as $staff)
                    <option value="{{$staff->smtp_email ?? ""}}">{!! $staff->firstName." ".$staff->lastName." (".$staff->smtp_email.")" !!}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="guestDetails_inputDivider"></div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('from', 'Email From') !!}:<span class="error">*</span> (<span class="error">{{auth()->user()->firstName." ".auth()->user()->lastName}}</span>)
        </div>
        <div class="guestDetails_input">
            {!! Form::textarea('from', auth()->user()->smtp_email ?? '', ['class'=>'autofit input-text-height', 'readonly'=>true]) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('to', 'Email To') !!}:<span class="error">*</span> (<i class="error">For Multiple emails, separate them with a semi-colon ";"</i>)
        </div>
        <div class="guestDetails_input">
            {!! Form::textarea('to', '', ['id'=>'email-recipients','class'=>'autofit input-text-height']) !!}
        </div>
    </div>
    <div class="guestDetails_inputDivider"></div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('cc', 'CC Email To') !!}:<span class="error">*</span> (<i class="error">For Multiple emails, separate them with a semi-colon ";"</i>)
        </div>
        <div class="guestDetails_input">
            {!! Form::textarea('cc', '', ['id'=>'email-ccs','class'=>'autofit input-text-height']) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('bcc', 'BCC Email To') !!}:<span class="error">*</span> (<i class="error">For Multiple emails, separate them with a semi-colon ";"</i>)
        </div>
        <div class="guestDetails_input">
            {!! Form::textarea('bcc', '', ['id'=>'email-bccs','class'=>'autofit input-text-height']) !!}
        </div>
    </div>
    <div class="guestDetails_inputDivider"></div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('subject', 'Email Subject') !!}:<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::text('subject', '', ['class'=>'input-text-height', 'size'=>130, 'style'=>'text-transform: uppercase;']) !!}
        </div>
    </div>
    <div class="guestDetails_inputDivider"></div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('attachments', 'Add Files') !!} <span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::file('uploaded-file[]',['class'=>'input-text-height']) !!}
            <button type="button" class="add_more">Add More Files</button>
        </div>
    </div>
    <div class="guestDetails_inputDivider"></div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('message', 'Email Message') !!} <span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::textarea('message', $signature ? $signature->signature : '', ['style'=>'width:750px; height:250px', "class"=>"email-message"]) !!}
        </div>
    </div>
@else
    <div class="error" style="text-align: center;"><b>You have not Configured your Email SMTP Settings. Please use the Change/Manage Passwords Icon on the system to manage these settings.<br><br>In case you encounter challenges, engage the System Admin to assist.</b></div><br>
    <script>
        $('#submit-button').hide();
    </script>
@endif
{!! Form::close() !!}
