@extends('layouts.master')

@section('content')
    <div class="container">
        <div class="c-header">
            <h2>Staff</h2>
        </div>

        <div class="card">
            @if($errors->has('status'))
                @if($errors->first('status')==1)
                    <div class="alert alert-success">
                        {{ $errors->first('message') }}
                    </div>
                @else
                    <div class="alert alert-danger">
                        {{ $errors->first('message') }}
                    </div>
                @endif
            @endif
            <div class="card-body card-padding">
                <div class="pull-right">
                    <button class="btn btn-outline-primary mb-1 default" id="addUser"><i
                            class="zmdi zmdi-account-add"></i> Add User
                    </button>
                </div>
                <div class="table-responsive">
                    <table id="data-table-basic_" class="table table-striped">
                        <thead>
                        <tr>
                            <th data-column-id="id" data-type="numeric" data-order="asc">#</th>
                            <th data-column-id="employeeId" data-visible-in-selection='false' data-visible='false'>
                                Employee Id
                            </th>
                            <th data-column-id="p_no" data-identifier="true">Personnel No.</th>
                            <th data-column-id="ippis_no">IPPIS No.</th>
                            <th data-column-id="full_name">Full Name</th>
                            <th data-column-id="first_name" data-visible-in-selection='false' data-visible='false'>First
                                Name
                            </th>
                            <th data-column-id="surname" data-visible-in-selection='false' data-visible='false'>
                                Surname
                            </th>
                            <th data-column-id="other_names" data-visible-in-selection='false' data-visible='false'>
                                Other Name
                            </th>
                            <th data-column-id="gender" data-visible-in-selection='true' data-visible='false'>Gender</th>
                            <th data-column-id="dob" data-visible-in-selection='true' data-visible='false'>#DOB</th>
                            <th data-column-id="phone" data-visible-in-selection='true' data-visible='false'>#Phone</th>
                            <th data-column-id="email" data-visible-in-selection='true' data-visible='false'>Email</th>
                            <th data-column-id="lga" data-visible-in-selection='true' data-visible='false'>LGA</th>
                            <th data-column-id="state" data-visible-in-selection='true' data-visible='false'>State</th>
                            <th data-column-id="unit">Unit</th>
                            <th data-column-id="action" data-formatter="commands">Action</th>
                            <th data-column-id="lga_id" data-visible-in-selection='false' data-visible='false'>LGA ID
                            </th>
                            <th data-column-id="state_id" data-visible-in-selection='false' data-visible='false'>state
                                ID
                            </th>
                            <th data-column-id="unit_id" data-visible-in-selection='false' data-visible='false'>unit
                                ID
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($employees as $employee)
                            <tr>
                                <td>{{$loop->index+1}}</td>
                                <td data-column-id="expenseId" data-identifier='true' data-visible-in-selection='false'
                                    data-visible='false'>{{ $employee->user_id }}</td>
                                <td>{{ $employee->p_no }}</td>
                                <td>{{ $employee->ippis_no }}</td>
                                <td>{{ $employee->surname .','.$employee->first_name.' '. $employee->other_names }}</td>
                                <td>{{ $employee->first_name }}</td>
                                <td>{{ $employee->surname }}</td>
                                <td>{{ $employee->other_names }}</td>
                                <td>{{ $employee->gender }}</td>
                                <td>{{ $employee->dob }}</td>
                                <td>{{ $employee->phone }}</td>
                                <td>{{ $employee->email }}</td>
                                <td>{{ $employee->lga }}</td>
                                <td>{{ $employee->state }}</td>
                                <td>{{ $employee->unit }}</td>
                                <td data-formatter="commands">
                                    <a href="" class="btn btn-info btn-icon-text waves-effect">
                                        <i class="fa fa-times"></i>
                                        Edit
                                    </a>
                                    <!--<a href="" class="btn btn-info btn-icon-text waves-effect">-->
                                    <!--    <i class="simple-icon-eye"></i>-->
                                    <!--    View-->
                                    <!--</a>-->
                                </td>
                                <td>{{ $employee->lga_id }}</td>
                                <td>{{ $employee->state_id }}</td>
                                <td>{{ $employee->unit_id }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Large -->
    <div class="modal fade" id="modalWider" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add/Edit</h4>
                </div>
                <div class="modal-body">


                    <form  action="{{ route('payslip.admin.user.store') }}" method="post" id="addUserForm">

                        @csrf
                        <input type="hidden" name="employeeId" id="employeeId" value="0">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="inputEmail4">Surname</label>
                                <input type="text" class="form-control" id="surname" placeholder="Surname" name="surname" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">First Name</label>
                                <input type="text" class="form-control" id="first_name" placeholder="First Name" name="first_name" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputEmail4">Other Name</label>
                                <input type="text" class="form-control" id="other_names" placeholder="Other name" name="other_names">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">Date of Birth</label>
                                <input type="date" class="form-control"  name="dob" id="dob" placeholder="Date of Birth" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputState">Gender</label>
                                <select class="form-control" data-placeholder="Gender" name="gender"
                                        id="gender" required>
                                    <option value="">Choose...</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">

                            <div class="form-group col-md-4">
                                <label for="inputState">State</label>
                                <select  id="state" class="form-control">
                                    <option selected="" value="">Choose...</option>
                                    @foreach(\App\Models\State::all() as $state)
                                        <option value="{{$state->id}}">{{$state->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputState">L.G.A</label>
                                <select class="form-control" data-placeholder="LGA" name="lga" id="lga"
                                        required>
                                    <option value="">Choose...</option>
                                </select>
                            </div>

                        </div>
                        <hr>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="inputEmail4">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Email" name="email" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">Phone</label>
                                <input type="text" class="form-control" name="phone" placeholder="Phone"
                                       id="phone" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">Personnel No.</label>
                                <input type="text" class="form-control" name="p_no" id="p_no"
                                       placeholder="Personnel No." required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">IPPIS No.</label>
                                <input type="text" class="form-control" name="ippis_no" id="ippis_no"
                                       placeholder="IPPIS No." required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">Unit</label>
                                <select class="form-control" data-placeholder="Choose a Unit..."
                                        name="unit_id" id="unit_id" required>
                                    <option value="">Choose...</option>
                                    @foreach(\App\Models\Unit::all() as $unit)
                                        <option value="{{$unit->id}}">{{$unit->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="inputPassword4">Reset Password?</label>
                                <input type="text" name="password" class="form-control"  placeholder="leave blank if NO">
                            </div>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary d-block mt-3 default" id="addUserBtn">Save</button>
                    <button type="button" class="btn btn-secondary d-block mt-3 default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('js')

    <script src="{{ asset('old/vendors/bootgrid/jquery.bootgrid.updated.min.js') }}"></script>
    <script>
        $(function () {

            var grid = $("#data-table-basic_").bootgrid({
                caseSensitive: false,
                searchSettings: {
                    // delay: 100,
                    // characters: 3
                },
                formatters: {
                    "commands": function (column, row) {
                        return "<button type='button' data-firstname='" + row.first_name
                            + "' data-surname='" + row.surname + "'" + " data-other_names='" + row.other_names + "' "
                            + " data-p_no='" + row.p_no + "'" + " data-ippis_no='" + row.ippis_no + "'"
                            + " data-lga_id='" + row.lga_id + "'" + " data-unit_id='" + row.unit_id + "'" + " data-state_id='" + row.state_id + "'"
                            + " data-phone='" + row.phone + "'" + " data-gender='" + row.gender + "'" + " data-email='" + row.email + "'" + " data-dob='" + row.dob + "'" +
                            " class='btn btn-outline-primary mb-1 default editUser' data-row-id='" + row.employeeId + "' >" +
                            "<span class=\"simple-icon-note\"></span> &nbsp;&nbsp;Edit&nbsp;</button>";// +
                            //" | <a href='{{route('payslip.user.view',[''])}}/"+1+"' class='btn btn-outline-primary mb-1 default'><span class=\"simple-icon-eye\"></span>  View</a>";
                        // +"<button type=\"button\" class=\"btn btn-icon command-delete waves-effect waves-circle\" data-row-id=\"" + row.id + "\"><span class=\"zmdi zmdi-delete\"></span></button>";
                    }
                }
            }).on("loaded.rs.jquery.bootgrid", function () {
                /* Executes after data is loaded and rendered */
                grid.find(".editUser").on("click", function (ev) {
                    $('#modalWider').modal();
                    var id = $(this).data("row-id");
                    var p = $(this).data("p_no");
                    var i = $(this).data("ippis_no");
                    var e = $(this).data("email");
                    var ph = $(this).data("phone");
                    var o = $(this).data("other_names");
                    var s = $(this).data("surname");
                    var g = $(this).data("gender");
                    var u = $(this).data("unit_id");
                    var l = $(this).data("lga_id");
                    var f = $(this).data("firstname");
                    var d = $(this).data("dob");
                    var st = $(this).data("state_id");
                    showModal(id, p, i, f, s, o, g, e, ph, u, l, d, st);
                    // alert("You pressed edit on row: " + $(this).data("row-id"));
                }).end().find(".command-delete").on("click", function (e) {
                    alert("You pressed delete on row: " + $(this).data("row-id"));
                });
            });
            $("body").on("click", '#addUser', function () {
                showModal(0, '', '', '', '', '', '', '', '', '', '', '', '', '');
            });
            //$("#grid-header").find('.actionBar').prepend('<button id="btnAdd" class="btn btn-primary pull-left" type="button"><span class="icon glyphicon glyphicon-plus"></span>Add </button>');

            $("#addUserBtn").on('click', function () {
                $("#addUserForm").submit();
            });
            $("#state").on('change', function () {
                loadLga($(this).val());
            });
        });

        function showModal(id, p, i, f, s, o, g, e, ph, u, l, d, st) {
            $('#employeeId').val(id);
            $('#surname').val(s);
            $('#first_name').val(f);
            $('#other_names').val(o);
            $('#gender').val(g);
            $('#state').val(st);
            if (st)
                loadLga(st, l);
            $('#dob').val(d);
            $('#lga').val(l);
            $('#email').val(e);
            $('#phone').val(ph);
            $('#p_no').val(p);
            $('#ippis_no').val(i);
            $('#unit_id').val(u);
            $('#modalWider').modal();


        }

        function loadLga(id, l) {
            url = "{{ route("ajax.lgas",['mime']) }}";
            uri = url.replace("mime", id);
            $.getJSON(
                uri,
                function (obj) {
                    $("#lga").html("<option>Select LGA</option>");
                    $.each(obj, function (key, value) {
                        $("#lga").append("<option value='" + value.id + "' " + (l == value.id ? 'selected' : '') + ">" + value.name + "</option>");
                    });
                }
            );
        }
    </script>
@endsection