@extends('layouts.erp_theme_01')
@section('content')

    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h3>All Staffs</h3>
                </div>
                <!-- Card Body -->
                <div class="card-body">

                    @if (session('err_msg'))
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                {{ session('err_msg') }}
                            </div>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-colored" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Staff ID</th>
                                <th>Staff Name</th>
                                <th>Email</th>
                                <th>Department</th>

                                <th>Location</th>
                                <th>Training</th>
                                <th class='text-center'>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($results as $item)
                                <tr>
                                    <td>

                                        @if($item->photo=="")
                                            <img class='rounded-circle hexagon' height='50px'
                                                 src='{{ URL::to('/public/assets/image/no-image.png')  }}'
                                                 alt='{{ $item->staff_id }}'/>
                                        @else
                                            <img class='rounded-circle hexagon' height='50px' src='{{ $item->photo }}'
                                                 alt='{{ $item->staff_id }}'/>
                                        @endif

                                    </td>
                                    <td>{{ $item->staff_id }}</td>
                                    <td>{{ $item->fname .  ($item->mname  != "" ? " " . $item->fname : "" ) . " " . $item->lname      }}</td>
                                    <td>{{ $item->email }}</td>
                                    <td>
                                        @php
                                            $deptname = "not set";
                                            $olddeptid =  "0";
                                        @endphp

                                        @foreach( $staff_depts as $staff_dept)
                                            @if($staff_dept->staff_id  == $item->staff_id )
                                                @php
                                                    $deptname = $staff_dept->dept_name;
                                                    $olddeptid =  $staff_dept->dept_id ;
                                                @endphp
                                                @break
                                            @endif
                                        @endforeach
                                        <span class='badge badge-info'>{{ $deptname }}</span>
                                    </td>
                                    @php
                                        $training_name =  $locname = "not set";
                                        $oldlocid =  "na";
                                    @endphp

                                    @foreach( $staff_training_location as $train_location)
                                        @if($train_location->staff_id  == $item->staff_id )
                                            @php
                                                $locname = $train_location->location_name;
                                                $oldlocid =  $train_location->id ;
                                            @endphp
                                            @break
                                        @endif
                                    @endforeach
                                    <td>
                                        <span class='badge badge-info'>{{ $locname  }}</span>
                                    </td>

                                    <td>
                                        <span class='badge badge-primary'>{{ $training_name }}</span>
                                    </td>


                                    <td class='text-center'>
                                        @php

                                            $alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
                                            $pass = array();
                                            $alphaLength = strlen($alphabet) - 1;
                                            for ($i = 0; $i < 8; $i++) {
                                                $n = rand(0, $alphaLength);
                                                $pass[] = $alphabet[$n];
                                            }

                                        @endphp
                                        <div class="dropdown no-arrow">
                                            <a class="dropdown-toggle" href="#" role="button" id="widgetDropDownAction"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-cog"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                                                 aria-labelledby="widgetDropDownAction">
                                                <a class="dropdown-item"
                                                   href="{{ URL::to('/admin/staff/view-profile')}}/{{ Crypt::encrypt( $item->staff_id ) }}">View
                                                    Profile</a>
                                                <a class="dropdown-item showjdmodal" data-widget='m3'
                                                   data-param='{ "m3-key":"{{ $item->staff_id }}", "email": "{{ $item->email }}", "password": "{{ implode("", $pass)  }}" }'
                                                   href='#'>Set User Account</a>
                                                <a class="dropdown-item showjdmodal" data-widget='m1'
                                                   data-param='{ "m1-key":"{{ $item->staff_id }}", "old_dept": "{{ $olddeptid }}"}'
                                                   href="#">Assign Department</a>
                                                <a class="dropdown-item fetchJobProfile" data-widget='m4'
                                                   data-param='{ "m4-key":"{{ $item->staff_id }}" }' href="#">Edit
                                                    Employment</a>
                                                <a class="dropdown-item displayJobProfile" data-widget='m5'
                                                   data-param='{ "m5-key":"{{ $item->staff_id }}" }' href="#">Mark As
                                                    Not Employed</a>

                                            </div>
                                        </div>
                                    </td>
                                </tr>

                            @endforeach

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


        </div>

        <div class="col-xl-6 col-lg-6 mb-4">


        </div>

    </div>


    <form action="{{ action('Erp\Controller\Staff@assignDepartment') }}" method="post">
        {{ csrf_field() }}
        <div class="modal fade" id="widget-m1" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Assign Staff to Department</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="db_dept">Select Department to assign:</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control form-control-sm" id="db_dept" name='db_dept'>
                                    @foreach($departments as $ditem)
                                        <option value='{{ $ditem->id}}'>{{ $ditem->dept_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12">
                                <hr/>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="db_dept">Set it as current designation:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input switch" name='currentSwitch'
                                           id="currentSwitch">
                                    <label class="custom-control-label" for="currentSwitch"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type='hidden' name='key' id='m1-key'/>
                        <input type='hidden' name='old_dept' id='old_dept' value='na'/>
                        <button type='submit' class="btn btn-primary" value='save_dept' name='btnSave'>Save</button>
                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>


        <form action="{{ action('Erp\Controller\Staff@assignTrainingLocation') }}" method="post">
        {{ csrf_field() }}
        <div class="modal fade" id="widget-m2" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Staff Training Information</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="db_dept">Select Training:</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control form-control-sm" id="db_training" name='db_training'>
                                    @foreach($trainings as $item)
                                        <option value='{{ $item->id}}'>{{ $item->training_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12">
                                <hr/>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-5">
                                <label for="startDate">Training Start Date:</label>
                                <input type="date" class="form-control form-control-sm" name='startDate' id="startDate">

                            </div>
                            <div class="col-md-2">
                            </div>

                            <div class="col-md-5">
                                <label for="endDate">Training End Date:</label>
                                <input type="date" class="form-control form-control-sm" name='endDate' id="endDate">
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type='hidden' name='key' id='m2-key'/>
                        <input type='hidden' name='old_loc' id='old_loc' value='na'/>
                        <button type='submit' class="btn btn-primary" value='save_dept' name='btnSave'>Save</button>
                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>


    
    
    <form action="{{ action('Erp\Controller\Staff@updateUserAccount') }}" method="post">
        {{ csrf_field() }}
        <div class="modal fade" id="widget-m3" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create User Account</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="col-md-4">
                                <label for="db_dept">User Email:</label>
                            </div>
                            <div class="col-md-6">
                                <input type='text' readonly name='tbemail' class="form-control form-control-sm"
                                       id="email"/>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12">
                                <hr/>
                            </div>
                        </div>


                        <div class="form-row">
                            <div class="col-md-4">
                                <label for="db_dept">Password:</label>
                            </div>
                            <div class="col-md-6">
                                <input type='text' name='tbpassword' class="form-control form-control-sm"
                                       id="password"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type='hidden' name='key' id='m3-key'/>
                        <button type='submit' class="btn btn-primary" value='save_account' name='btnSave'>Save</button>
                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>




    
    <div class="modal fade" id="widget-m4" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Staff Job Details</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id='busybox'></div>
                    <div class="form-row">

                        <div class="col-md-6">
                            <label class="control-label">Designtion/Job Role:</label>
                            <input type="text" name='tb_desig' autocomplete="off" class="form-control boxed  ">

                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6">
                            <label class="control-label">Date of Hiring:</label>
                            <input type="date" name='tb_doj' autocomplete="off" class="form-control boxed  ">

                        </div>

                        <div class="col-md-4">
                            <label class="control-label">Rate of Pay:</label>
                            <input type="number" min='0' required name='tb_rate' class="form-control boxed">
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <label class="control-label">Withholding Exemption:</label>
                            <textarea name='ta_withexempt' autocomplete="off" rows='2'
                                      class="form-control boxed"></textarea>

                        </div>
                        <div class="col-md-12">
                            <label class="control-label">Miscellaneous:</label>
                            <textarea name='ta_misc' class="form-control boxed dob" rows='5'></textarea>

                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <input type='hidden' name='key' id='m4-key'/>
                    <button type='button' id='updateJobProfile' class="btn btn-primary" value='save_account'
                            name='btnSave'>Save
                    </button>
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>



    
    <div class="modal fade" id="widget-m5" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Employment Status</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class='alert alert-danger'>You are about to change employment status.</div>
                    <div class="form-row">

                        <div class="col-md-12">
                            <label class="control-label"><strong>Designtion/Job Role:</strong> <span
                                        class="divpost"></span></label>

                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6">
                            <label class="control-label"><strong>Date of Hiring:</strong> <span
                                        class="divhiringdate"></span></label>


                        </div>

                        <div class="col-md-6">
                            <label class="control-label"><strong>Rate of Pay:</strong> <span class="divpayscale"></span>
                            </label>

                        </div>

                    </div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <label class="control-label"><strong>Withholding Exemption:</strong></label>
                            <p class="divwithhold"></p>

                        </div>
                        <div class="col-md-12">
                            <label class="control-label"><strong>Miscellaneous:</strong></label>
                            <p class="divmiscellanous"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="yesno" class="col-sm-7 col-form-label">Mark Staff as no longer Employed?</label>
                        <div class="col-sm-5">
                            <select class="form-control form-control-sm boxed " id='isNotEmployed' name='isNotEmployed'>
                                <option>Yes</option>
                                <option>No</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="tbdoe" class="col-sm-7 col-form-label">Date of ending emplment:</label>
                        <div class="col-sm-5">
                            <input type='date' class="form-control form-control-sm boxed " id='tbdoe' name='tbdoe'/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type='hidden' name='key' id='m5-key'/>
                    <button type='button' id='updateJobStatus' class="btn btn-primary" value='save_account'
                            name='btnSave'>Save
                    </button>
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("script")
    <script>


        $(".showjdmodal").on('click', function () {
            var widget = $(this).attr("data-widget");
            var params = $(this).attr("data-param");

            $.each(JSON.parse(params), function (selector, value) {
                $("#" + selector).val(value);
            });

            $("#widget-" + widget).modal("show");
        });


        $(".showmodal").on('click', function () {
            var widget = $(this).attr("data-widget");
            var key = $(this).attr("data-key");
            var dept = $(this).attr("data-dept");

            $("#key").val(key);
            $("#old_dept").val(dept);
            $("#widget-" + widget).modal("show");
        });


        $(".fetchJobProfile").on('click', function () {


            var widget = $(this).attr("data-widget");
            var params = $(this).attr("data-param");

            var key = "";


            $.each(JSON.parse(params), function (selector, value) {
                key = value;
                $("#" + selector).val(value);
            });


            var url = api + "v1/staff/get-employment-details";
            var json = {};
            json['staffId'] = key;

            $("#widget-" + widget + ' #busybox').html("<div class='text-center'><img width='80px' src='" + siteurl + "/public/assets/image/processing.gif' alt='Loading ...' /></div>");
            $.ajax({
                type: 'post',
                url: url,
                data: json,
                success: function (data) {
                    data = $.parseJSON(data);
                    $.each(data.results, function (index, item) {
                        $("input[type='text'][name='tb_desig']").val(item.post);
                        $("input[name='tb_rate']").val(item.payScale);
                        $("input[name='tb_doj']").val(item.hiringDate);
                        $("textarea[name='ta_withexempt']").val(item.withhold);
                        $("textarea[name='ta_misc']").val(item.miscellanous);
                    });

                    $("#widget-" + widget + ' #busybox').html("");
                },
                error: function () {
                    $("#widget-" + widget + ' #busybox').html("");
                }
            });


            $("#widget-" + widget).modal("show");

        });


        $("#updateJobProfile").on('click', function () {

            var url = api + "v1/staff/update-job-details";
            var json = {};
            json['staffId'] = $("#m4-key").val();
            json['post'] = $("input[type='text'][name='tb_desig']").val();
            json['hiringDate'] = $("input[name='tb_doj']").val();
            json['payScale'] = $("input[name='tb_rate']").val();
            json['withhold'] = $("textarea[name='ta_withexempt']").val();
            json['miscellanous'] = $("textarea[name='ta_misc']").val();

            $("#busybox").removeClass("alert alert-info alert-danger");
            $("#busybox").html("<div class='text-center'><img width='80px' src='" + siteurl + "/public/assets/image/processing.gif' alt='Loading ...' /></div>");
            $.ajax({
                type: 'post',
                url: url,
                data: json,
                success: function (data) {
                    data = $.parseJSON(data);
                    $("#busybox").html(data.detailed_msg);
                    $("#busybox").addClass("alert alert-info");
                },
                error: function () {
                    $("#busybox").html("Job profile update failed.");
                    $("#busybox").addClass("alert alert-danger");
                }
            });

        });


        $(".displayJobProfile").on('click', function () {

            var widget = $(this).attr("data-widget");
            var params = $(this).attr("data-param");

            var key = "";


            $.each(JSON.parse(params), function (selector, value) {
                key = value;
                $("#" + selector).val(value);
            });


            var url = api + "v1/staff/get-employment-details";
            var json = {};
            json['staffId'] = key;

            $.ajax({
                type: 'post',
                url: url,
                data: json,
                success: function (data) {
                    data = $.parseJSON(data);
                    $.each(data.results, function (index, item) {
                        $("span.divpost").html(item.post);
                        $("span.divpayscale").html(item.payScale);
                        $("span.divhiringdate").html(item.hiringDate);
                        $("p.divwithhold").html(item.withhold);
                        $("p.divmiscellanous").html(item.miscellanous);
                    });

                },
                error: function () {
                }
            });

            $("#widget-" + widget).modal("show");

        });


        $("#updateJobStatus").on('click', function () {


            var url = api + "v1/staff/update-job-status";
            var json = {};
            json['staffId'] = $("#m5-key").val();
            json['doe'] = $("input[name='tbdoe']").val();
            json['isNotEmployed'] = $('#isNotEmployed option:selected').val();
            $.ajax({
                type: 'post',
                url: url,
                data: json,
                success: function (data) {
                    data = $.parseJSON(data);

                    $("#widget-m5").modal("hide");
                },
                error: function () {
                }
            });

        });


    </script>
@endsection