@extends('adminlte::page')

@section('title', 'ORBI Dashboard')

@section('content_header')
    <h1>Website</h1>
    {{-- <small>Manage Website</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"></h3>
            <div class="card-tools">
                <a href="{{ route('website.create') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add Website
                </a>
            </div>
        </div>

        <div class="card-body">
            {{-- @if (session('success'))
                <h6 class = 'alert alert-success'>
                    {{ Session('success') }}
                </h6>
            @endif --}}
            <form method="POST" id="search-form" role="form">

                {{-- <div class="form-group">
                    <label for="search">Search</label>
                    <x-adminlte-input class="form-control" id="search_keyword" name="search_keyword"
                        placeholder="Enter Description" />

                </div> --}}

                @php
                    $config = [
                        'showDropdowns' => true,
                        'cancelButtonClasses' => 'btn-danger',
                        'locale' => ['format' => 'YYYY/MM/DD'],
                    ];
                @endphp

            </form>
            <table class="table table-bordered website-datatable">
                <thead>
                    <tr>
                        <th>User id</th>
                        <th>Subdomain</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        {{-- <th>Whatsapp Number</th> --}}
                        <th>DOB</th>
                        <th style="width: 250px;">Actions</th>

                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('js')

    <script type="text/javascript">
        $(function() {

            var dataTable = $('.website-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                'ajax': {
                    'url': "{{ route('website.index') }}",
                    'data': function(data) {
                        // Read values
                        // var search_keyword = $('#search_keyword').val();


                        // Append to data
                        // data.search_keyword = search_keyword;

                    }
                },
                columns: [
                    /*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
                    /*  {data: 'id', name: 'ID'},  */
                    {
                        data: 'user_id',
                        name: 'User id'
                    },

                    {
                        data: 'subdomain',
                        name: 'Subdomain'
                    },
                    {
                        data: 'name',
                        name: 'Name',
                    },
                    {
                        data: 'email',
                        name: 'Email',
                    },
                    {
                        data: 'phone_number',
                        name: 'Phone Number',
                    },
                    // {
                    //     data: 'whatsapp_number',
                    //     name: 'Whatsapp Number',
                    // },
                    {
                        data: 'dob',
                        name: 'DOB',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#search_keyword').keyup(function() {
                dataTable.draw();
            });

        });
    </script>
@stop