@extends('admin.master')
@section('title','Due Invoice Report')
@section('page_css')
    <style>
        /* Forcefully hide the preloader */
        .preloader, .loader, #loader, .spinner { display: none !important; }
        
        .panel-body { padding: 15px !important; } 
        
        /* Select2 Single Dropdown Design Fix */
        .select2-container .select2-selection--single {
            height: 35px !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 35px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 33px !important;
        }

        /* Select2 Multiple Dropdown Design Fix */
        .select2-container .select2-selection--multiple {
            min-height: 35px !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
        }
        .select2-search__field {
            margin-top: 5px !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-success">
                    <div class="panel-heading hidden-print" style="color: white; font-weight: bold;">
                        <i class="fa fa-filter"></i> FILTER DUE INVOICES
                    </div>
                    <div class="panel-body hidden-print">
                        {{ Form::open(array('route' => 'reports.due_invoice_report','enctype'=>'multipart/form-data', 'method'=>'POST')) }}
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>Start Date</label>
                                    {!! Form::text('start_date',$start_date, ['class'=>'form-control start_date','placeholder'=>'Start Date']) !!}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>End Date</label>
                                    {!! Form::text('end_date',$end_date, ['class'=>'form-control end_date','placeholder'=>'End Date']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>Warehouse</label>
                                    {{ Form::select('warehouse_id[]', $warehouses, $warehouse_id, ['class' => 'form-control custom-warehouse-select', 'multiple'=>'multiple', 'style'=> 'width:100%']) }}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label>Customer</label>
                                    {{ Form::select('customer_id', $customers, $customer_id, ['class' => 'form-control custom-customer-select', 'placeholder' => 'All Customers', 'style'=> 'width:100%']) }}
                                </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.due_invoice_report_data')

            </div>
        </div>
    </div>
@endsection
@section('page_scripts')
    <script>
        $(document).ready(function() {
            // Initialize with the new unique classes
            $('.custom-customer-select').select2();
            $('.custom-warehouse-select').select2({
                placeholder: "Select Warehouse",
                allowClear: true
            }); 
        });

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