@extends('hr_main')
@section('title', '| Attendance Details Report')
@section('content')
    @include('convert_word')

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0px">
                    <div class="panel-options">
                        <button id="printIcon" class="btn btn-info pull-right print-icon" target="_blank" style="">
                            <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                        </button>
                        <button id="btnExportExcel" class="btn btn-info pull-center print-icon" target="_blank"
                            style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Excel</i>
                        </button>
                    </div>
                    <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                        Attendance Details Report
                    </h3>
                </div>

                <div class="panel-body panelBodyView">
                    {!! Form::open([
                        'url' => '#',
                        'role' => 'form',
                        'class' => 'form-horizontal form-groups',
                        'id' => 'filterFormId',
                        'method' => 'get',
                    ]) !!}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-2">
                                {!! Form::label('branch', 'Branch', ['class' => 'control-label']) !!}
                                {!! Form::select('branch_id', $d_a->branches, null, [
                                    'class' => 'form-control select2',
                                    'id' => 'branch',
                                    'name' => 'branch_id',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                            <div class="col-md-2">
                                {!! Form::label('project', 'Project', ['class' => 'control-label']) !!}
                                {!! Form::select('project_id', $d_a->projects, null, [
                                    'class' => 'form-control select2',
                                    'id' => 'project_id',
                                    'name' => 'project_id',
                                ]) !!}
                            </div>
                            <div class="col-md-2">
                                {!! Form::label('employee', 'Employee', ['class' => 'control-label']) !!}
                                {!! Form::select('employeeId', ['' => 'All'], null, [
                                    'class' => 'form-control select2',
                                    'id' => 'employeeId',
                                    'name' => 'employeeId',
                                ]) !!}
                                <p id='employeeId' style="max-height:3px;">{{ $errors->error->first('employeeId') }}</p>
                            </div>

                            @if(isset($generatedSourceTypes))
                            <div class="col-md-2">
                                <label>Attendence Source</label>
                                <select class='form-control' name='generated_source_type' id='generated_source_type'>
                                    @foreach($generatedSourceTypes as $generatedSourceType)
                                        <option value='{{ $generatedSourceType }}'>{{ $generatedSourceType }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            <div class="col-md-1">
                                <label for="start-date">Start Date</label>
                                <input type="text" name="start_date" autocomplete="off" class="form-control"
                                    id="filter_start_date" required placeholder="Select Date">
                            </div>

                            <div class="col-md-1">
                                <label for="start-date">End Date</label>
                                <input type="text" autocomplete="off" name="end_date" class="form-control"
                                    id="filter_end_date" required placeholder="Select Date">
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="year" class="control-label">Action</label><br>
                                        <input class="btn btn-primary" type="submit" name="Show" value="Search">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>

                <div class="row" id="reportingDiv"></div>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                $("#filter_start_date").datepicker({
                    format: "dd-mm-yyyy",
                    showOtherMonths: true,
                    selectOtherMonths: true,
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-50:+0",
                    maxDate: "dateToday",
                    autoclose: true
                }).val();
            });

            $(function() {
                $("#filter_end_date").datepicker({
                    format: "dd-mm-yyyy",
                    showOtherMonths: true,
                    selectOtherMonths: true,
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-50:+0",
                    maxDate: "dateToday",
                    autoclose: true
                }).val();
            });

            $("form").submit(function(event) {
                event.preventDefault();

                var serializeValue = $(this).serialize();

                $("#loadingModal").modal('show');
                $('#reportingDiv').html('Retrieving Data, Please Wait!');
                $("#reportingDiv").load('{{ URL::to('./report/attendance-details-report-table') }}' + '?' +
                    serializeValue);
            });
            // sjf

            $(document).ready(function() {

                $("#btnExportExcel").click(function(e) {
                    var today = new Date();
                    var dd = today.getDate();

                    var mm = today.getMonth() + 1;
                    var yyyy = today.getFullYear();
                    if (dd < 10) {
                        dd = '0' + dd;
                    }

                    if (mm < 10) {
                        mm = '0' + mm;
                    }
                    today = dd + '-' + mm + '-' + yyyy;

                    let file = new Blob([$('#printDiv').html()], {
                        type: "application/vnd.ms-excel"
                    });
                    let url = URL.createObjectURL(file);
                    let a = $("<a />", {
                        href: url,
                        download: "Daily Attendance Report _" + today + ".xls"
                    }).appendTo("body").get(0).click();
                    e.preventDefault();
                });


                /* get employee after selecting branch */
                $("#branch").change(function(e) {
                    e.preventDefault();

                    $('#project_id').select2('val', '');
                    $('#employeeId').select2('val', '');
                    $('#employeeId option:gt(0)').remove();

                    var branch_id = $(this).val();
                    var project_id = $('#project_id').val();

                    if (branch_id != '') {
                        $.ajax({
                            type: "GET",
                            url: "{{ url('hr/get-branch-wise-employee') }}",
                            data: {
                                branch_id_fk: branch_id,
                                project_id_fk: project_id
                            },
                            dataType: "json",
                            success: function(employees) {
                                $.each(employees, function(id, name) {
                                    $('#employeeId').append("<option value=" + id + ">" +
                                        name + "</option>");
                                });
                                $('#employeeId').trigger('change');
                            },
                            error: function(response) {
                                alert('Something went wrong!');
                            }
                        });
                    }
                });

                $("#project_id").change(function(e) {
                    e.preventDefault();

                    $('#employeeId option:gt(0)').remove();

                    var project_id = $(this).val();
                    var branch_id = $('#branch').val();

                    if (branch_id != '') {
                        $.ajax({
                            type: "GET",
                            url: "{{ url('hr/get-branch-wise-employee') }}",
                            data: {
                                branch_id_fk: branch_id,
                                project_id_fk: project_id
                            },
                            dataType: "json",
                            success: function(employees) {
                                $.each(employees, function(id, name) {
                                    $('#employeeId').append("<option value=" + id + ">" +
                                        name + "</option>");
                                });
                                $('#employeeId').trigger('change');
                            },
                            error: function(response) {
                                alert('Something went wrong!');
                            }
                        });
                    }
                });


                $("#printIcon").click(function(event) {
                    var mainContents = document.getElementById("reportingDiv").innerHTML;
                    var headerContents = '';
                    var printStyle =
                        '<style>thead tr th{text-align:center;vertical-align: middle;padding:3px;font-size:11px}  tr{ page-break-inside:avoid; page-break-after:auto } </style><style media="print">@page{margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';
                    var footerContents =
                        "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By: <span style='display:inline-block; width: 30%; padding-top:40px;'></span> Reviewed By: <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By:</div>";
                    var printContents = '<div id="order-details-wrapper">' + headerContents + printStyle +
                        mainContents + footerContents + '</div>';
                    var win = window.open('', 'printwindow');
                    win.document.write(printContents);
                    win.print();
                    win.close();
                });

            });
        </script>
    @endsection