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

	<style type="text/css">
		.form-group {
			margin-bottom: 10px !important;
		}

		input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }
	</style>

@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">
                            <i class="fa fa-chevron-left"></i> Back
                        </a>

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

                    <label class="text-primary" style="font-size:16px; margin-top:6px"><i class="fa fa-tag"></i> Connection Type Services</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-conntypes" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="32%">Connection Type</th>
                            <th width="35%">Category</th>
                            <th width="20%">Service Fee</th>
                            <th width="10%">Is Default</th>
                            <th width="3%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
				</div>
			</div>
		</div>
	</div>

   	<!-- ADD SERVICE MODAL -->
	<div class="modal fade" id="addService-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 Conn Type</strong></h5>
                    </div>

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

                    <div class="form-row">
                        <div class="form-group">
                        	<span class="control-label text-bold">Category</span>
                            <select id="add_category" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                                <option value="plumbing">Plumbing</option>
                                <option value="cutting">Cutting</option>
                                <option value="restoration">Restoration</option>
                                <option value="plumbing re-plug">Re Plug</option>
                                <option value="plumbing re-tap">Re Tap</option>
                                <option value="plumbing re-tap soil">Re Tap Soil</option>
                                <option value="plumbing re-tap pavement">Re Tap Pavement</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <label for="add_fee"><strong>Service Fee</strong></label>
                            <input type="number" class="form-control" id="add_fee" placeholder="0.00">
                        </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 addService-btn">
                            <i class="fa fa-check"></i> Save
                        </button>
                    </div>
	            </div>
	        </div>
	    </div>
	</div>

    <!-- EDIT SERVICE MODAL -->
    <div class="modal fade" id="editService-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 Conn Type</strong></h5>
                    </div>
                    <input type="hidden" id="hidden_id">

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

                    <div class="form-row">
                        <div class="form-group">
                            <span class="control-label text-bold">Category</span>
                            <select id="edit_category" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;" disabled="disabled">
                                <option value="plumbing">Plumbing</option>
                                <option value="cutting">Cutting</option>
                                <option value="restoration">Restoration</option>
                                <option value="plumbing re-plug">Re Plug</option>
                                <option value="plumbing re-tap">Re Tap</option>
                                <option value="plumbing re-tap soil">Re Tap Soil</option>
                                <option value="plumbing re-tap pavement">Re Tap Pavement</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <span class="control-label text-bold"></span>
                            <input type="number" class="form-control" id="edit_fee" placeholder="0.00">
                        </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 editService-btn">
                            <i class="fa fa-check"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
	<script type="text/javascript">
		function clearInputs() {
			$('#add_conntype').val('').trigger('change');
			$('#add_category').val('plumbing').trigger('change');
			$('#add_fee').val('');

            $('#edit_conntype').val('').trigger('change');
            $('#edit_category').val('plumbing').trigger('change');
            $('edit_fee').val('');
		}

		$(document).ready(function(){
			$dt = $('#table-conntypes').DataTable({
	            ordering: false,
	            deferred: true,
	            processing: true,
	            serverSide: true,
	            ajax: {url: $app_url + '/administrator/admin-tools/set-conn-types/dt'},
	            columns: [
	                {data: 'conn_type',		name: 'conn_type',		orderable: false,   className:"text-uppercase"},
	                {data: 'category',		name: 'category',		orderable: false,   className:"text-uppercase"},
	                {data: 'service_fee',   name: 'service_fee',    orderable: false,   className:"text-uppercase"},
	                {data: 'is_default',   name: 'is_default',      orderable: false,   className:"text-uppercase",   searchable: false},
	                {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();
                }
            });

        	$('#add_conntype').select2({
                placeholder: "Connection Types",
                ajax: {
                    url: $app_url + '/select2-conn-types',
                    dataType: 'json',
                    delay: 200,
                    data: function (params) {
                        return query = {
                            search: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

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

            $('#add_category').select2({
            	allowClear: false,
            });

            $('#edit_conntype').select2({
                allowClear: false,
            });

            $('#edit_category').select2({
                allowClear: false,
            })

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

            $('#editService-Modal').on('shown.bs.modal', function() {
                $('#edit_fee').focus();
            });
		})
        .on('click', '.addService-btn', function(){
            var conn_type = $('#add_conntype').val();
            var category = $('#add_category').val();
            var fee = $('#add_fee'). val();

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

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

            $('#addService-Modal').modal('hide');
            $jc = $.confirm({
                title: 'Add conn type',
                draggable: false,
                columnClass: 'small',
                content: 'Are you sure?',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc'],
                        action: function() {
                            $('#addService-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-conn-types/add',
                                type: 'POST',
                                data: {
                                    'conn_type' : conn_type,
                                    'category' : category,
                                    'fee' : fee
                                },
                                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-conntype-fee', function(){
            $('#hidden_id').val($(this).data('id'));
            $('#edit_category').val($(this).data('cat')).trigger('change');
            $('#edit_fee').val($(this).data('fee'));

            var forceSelectConnType = new Option($(this).data('ctname'), $(this).data('ctid'), true, true);
            $('#edit_conntype').append(forceSelectConnType).trigger('change');

            $('#editService-Modal').modal('show');
        })
        .on('click', '.editService-btn', function() {
            var id = $('#hidden_id').val();
            var fee = $('#edit_fee'). val();

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

            $('#editService-Modal').modal('hide');
            $jc = $.confirm({
                title: 'Edit conn type',
                draggable: false,
                columnClass: 'small',
                content: 'Are you sure?',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc'],
                        action: function() {
                            $('#editService-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-conn-types/edit',
                                type: 'POST',
                                data: {
                                    'id' : id,
                                    'fee' : fee
                                },
                                beforeSend: function(){
                                    $jc.showLoading(true);
                                },
                                success: function(){
                                    $.confirm({
                                        title: 'Success!',
                                        content: 'Successfully updated!',
                                        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', '.del-conntype-fee', 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 conn type',
                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-conn-types/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);
                                }
                            })
                        }
                    }
                }
            });
        });
	</script>
@endsection