@php
  $action =  route('admin.mail.send_mail');
@endphp
<style>
    .mail_label
    {
      min-width: 2rem;
    }

    .select_two
    {
      max-width: 30rem;
    }
</style>
<div class="offcanvas-header">
  <h5 id="composeOffCanvasLabel" class="offcanvas-title">Compose Mail</h5>
  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- End Header -->

<!-- Begin Body -->
<div class="offcanvas-body mx-0 flex-grow-0">
  <form id="email-compose-form" class="email-compose-form" action="{{ $action }}" data-mail_filter_type="{{ $mail_filter_type }}"  method="POST" enctype="multipart/form-data">
  @csrf
    <input type="hidden" id="is_draft" value="N" />
    <div class="email-compose-to d-flex">
      <div class="mail_label">
        <label class="form-label mb-0" for="email_contacts">To:</label>
      </div>
      <div class="select2-primary border-0 shadow-none flex-grow-1 mx-2">
        <select
          class="select2 select-email-contacts form-select"
          id="email_contacts"
          name="email_contacts[]"
          multiple
        >
          @foreach($users_list as $user)
            <option data-avatar="{{ $user->profile_pic }}" value="{{ $user->email }}">
              {{ $user->full_name }} 
            </option>
          @endforeach
        </select>
      </div>
      <div class="email-compose-toggle-wrapper">
        <a class="badge bg-label-primary load_from_contacts" href="javascript:void(0);" data-contact_load_type="mail_to">Contacts</a>
        <div class="text-center">
          <a class="email-compose-toggle-cc" href="javascript:void(0);">Cc |</a>
          <a class="email-compose-toggle-bcc" href="javascript:void(0);">Bcc</a>
        </div>
      </div>
    </div>

    <div class="email-compose-cc d-none">
      <hr class="container-m-nx my-2" />
      <div class="d-flex align-items-centerz">
        <div class="mail_label">
          <label for="email_cc" class="form-label mb-0">Cc: </label>
        </div>
        <div class="select2-primary border-0 shadow-none flex-grow-1 mx-2">
          <select
            class="select2 select-email-contacts form-select"
            id="email_cc"
            name="email_cc[]"
            multiple
          >
            @foreach($users_list as $user)
              <option data-avatar="{{ $user->profile_pic }}" value="{{ $user->email }}">
                {{ $user->full_name }} 
              </option>
            @endforeach
          </select>
        </div>
        <!--  -->
        <div class="mt-1">
          <a class="badge bg-label-primary load_from_contacts" href="javascript:void(0);" data-contact_load_type="cc">Contacts</a>
        </div>
        <!--  -->
      </div>
    </div>

    <div class="email-compose-bcc d-none">
      <hr class="container-m-nx my-2" />
      <div class="d-flex">
        <div class="mail_label">
          <label for="email_bcc" class="form-label mb-0">Bcc: </label>
        </div>
        <div class="select2-primary border-0 shadow-none flex-grow-1 mx-2">
          <select
            class="select2 select-email-contacts form-select"
            id="email_bcc"
            name="email_bcc[]"
            multiple
          >
            @foreach($users_list as $user)
              <option data-avatar="{{ $user->profile_pic }}" value="{{ $user->email }}">
                {{ $user->full_name }} 
              </option>
            @endforeach
          </select>
        </div>
        <!--  -->
        <div class="mt-1">
          <a class="badge bg-label-primary btn-sm load_from_contacts" href="javascript:void(0);" data-contact_load_type="bcc">Contacts</a>
        </div>
        <!--  -->
      </div>
    </div>
    <hr class="container-m-nx my-2" />
    <div class="email-compose-subject d-flex align-items-center mb-2">
      <label for="email_subject" class="form-label mb-0">Subject:</label>
      <input
        type="text"
        class="form-control border-0 shadow-none flex-grow-1 mx-2"
        id="email_subject"
        name="email_subject"
        placeholder="Subject"
      />
    </div>
    <div class="email-compose-message container-m-nx">
      <div class="d-flex justify-content-end">
        <div class="email-editor-toolbar border-bottom-0 w-100">
          <span class="ql-formats me-0">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
            <button class="ql-link"></button>
            <button class="ql-image"></button>
          </span>
        </div>
      </div>
      <div id="email-editor" class="email-editor"></div>
      <input type="hidden" id="email_body" name="email_body" value=""/>
    </div>
    <hr class="container-m-nx mt-0 mb-2" />
  </form>

  <!--Begin dropzone attachfile -->  
  <div id="EmailAttachments_div" class="mt-3 control-group" stylez="display:none">
    <div class="mb-2 fw-bold">Attachments</div>
    <form id="dropzoneEmailAttachmentsForm" class="dropzone" action="{{ $action }}" enctype="multipart/form-data">
      @csrf
      <div class="previews"></div>
    </form>
  </div>
  <!-- End dropzone attachfile -->
</div>
<!-- End Body -->

<!-- Begin fotter -->
<div class="offcanvas-footer px-4 pb-3">
  <div class="d-flex align-items-center gap-2">
    <button id="email-compose-form-submit" form="email-compose-form" class="btn btn-primary btn-sm">
      <i class="ti ti-send ti-xs me-1"></i>Send
    </button>
    <button id="email-compose-form-save-draft" class="btn btn-primary btn-sm">
      <i class="ti ti-mail-off ti-xs me-1"></i>Save As Draft
    </button>
    {{--
    <label onclick="toggleAttachDiv('EmailAttachments_div')">
      <i class="ti ti-paperclip cursor-pointer"></i>
    </label>
    --}}
  </div>
</div>
<!--End footer -->
<script>
  // var emailContacts = $('#email_contacts');
  // var emailCC = $('#email_cc');
  // var emailBCC = $('#email_bcc');
  // Mail.initSelect2(emailContacts);
  // Mail.initSelect2(emailCC);
  // Mail.initSelect2(emailBCC);
  // Mail.quillInit();
  // dropzoneEmailAttachments = Mail.dropzoneInitialization('#dropzoneEmailAttachmentsForm');
</script>