@props(['frommailaddress','emailtemplates'])
@php
$fromMailAddress=$frommailaddress;
$EmailTemplates=$emailtemplates;
@endphp

<input type="hidden" id="draftId" value=''>
<div class="modal fade" id="ComposeMailModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered  modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title add-title" id="notesMailModalTitleeLabel">Compose</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>
      <div class="modal-body">
        <div class="compose-box">
          <div class="compose-content">
            <form id="Emailform">
              <div class="row">
               <div class="col-md-12 mail-to" style="margin-bottom: 10px;">
                <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> From:</p>
                <div class="">
                  <select class="form-control" id="m-form" onchange="UpdateMailFrom()">
                    @foreach($fromMailAddress as $fromMailAddres)
                    <option value="{{$fromMailAddres['FromAddress']}}" title="{{$fromMailAddres['FromAddress']}}"> 
                      {{$fromMailAddres['FromName']}} ({{$fromMailAddres['FromAddress']}})
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="mail-to">
                  <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> To:</p>
                  <div class="">
                   <select  class="form-control"id="m-to" multiple onchange="UpdateToMailId_d()">
                   </select>
                   <span class="validation-text"></span>
                 </div>
               </div>
             </div>
           </div>

           <div class="row">
             <div class="col-md-12">
              <div class="mail-cc">
                <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg> CC:</p>
                <div>
                  <select  class="form-control"id="m-cc" multiple onchange="UpdateToCCId_d()">
                  </select>
                  <span class="validation-text"></span>
                </div>
              </div> 

              <div class="row">
                <div class="col-md-12">
                  <div class="mail-cc">
                    <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg> BCC:</p>
                    <div>
                     <select  class="form-control"id="m-bcc" multiple onchange="UpdateToBCCId()">
                     </select>
                     <span class="validation-text"></span>
                   </div>
                 </div>
               </div>
             </div>

             <div class="mb-4 mail-subject">
              <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> Subject:</p>
              <div class="w-100">
                <input type="text" id="m-subject" placeholder="Subject" class="form-control" onblur="UpdateMailSubject_d()">
				<!-- Changed the Function on 21 Dec 23 - UpdateMailSubject_d to UpdateMailSubject_d -->
                <span class="validation-text"></span>
              </div>
            </div>

            <div class="">
              <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg> Upload Attachment:</p>
              <input class="form-control file-upload-input" type="file" id="mail_File_attachment" multiple="multiple" onchange="uploadAttachments(this);">
            </div>
            <div class="d-flex" id='AttachmentsList'></div>
            <br>
            <div class="col-md-12">
              <div class="mb-4 mail-to" style="margin-top: 10px;">
                <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg> Email Templates:</p>
                <div class="" id='temlatesList'>
                  <select class="form-control" name="EmailTemplate" id="template" onchange="UpdateEmailData('EmailTemplatesId',this.value)">
                    <option value="">Select Template</option>
                    @foreach($EmailTemplates as $EmailTemplate)
                    <option value="{{$EmailTemplate['TemplateId']}}">{{$EmailTemplate['TemplateName']}}</option>

                    @endforeach
                  </select>
                </div>
              </div>
            </div>
            <br>
            <textarea id="editor-container"></textarea>
          </form>
        </div>
      </div>
    </div>

    @php

    $displayDiv="";
    if($_SERVER['HTTP_HOST']=="tbo.bpm360.net")
    {
      $displayDiv='style="display:none !important;"';
    }

    @endphp

    <div class="modal-footer" >
	@if($_SERVER['HTTP_HOST']!="tbo.bpm360.net")
     <!-- <div id="viewMailsDiv3" style="display: none !important">-->
     <div id="viewMailsDiv3" >
       <!-- <div id="viewMailsDiv" style="display: none">-->
        <div id="viewMailsDiv">

          <input type="hidden" id="LinkedMailId" value="">

          <button class="btn btn-primary mb-2 mr-2" data-dismiss="modal" onclick="DiscardMail();"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>


          <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('reply');"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></button>

          <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('replyAll');"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg> All </button>

          <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('forward');"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></button>

          <button class="btn btn-primary mb-2 mr-2" onclick="UpdateSendMail();"><svg style="transform: rotate(45deg);" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></button>
        </div>
      </div>
	@endif

      <div id="viewMailsDiv2">

        <div class="col-md-12" id='timePickerDiv' style="display:none">
          <input type="date" name="MailTime" id="MailTime" class="form-control" placeholder="Mail Time"  value="" onchange="SendLater()">
        </div>
        <button id="btn-save1" class="btn float-left btn-success" onclick="SaveEmail()"> Save</button>
        <button class="btn" data-bs-dismiss="modal" onclick="DiscardMail();"> <i class="flaticon-delete-1"></i> Discard</button>
        <button id="btn-send1" class="btn btn-primary" onclick="UpdateSendMail()"> Send</button>
        <button id="btn-send1" class="btn btn-primary" onclick="ShowTimeInput()"> Send Later</button>

      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>