@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])

@section('stylesheets')
    <style>
        .panel .panel-body {
            color: #2c2e2f;
        }

        .table-custom {
            table-layout: fixed;
            width: 100% !important;
            border-collapse: collapse !important;
            border: 1px solid transparent !important;
        }

        .table-custom th,
        td {
            border: 1px solid #c6c7cc;
            padding: 10px 15px;
        }

        .table-custom td {
            padding-right: 15px;
            min-height: 50px;
        }

        .table-custom th {
            font-weight: bold;
            text-align: center;
            padding: 10px 15px;
        }
    </style>
@endsection

@section('content')
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{!! $data['addBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-plus viewIcon">
                        </i>{!! $data['addBtnLabel'] !!}</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel-heading">
                                    <div class="panel-title">{!! $data['pageTitle'] !!}</div>
                                </div>
                                <div class="panel-body">

                                      
                            <div class="panel-options pull-right">
								<a href="{{ url($data['resetUrl']) }}" class="btn btn-white btn-icon"><i
										class="fa fa-refresh"></i></a>
							</div>

                        @php
                            $searchElements =
							[
								['element' => 'project', 'col' => 2, 'attributes' => ['print_order' => '1']],
								['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',
                        ])
                                    <table class="table table-striped table-bordered table-condensed first-col-dark"
                                        id="datatable">
                                        <thead>
                                            <tr>
                                                <th style="width: 3.5%">SL#</th>
                                                <th style="width: 22%; text-align:center; vertical-align:middle;">Employee
                                                </th>
                                                <th style="width: 13%; text-align:center; vertical-align:middle;">Company
                                                </th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Project
                                                </th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Branch
                                                </th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Total
                                                    Amount</th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Effect
                                                    Month</th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Status
                                                </th>
                                                <th style="width: 10%; text-align:center; vertical-align:middle;">Action
                                                </th>
                                            </tr>
                                        </thead>
                                        {{-- <tbody>
                                        @foreach ($data['salaryDeductionInformations'] as $salaryDeductionInfo)
                                            <tr>
                                                <td>{{ ++$loop->index }}</td>
                                                <td>{{ $salaryDeductionInfo->employee->emp_id ?? '' }} - {{ $salaryDeductionInfo->employee->emp_name_english ?? '' }}</td>
                                                <td>{{ $salaryDeductionInfo->employee->organization->company->name ?? '' }}</td>
                                                <td>{{ $salaryDeductionInfo->employee->organization->project->name ?? '' }}</td>
                                                <td>{{ $salaryDeductionInfo->employee->organization->branch->name  ?? '' }}</td>
                                                <td class="text-right">{{ $salaryDeductionInfo->total_amount  ?? '' }}</td>
                                                <td style="text-align:center">{{ date('M Y',strtotime($salaryDeductionInfo->effect_month_date))}}</td>
                                                <td class="text-center">
                                                    @if ($salaryDeductionInfo->totalCollection() > 0 && $salaryDeductionInfo->totalCollection() < $salaryDeductionInfo->total_amount)
                                                        <span class='badge badge-info'>Running</span>
                                                    @elseif($salaryDeductionInfo->totalCollection() >= $salaryDeductionInfo->total_amount )
                                                        <span class='badge badge-success'>Paid</span>
                                                    @else
                                                        <span class='badge badge-default'>Unpaid</span>
                                                    @endif
                                                    
                                                </td>
                                                <td style="text-align:center">
                                                    <a  href="{{ route('salaryDeduction.view',['id'=>$salaryDeductionInfo->id] ) }}" 
                                                        data-deduction-info-id ="{{$salaryDeductionInfo->id}}"
                                                        class="btn btn-xs btn-info btn-view">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <a  href="{{ route('salaryDeduction.edit',['id'=>$salaryDeductionInfo->id] ) }}" 
                                                        @if ($salaryDeductionInfo->isSalaryApprovedForThisDeductionInfo())
                                                        disabled
                                                        @endif
                                                        class="btn btn-xs btn-info ">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    {!! Form::open(['method' => 'post', 'url' => route('salaryDeduction.destroy',[ 'id' => $salaryDeductionInfo->id]), "onsubmit" => "return confirmDelete()",'style'=>'display: inline-block;']) !!}
                                                        <button 
                                                            type="submit" 
                                                            name="button" 
                                                            @if ($salaryDeductionInfo->isDeleteBtnDisabled())
                                                            disabled
                                                            @endif
                                                            class="btn btn-xs btn-danger">
                                                            <i class="fa fa-trash-o"></i>
                                                        </button>
                                                    {!! Form::close() !!}
                                                </td>
                                            </tr>
                                        @endforeach
									</tbody> --}}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="view-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        style="padding-top:100px;">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Deduction Details</h4>
                </div>
                <div class="modal-body">
                    <table id="view-modal-table" class="table-custom">
                        <tbody>
                            <tr>
                                <th class='text-left'>Employee Name</th>
                                <td>
                                    <span class="employee"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Company</th>
                                <td>
                                    <span class="company"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Project</th>
                                <td>
                                    <span class="project"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Branch</th>
                                <td>
                                    <span class="branch"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Total amount</th>
                                <td>
                                    <span class="total_amount"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Installment No</th>
                                <td>
                                    <span class="installment_no"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Installment Amount</th>
                                <td>
                                    <span class="installment_amount"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Effect Month</th>
                                <td>
                                    <span class="effect_month_date"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Generate Date</th>
                                <td>
                                    <span class="generate_date"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Reference No</th>
                                <td>
                                    <span class="reference_no"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Reference Isssue Date</th>
                                <td>
                                    <span class="reference_issue_date"></span>
                                </td>
                            </tr>
                            <tr>
                                <th class='text-left'>Reason</th>
                                <td>
                                    <span class="reason"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerAssets')
    <script>
        $(document).ready(function() {
            $('#fillBranchId').select2();

            var dataTable = $('#datatable').DataTable({
                "sDom": "ltipr", // For removing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "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"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "employeeName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "companyName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "projectName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "branchName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "total_amount"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "effectMonthDate"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "statusCheck"
                    },

                    {
                        "className": 'dt-body-center',
                        "data": "id"
                    }
                ],
                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row) {
                        var editBtn = `./salaryDeduction/edit/${row.id}`;
                        var deleteBtn = `./salaryDeduction/destroy?id=${row.id}`;
                        var buttons = '';
                        buttons +=
                            `<button data-deduction-info-id="${row.id}"  onclick='btnView(${row.id})' class="btn btn-xs btn-info btn-view"><i class="fa fa-eye"></i></button>
            <a href="${editBtn}" ${row.editDisabled ? 'disabled' : ''} class="btn btn-xs btn-info">
                <i class="fa fa-edit"></i>
            </a>
            <a href="${deleteBtn}" ${row.deleteDisabled ? 'disabled' : ''} data-id='${row.id}'    class="btn btn-xs btn-danger">
                                                            <i class="fa fa-trash-o"></i>
            </a>`;

                        return buttons;
                    }
                }, {
                    "targets": -2,
                    "data": "status",
                    "render": function(data, type, row) {
                        var statusBadge = '';
                        if (data === 'Running') {
                            statusBadge = `<span class='badge badge-info'>Running</span>`;

                        } else if (data === 'Paid') {
                            statusBadge = ` <span class='badge badge-success'>Paid</span>`;
                        } else {
                            statusBadge = `<span class='badge badge-default'>Unpaid</span>`;
                        }

                        return statusBadge;
                    }
                }]


            });

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

            });
        });

        function confirmDelete() {
            return confirm('Are you sure you want to delete?');
        }

        function btnView(id) {
            var linkElement = $(this);
            var tableElementBody = $('#view-modal-table tbody');
            var url = `salaryDeduction/view/${id}`;
            var _token = "{{ csrf_token() }}";
            $.ajax({
                type: 'GET',
                url: url,
                data: _token,
                success: function(data) {
                    var instllmentAmount = data['total_amount'] / data['installment_no'];
                    $('.employee').html(data['name']);
                    $('.company').html(data['company']);
                    $('.project').html(data['project']);
                    $('.branch').html(data['branch']);
                    $('.total_amount').html(data['total_amount']);
                    $('.installment_no').html(data['installment_no']);
                    $('.installment_amount').html(instllmentAmount.toFixed(2));
                    $('.reason').html(data['reason']);
                    $('.effect_month_date').html(data['effect_month_date']);
                    $('.generate_date').html(data['generate_date']);
                    $('.reference_no').html(data['reference_no']);
                    $('.reference_issue_date').html(data['reference_issue_date']);
                    $('#view-modal').modal();
                }
            });
        }
    </script>
@endsection