@extends('layouts.app')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
    <div class="m-2">
        <h1 style="text-align: center;">Provider Management</h1>
        <div class="d-flex align-items-start">
            <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                {{-- tab buttons --}}
                <button class="nav-link active" id="v-pills-providers-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-providers" type="button" role="tab" aria-controls="v-pills-providers"
                    aria-selected="true">Providers</button>
                <button class="nav-link" id="v-pills-permissions-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-permissions" type="button" role="tab" aria-controls="v-pills-permissions"
                    aria-selected="true">Applications</button>
            </div>
            {{-- tab content --}}
            <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
                <div class="tab-pane fade show active" id="v-pills-providers" role="tabpanel"
                    aria-labelledby="v-pills-providers-tab">

                    <h2>Providers</h2>
                    <hr>
                    <div class="row">
                        <div class="col-md-10 table-responsive-sm mt-3" id="editorData">
                            <table class="table table-striped dt-responsive table-hover"
                                style="width: 100% !important;" id="providers_table">
                                <thead >
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Username
                                        </th>
                                        <th>
                                            Name
                                        </th>
                                        <th>
                                            Email
                                        </th>
                                        <th>
                                            Status
                                        </th>
                                        <th>
                                            Approval Date
                                        </th>
                                        <th>
                                            Services
                                        </th>
                                        <th class="no_sort">
                                            Options
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-2">
                            <h3 class="filter-header">Filter</h3>
                            <form name="search" id="searchProviders" action="{{ route('admin.providers.searchStatus') }}"
                                method="POST">
                                {{ csrf_field() }}
                                <strong> Status </strong>
                                <p>
                                    <select multiple="multiple" id="searchProvidersDropdown" name="status[]"
                                        class="form-control">
                                        <option value="Any Status" id="statusDropdown" name="statusDropdown"
                                            >Any Status</option>
                                        <option value="Approved" id="approved" name="approved"
                                            >Approved</option>
                                        <option value="Inactive" id="inactive" name="inactive"
                                            >Inactive</option>
                                        <option value="Blocked" id="blocked" name="blocked"
                                            >Blocked</option>
                                    </select>
                                </p>
                                <p>
                                    <button class="btn knowmad_btn_blue knowmad_btn width_fitContent" id="searchButton"
                                        type="submit">Search</button>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="v-pills-permissions" role="tabpanel"
                    aria-labelledby="v-pills-permissions-tab">
                    <h2>Application Status</h2>
                    <hr>
                    <div id="data">
                        <div class="row">
                            <div class="col-sm-6">
                                <a class="btn btn-primary" href="{{ route('admin.copyEditorPermissions') }}">Copy Editor
                                    Statuses to new table</a>
                            </div>
                        
                        </div>
                        <div class="row">
                            <div class="col-lg-10">
                                <div class="table-responsive" >
                                    {!! $dataTable->table([
                                        'id' => 'applicationsTable',
                                        'class' => 'table table-striped dt-responsive table-hover',
                                        'style' => 'width: 100%'
                                        ]) !!}
                                </div>
                             
                            </div>
                            <div class="col-lg-2">
                                <h3 class="filter-header">Filter</h3>
                                <form name="search" id="searchApps" action="#" method="POST">
                                    {{ csrf_field() }}
                                    <strong> Approval </strong>
                                    <p>
                                        <select multiple="multiple" id="searchAppsDropdown" name="approvalStatus[]"
                                            class="form-control">
                                            <option value="Any Status" id="any" name="statusDropdown"
                                                >Any Status</option>
                                            <option value="Approved" id="approved" name="approved"
                                                >Approved</option>
                                            <option value="Declined" id="Declined" name="Declined"
                                                >Declined</option>
                                            <option value="Pending" id="Pending" name="Pending"
                                                >Pending</option>
                                        </select>
                                    </p>
                                    <p>
                                        <button class="btn knowmad_btn_blue knowmad_btn width_fitContent mt-1" id="searchAppsButton"
                                            type="submit">Search</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    

                          
                        </div>

                    </div>
                
                </div>
                
            </div>


        </div>

    </div>
    <!--container-->
@endsection
@push('footer_js')
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>
    <script>
        $(function() {
            var oTable = $('#providers_table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                "aaSorting": [
                    [1, "asc"]
                ],
                ajax: {
                    url: '{!! route('ajax.get.providers') !!}',
                    data: function(d) {
                        d.status = $('#searchProvidersDropdown').val();
                    }
                },
                columns: [
                    {
                        data: 'provider_id',
                        name: 'provider_id',
                        searchable: false
                    },
                    {
                        data: 'username',
                        name: 'users.username'
                    },
                    {
                        data: 'full_name',
                        name: 'full_name',
                        searchable: false
                    },
                    {
                        data: 'email',
                        name: 'users.email'
                    },
                    {
                        data: 'status',
                        name: 'users.status'
                    },
                    {
                        data: 'approval_date',
                        name: 'users.approval_date'
                    },
                    {
                        data: 'services',
                        name: 'services',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('form[name="search"]').on('submit', function(e) {
                oTable.draw();
                e.preventDefault();
            });

            $('#searchApps').submit(function(e) {
                e.preventDefault();
                window.LaravelDataTables["applicationsTable"].draw();
            });

            $('#applicationsTable')
                .on('preXhr.dt', function(e, settings, data) {
                    console.log({e, settings, data});
                    data.approvalStatus = $('#searchAppsDropdown').val();
                                 
            });
         
            // var permissions_table = $('#permissions_table').DataTable({
            //     processing: true,
            //     serverSide: true,
            //     responsive: true,
            //     ajax: {
            //         url: '{!! route('ajax.get.providerspermissions') !!}',
            //         data: function(d) {
            //             // d.status = $('#searchProvidersDropdown').val();
            //         }
            //     },
            //     columns: [
            //         {
            //             data: 'provider_id',
            //             name: 'provider_id',
            //             searchable: false
            //         },
            //         {
            //             data: 'username',
            //             name: 'users.username'
            //         },
            //         {
            //             data: 'email',
            //             name: 'users.email'
            //         },
            //         {
            //             data: 'service',
            //             name: 'service',
            //             searchable: false
            //         },
            //         {
            //             data: 'status',
            //             name: 'status'
            //         },
            //         {
            //             data: 'approval',
            //             name: 'approval'
            //         },
            //         {
            //             data: 'action',
            //             name: 'action',
            //             orderable: false,
            //             searchable: false
            //         }
            //     ]
            // });

            // $('form[name="search"]').on('submit', function(e) {
            //     oTable.draw();
            //     e.preventDefault();
            // });

            // $('.delete-btn').on('click', function(e) {
            //     e.preventDefault();
            //     confirm('Are you sure you want to delete?');
            // })
        });
    </script>

    {!! $dataTable->scripts() !!}
@endpush