@extends('layouts.admin')
@section('header_style')
    <link href="{{asset('assets/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css')}}" rel="stylesheet"      type="text/css"/>
    <link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"      type="text/css"/>
    <style type="text/css">
        td {
            font-size: 14px !important;
        }
    </style>
@endsection
@section('content')
<div class="" style="min-height: 75vh; max-height: 75vh; height: 75vh; overflow: auto;">
 <div class="top-baar">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav nav-tabs">
                <li class="nav-item {{ Request::is('*billing/invoices/uninvoice*') ? '' : '' }}" >
                    <a class="nav-link "  href="{{ route('uninvoice.index') }}"><font style="font-size:15px;"><b>Uninvoiced</b></font></a>
                </li>
                <li class="nav-item {{ Request::is('*billing/invoices/invoiced*') ? 'active' : '' }}" style="background-color: #67AAB3;">
                    <a class="nav-link active" style="background-color: #A0C6CF;" href="{{ route('invoiced.index') }}"><font style="font-size:15px;"><b>Invoiced</b></font></a>
                </li>
                <li></li>
            </ul>
            </div>
        </nav>
</div>
<div class="page-content-body-wrapper no-padding">
    <div class="page-content-body no-padding">
        <div class="portlet light">
            <div class="portlet-body no-padding">
                <div class="tabbable-custom tabbable-parallel" style="overflow: visible;">
                    <div class ="tab-content no-padding">
                    <div class="tab-pane active" id="invoice">
                        <div class="table-container">
                            <table class="table table-striped table-hover" id ="datatable-billing-invoice" data-url="{{ route('getInvoiced') }}">
                                <thead>
                                    <tr role="row" class="heading">
                                        <th style="text-align:center;" class="text-center"><b> No</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Invoice no</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Invoice date</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Booking no</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Hotel</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Supplied by</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Handled by</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Cost</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Guest</b></th>
                                        <th style="text-align:center;" class="text-center"><b>Check-in</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Check-out</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Debtor</b></th>
                                        <th style="text-align:center;" class="text-center"><b> Status</b></th>
                                        <th style="text-align:center;" class="text-center"><b>Action</b></th>
                                    </tr>
                                    <tr role="row" class="filter">
                                        <td></td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-invno text-center" name="invno" placeholder="Invoice no">
                                        </td>
                                        <td>
                                            <input type="date" class="form-control form-filter filter-search input-sm filter-inv_date text-center" name="inv_date" placeholder="Invoice date">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-booking_no text-center" name="booking_no" placeholder="Booking no">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-hotel text-center" name="hotel" placeholder="Hotel">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-hotel text-center" name="supplied" placeholder="Supplied by">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-by text-center" name="by" placeholder="Handled By">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-amount text-center" name="amount" placeholder="Amount">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-guest text-center" name="guest" placeholder="Guest">
                                        </td>
                                        <td>
                                            <input type="date" class="form-control form-filter filter-search input-sm filter-checkin text-center" name="check_in" placeholder="Check-in">
                                        </td>
                                        <td>
                                            <input type="date" class="form-control form-filter filter-search input-sm filter-checkout text-center" name="check_out" placeholder="Check-out">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-filter filter-search input-sm filter-debtor text-center" name="debtor" placeholder="Debtor">
                                        </td>
                                        <td>
                                            <!-- <input type="text" class="form-control form-filter filter-search input-sm filter-status text-center" name="status" placeholder="Status">  -->
                                            <select class="form-control form-filter filter-search input-sm filter-status text-center" name="status" id="invoiceStatus">
                                                <option class="form-control" value="" disabled>Select status</option>
                                                <option class="form-control" value="true">Unchecked</option>
                                                <option class="form-control" value="Checked">Checked</option>
                                                <option class="form-control" value="Partially">Partially</option>
                                                <option class="form-control" value="Cancelled">Cancelled</option>
                                            </select>
                                        </td>
                                        <td class="text-center">
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
@endsection
@section('footer_script')
    <script src="{{asset('assets/scripts/datatable.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/datatables.min.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/jquery.validate.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/additional-methods.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/scripts/pages/invoice.js') }}" type="text/javascript"></script>
<script>

</script>

@endsection