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

    <div class="row">
        <div class="col-md-12">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
        </div>

        <div class="col-md-12">
            <div class="panel panel-default panel-border">
                <div class="panel-heading" style="padding-bottom:0px">
                    <div class="panel-title">
                        {!! $data['pageTitle'] !!}
                    </div>

                    <div class="panel-options">
                        {{-- @if (Auth::user()->canSee($moduleIdHr, $functionCodeSecurityInterest, $subFunctionIdCreate)) --}}
                        <a href="{{ route('lateLeaveAssigns.create') }}" class="btn btn-white pull-right"><i
                                class="fa fa-plus-circle"></i> New</a>
                        {{-- @endif --}}
                    </div>
                </div>
                <div class="panel-body">
                    {{-- ----------------------- Filter Start ------------------------------- --}}
                    <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' => 'branchId', 'col' => 2, 'name' => 'branchId', 'attributes' => ['print_order' => '1']],
                        ['element' => 'custom', 'type' => 'text', 'name' => 'employeeId', 'label' => 'Employee ID', 'id' => 'employeeId'],
                        ['element' => 'custom', 'type' => 'text', 'col' => 2, 'label' => 'Month', 'name' => 'monthyear', 'id' => 'js-monthpicker']];
                    @endphp

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

                    {{-- ----------------------- Filter End ------------------------------------ --}}
                    <table class="table table-striped table-bordered table-condensed text-primary" id="datatable">
                        <thead>
                            <tr>
                                <th width="30">SL#</th>
                                <th>Branch</th>
                                <th>Employee Name</th>
                                <th>Employee Id</th>
                                <th>Month</th>
                                <th>Total Late (Day)</th>
                                <th>Calculate late (Day)</th>
                                <th>Entry By</th>
                                <th>Approved By</th>
                                <th style="width: 80px">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>


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

    <!-- Modal -->
    <div id="view-modal" class="modal fade" role="dialog" style="padding-top: 75px;">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Details</h4>
                </div>
                <div class="modal-body">
                    <table style="width: 100%;">
                        <tbody>
                            <tr>
                                <th>Employee Name</th>
                                <td id="modal-emp-name" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>Employee Id</th>
                                <td id="modal-emp-id" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>Month</th>
                                <td id="modal-month" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>Total Late Day</th>
                                <td id="modal-total-late" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>Calculate Day</th>
                                <td id="modal-calculate-day" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>Annual</th>
                                <td id="modal-annual" class="text-right"></td>
                            </tr>
                            <tr>
                                <th>NPL</th>
                                <td id="modal-npl" class="text-right"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerAssets')
    <script type="text/javascript">
        function showViewModal(url) {
            $.ajax({
                type: "GET",
                url: './lateLeaveAssigns/detail/' + url,
                success: function(response) {
                    $("#modal-emp-name").text(response.employeeName);
                    $("#modal-emp-id").text(response.employeeId);
                    $("#modal-month").text(response.month);
                    $("#modal-total-late").text(response.totalLateDay);
                    $("#modal-calculate-day").text(response.calculate_day);
                    $("#modal-annual").text(response.annual);
                    $("#modal-npl").text(response.npl);
                    $("#view-modal").modal('show');
                },
                error: function(response) {}
            });
        }

        // Data Table 
        $(document).ready(function() {

            $("#js-monthpicker").datepicker({
                format: "mm-yyyy",
                startView: "months",
                minViewMode: "months",
                autoclose: true,
                afterShow: function() {
                    $(".ui-datepicker select").select2();
                }
            });
            $('#js-monthpicker').attr('autocomplete', 'off');

            // view modal 
            $('.btn-view').click(function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function(response) {
                        $("#modal-emp-name").text(response.employeeName);
                        $("#modal-emp-id").text(response.employeeId);
                        $("#modal-month").text(response.month);
                        $("#modal-total-late").text(response.totalLateDay);
                        $("#modal-calculate-day").text(response.calculate_day);
                        $("#modal-annual").text(response.annual);
                        $("#modal-npl").text(response.npl);
                        $("#view-modal").modal('show');
                    },
                    error: function(response) {}
                });
            })

            // end view moda
            $('#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"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "branchName"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "emp_name_english"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "emp_id"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "month"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "total_late_day"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "calculate_day"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "entryName"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "approvedName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "actionbtn"
                    }


                ]
            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();
            });
        });
    </script>
@endsection