@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{url('admin/settings')}}">Settings</a></li>
                <li><a href="#">Employee Allowances</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">Employee Allowances</h2>
                            <span class="subtitle">Setup opening balance for the acounts once you are migrating from another accounting application.</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-11">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-4 trash ui-droppable" style="width: 37.333333%;">
                                    <div class="new_product_left">
                                        <h4>SETUP ALLOWANCES</h4>
                                        <p>What allowance types your employees are eligible for?</p>
                                        <p>Changes will be reflected across all linked Salesoft ERP applications.</p>
                                    </div>
                                    <div style="height: 845px;"></div>
                                </div>
                                <div class="col-sm-8 new_product_form" style="width: 62.666667%;">
                                    <div class="row">
                                        <div class="portlet-body">
                                            <div class="products box role">
                                                <div class="header_tbl">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="col-md-1 row_header"></div>
                                                            <div class="col-md-4 row_header">Allowance Type</div>
                                                            <div class="col-md-7 row_header b4_del_header">Description</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row_wrap" id="roles">
                                                    @foreach($allowance_list as $key=>$allowance_data)
                                                    <div class="row_inner_wrap">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-1 inner_row">
                                                                    <div class="del_icon delete-item">
                                                                        <i class="fa fa-trash-o del delete-item" data-uuid="{{$allowance_data['id']}}" data-type="channel" aria-hidden="true" style="visibility: visible"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 inner_row b4_del_header">
                                                                    <input type="text" name="allowance_type" id="edit_allowance_type" placeholder="Add a new allowance Type" value="{{$allowance_data['allowance_type']}}" class="form-control edit_allowance_type" readonly autocomplete="off">
                                                                    <i class="fa fa-check edit_source edit_field edit_field_title" data-uuid="{{$allowance_data['id']}}"></i>
                                                                    <p class="text-danger edit_allowance_type hidden" style="position:relative;margin-bottom:10px;"></p>
                                                                </div>
                                                                <div class="col-md-7 inner_row b4_del_header">
                                                                    <input type="text" name="description" id="edit_allowance_description" placeholder="Add a description" value="{{$allowance_data['description']}}" class="form-control edit_allowance_description" readonly autocomplete="off">
                                                                    <i class="fa fa-check edit_desc edit_field edit_field_description " data-uuid="{{$allowance_data['id']}}" data-des="{{$allowance_data['description']}}"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    <div class="row_inner_wrap">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-1 inner_row">
                                                                </div>
                                                                <div class="col-md-4 inner_row b4_del_header">
                                                                    <input type="text" name="allowance_type" id="allowance_type" placeholder="Add a new allowance Type" value="" class="form-control allowance_type validate" autocomplete="off">
                                                                    <p class="text-danger new_allowance_type hidden" style="position:relative;margin-bottom:10px;"></p>
                                                                </div>
                                                                <div class="col-md-7 inner_row b4_del_header">
                                                                    <input type="text" name="description" id="description" placeholder="Add a description" value="" class="form-control description add" autocomplete="off">
                                                                    <div class="add_icon">
                                                                        <i class="fa fa-plus add_row"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>


<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
        data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/settings.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom-style.css')}}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i" rel="stylesheet">
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css" />
<!-- DATE PICKER -->
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"
    type="text/css" />
    <style>
        .add{
            float: left;
            width: 95%;
        }

        .add_icon{
            float: right;
            margin-right: -18px;
            top: 5px;
            padding: 3px 3px!important;
        }

        .col-md-1{
            width:30px !important;
        }

        .del_icon{
            right: 2px !important;
            background: none !important;
            border:none !important;
            font-size: 18px !important;
        }

        .col-md-12{
            width: 1075px;
        }

        .help_btn {
            background: #A8A8A8;
            text-align: center;
            margin-right: 22px;
            margin-top: 5px;
        }

    </style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"
    type="text/javascript"></script>
<script src="{{asset('js/general.js')}}"></script>

<script type="text/javascript">



       /*SCROLLING COMPLETE*/
       $(document).ready(function () {
           //SELECT 2 Simple//
           $(".select2").select2({
               placeholder: "--Select--",
               allowClear: true
           });
       });

   </script>
   @include('admin.js.employee-allowance')

@stop