@extends('admin.master')
@section('title','Supplier Ledger Report')
@section('page_css')
    <style>
        .panel-body {
            padding: 9px !important;
        }
        .mb-0 {
            margin-bottom: 10px !important;
        }
        @media print
        {
            body {
                height: auto;
                font-size: 18pt; 
            }
            .non-printable { display: none; }
            .printable { display: block; }
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid" id="vue-wrapper">
        <div class="row bg-title page-breadcrumb bg-white">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <ol class="breadcrumb ">
                    <li class="active breadcrumbColor"><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li>@yield('title')</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-info">
                <div class="panel-body">
                    {{ Form::open(array('route' => 'report.supplier_ledger_report','enctype'=>'multipart/form-data','class'=>'form-horizontal')) }}
                    <div class="form-body">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">

                                    <div class="form-group">
                                        <label class="control-label col-md-4">Start Date</label>
                                        <div class="col-md-8">
                                            {!! Form::text('start_date',$start_date, $attributes = array('class'=>'form-control start_date','required'=>'required','placeholder'=>'Enter Start Date')) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-4">End Date</label>
                                        <div class="col-md-8">
                                            {!! Form::text('end_date',$end_date, $attributes = array('class'=>'form-control end_date','required'=>'required','placeholder'=>'Enter End Date')) !!}
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-4">Supplier<span class="validateRq">*</span></label>
                                        <div class="col-md-8">
                                            {{ Form::select('supplier_id',$supplier, $supplier_id, array('class' => 'form-control select2')) }}
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="control-label col-md-4"></label>
                                        <div class="col-md-8">
                                            <input type="checkbox" name="show_combined" id="show_combined" {{ (isset($show_combined) && $show_combined) ? 'checked' : '' }}>
                                            <label for="show_combined" style="cursor: pointer; font-weight: 500;"> Show Combined Balance (Include Sales)</label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="row text-right">
                                            <div class="col-md-offset-4 col-md-8">
                                                <button type="submit" class="btn btn-info btn_style"><i class="fa fa-search"></i> Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-offset-10  col-md-2">
                                        <button type="button" class="btn btn-success btn-flat btn-sm pull-right non-printable" onclick="printDiv('printableArea')"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>  Print PDF </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
            @include('admin.report.supplier_ledger_report_data')
        </div>
    </div>
@endsection
@section('page_scripts')
    <script>
        $(document).on("focus", ".start_date", function () {
            $(this).datepicker({
                defaultDate: new Date(),
                format: 'yyyy-mm-dd',
                todayHighlight: true,
            }).on('changeDate', function (e) {
                $(this).datepicker('hide');
            });
        });
        $(document).on("focus", ".end_date", function () {
            $(this).datepicker({
                defaultDate: new Date(),
                format: 'yyyy-mm-dd',
                todayHighlight: true,
            }).on('changeDate', function (e) {
                $(this).datepicker('hide');
            });
        });
    </script>

    <script>
        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
        }

        window.onafterprint = function(){
            console.log("Printing completed...");
            location.reload();
        }
    </script>
@endsection