@extends('hr_main')
@section('title', '| SIB MRA Report')
@section('content')
    <style>
        .panel {
            margin-bottom: 80px;
        }
        .panel .panel-heading {
            border-bottom: 2px solid #f5f5f5;
        }
        .excel-icon {
            font-size: 14px;
            margin-top: 10px;
            border: 2px solid #525659;
            border-radius: 5px;
            padding: 3px 10px 7px 10px;
        }
        .excel-icon:hover {
            background-color: #696969 !important;
            border-color: #696969 !important;
        }
        .form-control {
            height: 35px;
            padding: 6px 6px;
            font-size: 12px;
        }
        footer.main-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        footer.main-footer .footer-inner {
            display: flex;
            justify-content: center;
        }
        footer.main-footer .footer-text p {
            margin: 0;
        }
        footer.main-footer .go-up a {
            padding: 0px 5px;
        }
    </style>
    <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="btnExportExcel" class="btn btn-info pull-center excel-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;">SIB MRA Report </h3>
                </div>

                <div class="panel-body panelBodyView" style="padding-top: 20px !important;">
                    {!! Form::open(['url' => '#','role' => 'form','class' => '', 'id' => 'filterFormId', 'method' => 'post',]) !!}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-2" style="padding-right: 0;">
                                    <div class="form-group">
                                        {{ Form::label('project_id_fk', 'Project',['class'=>'control-label']) }}
                                        {{ Form::select('project_id_fk', $projects, null,['class'=>'form-control','id'=>'project']) }}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="date">Date</label>
                                        <input type="text" autocomplete="off" name="date" class="form-control" id="filter_end_date" required placeholder="Select Date">
                                    </div>
                                </div>
    
                                <div class="col-md-2" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <label for="year" class="control-label" style="visibility: hidden;">Action</label><br>
                                        <input class="btn btn-primary" type="submit" name="Show" value="Search" style="min-height: 35px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {!! Form::close() !!}
                    <div id="reportingDiv"></div>
                </div>

            </div>
        </div>

        <script type="text/javascript">
            $(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("{{ route('get.staff.information.bureau.report') }}?" + serializeValue);
            });

            $(document).ready(function() {
                $("#btnExportExcel").click(function(e) {
                    var today = new Date();
                    var dd = today.getDate();
                    var mm = today.getMonth() + 1; // January is 0!
                    var yyyy = today.getFullYear();

                    if (dd < 10) {
                        dd = '0' + dd;
                    }

                    if (mm < 10) {
                        mm = '0' + mm;
                    }

                    today = dd + '-' + mm + '-' + yyyy;

                    // Get the HTML content from the div
                    let htmlContent = $('#printDiv').html();

                    // Add BOM (Byte Order Mark) to support UTF-8
                    let BOM = '\uFEFF'; // Ensures that Excel interprets the file as UTF-8

                    // Create a Blob with the HTML content encoded in UTF-8
                    let file = new Blob([BOM + htmlContent], {
                        type: "application/vnd.ms-excel;charset=utf-8"
                    });

                    let url = URL.createObjectURL(file);

                    let a = $("<a />", {
                        href: url,
                        download: "Staff_Information_Bureau_" + today + ".xls"
                    }).appendTo("body").get(0).click();

                    e.preventDefault();
                });


            });
        </script>
    @endsection