@extends('adminlte::page')

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

@section('content_header')
    <h1>Website Services</h1>
    {{-- <small>Manage Website Services</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.service.add', ['id' => $website_id]) }}" class="btn btn-dark"><i
                        class="fas fa-plus"></i> Add Website
                    Services</a>
            </div>
        </div>

        <div class="card-body">
            <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 Name" />
                </div>
            </form>
            <table class="table table-bordered web_service-datatable">
                <thead>
                    <tr>
                        <th>Website</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        $(function() {
            var dataTable = $('.web_service-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                ajax: {
                    url: "{{ route('website.services', $website_id ?? '') }}",
                    data: function(data) {
                        data.search_keyword = $('#search_keyword').val();
                    }
                },
                columns: [{
                        data: 'website',
                        name: 'Website'
                    },
                    {
                        data: 'name',
                        name: 'Name'
                    },
                    {
                        data: 'description',
                        name: 'Description'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#search_keyword').keyup(function() {
                dataTable.draw();
            });
        });
    </script>
@stop