@extends('hr_main')
@section('title', '| Appoinment Letter Waiting List')
@section('content')

    {{-- @include('microfin/passBookBalanceViews/PassBookBalanceAjax') --}}

    <style media="screen">
        .hide {
            display: none;
        }
    </style>

    <style media="screen">
        .table>thead>tr>th,
        .table>tbody>tr>th,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>tbody>tr>td,
        .table>tfoot>tr>td {

            line-height: 1;

        }

        .table thead tr th {
            position: relative;
            word-break: normal;
            text-transform: capitalize !important;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .center {
            text-align: left;
            margin: 0 auto !important;
            display: inline-block
        }

        .left {
            text-align: left;
            margin-left: 80px !important;
            display: inline-block;
        }

        th,
        td {
            padding: 2px !important;
        }

        .btn-xs,
        .btn-group-xs>.btn {
            font-size: 1.3em;
            background-color: #ffba00;
            color: #fff;
            padding: 1px 5px;
            padding-top: 1px;
            padding-right: 5px;
            padding-bottom: 1px;
            padding-left: 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 0;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .btn-xs-active,
        .btn-group-xs-active>.btn {
            font-size: 1.3em;
            background-color: #72a230;
            color: #fff !important;
            padding: 1px 5px;
            padding-top: 1px;
            padding-right: 5px;
            padding-bottom: 1px;
            padding-left: 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 0;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .btn-xs-approve,
        .btn-group-xs-approve>.btn {
            font-size: 1.3em;
            background-color: #009933;
            color: #fff !important;
            padding: 1px 5px;
            padding-top: 1px;
            padding-right: 5px;
            padding-bottom: 1px;
            padding-left: 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 0;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .btn-xs-inactive,
        .btn-group-xs-inactive>.btn {
            font-size: 1.3em;
            background-color: #cc3f44;
            color: #fff !important;
            padding: 1px 5px;
            padding-top: 1px;
            padding-right: 5px;
            padding-bottom: 1px;
            padding-left: 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 0;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }
    </style>

    <div class="container-fluid">

        <!-- Start of the Dropdown form -->
        <div class="row">
            <div class="col-md-12">
                <div class="" style="">
                    <div class="">
                        <div class="panel panel-default" style="background-color:#708090;">
                            <div class="panel-heading" style="padding-bottom:0px">
                                <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                                    Appointment Letter List
                                </h3>
                                <hr>
                            </div>

                            {{-- search panel  --}}
                            <div class="panel-options pull-right">
                                <a href="{{ url('hr/appointment') }}" class="btn btn-white btn-icon"><i
                                        class="fa fa-refresh"></i></a>
                            </div>

                            @php
                                $searchElements = [
                                    [
                                        'element' => 'branchId',
                                        'col' => 2,
                                        'name' => 'branchId',
                                        'attributes' => ['print_order' => '1'],
                                    ],
                                    [
                                        'element' => 'custom',
                                        'type' => 'text',
                                        'name' => 'employeeId',
                                        'label' => 'Employee ID',
                                        'id' => 'employeeId',
                                    ],
                                ];
                            @endphp

                            @include('partials.searchPanel.main', [
                                'searchElements' => $searchElements,
                                'buttonLevel' => 'Search',
                            ])

                            {{-- Start of the table --}}
                            <div class="row">
                                <table class="table table-bordered" border="1pt solid ash" id="datatable"
                                    style=" text-align: center; font-family: arial; color:black; border-collapse: collapse; font-size: 10px !important;"
                                    width="100%">

                                    <thead style="font-size:11px;">
                                        <tr>
                                            <th>
                                                <div align="center">SL. No.
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Photo
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Name (English)
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Employee ID
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Branch
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Department
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Designation
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Status
                                                </div>
                                            </th>
                                            <th>
                                                <div align="center">Action
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>


                                </table>


                            </div>
                            {{-- End of the table --}}
                        </div> {{-- panel-body panelBodyView DIV --}}
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Dropdown form -->

        {{-- @include('microfin/reports/mfnFieldOfficerReport/mfnFieldreport1_new_table'); --}}
    </div>

    <script type="text/javascript">
        @if (Session::has('message'))
            var type = "{{ Session::get('alert-type', 'info') }}";
            // alert(type);
            switch (type) {
                case 'info':
                    toastr.info("{{ Session::get('message') }}");
                    break;
                case 'warning':
                    toastr.warning("{{ Session::get('message') }}");
                    break;
                case 'success':
                    toastr.success("{{ Session::get('message') }}");
                    break;
                case 'error':
                    toastr.error("{{ Session::get('message') }}");
                    break;
            }
            setTimeout(function() {
                // window.location.href="./hr/appointment";
                window.location.href = "{{ URL::to('./hr/appointment') }}"
            }, 3000);
        @endif
    </script>
@endsection



@section('footerAssets')
    <script>
        function approveAction() {
            var confirmValue = confirm('Are you sure, you want to approve?');

            if (confirmValue) return true;
            else return false;
        }

        $(document).ready(function() {
            $('#fillBranchId').select2();

            var dataTable = $('#datatable').DataTable({
                "sDom": "ltipr", // For removing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "language": {
                    "processing": $('#loadingModal').show(),
                },
                "pageLength": 50,
                "ajax": {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    "data": function(d) {
                        var inputs = {};

                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });

                        d._token = "{{ csrf_token() }}";
                        d.filter = inputs;
                    }
                },

                "columns": [{
                        "data": "sl"
                    },
                    {
                        "data": "employeeImage"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "emp_name_english"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "emp_id"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "branchName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "departmentName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "positionName"
                    },

                    {
                        "className": 'dt-body-center',
                        "data": "status"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "id"
                    }
                ],
                "columnDefs": [{
                        "targets": 1,
                        "data": "employeeImage",
                        "render": function(data, type, row) {
                            var image = ""

                            if (row.employeeImage) {
                                image += ` <img src="${row.employeeImage}"
                                                                height="42" width="42">`;
                            }
                            return image;
                        }
                    },


                    {
                        "targets": -1,
                        "data": "id",
                        "render": function(data, type, row) {
                            var generateUrl = `./appointment/generate/${row.emp_id}`;
                            var viewUrl = `./appointment/view/${row.emp_id}`;
                            var approvedUrl = `./appointment/approve/${row.id}`;
                            var buttons = '';

                            if (row.isApproved !== null && row.appointment_letter_status == 0) {
                                buttons += ` <a href="${approvedUrl}"
                                                                class="btn-xs-approve btn-group-xs-approve" title="Approve"
                                                                style=""><i class="fa fa-check"
                                                                    aria-hidden="true"></i></a>`
                            }

                            if (row.isApproved) {
                                buttons += `  <a href="${viewUrl}"
                                                                class="btn-xs btn-group-xs" title="View">
                                                                <i class="fa fa-eye" aria-hidden="true" style=""></i>
                                                            </a>`
                            } else {
                                buttons += ` <a href="${generateUrl}"
                                                                class="btn-xs-active btn-group-xs-active" title="Genarate"
                                                                style="">
                                                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                            </a>`
                            }
                            return buttons;
                        }
                    }, {
                        "targets": -2,
                        "data": "status",
                        "render": function(data, type, row) {
                            var badge = ""
                            if (row.status == 'Active') {
                                badge += ` <a href="#" class="btn-xs-active btn-group-xs-active"
                                                            title="Active">
                                                            <i class="fa fa-check" aria-hidden="true"></i>
                                                        </a>`;
                            } else {
                                badge += `<a href="#" class="btn-xs-inactive btn-group-xs-inactive"
                                                            title="Inactive">
                                                            <i class="fa fa-exclamation-circle" aria-hidden="true"
                                                                style=""></i>
                                                        </a>`;
                            }
                            return badge;
                        }

                    }

                ]

            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();

            });
        });
    </script>
@endsection