@extends('admin.layout.template')
@section('title', 'Projects')
@section('content')

<div class="page-content">
    <div class="container-xxl">

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Project List - (Total: {{count($projects)}})</h4>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label>From Date</label>
                        <input type="date" id="filter_from" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label>To Date</label>
                        <input type="date" id="filter_to" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label>Created By Role</label>
                        <select id="filter_role" class="form-select">
                            <option value="">All Roles</option>
                            @foreach(App\Models\Role::where('name','!=','Super Admin')->get() as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button class="btn btn-primary" id="filter_btn">Filter</button>
                        <button class="btn btn-secondary ms-2" id="reset_btn">Reset</button>
                    </div>
                </div>
                <table class="table table-hover" id="projectsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Project Number</th>
                             <th>Status</th>
                            <th>Created By</th>
                            <th>Name</th>
                            <th>Customer</th>
                            <th>Expected Completion</th>
                             
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>

            </div>
        </div>

    </div>
</div>

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

        let table = $('#projectsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('projects.data') }}",
                data: function(d) {
                    d.from = $('#filter_from').val();
                    d.to = $('#filter_to').val();
                    d.role_id = $('#filter_role').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'project_number',
                    name: 'project_number'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'created_by',
                    name: 'created_by'
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'customer_name',
                    name: 'customer_name'
                },
                {
                    data: 'expected_completion_date',
                    name: 'expected_completion_date'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ]
        });
        $('#filter_btn').click(function() {
            table.draw();
        });

        // Reset button
        $('#reset_btn').click(function() {
            $('#filter_from').val('');
            $('#filter_to').val('');
            $('#filter_role').val('');
            table.draw();
        });

    });
</script>


@endsection