@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

<style type="text/css">
    section.bill-printing{
        background : #FFF;
        padding    : 5px 20px 10px 20px;
        height     : 85%;
    }

    .select2-container--default 
    .select2-selection--single 
    .select2-selection__clear {
        display: none;
    }      

    div.dataTables_filter input {
        font-size: 14px !important;        
    }    

    #t-01_filter{
        margin-top  : 10px; 
        margin-left : -10px;
    }

    div.bill-printing{
        margin-top: -10px;
    }    

    div.year,
    div.month,
    div.print{
        padding-left: 5px;
    }

    div.template,
    div.printable{
        display: none;
    }
</style>

@section('body')
<section class="bill-printing">

    <div class="row">
        <div class="col-xs-12">

            <div class="btn-group pull-right print">
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-print"></i>
                    &nbsp;
                    Print
                    &nbsp;
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="soa__printAll" data-target='all'>All</a></li>
                    <li><a href="#" id="soa__printSelected" data-target='sel'>Selected</a></li>
                </ul>
            </div>

            <div class="pull-right year">
                <select id                  = "soa__year" 
                        class               = "form-control select2 select2-hidden-accessible" 
                        data-placeholder    = "Year" 
                        style               = "width: 75px;"
                        aria-hidden         = "true">
                    <option></option>
                                            <option value="2025">
                            2025                            
                        </option>
                                            <option value="2024">
                            2024                            
                        </option>
                                            <option value="2023">
                            2023                            
                        </option>
                                            <option value="2022">
                            2022                            
                        </option>
                                            <option value="2021">
                            2021                            
                        </option>
                                            <option value="2020">
                            2020                            
                        </option>
                                            <option value="2019">
                            2019                            
                        </option>
                                            <option value="2018">
                            2018                            
                        </option>
                                            <option value="2017">
                            2017                            
                        </option>
                                            <option value="2016">
                            2016                            
                        </option>
                                            <option value="2015">
                            2015                            
                        </option>
                                            <option value="2014">
                            2014                            
                        </option>
                                            <option value="2013">
                            2013                            
                        </option>
                                            <option value="2012">
                            2012                            
                        </option>
                                            <option value="2011">
                            2011                            
                        </option>
                                            <option value="2010">
                            2010                            
                        </option>
                                            <option value="2009">
                            2009                            
                        </option>
                                            <option value="2008">
                            2008                            
                        </option>
                                            <option value="2007">
                            2007                            
                        </option>
                                            <option value="2006">
                            2006                            
                        </option>
                                            <option value="2005">
                            2005                            
                        </option>
                                            <option value="2004">
                            2004                            
                        </option>
                                            <option value="2003">
                            2003                            
                        </option>
                                            <option value="2002">
                            2002                            
                        </option>
                                            <option value="2001">
                            2001                            
                        </option>
                                            <option value="2000">
                            2000                            
                        </option>
                                        
                </select>            
            </div>        

            <div class="pull-right month"">
                <select id                  = "soa__month" 
                        class               = "form-control select2 select2-hidden-accessible" 
                        data-placeholder    = "Month" 
                        style               = "width: 100%;" 
                        aria-hidden         = "true">
                    <option></option>
                                                                    <option value="01">01</option>
                                                                    <option value="02">02</option>
                                                                    <option value="03">03</option>
                                                                    <option value="04">04</option>
                                                                    <option value="05">05</option>
                                                                    <option value="06">06</option>
                                                                    <option value="07">07</option>
                                                                    <option value="08">08</option>
                                                                    <option value="09">09</option>
                                                                    <option value="10">10</option>
                                                                    <option value="11">11</option>
                                                                    <option value="12">12</option>
                                    </select>            
            </div>                 

            <div class="pull-right book">
                <select id                  = "soa__book" 
                        class               = "form-control select2 select2-hidden-accessible" 
                        data-placeholder    = "Select Book" 
                        style               = "width: 300px;"
                        aria-hidden         = "true">
                    <option></option>
                </select>
            </div>      

            <!-- uncomment when updating bill nos. -->
<!--             <div class="pull-right" style="padding-right: 10px;">
                <button class="btn btn-primary" id="generate-bill-no">Generate Bill Number</button>
            </div> -->

            <h2 class="page-header">
                Bill Printing
            </h2>              
        </div>        
    </div>

    <div class="row">
        <div class="col-xs-12">
            @include('reports.soa._datatable')
        </div>
    </div>

    <div class="template">
        @include('reports.soa._template')
    </div>

    <div class="printable">
        @include('reports.soa._print')
    </div>

</section>
@endsection


@section('scripts')
<script src="{{ URL::asset('js/helper.js') }}"></script>
<script src="{{ URL::asset('js/elite.js') }}"></script>
<script src="{{ URL::asset('js/reports/bill-printing.js') }}"></script>
<script src="{{ URL::asset('js/jquery-print.js') }}"></script>
@endsection