@php
$page_name = 'Staffs';
@endphp
@include('partial.header')

<div class="container-fluid">
    @include('partial.navigation')
    <div class="main-container">
        <!-- Content wrapper start -->
        <div class="content-wrapper">
            <div class="table-container">
                @if(\Session::has('success'))
                    <div class="alert alert-success">
                        {{\Session::get('success')}}
                    </div>
                @endif
                @if($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger">{{$error}}</div>
                    @endforeach
                    <br/>
                @endif
                <table class="table" style="margin-bottom: 0px !important;">
                    <tbody>
                        <tr>
                            <td style="width:100px;">
                                <h5 class="table-title">Staff</h5>
                            </td>
                            <td style="width:60px;"><b>Search</b></td>
                            <td style="width:300px;">
                                <input autofocus="" id="SearchLedger" onblur="staff()"
                                    class="form-control form-control-sm" type="text" placeholder="">
                            </td>
                            <td></td>
                            <td style="width:350px;">
                            </td>
                            <td style="width:150px;">
                                <button type="button" id="AddButton"
                                    onclick="$('#AddModal').modal('show'); setTimeout(function(){ $('#LedgerName').focus(); }, 500);"
                                    class="btn btn-info btn-block">Add <small> (staff)</small></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh; ">
                    <table id="" class="table">
                        <thead>
                            <tr>
                                <th style="width:50px;">Sr</th>
                                <th style="width:170px;">Party Name</th>
                                <th style="width:170px;">Role</th>
                                <th style="width:120px;">Username</th>
                                <th style="width:100px;">W-Mode</th>
                                <th style="width:100px;">Mobile</th>
                                <th style="width:100px;">Address</th>
                                <th style="width:120px;">Agent</th>
                                <th style="width:100px;">Active</th>
                                <th style="width:160px;">Updated By</th>
                                <th style="width:160px;">Updated Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="StaffBody">
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Sr</th>
                                <th>Party Name</th>
                                <th>Role</th>
                                <th>Username</th>
                                <th>W-Mode</th>
                                <th>Mobile</th>
                                <th>Address</th>
                                <th>Agent</th>
                                <th>Active</th>
                                <th>Updated By</th>
                                <th>Updated Date</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Start Add Ledger Modal -->
                <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <form method="post" action="/addUser" id="AddStaffForm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="basicModalLabel">Staff</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row gutters">
                                        <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label for="disabledInput">Staff Name</label>
                                                <input type="text" name="name" id="LedgerName" class="form-control form-control-sm"
                                                    placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">Role</label>
                                                <select id="Roles" name="role" class="form-control form-control-sm">
                                                    @if ($roles->isNotEmpty())
                                                        @foreach ($roles as $role)
                                                            <option value="{{$role->name}}"> {{$role->name}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">W-Mode</label>
                                                <select id="WorkMode" name="wmode" class="form-control form-control-sm">
                                                    @foreach ($wmodes as $key => $mode)
                                                        <option value="{{$key}}"> {{$mode}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row gutters">
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">Username</label>
                                                <input class="form-control form-control-sm" name="username" id="Username" type="text"
                                                    placeholder="Username">
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">Password</label>
                                                <input class="form-control form-control-sm" id="Password" name="password" type="password"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">Agent</label>
                                                <input class="form-control form-control-sm ui-autocomplete-input"
                                                    id="AgentLedgerName" name="agent" type="text" placeholder="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="inputReadOnly">Mobile</label>
                                                <input class="form-control form-control-sm" id="Mobile" name="phone_number" type="text"
                                                    onkeypress="return isNumberKey(event)" placeholder="Mobile">
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                            <div class="form-group">
                                                <label for="disabledInput">Address</label>
                                                <input type="text" id="Address" name="address" class="form-control form-control-sm"
                                                    placeholder="Addresss">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row gutters">

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <input type="hidden" value="{{csrf_token()}}" name="_token" />
                                    <button onclick="SaveStaff()" type="button" class="btn btn-primary">Save</button>
                                    <button type="button" class="btn btn-lighten" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- End Add Ledger Modal -->

            </div>
        </div>
</div>

<!-- Start Edit Modal -->
<div class="modal fade" id="ActionModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg mt-2" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Staff Update | <span id="TitleEditModel"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab"
                                    href="#info" role="tab" aria-controls="home"
                                    aria-selected="true">Info</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="password-tab" data-toggle="tab"
                                    href="#password" role="tab" aria-controls="profile"
                                    aria-selected="false">Password</a>
                            </li>
                            <li class="nav-item d-none">
                                <a class="nav-link" id="assets-tab" data-toggle="tab"
                                    href="#assets" role="tab" aria-controls="profile"
                                    aria-selected="false">Assets</a>
                            </li>
                            <li class="nav-item d-none">
                                <a class="nav-link" id="salary-tab" data-toggle="tab"
                                    href="#salary" role="tab" aria-controls="salary"
                                    aria-selected="false">Salary</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row gutters">

                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">Role</label>
                                            <select id="edit_Roles" name="role"
                                                class="form-control form-control-sm">
                                                @if ($roles->isNotEmpty())
                                                    @foreach ($roles as $role)
                                                        <option value="{{$role->name}}"> {{$role->name}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-2 col-lglg-2 col-md-2 col-sm-2 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">W-Mode</label>
                                            <select id="edit_WorkMode" class="form-control form-control-sm">
                                                 @foreach ($wmodes as $key => $mode)
                                                    <option value="{{$key}}"> {{$mode}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">Agent</label>
                                            <input class="form-control form-control-sm ui-autocomplete-input"
                                                id="edit_AgentLedgerName" type="text" placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">Mobile</label>
                                            <input class="form-control form-control-sm" id="edit_Mobile" type="text"
                                                onkeypress="return isNumberKey(event)" placeholder="Mobile">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Address</label>
                                            <input type="text" id="edit_Address" class="form-control form-control-sm"
                                                placeholder="Addresss">
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">

                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <button onclick="UpdateStaff('Info')" type="button"
                                                class="btn btn-success  btn-block">Save</button>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row gutters">
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">Password</label>
                                            <input class="form-control form-control-sm" id="edit_Password" type="password"
                                                value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">

                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <button onclick="UpdateStaff('Password')" type="button"
                                                class="btn btn-success  btn-block">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="assets" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row gutters">

                                    <div class="table-responsive CustomFixedTbl"
                                        style="min-height:60vh; max-height:60vh; ">
                                        <table id="" class="table">
                                            <thead>
                                                <tr>
                                                    <th class="p-1 align-middle" style="width:200px;">
                                                        <small>Assets</small>
                                                        <select id="edit_Payroll_CommanMasterId"
                                                            class="form-control form-control-sm">
                                                            <option value="21">LAPTOP</option>
                                                            <option value="22">KEYBOARD</option>
                                                            <option value="23">MOUSE</option>
                                                            <option value="24">MOBILE</option>
                                                            <option value="25">DATACABLE</option>
                                                            <option value="26">SIM</option>
                                                            <option value="27">INVERTOR</option>
                                                            <option value="28">CAR</option>
                                                        </select>
                                                    </th>
                                                    <th class="p-1 align-middle" style="width:100px;">
                                                        <small>Amount</small>
                                                        <input type="text" id="edit_Payroll_Amount"
                                                            class="form-control form-control-sm text-center"
                                                            placeholder="Amount">
                                                    </th>
                                                    <th class="p-1 align-middle" style="width:100px;">
                                                        <small>Type</small>
                                                        <select id="edit_Payroll_Quantity"
                                                            class="form-control form-control-sm">
                                                            <option value="1">Issue</option>
                                                            <option value="0">Return</option>
                                                        </select>
                                                    </th>
                                                    <th class="p-1 align-middle" style="width:150px;">
                                                        <small>Brand</small>
                                                        <input type="text" id="edit_Payroll_Brand"
                                                            class="form-control form-control-sm" placeholder="Brand">
                                                    </th>
                                                    <th class="p-1 align-middle" style="width:150px;">
                                                        <small>Bill No</small>
                                                        <input type="text" id="edit_Payroll_BillPartNo"
                                                            class="form-control form-control-sm" placeholder="Bill No">
                                                    </th>
                                                    <th class="p-1 align-middle">
                                                        <small>Remark</small>
                                                        <input type="text" id="edit_Payroll_Remark"
                                                            class="form-control form-control-sm" placeholder="Remark">
                                                    </th>
                                                    <th class="p-1 align-middle" style="width:130px;">
                                                        <small>&nbsp;</small>
                                                        <button onclick="SaveStaffAssets()" type="button"
                                                            class="btn btn-success  btn-block">Save <span
                                                                id="ajax_loader_staff_assets"></span></button>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody id="AssetsBody">

                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                <div class="row gutters">

                                </div>
                            </div>

                            <div class="tab-pane fade" id="salary" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row gutters">
                                    <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                        <h4>Earning </h4>
                                        <div class="table-responsive CustomFixedTbl"
                                            style="min-height:50vh; max-height:50vh; ">
                                            <table id="" class="table">
                                                <thead>
                                                    <tr>
                                                        <th class="p-1 align-middle">
                                                            <small>Items</small>
                                                            <select id="edit_Payroll_Earn_CommanMasterId"
                                                                class="form-control form-control-sm">
                                                                <option value="1">BASE SALARY</option>
                                                                <option value="2">BOUNS NO LEAVE</option>
                                                                <option value="3">MOBILE RECH.</option>
                                                                <option value="4">BOUNS</option>
                                                                <option value="5">GIFT</option>
                                                                <option value="30">BRODBAND</option>
                                                                <option value="31">TRAVLING</option>
                                                            </select>
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:120px;">
                                                            <small>Amount</small>
                                                            <input type="text" id="edit_Payroll_Earn_Amount"
                                                                class="form-control form-control-sm text-center"
                                                                placeholder="Amount">
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:120px;">
                                                            <small>Type</small>
                                                            <select id="edit_Payroll_Earn_AmountType"
                                                                class="form-control form-control-sm">
                                                                <option value="1">AMOUNT</option>
                                                                <option value="2">PERCENT</option>
                                                                <option value="3">PER COUNT</option>
                                                            </select>
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:40px;">
                                                            <small>&nbsp;</small>
                                                            <button onfocus="setSalaryEarning()" type="button"
                                                                class="btn btn-success  btn-block">+</button>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody id="SalaryEarnStructureBody">

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                        <h4>Deduction</h4>
                                        <div class="table-responsive CustomFixedTbl"
                                            style="min-height:50vh; max-height:50vh; ">
                                            <table id="" class="table">
                                                <thead>
                                                    <tr>
                                                        <th class="p-1 align-middle">
                                                            <small>Items</small>
                                                            <select id="edit_Payroll_Deduct_CommanMasterId"
                                                                class="form-control form-control-sm">
                                                                <option value="11">LOAN</option>
                                                            </select>
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:120px;">
                                                            <small>Amount</small>
                                                            <input type="text" id="edit_Payroll_Deduct_Amount"
                                                                class="form-control form-control-sm text-center"
                                                                placeholder="Amount">
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:120px;">
                                                            <small>Type</small>
                                                            <select id="edit_Payroll_Deduct_AmountType"
                                                                class="form-control form-control-sm">
                                                                <option value="1">AMOUNT</option>
                                                                <option value="2">PERCENT</option>
                                                                <option value="3">PER COUNT</option>
                                                            </select>
                                                        </th>
                                                        <th class="p-1 align-middle" style="width:40px;">
                                                            <small>&nbsp;</small>
                                                            <button onfocus="setSalaryDeduction()" type="button"
                                                                class="btn btn-success  btn-block">+</button>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody id="SalaryDeductStructureBody">

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-12 col-lglg-12 col-md-12 col-sm-12 col-12  text-center">
                                        <button onclick="SaveSalaryStructure()" type="button"
                                            class="btn btn-success pl-5 pr-5">Save Complete Structure <span
                                                id="ajax_loader_staff_salary_structure"></span></button>
                                    </div>
                                </div>
                                <div class="row gutters">

                                </div>
                            </div>


                        </div>

                    </div>

                </div>
            </div>
        </div>
        <!-- End Edit Modal -->
<script>
    var BaseUrl = "/";
    var nav = "staffs";
</script>
@include('partial.footer')
<script>
    var Shift_ArrayList = [];
    var SelectedRow = [];

    var ShiftsOders = [];
    $(document).ready(function () {
        staff();
    })
    function SaveStaff() {
        $("#AddStaffForm").submit();
    }
    function staff() {
        //var Name = $('#SearchShift').val();
        var JsonData = { 'SearchUser': $("#SearchLedger").val() };
        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_staff_all";
        AjaxCall("/getStaffs", JsonData, function (response) {
            if (response.status == true) {
                var Row = '';
                Shift_ArrayList = [];
                $.each(response.data, function (index, obj) {
                    Shift_ArrayList[index] = obj;
                    Row += '<tr id="Roles_' + this.id + '">'
                        + '<td>' + (index + 1) + '</td>'
                        + '<td>' + this.name + '</td>'
                        + '<td>' + this.role + '</td>'
                        + '<td>' + this.username + '</td>'
                        + '<td>' + this.wmode + '</td>'
                        + '<td>' + this.mobile + '</td>'
                        + '<td>' + this.address + '</td>'
                        + '<td>' + this.agent + '</td>'
                        // + '<td>' + this.active + '</td>'
                        + '<td ondblclick="toggleActiveStatus(' + this.id + ')">'
                        + (this.active == 'YES' ? '<button class="btn btn-success btn-sm">Enabled</button>' : '<button class="btn btn-danger btn-sm">Disabled</button>')
                        + '</td>'
                        + '<td>' + this.updated_by + '</td>'
                        + '<td class="text-center">' + this.updated_at + '</td>'
                        + '<td class="text-center">'
                            +   '<a onclick="ActionPopup(' + index + ')" class="badge badge-primary" href="#">Edit</a>'
                        + '</td>'
                        + '</tr>';
                });
                $('#StaffBody').html(Row);
                //console.clear();
            } else if (response.status == false) {
                // Notify("Error ", response.message, "danger");
            }
        });
    }
    function toggleActiveStatus(id) {
        var JsonData = { 'staffId': id};

        console.log(JsonData);
        AjaxCall("/change_staff_status", JsonData, function (response) {
            staff();
        });
    }
    function ActionPopup(index) {
        LedgerRow = {};
        LedgerRow = Shift_ArrayList[index];
        $('#ActionModal').modal('show');
        $('[href="#info"]').tab('show');

        $('#TitleEditModel').text("");
        $('#edit_Roles').val("");
        $('#edit_Mobile').val("");
        $('#edit_Address').val("");
        $('#edit_WorkMode').val("0");

        let wmode = $('#edit_WorkMode option').filter(function () { return $(this).html().trim() == LedgerRow.wmode; }).val();
        let role = $('#edit_Roles option').filter(function () { return $(this).html().trim() == LedgerRow.role; }).val();
        $('#TitleEditModel').text(LedgerRow.name);
        $('#edit_Roles').val(role);
        $('#edit_WorkMode').val(wmode);
        $('#edit_AgentLedgerName').val(LedgerRow.agent);
        $('#edit_Mobile').val(LedgerRow.mobile);
        $('#edit_Address').val(LedgerRow.address);

        //AgentLedgerId = LedgerRow.AgentLedgerId;

        setTimeout(function () { $('#edit_Roles').focus().select(); }, 500); 
    }
    function UpdateStaff(Status) {
        //if (IsActionAllow(Page_Edit) == false) { return false; }
        var postUrl = '';
        if (Status == 'Info') {

            var Roles = $('#edit_Roles').val();
            var StaffWorkMode = $('#edit_WorkMode').val();
            var Mobile = $('#edit_Mobile').val();
            var Address = $('#edit_Address').val();
            var AgentLedgerId = $('#edit_AgentLedgerName').val();

            if (Roles == "" || Mobile == "" || Address == "" || StaffWorkMode == "") {
                Notify("Invalid ", "Please enter all valid fields!", "danger");
                $('#edit_Roles').focus().select();
                return false;
            }
            var JsonData = { 'role': Roles, 'phone_number': Mobile, 'address': Address, 'wmode': StaffWorkMode, 'agent': AgentLedgerId };
            postUrl = "/updateUser";
        } else if (Status == 'Password') {
            var Password = $('#edit_Password').val();
            if (Password == "") {
                Notify("Invalid ", "Please enter all valid fields!", "danger");
                $('#edit_Password').focus().select();
                return false;
            }
            var JsonData = { 'Password': Password };
            postUrl = "/updateUserPassword";
        }
        JsonData['staffId'] = LedgerRow.id;
        JsonData['Status'] = Status;
        JsonData['_token'] = _token;
        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_staff_update";
        AjaxCall(postUrl, JsonData, function (response) {
            if (response.status == true) {
                Notify("Success ", response.message, "success");
                setTimeout(function() {
                    location.reload(true);
                }, 500);
            } else if (response.status == false) {
                Notify("Error ", response.message, "danger");
            }
        });
    }
    
    
    ko.bindingHandlers.nextFieldOnEnter = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            $(element).on('keydown', 'input, select', function (e) {
                var self = $(this)
                , form = $(element)
                  , focusable
                  , next
                ;
                //LastFocusedControl_Id = $(":focus").attr("id");
                if (e.keyCode == 13) {
                    focusable = form.find('input,select,button,textarea').filter(':visible');
                    var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                    next = focusable.eq(nextIndex);
                        
                        
                    next.focus().select();
                    return false;
                }
            });
        }
    };
    ko.applyBindings({});
</script>