@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/jquery-multi-select/css/multi-select.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/apps/css/inbox.min.css') }}"/>
@endsection

@section('page-content-wrapper')
	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="index.html">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.msg_manage')</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row inbox">
				<div class="col-md-2">
					<ul class="inbox-nav margin-bottom-10">
						<li class="compose-btn">
							<a href="javascript:;" data-title="Compose" class="btn btn-primary btn-lg btn-danger" style="width:150px;">
							<i class="fa fa-edit "></i> @lang('messages.w_msg') </a>
						</li>
                        <br>
						<li class="sent inbox active">
							<a class="btn btn-primary" href="javascript:;" data-title="@lang('messages.submited')" style="width:150px;">
							@lang('messages.submited') </a>
							<b></b>
						</li>
					</ul>
				</div>
				<div class="col-md-10">
					<div class="inbox-header">
						<h1 class="pull-left">Inbox</h1>
						<form class="form-inline pull-right" action="index.html">
						<!--
							<div class="input-group input-medium">
								<input type="text" class="form-control" >
								<span class="input-group-btn">
								<button type="submit" class="btn green"><i class="fa fa-search"></i></button>
								</span>
							</div>
						!-->
						</form>
					</div>
					<div class="inbox-loading">
						 Loading...
					</div>
					<div class="inbox-content">
					</div>
				</div>
			</div>
		</div>
	
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
	Inbox.init();
	
	//判斷登入者是否為唯讀帳號，如果是，關閉所有按鈕功能
	if( $("#readonly").val()  === "readonly" ){
		$(':button').prop('disabled', true);
		$('.btn').prop('disabled', true);
	}


    $('#e1').change(function(){
        var multipleValues = $( "#e1" ).val() || [];
        $('input[name="to"]').val( multipleValues.join( "," ) );
    });

});

var Inbox = function () {

    var content = $('.inbox-content');
    var loading = $('.inbox-loading');
    var listListing = '';

    var loadInbox = function (el, name) {
    	var page = $(el).attr('data-page');
        var url = '{{ route("manage::message::inbox") }}?page='+page;
        var title = $('.inbox-nav > li.' + name + ' a').attr('data-title');
        listListing = name;

        loading.show();
        content.html('');
        toggleButton(el);

        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) 
            {
                toggleButton(el);

                $('.inbox-nav > li.active').removeClass('active');
                $('.inbox-nav > li.' + name).addClass('active');
                $('.inbox-header > h1').text(title);

                loading.hide();
                content.html(res);
                if (Layout.fixContentHeight) {
                    Layout.fixContentHeight();
                }
                App.initUniform();
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });
/*  收件未開放
        // handle group checkbox:
        jQuery('body').on('change', '.mail-group-checkbox', function () {
            var set = jQuery('.mail-checkbox');
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                $(this).attr("checked", checked);
            });
            jQuery.uniform.update(set);
        });
        */
    }

    var loadSent = function (el, name) {
    	var page = $(el).attr('data-page');
        var url = '{{ route("manage::message::sent") }}?page='+page;
        var title = $('.inbox-nav > li.' + name + ' a').attr('data-title');
        listListing = name;

        loading.show();
        content.html('');
        toggleButton(el);

        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) 
            {
                toggleButton(el);

                $('.inbox-nav > li.active').removeClass('active');
                $('.inbox-nav > li.' + name).addClass('active');
                $('.inbox-header > h1').text(title);

                loading.hide();
                content.html(res);
                if (Layout.fixContentHeight) {
                    Layout.fixContentHeight();
                }
                App.initUniform();
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });

        // handle group checkbox:
        jQuery('body').on('change', '.mail-group-checkbox', function () {
            var set = jQuery('.mail-checkbox');
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                $(this).attr("checked", checked);
            });
            jQuery.uniform.update(set);
        });
    }

    var loadMessage = function (el, name, resetMenu) {
        var url = '{{ route("manage::message::view") }}';

        loading.show();
        content.html('');
        toggleButton(el);

        var message_id = el.parent('tr').attr("data-messageid");  
        
        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            data: {'message_id': message_id},
            success: function(res) 
            {
                toggleButton(el);

                if (resetMenu) {
                    $('.inbox-nav > li.active').removeClass('active');
                }
                $('.inbox-header > h1').text('@lang('messages.check_msg')');

                loading.hide();
                content.html(res);
                Layout.fixContentHeight();
                App.initUniform();
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });
    }

    var loadCompose = function (el) {
        var url = '{{ route("manage::message::composer") }}';

        loading.show();
        content.html('');
        toggleButton(el);

        // load the form via ajax
        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) 
            {
                toggleButton(el);

                $('.inbox-nav > li.active').removeClass('active');
                $('.inbox-header > h1').text('@lang('messages.send_msg')');

                loading.hide();
                content.html(res);

                $('.inbox-wysihtml5').focus();
                Layout.fixContentHeight();
                App.initUniform();

                //驗證送出表單
				$('#form_send_message').validate({
					errorElement: 'span', //default input error message container
			        errorClass: 'help-block help-block-error', // default input error message class
			        focusInvalid: false, // do not focus the last invalid input
			        ignore: "",  // validate all fields including form hidden input
					rules:{
						title:{
							required:true 
						},
						
					},
					messages:{
						title:{
							required:'@lang('messages.enter_msg_title')' 
						},
					},

			        invalidHandler: function (event, validator) { //display error alert on form submit   

			        },

			        highlight: function (element) { // hightlight error inputs
			           $(element)
			                .closest('.form-group').addClass('has-error'); // set error class to the control group
			        },

			        unhighlight: function (element) { // revert the change done by hightlight
			            $(element)
			                .closest('.form-group').removeClass('has-error'); // set error class to the control group
			        },

			        success: function (label) {
			            label
			                .closest('.form-group').removeClass('has-error'); // set success class to the control group
			        },

			        submitHandler: function (form) {
						$.ajax({
							type: 'POST',
							dataType:'json',
							url : '{{ route("manage::message::post_message") }}',
							data: $('#form_send_message').serialize(),
							success: function(sendback){
								window.location.reload();
							},
							error   : function (sendback){
								bootbox.alert('@lang('messages.send_msg_fail_check_again')(@lang('messages.advice_select_contacts'))');
					        }
						})
			        }
				});
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });
    }

    var loadReply = function (el) {
        var messageid = $(el).attr("data-messageid");
        var url = '{{ route("manage::message::reply") }}?messageid=' + messageid;
        
        loading.show();
        content.html('');
        toggleButton(el);

        // load the form via ajax
        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) 
            {
                toggleButton(el);

                $('.inbox-nav > li.active').removeClass('active');
                $('.inbox-header > h1').text('@lang('messages.reply')');

                loading.hide();
                content.html(res);
                $('[name="message"]').val($('#reply_email_content_body').html());

                Layout.fixContentHeight();
                App.initUniform();
                //驗證送出表單
				$('#form_send_message').validate({
					errorElement: 'span', //default input error message container
			        errorClass: 'help-block help-block-error', // default input error message class
			        focusInvalid: false, // do not focus the last invalid input
			        ignore: "",  // validate all fields including form hidden input
					rules:{
						title:{
							required:true 
						},
						
					},
					messages:{
						title:{
							required:'@lang('messages.enter_msg_title')' 
						},
					},

			        invalidHandler: function (event, validator) { //display error alert on form submit   

			        },

			        highlight: function (element) { // hightlight error inputs
			           $(element)
			                .closest('.form-group').addClass('has-error'); // set error class to the control group
			        },

			        unhighlight: function (element) { // revert the change done by hightlight
			            $(element)
			                .closest('.form-group').removeClass('has-error'); // set error class to the control group
			        },

			        success: function (label) {
			            label
			                .closest('.form-group').removeClass('has-error'); // set success class to the control group
			        },

			        submitHandler: function (form) {
						$.ajax({
							type: 'POST',
							dataType:'json',
							url : '{{ route("manage::message::post_message") }}',
							data: $('#form_send_message').serialize(),
							success: function(sendback){
								window.location.reload();
							},
							error   : function (sendback){
								bootbox.alert('@lang('messages.send_msg_fail_check_again')(@lang('messages.advice_select_contacts'))');
					        }
						})
			        }
				});
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });
    }

    var loadSearchResults = function (el) {
        var url = 'inbox_inbox.html';

        loading.show();
        content.html('');
        toggleButton(el);

        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "html",
            success: function(res) 
            {
                toggleButton(el);

                $('.inbox-nav > li.active').removeClass('active');
                $('.inbox-header > h1').text('Search');

                loading.hide();
                content.html(res);
                Layout.fixContentHeight();
                App.initUniform();
            },
            error: function(xhr, ajaxOptions, thrownError)
            {
                toggleButton(el);
            },
            async: false
        });
    }

    var handleSendList = function () {
		$('#modal_send_list').modal('show');
    }

    var toggleButton = function(el) {
        if (typeof el == 'undefined') {
            return;
        }
        if (el.attr("disabled")) {
            el.attr("disabled", false);
        } else {
            el.attr("disabled", true);
        }
    }

    return {
        //main function to initiate the module
        init: function () {

            // handle compose btn click
            $('.inbox').on('click', '.compose-btn a', function () {
                loadCompose($(this));
            });

            // handle discard btn
            $('.inbox').on('click', '.inbox-discard-btn', function(e) {
                e.preventDefault();
                loadInbox($(this), listListing);
            });

            // handle reply and forward button click
            $('.inbox').on('click', '.reply-btn', function () {
                loadReply($(this));
            });

            // handle view message
            $('.inbox-content').on('click', '.view-message', function () {
                loadMessage($(this));
            });

            // handle inbox listing
            $('.inbox-nav > li.inbox > a').click(function () {
                loadInbox($(this), 'inbox');
            });

            // handle sent listing
            $('.inbox-nav > li.sent > a').click(function () {
                loadSent($(this), 'sent');
            });

            // handle draft listing
            $('.inbox-nav > li.draft > a').click(function () {
                loadInbox($(this), 'draft');
            });

            // handle trash listing
            $('.inbox-nav > li.trash > a').click(function () {
                loadInbox($(this), 'trash');
            });

            //handle compose/reply cc input toggle
            $('.inbox-content').on('click', '.mail-to .inbox-cc', function () {
                handleSendList();
            });

            $('.inbox').on('click', '.page-btn', function(e) {
            	if(listListing == 'inbox'){
            		loadInbox($(this), listListing);
            	}else{
            		loadSent($(this), listListing);
            	}
                
            });

            //handle loading content based on URL parameter
            if (App.getURLParameter("a") === "view") {
                loadMessage();
            } else if (App.getURLParameter("a") === "compose") {
                loadCompose();
            } else {
               $('.inbox-nav > li.inbox > a').click();
            }

        }

    };

}();
</script>
@endsection