@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
	<div class="box box-default">
		<div class="box-body">
			<div class="row">
				<div class="col-xs-12">
					<div class="pull-right">
                        <a href="{{ url('/administrator/admin-tools') }}" class="btn btn-default btn-flat btn-sm">
                            <i class="fa fa-chevron-left"></i> Back
                        </a>

						<a class="btn btn-success btn-flat btn-sm" data-target="#addSignatory-Modal" data-toggle="modal">
							<i class="fa fa-plus-circle"></i> Add Signatory
						</a>
					</div>

                    <label class="text-primary" style="font-size:16px; margin-top:6px"><i class="fa fa-quote-left"></i> Signatories</label>
				</div>
			</div>
            
            <hr style="margin-top:6px; margin-bottom:8px">

			<div class="row">
				<div class="col-xs-12">
					<table class="table table-condensed table-hover" id="table-signatories" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="15%">Report Type</th>
                            <th width="25%">Signatory Type</th>
                            <th width="25%">Name</th>
                            <th width="25%">Designation</th>
                            <th width="10%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
				</div>
			</div>
		</div>
	</div>

	<!-- ADD SIGNATORY MODAL -->
	<div class="modal fade" id="addSignatory-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
	    <div class="modal-dialog modal-sm" role="document" table>
	        <div class="modal-content">
	            <div class="modal-body">
                    <div class="form-row">
                        <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-plus-square"></i> Add Signatory</strong></h5>
                    </div>
	            	<div class="form-row">
                        <div class="form-group">
                        	<span class="control-label text-bold">Report Type</span>
                            <select id="add_report" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                                <option value="rs">Refund Slip</option>
                                <option value="al">Alteration</option>
                                <option value="dcr">Daily Collection Report</option>
                                <option value="jo">Job Order</option>
                            </select>
                        </div>
                    </div>

	                <div class="form-row">
                        <div class="form-group">
                        	<span class="control-label text-bold">Signatory Type</span>
                            <select id="add_signatory" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                                <option value="verified">Verified</option>
                                <option value="approved">Approved</option>
                                <option value="transacted">Transacted</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                    	<div class="form-group">
                    		<span class="control-label text-bold">User</span>
                    		<select id="add_user" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                                <option></option>                    
                            </select>
                    	</div>
                    </div>

                    <div class="form-row">
                    	<div class="form-group">
                    		<span class="control-label text-bold">Designation</span>
                    		<input type="text" class="form-control" id="add_designation" placeholder="Designation">
                    	</div>
                    </div>

	                <div class="form-group">
	                    <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
	                        Cancel
	                    </button>
	                    <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm addSignatory-btn">
	                        <i class="fa fa-check"></i> Save
	                    </button>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

    <!-- EDIT SIGNATORY MODAL -->
    <div class="modal fade" id="editSignatory-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
        <div class="modal-dialog modal-sm" role="document" table>
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-row">
                        <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-pencil-square"></i> Edit Signatory</strong></h5>
                    </div>
                    <input type="hidden" id="id">
                    <div class="form-row">
                        <div class="form-group">
                            <span class="control-label text-bold">Report Type</span>
                            <select id="edit_report" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;" disabled="disabled">
                                <option value="rs">Refund Slip</option>
                                <option value="al">Alteration</option>
                                <option value="dcr">Daily Collection Report</option>
                                <option value="jo">Job Order</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <span class="control-label text-bold">Signatory Type</span>
                            <select id="edit_signatory" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;" disabled="disabled">
                                <option value="verified">Verified</option>
                                <option value="approved">Approved</option>
                                <option value="transacted">Transacted</option>
                                <option value="reviewed">Reviewed</option>
                                <option value="checked">Checked</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <span class="control-label text-bold">User</span>
                            <select id="edit_user" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                                <option></option>                    
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <span class="control-label text-bold">Designation</span>
                            <input type="text" class="form-control" id="edit_designation" placeholder="Designation">
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-primary btn-flat waves-effect waves-light btn-sm editSignatory-btn">
                            <i class="fa fa-check"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
	<script type="text/javascript">
		function clearInputs() {
			$('#add_report').val('rs').trigger('change');
			$('#add_user').val('').trigger('change');
			$('#add_designation').val('');

            $('#edit_user').val('').trigger('change');
            $('#edit_designation').val('');
		}

		$(document).ready(function(){
			$dt = $('#table-signatories').DataTable({
				ordering: false,
				deferred: true,
				processing: true,
				serverSide: true,
				ajax: {url: $app_url + '/administrator/admin-tools/set-signatories/dt'},
				columns: [
					{data: 'report_type',			name: 'report_type',		orderable: false,	className:'text-uppercase'},
					{data: 'signatory_type',		name: 'signatory_type',		orderable: false,	className:'text-uppercase'},
					{data: 'full_name',				name: 'full_name',			orderable: false,	className:'text-uppercase'},
					{data: 'designation',			name: 'designation',		orderable: false,	className:'text-uppercase'},
					{data: 'action',				name: 'action',				orderable: false, searchable: false},
				]
			});

        	$('input[type="search"]').focus();

        	$('.dataTables_filter input').unbind();
            $('.dataTables_filter input').bind('keyup', function(e){
                if (e.keyCode == 13) {
                    $dt.search($(this).val()).draw();
                }
            });

            $('#addSignatory-Modal').on('shown.bs.modal', function(){
            	$('#add_designation').focus();
            });

            $('#editSignatory-Modal').on('shown.bs.modal', function(){
                $('#edit_designation').focus();
            })

            $('#add_report').on('change', function(){
            	if ($(this).val() == 'rs') {
            		var newOptions = {
            			"Verified" : "verified",
					  	"Approved" : "approved",
					  	"Transacted" : "transacted"
					};

					
            	}
            	else if($(this).val() == 'al') {
            		var newOptions = {
            			"Verified" : "verified",
					  	"Approved" : "approved",
					  	"Transacted" : "transacted"
            		};
            	}

            	else if ($(this).val() == 'dcr') {
            		var newOptions = {
            			"Reviewed" : "reviewed",
            			"Checked" : "checked"
            		};
            	}

            	else if ($(this).val() == 'jo') {
            		var newOptions = {
            			"Checked" : "checked",
            			"Approved" : "Approved"
            		};
            	}

            	var $signatory = $("#add_signatory");
				$signatory.empty(); // remove old options
				$.each(newOptions, function(key,value) {
				  $signatory.append($("<option></option>")
				     .attr("value", value).text(key));
				});
            });

            $('#add_user').select2({
                placeholder: "Select User",
                ajax: {
                    url: $app_url + '/select2-system-user-search',
                    dataType: 'json',
                    delay: 200,
                    data: function (params) {
                        return query = {
                            search: params.term,
                            page: params.page,
                            is_active: 1
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function (item) {
                                return {
                                    text: item.name.toUpperCase(),
                                    id: item.id
                                }
                            }),
                            pagination: {
                                more: (params.page * 10) < data.count
                            }
                        };
                    }
                }
            });

            $('#edit_user').select2({
                placeholder: "Select User",
                ajax: {
                    url: $app_url + '/select2-system-user-search',
                    dataType: 'json',
                    delay: 200,
                    data: function (params) {
                        return query = {
                            search: params.term,
                            page: params.page,
                            is_active: 1
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function (item) {
                                return {
                                    text: item.name.toUpperCase(),
                                    id: item.id
                                }
                            }),
                            pagination: {
                                more: (params.page * 10) < data.count
                            }
                        };
                    }
                }
            });
		})
		.on('click', '.addSignatory-btn', function(){
			var report_type = $('#add_report').val();
			var signatory_type = $('#add_signatory').val();
			var user_id = $('#add_user').val();
			var designation = $('#add_designation').val();

			if (user_id == "") {
				$('#addSignatory-Modal').modal('hide');
				$.confirm({
                    title: 'Invalid Request!',
                    content: 'Please select a user!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc'],
                            action: function() {
                                $('#addSignatory-Modal').modal('show');
                            }
                        }
                    }
                });
                return false;
			}

			if (designation == "") {
				$('#addSignatory-Modal').modal('hide');
				$.confirm({
                    title: 'Invalid Request!',
                    content: 'Please fill the designation field!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc'],
                            action: function() {
                                $('#addSignatory-Modal').modal('show');
                            }
                        }
                    }
                });
                return false;
			}

			$('#addSignatory-Modal').modal('hide');
			$jc = $.confirm({
                title: 'Add signatory',
                draggable: false,
                columnClass: 'small',
                content: 'Are you sure?',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc'],
                        action: function() {
                            $('#addSignatory-Modal').modal('show');
                        }
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-success',
                        text: '<small>[ENTER]</small> Confirm',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                url: $app_url + '/administrator/admin-tools/set-signatories/add',
                                type: 'POST',
                                data: {
                                	'report_type' : report_type,
                                	'signatory_type' : signatory_type,
                                	'user_id' : user_id,
                                	'designation': designation
                                },
                                beforeSend: function(){
                                    $jc.showLoading(true);
                                },
                                success: function(e){
                                    $.confirm({
                                        title: 'Success!',
                                        content: e.msg,
                                        type: 'green',
                                        buttons: {
                                            OK: {
                                                text: '<small>[ENTER]</small> OK',
                                                btnClass: 'btn-success',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    clearInputs();
                                                    $dt.draw();
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function(e){
                                    if (e.status == 422 || e.status == 500) {
                                        $.confirm({
                                            title: 'ERROR!',
                                            content: 'An error has occured!',
                                            type: 'red',
                                            buttons: {
                                                OK: {
                                                    text: '<small>[ENTER]</small> OK',
                                                    btnClass: 'btn-red',
                                                    keys: ['enter', 'esc'],
                                                    action: function() {
                                                        clearInputs();
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                complete: function() {
                                    $jc.hideLoading(true);
                                }
                            })
                        }
                    }
                }
            })
		})
        .on('click', '.edit-signatory', function(){
            $('#id').val($(this).data('id'));
            $('#edit_report').val($(this).data('report')).trigger('change');
            $('#edit_signatory').val($(this).data('signatory')).trigger('change');

            var name = $(this).data('uname');
            var designation = $(this).data('designation');

            var forceSelectUser = new Option(name.toUpperCase(), $(this).data('uid'), true, true);
            $('#edit_user').append(forceSelectUser).trigger('change');

            $('#edit_designation').val(designation.toUpperCase());

            $('#editSignatory-Modal').modal('show');
        })
        .on('click', '.editSignatory-btn', function(){
            var ref_id = $('#id').val();
            var user_id = $('#edit_user').val();
            var designation = $('#edit_designation').val();

            if (ref_id == "") {
                $('#editSignatory-Modal').modal('hide');
                $.confirm({
                    title: 'Invalid Request!',
                    content: 'Reference ID is missing!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc'],
                            action: function() {
                                $('#editSignatory-Modal').modal('show');
                            }
                        }
                    }
                });
                return false;
            }

            if (user_id == "") {
                $('#editSignatory-Modal').modal('hide');
                $.confirm({
                    title: 'Invalid Request!',
                    content: 'Please select a user!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc'],
                            action: function() {
                                $('#editSignatory-Modal').modal('show');
                            }
                        }
                    }
                });
                return false;
            }

            if (designation == "") {
                $('#editSignatory-Modal').modal('hide');
                $.confirm({
                    title: 'Invalid Request!',
                    content: 'Please fill the designation field!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc'],
                            action: function() {
                                $('#editSignatory-Modal').modal('show');
                            }
                        }
                    }
                });
                return false;
            }

            $('#editSignatory-Modal').modal('hide');
                $jc = $.confirm({
                title: 'Edit signatory',
                draggable: false,
                columnClass: 'small',
                content: 'Are you sure?',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc'],
                        action: function() {
                            $('#editSignatory-Modal').modal('show');
                        }
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-primary',
                        text: '<small>[ENTER]</small> Confirm',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                url: $app_url + '/administrator/admin-tools/set-signatories/edit',
                                type: 'POST',
                                data: {
                                    'ref_id' : ref_id,
                                    'user_id' : user_id,
                                    'designation': designation
                                },
                                beforeSend: function(){
                                    $jc.showLoading(true);
                                },
                                success: function(e){
                                    $.confirm({
                                        title: 'Success!',
                                        content: 'Successfully update the signatory.',
                                        type: 'blue',
                                        buttons: {
                                            OK: {
                                                text: '<small>[ENTER]</small> OK',
                                                btnClass: 'btn-primary',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    clearInputs();
                                                    $dt.draw();
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function(e){
                                    if (e.status == 422 || e.status == 500) {
                                        $.confirm({
                                            title: 'ERROR!',
                                            content: 'An error has occured!',
                                            type: 'red',
                                            buttons: {
                                                OK: {
                                                    text: '<small>[ENTER]</small> OK',
                                                    btnClass: 'btn-red',
                                                    keys: ['enter', 'esc'],
                                                    action: function() {
                                                        clearInputs();
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                complete: function() {
                                    $jc.hideLoading(true);
                                }
                            })
                        }
                    }
                }
            })
        })
        .on('click', '.del-signatory', function(){
            var id = $(this).data('id');

            if (id == "") {
                $.confirm({
                    title: 'Invalid Request!',
                    content: 'ID is missing!',
                    type: 'orange',
                    buttons: {
                        OK: {
                            text: '<small>[ENTER]</small> OK',
                            btnClass: 'btn-warning',
                            keys: ['enter', 'esc']
                        }
                    }
                });
                return false;
            }

            $jc = $.confirm({
                title: 'Delete signatory',
                draggable: false,
                columnClass: 'small',
                content: 'Are you sure?',
                type: 'red',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc']
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-danger',
                        text: '<small>[ENTER]</small> Confirm',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                url: $app_url + '/administrator/admin-tools/set-signatories/delete',
                                type: 'POST',
                                data: {
                                    'id' : id
                                },
                                beforeSend: function(){
                                    $jc.showLoading(true);
                                },
                                success: function(){
                                    $.confirm({
                                        title: 'Success!',
                                        content: 'Successfully deleted!',
                                        type: 'blue',
                                        buttons: {
                                            OK: {
                                                text: '<small>[ENTER]</small> OK',
                                                btnClass: 'btn-info',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    clearInputs();
                                                    $dt.draw();
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function(e){
                                    if (e.status == 422 || e.status == 500) {
                                        $.confirm({
                                        title: 'ERROR!',
                                        content: 'An error has occured!',
                                        type: 'red',
                                        buttons: {
                                            OK: {
                                                text: '<small>[ENTER]</small> OK',
                                                btnClass: 'btn-red',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    clearInputs();
                                                }
                                            }
                                        }
                                    });
                                    }
                                },
                                complete: function() {
                                    $jc.hideLoading(true);
                                }
                            })
                        }
                    }
                }
            });
        })
        .on('click', '.history-signatory', function(){
            $sid = $(this).data('id')
            $report_type = $(this).data('report');
            $signatory_type = $(this).data('signatory');

            if ($sid != "") {
                $jc = $.confirm({
                    title: false,
                    draggable: true,
                    columnClass: 'medium',
                    type: 'blue',
                    content: function() {
                        var self = this;

                        return $.ajax({
                            url: $app_url + '/administrator/admin-tools/set-signatories/history',
                            data: { 
                                    'sid' : $sid,
                                    'report_type' : $report_type,
                                    'signatory_type' : $signatory_type 
                                  },
                            dataType: 'html',
                            method: 'get'
                        }).done(function(res) {
                            self.setContent(res);
                        }).fail(function() {
                            self.setContent('Something went wrong. Please try again or refresh the page.');
                        });
                    },
                    buttons: {
                        CLOSE: {
                            btnClass:'btn btn-default',
                            text: '<small>[ESC]</small> CLOSE',
                            keys: ['esc']
                        }
                    }
                });
            }
        });
	</script>
@endsection