@extends('user.layout.header_footer_sidebar')
<style>
    .excel_data {
        border: 2px solid black !important;
        font-size: 13px;
        color: gray;
        height: 32px;
        text-align: center;
    }

    .excel_header {
        border: 2px solid black !important;
        font-size: 14px;
        color: #5f5f5f;
        height: 32px;
        text-align: center;
    }

    .excel_table {
        width: 100%;
    }

    .emtable {
        margin-top: 30px;
        margin-bottom: -20px;
    }
</style>

@section('content')
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                    <!-- <div class="input-group">
              <input
                type="text"
                class="form-control bg-light border-0 small"
                placeholder="Search for..."
                aria-label="Search"
                aria-describedby="basic-addon2"
              />
              <div class="input-group-append">
                <button class="btn btn-primary" type="button">
                  <i class="fas fa-search fa-sm"></i>
                </button>
              </div>
            </div> -->
                </form>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                    <li class="nav-item dropdown no-arrow d-sm-none">
                        <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <!-- Dropdown - Messages -->
                        <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                            aria-labelledby="searchDropdown">
                            <form class="form-inline mr-auto w-100 navbar-search">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light border-0 small"
                                        placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>

                    <div class="topbar-divider d-none d-sm-block"></div>

                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img src="{!! asset('theme/user_theme/img/janedoe.png') !!}" class="img-responsive dropuser" />&nbsp;&nbsp;<span
                                class="mr-2 d-none d-lg-inline text-gray-600 small">Jane Doe - Buyer Finder</span>
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                            aria-labelledby="userDropdown">
                            <!-- <a class="dropdown-item" href="#">
                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                  Profile
                </a> -->
                            <a class="dropdown-item" href="settings">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                Settings
                            </a>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                Logout
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">Send Email</h1>
                    <!-- <button type="button" class="btn btn-primary backdash">
              <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to
              Automarketer V3 Dashboard
            </button> -->
                    <div class="maintopsmall">
                        <p>
                            <a href="dashboard"><span>Home</span></a>&nbsp; / &nbsp;&nbsp;
                            <a href="automarketer"><span>Automarketer</span></a>
                        </p>
                    </div>
                    <!-- <a
              href="#"
              class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
              > <i class="fas fa-download fa-sm text-white-50"> </i>  add Module</a
            > -->
                </div>

                <!-- side mobile start -->

                <div class="autosidemodalarea">
                    <!-- <div class="col-sm-3 col-xl-2 order-1 order-sm-2 mt-4 float-right"> -->
                    <button class="modalopclick">
                        <a href="#" data-toggle="modal" data-target="#flyoutmodal"
                            class="btn btn-dark mt-2 w-md-100 text-center">Call</a>
                    </button>
                    <!-- </div> -->

                    <div class="modal" id="flyoutmodal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog fadeInRight animated ml-auto" role="document">
                            <div class="modal-content mobilmodabod">
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" class="crossmobile">×</span>
                                </button>
                                <div class="modal-body">
                                    <h5 class="redsback">
                                        You can’t make any calls! (No Phone Number Assigned!)
                                    </h5>
                                    <h6 class="greensback">Refreshing...</h6>
                                    <!-- <h6 class="greensback">Offline</h6>
                  <h6 class="greensback">Ready</h6> -->

                                    <form>
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control mobinp" placeholder="" />
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="dropdown">
                                                    <div class="call-history-container">
                                                        <button class="btn btn-white btn-block dropdown-toggle"
                                                            type="button" data-toggle="dropdown" aria-expanded="false">
                                                            <i class="fa fa-refresh" aria-hidden="true"></i>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-right">
                                                            <li>(317) 640-7277</li>
                                                            <li>(317) 598-1220</li>
                                                            <li>(317) 884-8666</li>
                                                            <li>(317) 589-1220</li>
                                                            <li>(219) 274-9775</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control entnumb" placeholder="Enter Number" />
                                    </form>

                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">1</div>
                                            <div class="mobbord">2<br /><span>abc</span></div>
                                            <div class="mobbord">3<br /><span>def</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">4<br /><span>ghi</span></div>
                                            <div class="mobbord">5<br /><span>jkl</span></div>
                                            <div class="mobbord">6<br /><span>mno</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">7<br /><span>pqrs</span></div>
                                            <div class="mobbord">8<br /><span>tuv</span></div>
                                            <div class="mobbord">9<br /><span>wxyz</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">*</div>
                                            <div class="mobbord">0<br /><span>+</span></div>
                                            <div class="mobbord">#</div>
                                        </div>
                                    </div>

                                    <div class="row sidemodallastcli">
                                        <div class="col-sm-8">
                                            <button type="button" class="btn btn-primary calldialclick">
                                                <i class="fa fa-phone" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <div class="col-sm-4">
                                            <button type="button" class="btn btn-primary backdialclick">
                                                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- side mobile finish -->

                <!-- Write your content here -->
                <form id="send_emails_form" action="{!! asset('user/sendemail')!!}" method="POST">
                  {{ csrf_field() }}
                    <div class="container-fluid tabonwebacks">
                        <h3 class="tabonhead">Create Message</h3>
                        <hr class="eline" />
                        <div class="form-row tabonerow">
                            <div class="form-group col-md-6">
                                <label for="inputCity">Title</label>
                                <input type="text" name="title" class="form-control" id="information" placeholder="Title" />
                            </div>
                            <div class="form-group col-md-6"></div>
                        </div>

                        <hr class="eline" />
                        <div class="form-row tabonerow">
                            <div class="form-group col-md-6">
                                <label for="inputState">Subject</label>
                                <input type="text" name="subject" class="form-control" id="Subject" placeholder="Subject..." />
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <small id="emailHelp" class="form-text text-muted smbluesss">This value is
                                    required.</small>
                                <textarea class="form-control" name="email_body" id="email_content" rows="10"></textarea>
                            </div>
                        </div>
                        <hr />
                        <h3 class="tabonheads">Email Attachments</h3>
                        <div class="form-row emtable">
                            <div class="form-group col-md-12">
                                <div class="email_attachment_table"></div>
                            </div>
                        </div>
                        <div class="form-row tabonerow">
                            <div class="form-group col-md-3">
                                <button class="choosenfilpicc">
                                    <input type="file" id="myfile" name="myfile"
                                        onchange="get_email_attachemnt_data(this,'.email_attachment_table')" />
                                </button>
                            </div>
                            <div class="form-group col-md-6">
                                <button type="button" onclick="send_email()" class="btn btn-primary taboneleftclick"
                                    data-toggle="modal" data-target="#exampleModal">
                                    SEND
                                </button>

                                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog hfua" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Email Status</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                Sending Emails .....
                                            </div>
                                            <div class="modal-footer">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('app_jquery')
    <script>
        $(function() {
        })
        async function get_email_attachemnt_data(file_input, show_div) {
            await excel_uploaded(file_input, show_div);
            setTimeout(() => {
                get_attachment_content()
            }, 1000);

        }

        function excel_validation() {
            if (GLOBAL_data_excel.length < 1) {
                alert('Excel is empty');
                return false;

            } else if (!GLOBAL_data_excel[0].hasOwnProperty('email')) {
                alert('Email column required');
                return false;

            }
            return true;
        }

        function get_attachment_content() {

            if (!excel_validation()) {
                return;
            }

            var email_content = $('#email_content').val();

            var variables = get_variables(email_content)
            console.log('variablesvariablesvariablesvariables', variables);


        }

        function get_variables(string_para) {
            var matches = string_para.split('{!')
                .filter(function(v) {
                    return v.indexOf('!}') > -1
                })
                .map(function(value) {
                    return value.split('!}')[0]
                })
            return matches;
        }

        function send_email() {
          var send_emails_form_data = $('#send_emails_form').serializeArray();
          send_emails_form_data.push({name:'excel_data',value:JSON.stringify( GLOBAL_data_excel)});
          $.ajax({
              type : 'POST',
              url : "{!! asset('user/sendemail')!!}",
              data : send_emails_form_data,
              dataType:'application/json',
              success:function(res){
                console.log('res',res);
              },
              error:function(err){
                console.log('error',err);
              }
            })
            // open modal
            $('#exampleModal').modal('show')
            setTimeout(() => {
                $('#exampleModal').modal('hide')
            }, 4000);
        }

        
    </script>
@endsection