@extends('layouts.app')

@section('content')

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>

                <li><a class="breadcrumb_link" href="{{url('admin/dashboard')}}">Banking</a></li>
                <li><a href="#">Spend Money</a></li>

            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>

    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet setting_landing">
                    <!-- MAIN CAPTION START -->
                    <div class="portlet-title" style="border-bottom: 0">
                        <div class="caption">
                            <h2>Email Settings
                                <span>Set a default message which you can customize when you email an invoice, statement or other document.</span>
                            </h2>
                        </div>
                        <div class="actions btn-set" style="background: #fff;  position: fixed;right: 17px;z-index: 1;">

                        </div>
                    </div>
                    <!-- MAIN CAPTION END -->
                    <hr>

                    <!-- MAIN CONTENT START -->
                    <div class="portlet-body">
                        <div class="settings">
                            <!--------------------------------------1ST ROW --------------------------------------->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        <span class="main_title">Email Addresses</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row each_row">
                                <div class="col-md-12">
                                    <div class="col-md-5">
                                        <span class="sub_heading">
                                            Email sender address, You can select logged in<br>
                                            users email or any email address of your choice</span>
                                    </div>
                                    <div class="col-md-6 sender_emailbox">
                                        <div class="input_row">
                                            <label class="col-md-3 label_left pl_pr_0">
                                                Sender Email
                                            </label>
                                            <div class="col-md-9 pr_0">
                                                <input type="text" class="form-control custom_input validate template_names" name="template_names" value="Logged in users email <shaji@evakonetworks.com>" placeholder="">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-5">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input_row">
                                            <label class="col-md-3 label_left pl_pr_0">
                                                Copy to
                                            </label>
                                            <div class="col-md-9 pr_0">
                                                <input type="text" class="form-control custom_input validate template_names" name="template_names" value="" placeholder="Multiple accounts can be used, seperated by comma">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>

                            <!--------------------------------------1ST ROW --------------------------------------->

                            <!--------------------------------------2ND SECTION --------------------------------------->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        <span class="main_title">EMAIL TEXT BODY</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row each_row">
                                <div class="col-md-12">
                                    <div class="col-md-4 left_side_email_caption">
                                        <span class="sub_heading">
                                            A standard  and unique email content for each document you sent.
                                        </span>
                                        <div class="sideByside_content">
                                            <span class="info_text_side">Where is this message used?</span>
                                            <span class="sub_heading">
                                                When you email a document from Salesoft Resto, <br>
                                                we'll put this text in the Message field. You can <br>
                                                then customize it before sending it to the <br>
                                                customer.
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-1"></div>
                                    

                                    <div class="col-md-6 tab_area">
                                        <div class="tabbable-line">
                                            <ul class="nav nav-tabs">
                                                <li class="active">
                                                    <a href="#test" data-toggle="tab">
                                                    Sales Invoice
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a href="#purchase" data-toggle="tab">
                                                    Purchase Invoice
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a href="#pay" data-toggle="tab">
                                                        Pay Slip
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a href="#processing" data-toggle="tab">
                                                        WPS Processing
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a href="#reports" data-toggle="tab">
                                                        Daily Reports
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a href="#member" data-toggle="tab">
                                                        Member Invoice
                                                    </a>
                                                </li>
                                            </ul>
                                            <form method="post" id="templates_body" action="" enctype="multipart/form-data">
                                                <input type="hidden" name="_token" value="">                                                        
                                                <input type="hidden" name="save" value="1">
                                                <div class="tab-content">
                                                    <!--============_ EDITOR EMAIL _============-->
                                                    <div class="tab-pane active" id="test">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="test_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane " id="purchase">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="purchase_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane " id="pay">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="74f03b50-f3d4-11e9-96f8-b1453adabf2d">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="pay_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane " id="processing">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="74f03b50-f3d4-11e9-96f8-b1453adabf2d">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="processing_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane " id="reports">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="74f03b50-f3d4-11e9-96f8-b1453adabf2d">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="reports_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane " id="member">
                                                        <div class="wrap_editor">
                                                            <input type="hidden" name="uuid[]" value="74f03b50-f3d4-11e9-96f8-b1453adabf2d">
                                                            <div class="top_editor_bar">
                                                                <div class="right_editorBar col-md-6">
                                                                    <span class="text_link">
                                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                                    </span>
                                                                    <div class="selectMsg">
                                                                        <div class="col-md-12">
                                                                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                                                                <option value=""></option>
                                                                                <option value="name">Name</option>
                                                                                <option value="department">Department</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="email_editor" id="member_editor" contenteditable="true">
                                                                <p></p>
                                                            </div>
                                                            <span class="letter_count">You have used <strong>0</strong> of 4000 characters.</span>
                                                        </div>
                                                    </div>
                                                <!--============_ EDITOR EMAIL  _============-->

                                                </div>

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

                                <div class="row">
                                    <div class="col-md-12">

                                    </div>
                                </div>
                                    
                                <hr>
                                <!--------------------------------------2ND SECTION --------------------------------------->

                                <!--------------------------------------Actions --------------------------------------->
                                <div class="row">

                                    <div class="col-md-7"></div>
                                    <div class="col-md-4 save_and_cancel">

                                        <input type="button" name="cancel" value="Cancel" class="btn theme_btn_round float_btn cancel_email_settings">

                                        <input type="button" name="save" value="Save" class="btn theme_btn_round float_btn save_email_settings">

                                    </div>

                                </div>
                                <!--------------------------------------Actions --------------------------------------->

                            </div>
                            <!-- MAIN CONTENT END -->

                        </div>
                        <!-- End: life time stats -->
                    </div>
                </div>
            </div>
            <!-- END PAGE CONTENT -->
        </div>
        <!-- END CRM CONTENT BODY -->
    </div>

                          
    @endsection('content')
    @section('admin_css')
    <link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="http://backoffice.evakopro.site/assets/global/css/settings.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .tab-content{
            border-top:2px solid #babcbf69;
            margin-top: -3px;
        }
        .table-container{
            padding: 50px 0 0;
        }
        table.dataTable.no-footer {
            border: none;
        }
        
        .left_side_email_caption {
            position: relative;
            min-height: 500px;
        }
        .sideByside_content {
            position: absolute !important;
            bottom: 0;
        }

        .sender_emailbox {
            margin-bottom: 23px;
        }

        .info_text_side {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
            display: inline-block;
        }

        .link_url {
            display: block;
        }

        .letter_count {
            float: right;
            color:#737373;
        }

        .row {
            margin:0;
        }

        .save_and_cancel{
            margin-left: 100px;
        }

        .breadcrumbs li:first-child a{
            color: #00919e;
        }
        .top_editor_bar .selectMsg {
            width: 100%;float: left;width: 270px;
        }
        .right_editorBar {
            float: right;width: 310px;padding: 0;
        }
        .top_editor_bar .text_link {
            float: left;
        }
        .selectMsg .col-md-12 {
            padding: 0;
        }
        .select2 .select2-selection.select2-selection--single{
            height: 33px !important;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
            left: 18px;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
            padding: 0 16px;
            border: 1px solid #c6c8cc;
            right: 0;
            border-radius: 0 4px 4px 0;
            background: #ececec;
        }
        .email_editor {
            border: 1px solid #babcbf;
        }
        .top_editor_bar {
            border: 1px solid #babcbf;
        }
    </style>
    @stop
    @section('admin_js')
    <script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
    <script>
        /*LIMITIZE THE TEXT IN EDITOR*/
        const limit = 2500;

        var active_div = $('.nav-tabs li a').attr('href');

        var rem = $.trim($(active_div + '_editor').text()).length;

        $(".letter_count").empty().append("You have used <strong>" + rem + "</strong> of " + limit + " characters.");

        $(active_div + '_editor').on('input keypress', function (e) {
            var char = $.trim($(active_div + '_editor').text()).length;

            rem = char;
            $(".letter_count").html("You have used <strong>" + rem + "</strong> of " + limit + " characters.");
            // console.log(char)
            // console.log(rem);
            if (char > (limit - 1)) {
                $(".letter_count").css("color", "#737373");
            }
            else
                $(".letter_count").css("color", "#737373");
            if (char > (limit - 1)) {
                e.preventDefault();
                return false;
            }

        });

        $('body').on('click', '.nav-tabs li', function (e) {
            var get_id = $(this).find('a').attr('href');
            var target = $(get_id).parent().find('.letter_count');

            var rem = $.trim($(get_id + '_editor').text()).length;
            $(target).empty().append("You have used <strong>" + rem + "</strong> of " + limit + " characters.");

            $(get_id + '_editor').on('input keypress', function (e) {
                var char = $.trim($(get_id + '_editor').text()).length;
                ;
                rem = char;
                $(target).html("You have used <strong>" + rem + "</strong> of " + limit + " characters.");
                // console.log(char)
                // console.log(rem);
                if (char > (limit - 1)) {
                    $(target).css("color", "#737373");
                }
                else
                    $(target).css("color", "#737373");
                if (char > (limit - 1)) {
                    e.preventDefault();
                    return false;
                }

            });
        });
        /*LIMITIZE THE TEXT IN EDITOR*/
    </script>
    <script src="{{asset('js/general.js')}}"type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            //SELECT2 DROPDOWN START
            $(".select2").select2({
                placeholder: "Insert placeholder",
                allowClear: true
            });
        });
    </script>
    @stop