@extends('layouts.app')

@section('content')

    <link rel="stylesheet" type="text/css"
          href="{{asset('modern/app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('modern/app-assets/vendors/css/tables/extensions/responsive.dataTables.min.css')}}">
    <style>

    </style>

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

            <div class="card">
                <div class="card-header ">
                    <h4 class="card-title" id="heading-buttons1">Manage Invoice</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <a href="{{url('create_invoice')}}"
                           class="btn btn-info btn-min-width btn-glow btn-cons pull-right">Add</a>

                    </div>
                </div>

                <div class="card-content">
                    <div class="card-body user-list">
                        <div class="table-responsive">

                            <form method="POST" id="search-form" role="form">

                            <div class="row" style="border: 1px solid #33333330;padding: 10px;">
                                <div class="col-md-2">
                                    <label >BFN</label>
                                    <input type="text" class="form-control" name="bfn_number"
                                           placeholder="Booking file number" autocomplete="off">
                                </div>

                                <div class="col-md-2">
                                    <label >Tour Name</label>
                                    <input type="text" class="form-control" name="tour_name"
                                           placeholder="Tour name" autocomplete="off">
                                </div>
                                <div class="col-md-2">
                                    <label >Email</label>
                                    <input type="text" class="form-control" name="email"
                                           placeholder="Email address" autocomplete="off">
                                </div>
                                <div class="col-md-2">
                                    <label for="email">Is paid</label>
                                    <select class="form-control full-w"
                                            name="is_paid" id="is_paid">
                                        <option value="3">All</option>
                                        <option value="1">paid</option>
                                        <option value="0">Not paid</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button style="margin-top: 30px;" type="submit" class="btn btn-info">Search</button>
                                </div>
                            </div>

                               <br>

                                <table class="table table-hover table-bordered demo-table-search table555-responsive-block"
                                       id="posts-table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Tour Name</th>
                                        <th>BFN</th>
                                        <th>Email</th>
                                        <th>Amount</th>
                                        <th>Is Send</th>
                                        <th>Is Paid</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection

@section('script')

    <script src="{{ asset('modern/app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
    {{--<script src="{{ asset('assets/js/datatables.js')}}" type="text/javascript"></script>--}}

    <script>
        $(document).ready(function () {
            var oTable = $('#posts-table').DataTable({
//                dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>" +
//                "<'row'<'col-xs-12't>>" +
//                "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
                dom: "<'row'<'col-xs-12'>r>" +
                "<'row'<'col-xs-12't>>" +
                "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
                processing: true,
                serverSide: true,
                ajax: {
                    url: '