@extends('admin.layout.master')
@section('home')
    <div class="row justify-content-center">
        <div class="col-3">
            <form action="{{route('mis-report')}}" method="get">
                <div class="form-group  text-center">
                    <label class="labels"><b style="font-size: 16px">Date</b></label>
                    <input type="text" name="mis_date" id="mis_date" class="form-control datepicker"
                           value="{{date('d-m-Y')}}">
                    <br>
                    <button class="btn btn-sm btn-primary" type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-red-light">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total Employee</p>
                            <h4 class="mb-0 text-white font-weight-bold">@if(!empty($total_employee)){{$total_employee}}@endif</h4>
                        </div>
                        <div id="chart2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-primary-blue">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total Present</p>
                            <h4 class="mb-0 text-white font-weight-bold">@if(!empty($total_present)){{$total_present}}@else{{$total_present=0}}@endif</h4>
                        </div>
                        <div id="chart2">
                            <button class="btn btn-md btn-light" onclick="misReportModal('5')">Show</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-secondary">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total Late</p>
                            <h4 class="mb-0 text-white font-weight-bold">@if(!empty($total_late)){{$total_late}}@else{{'0'}}@endif</h4>
                        </div>
                        <div id="chart2">
                            <button class="btn btn-md btn-light" onclick="misReportModal('1')">Show</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-info">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total Early Leave</p>
                            <h4 class="mb-0 text-white font-weight-bold">@if(!empty($total_early_leave)){{$total_early_leave}}@else{{'0'}}@endif</h4>
                        </div>
                        <div id="chart2">
                            <button class="btn btn-md btn-light" onclick="misReportModal('2')">Show</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-success">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total On Leave</p>
                            <h4 class="mb-0 text-white font-weight-bold">@if(!empty($total_on_leave)){{$total_on_leave}}@else{{$total_on_leave='0'}}@endif</h4>
                        </div>
                        <div id="chart2">
                            <button class="btn btn-md btn-light" onclick="misReportModal('3')">Show</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3">
            <div class="card radius-10 bg-danger">
                <div class="card-body">
                    <div class="media align-items-center">
                        <img src="assets/images/icons/appointment-book.png" width="45" alt=""/>
                    </div>
                    <div class="media align-items-center mt-3">
                        <div class="media-body">
                            <p class="mb-1 text-white">Total Absent</p>
                            <h4 class="mb-0 text-white font-weight-bold">{{$total_employee-($total_present+$total_on_leave)}}</h4>
                        </div>
                        <div id="chart2">
                            <button class="btn btn-md btn-light" onclick="misReportModal('4')">Show</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="misReportModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="table-responsive" id="print">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>SL#</th>
                            <th>Employee Code</th>
                            <th>Employee Name</th>
                        </tr>
                        </thead>
                        <tbody class="table_body">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>
        function misReportModal(type) {
             $(".table_body").empty();
            $("#misReportModal").modal('show');
            let employee_array = [];
            if (type == 1) {
                $("#modal_title").html("Late Report");
                employee_array = JSON.parse('');
            } else if (type == 2) {
                $("#modal_title").html("Early Leave Report");
                employee_array = JSON.parse('');
            } else if (type == 3) {
                $("#modal_title").html("On Leave Report");
                employee_array = JSON.parse('');
            } else if (type == 4) {
                $("#modal_title").html("Absent Report");
                employee_array = JSON.parse('');
            }
            else if (type == 5) {
                $("#modal_title").html("Present Report");
                employee_array = JSON.parse('');
            }
            let table_tr = '';
            let j=0;
            for (let i = 0; i < employee_array.length; i++) {
                let emp_info = employee_array[i].split('=');
                let manualPunch = emp_info[2];
                let row_style = "";
                if(manualPunch!="" && manualPunch=='1'){
                    row_style = "background-color: rgb(175 244 255)";
                }

                table_tr = table_tr + ' <tr style="' + row_style + '">\n' +
                    '                            <td>' + ++j + '</td>\n' +
                    '                            <td class="text-center">' + emp_info[1] + '</td>\n' +
                    '                            <td>' + emp_info[0] + '</td>\n' +
                    '                        </tr>'
            }
            $(".table_body").html(table_tr);
        }
    </script>
@endsection