@extends('admin.master')
@section('title','Invoice Report')
@section('page_css')
    <style>
        /* Forcefully hide the preloader */
        .preloader, .loader, #loader, .spinner { display: none !important; }
        .panel-body { padding: 15px !important; }
        
        /* Select2 Dropdown Design Fix */
        .select2-container .select2-selection--multiple {
            min-height: 35px !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
        }
        .btn-info {
            background-color: #00c292 !important;
            border-color: #00c292 !important;
        }

        /* Powerful Printing Styles */
        @media print {
            /* Hide menus, sidebars, headers, and other unnecessary elements during print */
            .hidden-print, .bg-title, .filter-section, .btn, .footer, .navbar, .side-menu, .breadcrumb,
            .sidebar, .left-sidebar, .topbar, .main-sidebar, aside, header, nav, .navbar-header {
                display: none !important;
            }

            /* Expand the main content to take up the full page width */
            #page-wrapper, .page-wrapper, .content-wrapper, .container-fluid, #vue-wrapper {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
            }

            /* Magic code to remove [http://...] URLs next to links when printing */
            a[href]:after {
                content: none !important;
            }

            /* Format panel and hide borders */
            .panel {
                border: none !important;
                box-shadow: none !important;
            }
            
            /* Format panel heading for print */
            .panel-heading {
                background-color: #fff !important;
                color: #000 !important;
                border: none !important;
                border-bottom: 2px solid #000 !important;
                text-align: center;
                display: block !important;
                padding-bottom: 10px !important;
            }
            .panel-body {
                padding: 0 !important;
            }
            
            /* Table print formatting */
            table {
                width: 100% !important;
                border-collapse: collapse !important;
                margin-top: 15px !important;
            }
            table th, table td {
                border: 1px solid #000 !important;
                padding: 8px !important;
                color: #000 !important;
            }
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid" id="vue-wrapper">
        <div class="row bg-title page-breadcrumb bg-white hidden-print">
            <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="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading hidden-print" style="background-color: #00c292 !important; color: white;">
                        <i class="fa fa-filter"></i> Filter Invoice Report
                        
                        <div class="pull-right">
                            <button type="button" onclick="window.print();" class="btn btn-default btn-sm" style="color: #333; margin-top: -5px;">
                                <i class="fa fa-print"></i> Print
                            </button>
                        </div>
                    </div>
                    <div class="panel-body hidden-print">
                        {{ Form::open(array('route' => 'report.invoice_report','enctype'=>'multipart/form-data','method'=>'POST')) }}
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>Start Date</label>
                                    {!! Form::text('start_date',$start_date, ['class'=>'form-control start_date','required'=>'required','placeholder'=>'Start Date']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>End Date</label>
                                    {!! Form::text('end_date',$end_date, ['class'=>'form-control end_date','required'=>'required','placeholder'=>'End Date']) !!}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>Warehouse</label>
                                    {{ Form::select('warehouse_id[]',$warehouses, $warehouse_id, ['class' => 'form-control custom-select2','multiple'=>'multiple','style'=> 'width:100%','required']) }}
                                </div>
                            </div>
                            <div class="col-md-2 text-right">
                                <div class="form-group" style="margin-top: 25px; margin-bottom: 0;">
                                    <button type="submit" class="btn btn-info"><i class="fa fa-search"></i> Search</button>
                                </div>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>

                @include('admin.report.invoice_report_data')

            </div>
        </div>
    </div>
@endsection
@section('page_scripts')
    <script>
        $(document).ready(function() {
            $('.custom-select2').select2({
                placeholder: "Select Warehouse"
            });
        });

        $(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>
@endsection