@extends('layouts/microfin_layout')
@section('title', '|Periodic Collection Component Wise Report')
@section('content')
    @include('successMsg')

    @include('microfin/reports/periodicCollectionComponentWiseReport/periodicCollectionComponentWiseReportAjax')

    @php
        $branchId = Auth::user()->branchId;
        // echo 'Branch ID : '.$branchId;
    @endphp

    <div class="container-fluid">

        <!-- Start of the Dropdown form -->
        <div class="row">
            <div class="col-md-12">
                <div class="" style="">
                    <div class="">
                        <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-left 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>

                                    <button id="btnExportPdf" class="btn btn-info pull-right print-icon" target="_blank"
                                        style="">
                                        <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Pdf</i>
                                    </button>
                                    {{--   <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> --}}
                                </div>
                                <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                                    PERIODIC COLLECTION REPORT COMPONENT WISE
                                </h3>
                            </div>

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

                                <div class="row">
                                    {{-- Start of Branch Name --}}
                                    <div class="col-md-12">
                                        <div class="col-md-1" id="branchDiv">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                                                </div>
                                                <div class="col-md-12">
                                                    <select name="searchBranch" class="form-control input-sm"
                                                        id="searchBranch" style="color: black;" required="true">>
                                                        <option value="">-- select --</option>
                                                        @foreach ($branchInfo as $branch)
                                                            <option value="{{ $branch->id }}">
                                                                {{ str_pad($branch->branchCode, 3, 0, STR_PAD_LEFT) }} -
                                                                {{ $branch->name }} </option>
                                                        @endforeach
                                                    </select>
                                                    {{-- <p id='filBranchE' style="max-height:5px; color:red;"></p> --}}
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of Branch Name --}}

                                        <div class="col-md-1">
                                            <div class="form-group" style="font-size: 13px; color:black;">
                                                <div style="text-align: center;" class="col-sm-12">
                                                    {!! Form::label('', 'F. Org:', ['class' => 'control-label pull-left']) !!}
                                                </div>
                                                <div class="col-sm-12">
                                                    <select name="searchFundingOrg" class="form-control input-sm"
                                                        id="searchFundingOrg">
                                                        <option value="">-- Select --</option>
                                                        <option selected value="All">All</option>
                                                        @foreach ($searchFundingOrgs as $searchFundingOrg)
                                                            <option value="{{ $searchFundingOrg->id }}">
                                                                {{ $searchFundingOrg->name }} </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of Type --}}

                                        <div class="col-md-1">
                                            <div class="form-group" style="font-size: 13px; color:black;">
                                                <div style="text-align: center;" class="col-sm-12">
                                                    {!! Form::label('', 'P. Ctg:', ['class' => 'control-label pull-left']) !!}
                                                </div>
                                                <div class="col-sm-12">
                                                    <select name="searchProductCtg" class="form-control input-sm"
                                                        id="searchProductCtg">

                                                        <option selected value="All">All</option>
                                                        @foreach ($searchProductCtg as $productCtg)
                                                            <option value="{{ $productCtg->id }}"> {{ $productCtg->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of Status --}}

                                        {{-- Start of the from date --}}
                                        <div class="feel-me">
                                            <div class="col-md-1">
                                                <div class="form-group" style="font-size: 13px; color:black;">
                                                    <div style="text-align: center;" class="col-sm-12">
                                                        {!! Form::label('', 'Product:', ['class' => 'control-label pull-left']) !!}
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <select name="searchProduct" class="form-control input-sm"
                                                            id="searchProduct">

                                                            <option selected value="All">All</option>
                                                            @foreach ($searchProduct as $product)
                                                                <option value="{{ $product->id }}"> {{ $product->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of the from date --}}

                                        {{-- Start of the to date --}}
                                        <div class="col-md-1">
                                            <div class="form-group" style="font-size: 13px; color:black;">
                                                <div style="text-align: center;" class="col-sm-12">
                                                    {!! Form::label('startDate', 'From:', ['class' => 'control-label pull-left']) !!}
                                                </div>
                                                <div class="col-sm-12">
                                                    {{-- <input type="text" name="startDate" id="startDate" readonly> --}}
                                                    {!! Form::text('startDate', null, ['class' => 'form-control', 'id' => 'startDate', 'readonly']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of the to date --}}

                                        <div class="col-md-1">
                                            <div class="form-group" style="font-size: 13px; color:black;">
                                                <div style="text-align: center;" class="col-sm-12">
                                                    {!! Form::label('endDate', 'To:', ['class' => 'control-label pull-left']) !!}
                                                </div>
                                                <div class="col-sm-12">
                                                    {{-- <input type="text" name="endDate" id="endDate" readonly> --}}
                                                    {!! Form::text('endDate', null, ['class' => 'form-control', 'id' => 'endDate', 'readonly']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of Type --}}

                                        {{-- <div class="col-md-2">
                            <div class="form-group" style="font-size: 13px; color:black;">
                                <div style="text-align: center;" class="col-sm-12">
                                    {!! Form::label('', 'Optaion:', ['class' => 'control-label pull-left']) !!}
                                </div> 
                                <div class="col-sm-6">
                                    {!! Form::select('searchLoanProduct',['LoanProduct'=>'Loan Product','LoanProductCategory'=>'Loan Product Category'],null,['id'=>'searchLoanProduct','class'=>'form-control input-sm']) !!}
                                </div>
                            </div>
                        </div> --}}
                                        {{-- End of Type --}}

                                        {{-- Start of the Submit Button --}}
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                {!! Form::label('', '', ['class' => 'control-label col-md-12', 'style' => 'color:#708090; padding-top: 25px;']) !!}
                                                <div class="col-md-12">
                                                    {{-- {!! Form::submit('Show Report', ['id' => 'reportSubmit', 'class' => 'btn btn-primary btn-xs']); !!} --}}
                                                    <input class="btn btn-primary" type="submit" name="Submit"
                                                        value="Show report" id="reportSubmit">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End of the Submit button --}}
                                    </div>

                                    {!! Form::close() !!}
                                    <!-- filtering end-->
                                </div>
                            </div>
                            <div class="row" id="reportingDiv">

                            </div>
                        </div> {{-- panel-body panelBodyView DIV --}}
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Dropdown form -->

        {{-- @include('microfin/reports/mfnFieldOfficerReport/mfnFieldreport1_new_table'); --}}
    </div>

    <script>
        $("#startDate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "1998:c",
            dateFormat: 'dd-mm-yy',
            onSelect: function(dateStr) {
                var min = $(this).datepicker('getDate'); // Get selected date
                $("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
                var start = $("#startDate").datepicker("getDate");
                var end = $("#endDate").datepicker("getDate");
                var days = (end - start) / (1000 * 60 * 60 * 24);
                // if (days > 30) {
                //     alert('Wrong input parameters. Please keep maximum date range less than one month');
                //     $('#startDate').val('');
                //     $('#endDatee').val('');
                // }

                if (start) {
                    $('#startDatee').hide();
                } else {
                    $('#startDatee').show();
                }
            }
        });

        $("#endDate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "1998:c",
            dateFormat: 'dd-mm-yy',
            maxDate: '+1Y+10M',
            onSelect: function(dateStr) {
                var max = $(this).datepicker('getDate'); // Get selected date
                $('#datepicker').datepicker('option', 'maxDate', max ||
                '+1Y+6M'); // Set other max, default to +18 months
                var start = $("#startDate").datepicker("getDate");
                var end = $("#endDate").datepicker("getDate");
                var days = (end - start) / (1000 * 60 * 60 * 24);

                // if(days>31){
                // 	alert('Wrong input parameters. Please keep maximum date range less than one month');
                // 	$('#endDate').val('');
                // }
                if (days < 0) {
                    alert(
                        'Wrong input parameters.Please keep  currect parameters maximum date range less than one month');
                    $('#endDate').val('');
                }
                if (end) {
                    $('#endDatee').hide();
                } else {
                    $('#endDatee').show();
                }
            }
        });

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

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

            $('#loadingModal').show();
            $("#reportingDiv").load('{{ URL::to('mfnPeriodicCollectionComponentReportTable') }}' + '?' +
                serializeValue);
        });

        $(document).ready(function() {

            $("#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:15px !important}  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 printContents = '<div id="order-details-wrapper">' + headerContents + printStyle +
                    mainContents + '</div>';

                var win = window.open('', 'printwindow');
                win.document.write(printContents);
                win.print();
                win.close();
            });

            // $("#loadingModal").hide();

        }); /* Ready to print */

        $("#btnExportPdf").click(function(event) {
            event.preventDefault();

            let serializeValue = $("#filterFormId").serialize();
            let url = "{{ route('mfnPeriodicCollectionComponentReport.pdf') }}?" + serializeValue;

            window.open(url, '_blank');
        });
    </script>

@endsection