@extends('adminlte::page')

@section('title', 'Website Enquiry')

@section('content')
<style>


    .dataTables_length{
        display: inline-flex;
        width:55%;
    }

    .dataTables_filter{
        display: inline-flex;
        width:25%;
    }
    .dt-buttons {
        display: inline-flex;
        width:20%;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Website Enquiry</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Website Enquiry</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header px-1">
                        <div class="col-md-12">
                            <div class="align-items-center">
                                Website Enquiry
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">


                            <div class="row">
                                <div class="form-group mb-2 row p-2 col-md-12">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control float-right" name="datetimes" id="datetimes">
                                    </div>
                                    <!-- /.input group -->
                                </div>
                                <div class="table-responsive">
                                    <table id="analytics" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Business Name</th>
                                                <th>Business Owner</th>
                                                <th>Contact No</th>
                                                <th>Business Email</th>
                                                <th>User</th>
                                                <th>Business Type</th>
                                                <th>Business Description</th>
                                               
                                                <th>Created At</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')

    <script>

            var myChart = '';
            let url = '{{ route("want-website.list") }}';
            var startDate = '';
            var endDate = '';
            var table = '';
            $(document).ready(function() {

                $('input[name="datetimes"]').daterangepicker({
                    startDate: moment().startOf('day').subtract(360, 'day'),
                    endDate: moment().startOf('day'),
                    locale: {
                        format: 'Y/M/DD hh:mm A'
                    },
                    maxDate: moment(),
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'Quarterly': [moment().subtract(3, 'month').startOf('month'),moment().endOf('month')],
                    },
                });
                renderDataTable();
            });

            function renderDataTable()
            {
                table =  $('#analytics').DataTable({
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    dom :"lfBtipr",
                    ajax: {
                        url : url,
                        type: 'POST',
                        data : function(d) {
                            return $.extend( {}, d, {
                                "_token" : "{{ csrf_token() }}",
                                "date_range" : $("#datetimes").val()
                            });
                        }
                    },
                    buttons: [
                        {
                            extend: 'pdf',
                            title: 'Website Enquiry',
                            customize : function(doc){
                                doc.content[1].table.widths = '16.66%',
                                doc.styles.tableBodyEven.alignment = 'center',
                                doc.styles.tableBodyOdd.alignment = 'center'
                            },
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5],
                                pageOrientation: 'landscape',
                            }
                        },
                        {
                            extend: 'excel',
                            title: 'User List',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5]
                            }

                        }
                    ],
                    columns: [
                        {data: 'first_name', name: 'first_name'},
                        {data: 'last_name', name: 'last_name'},
                        {data: 'business_name', name: 'business_name'},
                        {data: 'business_owner', name: 'business_owner'},
                        {data: 'contact_no', name: 'contact_no'},
                        {data: 'business_email', name: 'business_email'},
                        {data: 'user.full_name', name: 'user.full_name'},
                        {data: 'business_type', name: 'business_type'},
                        {data: 'business_description', name: 'business_description'},
                        {data: 'created_at', name: 'created_at'},

                    ]
                });
            }

            $('input[name="datetimes"]').on('apply.daterangepicker', function(ev, picker) {
                table.draw();
         });
    </script>
@endsection