<<<<<<< 8c98d41a67e0ec45e1fd64b04b779360352c1dcf
@extends('Layout.Employeesmaster')
=======
@extends('Layout.employees_master')
>>>>>>> Storing employee info
@section('title', 'Employees')

@section('header-include')
<link rel="stylesheet" type="text/css" href="{{ URL::to('js/toastr/toastr.min.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">


<style>
form {
  border-radius: 5px; 
  width:100%;   
  background-color: #FFFFFF;
  overflow: hidden;
}

p span {
  color: #F00;
}

p {
  margin: 0px;
  font-weight: 500;
  line-height: 2;
  color:#333;
}

a {
  text-decoration:inherit
}


.form-group {
  overflow: hidden;
  clear: both;
}
 .form-control {
    
    position:relative;
    clear: both;    
    margin-top: 2px;
    display:inline-inline;    
    margin-right: 10px;
}
</style>
@endsection

@section('content')

    <section id="content">    
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i> Home</a></li>                    
                    <li class="active">Branches</li>
                </ul>            
            
                @include('Layout.messages')
                @include('Layout.errors')
                <div class=container-fluid>
                    <div class=row>
                    <legend style="padding:25px 5px 5px 10px">Business Unit</legend>
                        <div class="pull-right" style="margin:5px 20px 5px 10px;">
                        <a href="#" class="btn-add btn btn-info btn-sm" ><i class="fa fa-plus"></i>Add Business Unit</a>

                        </div>
                    </div>
                    <div class=row style="padding:0px 5px 5px 10px">
                        <div class="table-responsive" style="padding:0px 5px 5px 10px">
                            <table class="table table-striped m-b-sm datagrid"  id="businessunitTable">
                                @if(count($businessunits) > 0)
                                <thead>
                                    <tr>
                                        <th>Action</th>
                                        <th>Branch Code</th>
                                        <th>Branch Name</th>
                                        <th>Country</th>
                                        <th>City</th>
                                        <th>Address</th>
                                        <th>Branch Head</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($businessunits as $branch)
                                    <tr class="businessunit{{ $branch->id }}">
                                        <td>
                                        <span class="edit-modal btn btn-default" data-id="{{$branch->id}}" data-business_unit_code="{{$branch->business_unit_code}}" data-business_unit="{{$branch->business_unit}}"data-country="{{$branch->country}}"data-city="{{$branch->city}}"data-address_1="{{$branch->address_1}}"data-business_unit_head="{{$branch->business_unit_head}}">
                                        <i class="fa fa-edit no-margin"></i></span>
                                        <span class="delete-modal btn btn-danger" data-id="{{$branch->id}}" data-business_unit_code="{{$branch->business_unit_code}}" data-business_unit="{{$branch->business_unit}}"data-country="{{$branch->country}}"data-city="{{$branch->city}}"data-address_1="{{$branch->address_1}}"data-business_unit_head="{{$branch->business_unit_head}}">
                                        <i class="fa fa-trash no-margin"></i></span>
                                        </td>
                                        <td>{{ $branch->business_unit_code }}</td>
                                        <td>{{ $branch->business_unit}}</td>
                                        <td>{{ $branch->country}}</td>
                                        <td>{{ $branch->city}}</td>
                                        <td>{{ $branch->address_1}}</td>
                                        <td>{{ $branch->business_unit_head}}</td>
                                    </tr> 
                                    @endforeach
                                    @else            
                                    <tr>
                                        <td colspan="2" class="text-center">Nothing to display</td>
                                    </tr>  
                                    @endif                          
                                </tbody>
                                
                            </table>
                        </div>                
                    </div>
                 </div>
            </section>
            <!-- Modal form to add a post -->
<div id="addBusinesunitModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="Businessunit-modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="busness_unit_code">Business unit Code:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_code" autofocus>
                                <p class="errorBusinessunitcode text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit">Business Unit:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit" autofocus>
                                <p class="errorBusinessunit text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunitcountry">Country:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunitcountry" autofocus>
                                <p class="errorBusinessunitcountry text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit_city">City:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_city" autofocus>
                                <p class="errorBusinessunit_city text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit_address_1">Address:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_address_1" autofocus>
                                <p class="errorBusinessunit_address_1 text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="business_unit_head">Business unit head:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_head" autofocus>
                                <p class="errorbusiness_unit_head text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                    </form>
                    <div class="Businessunit-modal-footer">
                        <button type="button" class="btn btn-success add" data-dismiss="modal">
                            <span id="" class='glyphicon glyphicon-check'></span> Add
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- Modal form to show a post -->
    <div id="BusinessshowModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="Businessunit-modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                    <div class="form-group">
                    <label class="control-label col-sm-2" for="busness_unit_code">Business unit Code:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_code" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit">Business Unit:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Businessunitcountry">Country:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Businessunitcountry" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Businessunit_city">City:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Businessunit_city" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit_address_1">Address:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_address_1" autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="business_unit_head">Business unit head:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_head" autofocus>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    	<!-- Modal form to edit a form -->
        <div id="editBusinessunitModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                    <div class="form-group" style="display:none">
                            <label class="control-label col-sm-2" for="businessunit_id">Business unit ID:</label>
                            <div class="col-sm-10">
                                <input type="text" value= ""class="form-control" id="businessunit_id" autofocus>
                                <p class="errorBusinessunitcode text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="busness_unit_code">Business unit Code:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_code_edit" autofocus>
                                <p class="errorBusinessunitcode text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit">Business Unit:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_edit" autofocus>
                                <p class="errorBusinessunit text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Businessunitcountry">Country:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_country_edit" autofocus>
                                <p class="errorBusinessunitcountry text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Businessunit_city">City:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_city_edit" autofocus>
                                <p class="errorBusinessunit_city text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="businessunit_address_1">Address:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="businessunit_address1_edit" autofocus>
                                <p class="errorBusinessunit_address_1 text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="business_unit_head">Business unit head:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="business_unit_head_edit" autofocus>
                                <p class="errorbusiness_unit_head text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary edit" data-dismiss="modal">
                            <span class='glyphicon glyphicon-check'></span> Edit
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


	<!-- Modal form to delete a form -->
    <div id="deleteBusinesunitModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                <form class="form-horizontal" role="form">

                <div class="form-group" style="display:none">
                            <label class="control-label col-sm-2" for="businessunitid_delete">Business unit Code:</label>
                            <div class="col-sm-10">
                                <input type="text" value= ""class="form-control" id="businessunitid_delete" autofocus>
                                <p class="errorBusinessunitcode text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                    <h3 class="text-center">Are you sure you want to delete?</h3>
                    <br />
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger delete" data-dismiss="modal">
                            <span id="" class='glyphicon glyphicon-trash'></span> Delete
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('footer-include')
<!-- Toast js -->
<script src="/js/toastr/toastr.min.js"></script>
@endsection
@section('j-script')
<!-- Jquery -->
<script type="text/javascript"> 
// AJAX CRUD OPERATIONS
// add a new BusinessUnit
        $(document).on('click', '.btn-add', function() {
            // Empty input fields
            $('#business_unit_code').val('');
            $('#business_unit').val('');
            $('#country').val('');
            $('#city').val('');
            $('#address_1').val('');
            $('#title_add').val('');
            $('#business_unit_head').val('');
            $('.Businessunit-modal-title').text('Add');
            $('#addBusinesunitModal').modal('show');
        });
        $('.Businessunit-modal-footer').on('click', '.add', function() {
            $.ajax({
                type: 'POST',
                url: 'businessunit',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'business_unit_code': $('#business_unit_code').val(),
                    'business_unit': $('#businessunit').val(),
                    'country': $('#businessunitcountry').val(),
                    'city': $('#businessunit_city').val(),
                    'address_1': $('#businessunit_address_1').val(),
                    'business_unit_head': $('#business_unit_head').val()
                },
                success: function(data) {
                    $('.errorBusinessunitcode').addClass('hidden');
                    $('.errorBusinessunit').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#addBusinesunitModal').modal('show');
                            toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.business_unit_code) {
                            $('.errorBusinessunitcode').removeClass('hidden');
                            $('.errorBusinessunitcode').text(data.errors.business_unit_code);
                        }
                        if (data.errors.business_unit) {
                            $('.errorBusinessunit').removeClass('hidden');
                            $('.errorBusinessunit').text(data.errors.business_unit);
                        }
                        if (data.errors.country) {
                            $('.errorBusinessunitcountry').removeClass('hidden');
                            $('.errorBusinessunitcountry').text(data.errors.country);
                        }
                        if (data.errors.city) {
                            $('.errorBusinessunit_city').removeClass('hidden');
                            $('.errorBusinessunit_city').text(data.errors.city);
                        }
                        if (data.errors.address_1) {
                            $('.errorBusinessunit_address_1').removeClass('hidden');
                            $('.errorBusinessunit_address_1').text(data.errors.address_1);
                        }
                        if (data.errors.business_unit_head) {
                            $('.errorbusiness_unit_head').removeClass('hidden');
                            $('.errorbusiness_unit_head').text(data.errors.business_unit_head);
                        }
                    } else {
                        toastr.success('Successfully added BusinessUnit!', 'Success Alert', {timeOut: 5000});
                        $('#businessunitTable').prepend("<tr class='branch" + data.id + "'><td><button class='edit-modal btn btn-default' data-id='" + data.id + "' data-business_unit_code='" + data.business_unit_code + "' data-business_unit='" + data.business_unit + "' data-country='" + data.country + "' data-city='" + data.city + "' data-address_1='" + data.address_1 + "' data-business_unit_head='" + data.business_unit_head + "'><i class='fa fa-edit no-margin'></i></button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-business_unit_code='" + data.business_unit_code + "' data-business_unit='" + data.business_unit + "' data-country='" + data.country + "' data-city='" + data.city + "' data-address_1='" + data.address_1 + "' data-business_unit_head='" + data.business_unit_head + "'><i class='fa fa-trash no-margin'></i></button></td><td>" + data.business_unit_code + "</td><td>" + data.business_unit + "</td><td>" + data.country + "</td><td>" + data.city + "</td><td>" + data.address_1 + "</td><td>" + data.business_unit_head + "</td></tr>");
                    }
                },
            });
        });

        // Show a post
        $(document).on('click', '.show-modal', function() {
            $('.modal-title').text('Show');
            $('#business_unit_code').val($(this).data('business_unit_code'));
            $('#business_unit').val($(this).data('business_unit'));
            $('#country').val($(this).data('country'));
            $('#city').val($(this).data('city'));
            $('#address_1').val($(this).data('address_1'));
            $('#business_unit_head').val($(this).data('business_unit_head'));
            $('#BusinessshowModal').modal('show');
        });


        // Edit a post
        $(document).on('click', '.edit-modal', function() {
            $('.modal-title').text('Edit');
            $('#businessunit_id').val($(this).data('id'));
            $('#business_unit_code_edit').val($(this).data('business_unit_code'));
            $('#business_unit_edit').val($(this).data('business_unit'));
            $('#businessunit_country_edit').val($(this).data('country'));
            $('#businessunit_city_edit').val($(this).data('city'));
            $('#businessunit_address1_edit').val($(this).data('address_1'));
            $('#business_unit_head_edit').val($(this).data('business_unit_head'));
            id = $('#businessunit_id').val();
            $('#editBusinessunitModal').modal('show');
        });
        $('.modal-footer').on('click', '.edit', function() {
            $.ajax({
                type: 'PUT',
                url: 'businessunit/' + id,
                data: {
                    '_token': $('input[name=_token]').val(),
                    'business_unit_code': $('#business_unit_code_edit').val(),
                    'business_unit': $('#business_unit_edit').val(),
                    'country': $('#businessunit_country_edit').val(),
                    'city': $('#businessunit_city_edit').val(),
                    'address_1': $('#businessunit_address1_edit').val(),
                    'business_unit_head': $('#business_unit_head_edit').val(),
                },
                success: function(data) {
                    $('.errorBusinessunitcode').addClass('hidden');
                    $('.errorBusinessunit').addClass('hidden');
                    $('.errorBusinessunitcountry').addClass('hidden');
                    $('.errorBusinessunit_city').addClass('hidden');
                    $('.errorBusinessunit_address_1').addClass('hidden');
                    $('.errorbusiness_unit_head').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#editBusinessunitModal').modal('show');
                            toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                         if (data.errors.business_unit_code) {
                            $('.errorBusinessunitcode').removeClass('hidden');
                            $('.errorBusinessunitcode').text(data.errors.business_unit_code);
                        }
                        if (data.errors.business_unit) {
                            $('.errorBusinessunit').removeClass('hidden');
                            $('.errorBusinessunit').text(data.errors.business_unit);
                        }
                        if (data.errors.country) {
                            $('.errorBusinessunitcountry').removeClass('hidden');
                            $('.errorBusinessunitcountry').text(data.errors.country);
                        }
                        if (data.errors.city) {
                            $('.errorBusinessunit_city').removeClass('hidden');
                            $('.errorBusinessunit_city').text(data.errors.city);
                        }
                        if (data.errors.address_1) {
                            $('.errorBusinessunit_address_1').removeClass('hidden');
                            $('.errorBusinessunit_address_1').text(data.errors.address_1);
                        }
                        if (data.errors.business_unit_head) {
                            $('.errorbusiness_unit_head').removeClass('hidden');
                            $('.errorbusiness_unit_head').text(data.errors.business_unit_head);
                        }
                    } else {
                        toastr.success('Successfully updated BusinessUnit!', 'Success Alert', {timeOut: 5000});
                        $(".businessunit" + data.id).replaceWith("<tr class='branch" + data.id + "'><td><button class='edit-modal btn btn-default' data-id='" + data.id + "' data-business_unit_code='" + data.business_unit_code + "' data-business_unit='" + data.business_unit + "' data-country='" + data.country + "' data-city='" + data.city + "' data-address_1='" + data.address_1 + "' data-business_unit_head='" + data.business_unit_head + "'><i class='fa fa-edit no-margin'></i></button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-business_unit_code='" + data.business_unit_code + "' data-business_unit='" + data.business_unit + "' data-country='" + data.country + "' data-city='" + data.city + "' data-address_1='" + data.address_1 + "' data-business_unit_head='" + data.business_unit_head + "'><i class='fa fa-trash no-margin'></i></button></td><td>" + data.business_unit_code + "</td><td>" + data.business_unit + "</td><td>" + data.country + "</td><td>" + data.city + "</td><td>" + data.address_1 + "</td><td>" + data.business_unit_head + "</td></tr>");
                        
                    }
                }
            });
        });
        
        // delete a post
        $(document).on('click', '.delete-modal', function(del) {
           
            $('.modal-title').text('Delete');
            id = $('#businessunitid_delete').val();
            $('#deleteBusinesunitModal').modal('show');
        });
        $('.modal-footer').on('click', '.delete', function() {
            $.ajax({
                type: 'DELETE',
                url: 'businessunit/' + id,
                data: {
                    '_token': $('input[name=_token]').val(),
                   '_method': "DELETE"
                },
                success: function(data) {
                    toastr.success('Successfully deleted Businessunit!', 'Success Alert', {timeOut: 5000});
                    $('.businessunit' + data['id']).remove();

                }     
            });
        });

   $(document).on('ready', function(){
    $('#businessunitTable').removeAttr('style');
});      
</script>
@endsection