@extends('master')

@section('title')
    <title>Resellers</title>
@endsection

@section('content')
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Surveyor</h1>
    <br>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-lg-6">
                    <span class="font-weight-bold text-primary">Surveyor Listing</span>
                </div>
                @if(auth()->user()->can('create_surveyor'))
                    <div class="col-lg-6">
                        <a href="{{ url('/admin/surveyors/create') }}" class="btn btn-sm btn-primary float-right">Add
                            New</a>
                    </div>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <form method="POST" id="search-form" role="form">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="name">Name</label>
                            <input type="text" class="form-control mb-2" id="name" name="name" placeholder="Search Name">
                        </div>
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="team">Team</label>
                            <input type="text" class="form-control mb-2" id="team" name="team" placeholder="Search Team">
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary mt-4 mb-2">Search</button>
                        </div>
                    </div>
                </form>
                <br>
                <table class="table table-bordered" id="surveyor_list" wwidth="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Team</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Team</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let surveyorTable = $('#surveyor_list').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: '{{ url('/admin/surveyors/index_data')}}',
                type: "POST",
                data: function (d) {
                    //form request data
                    d.name = $('input[name=name]').val();
                    d.team = $('input[name=team]').val();
                }
            },
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'username', name: 'username'},
                {data: 'team', name: 'team'},
                {data: 'status', name: 'status',
                    render: function (data, type, row) {
                        //render function to customize value styling
                        let statusText = '<span style="color:green">Active</span>';
                        if (data == '0') {
                            statusText = '<span style="color:red">Inactive</span>';
                        }
                        return statusText;
                    }
                },
                {
                    data: 'id', name: 'action_id', orderable: false, searchable: false,
                    render: function (data, type, row) {
                        //render function to customize action button
                        let UpdateUrl = "{{ url('/admin/surveyors') }}/" + data + "/edit";
                        let btnTxt = "";
                        @can('update_surveyor')
                         btnTxt += '<a href="'+UpdateUrl+'" class="btn btn-sm btn-primary">Edit </a>';
                        @endcan
                        return btnTxt;
                    }
                },
            ]
        });

        //trigger ajax call and draw
        $('#search-form').on('submit', function (e) {
            surveyorTable.draw();
            e.preventDefault();
        });
    </script>
@endsection