@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')}}">

    <link rel="stylesheet" type="text/css"

          href="{{ asset('modern/app-assets/vendors/css/pickers/daterange/daterangepicker.css')}}">

    <link rel="stylesheet" type="text/css"

          href="{{ asset('modern/app-assets/vendors/css/pickers/pickadate/pickadate.css')}}">



    <link rel="stylesheet" type="text/css" href="{{ asset('modern/app-assets/css/core/colors/palette-gradient.css')}}">

    <link rel="stylesheet" type="text/css"
          href="{{ asset('modern/app-assets/css/plugins/pickers/daterange/daterange.css')}}">

    <link rel="stylesheet" type="text/css"
          href="{{asset('modern/app-assets/vendors/css/tables/extensions/buttons.dataTables.min.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('modern/app-assets/vendors/css/tables/datatable/buttons.bootstrap4.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">Invoice List</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                    </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-3">
                                        <label>BFN</label>
                                        <input type="text" class="form-control" name="bfn_number"
                                               placeholder="Booking file number" autocomplete="off">
                                    </div>

                                    <div class="col-md-3">
                                        <label>Tour Name</label>
                                        <input type="text" class="form-control" name="tour_name"
                                               placeholder="Tour name" autocomplete="off">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Email</label>
                                        <input type="text" class="form-control" name="email"
                                               placeholder="Email address" autocomplete="off">
                                    </div>
                                    <div class="col-md-3">
                                        <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-3">
                                        <label>From</label>
                                        <input type="text" class="form-control pickadate" name="from_date" id="from_date">
                                    </div>
                                    <div class="col-md-3">
                                        <label>To</label>
                                        <input type="text" class="form-control pickadate" name="to_date" id="to_date">
                                    </div>
                                    <div class="col-md-6">
                                        <button style="margin-top: 30px;" type="submit" class="btn btn-info">Search</button>
                                        <a href="{{url('invoice_list')}}" style="margin-top: 30px;" class="btn btn-info"><i style="font-size: 17px !important;" class="la la-refresh"></i></a>
                                    </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>Invoice Date</th>
                                        <th>Transaction Id</th>
                                        <th>Is Send</th>
                                        <th>Is Paid</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 src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.js')}}"></script>
    <script src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.date.js')}}"></script>
    <script src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.time.js')}}"></script>

    <script src="{{ asset('plugins/dt/dataTables.buttons.min.js')}}"></script>
    <script src="{{ asset('plugins/dt/buttons.print.min.js')}}"></script>

    <script>
        $(document).ready(function () {

            $('.pickadate').pickadate({

                // Escape any 'rule' characters with an exclamation mark (!).

                format: 'yyyy-mm-dd',

                //formatSubmit: 'yyyy-mm-dd',

                selectYears: 8,

                max: ['2025','Apr','Sun']

            });

            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>>>",
                dom: 'Bfrtip',
                processing: true,
                serverSide: true,
                paging: false,
                buttons: [
                    {
                        extend: 'print',
                        //messageTop: 'Order number - ' + $('#order_number').val() + ' contains ' + $('#item_count').val() + ' items.',
                        title: 'Invoice Summery Report',
                        customize: function (win) {
                            $(win.document.body)
                                .css('font-size', '10pt')
//                                .prepend(
//                                    '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
//                                );

                            $(win.document.body).find('table')
                                .addClass('compact')
                                .addClass('display')
                                .css('font-size', 'inherit');


                        }
                    }
                ],
                ajax: {
                    url: '