@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
    <div class="col-12 ">
        <div class="project-box">
                       <div class="heading-btn-sec">
                            <h3>Documents</h3>
                            <div class="heading-btn">
                                <button type="button" class="green-btn-inner waves-effect"><i class="bx bx-plus"></i> Add New Lebel</button>
                            </div>
                        </div>
            
             <div class="inner-tab mt-4">

                <ul class="nav nav-tabs project-tab mb-30" id="myTab" role="tablist">

                    <li class="nav-item" role="presentation">

                        <button class="nav-link active waves-effect" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"

                            type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Document Management</button>

                    </li>

                    <li class="nav-item" role="presentation">

                        <button class="nav-link waves-effect" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"

                            type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Labels</button>

                    </li>
                </ul>



                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"

                    tabindex="0">

                    <div class="row">

                        <div class="col-12 ">

                           <div class="heading-btn-sec align-items-start gap-2">
                                <div>
                                <h3 class="mb-4">Instructions:</h3>
                                <ul class="mb-4">
                                    <li>To Add a new document label, simply click on "Add New Label"</li>
                                    <li>To Edit the name of a label, click on "Edit"</li>
                                    <li>To Edit Permissions for upload and download, click "Permissions</li>
                                    <li>To Delete a label, click on "Delete". You will be presented with a list of documents of that label to change their assigned label in case it isn't empty.</li>
                                </ul>
                                </div>
                                <div><a href="#" class="black-link-txt">Need Help?</a></div>
                            </div>
                            <div class="heading-btn-sec align-items-start gap-2">
                                <h3 >Document Management :</h3>
                            </div>
                            <div class="project-box ">
                            <div class="table-responsive project-table no-border">

                            <table id="datatable" class="table mb-0 dt-responsive nowrap">

                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>MPA</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td><b>Number of Documents :</b> 20 &nbsp;&nbsp; | &nbsp;&nbsp; <b>System Use:</b> TurboApp <br> <b>TurboApp Processors: </b> Fiserv First Data Omaha, Fiserv First Data Wholesale, Fiserv First Data North, TSYS, TSYS - ELAPP, Paysafe, FIS Worldpay, Priority Payments</td>
                                        <td class="d-flex gap-2 justify-content-end"><button type="button" class="action-btn"><i class="bx bx-trash"></i></button><button type="button" class="action-btn"><i class="bx bx-pencil"></i></button><button type="button" class="action-btn"><i class="bx bx-cog"></i></button></td>
                                    </tr>
                                    
                                </tbody>
                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>Merchant Statement</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td><b>Number of Documents :</b> 20 &nbsp;&nbsp; | &nbsp;&nbsp; <b>System Use:</b> Fundomate, TurboApp <br> <b>TurboApp Processors: </b> Fiserv First Data Omaha, Fiserv First Data Wholesale, Fiserv First Data North, Paysafe, Priority Payments</td>
                                        <td class="d-flex gap-2 justify-content-end"><button type="button" class="action-btn"><i class="bx bx-trash"></i></button><button type="button" class="action-btn"><i class="bx bx-pencil"></i></button><button type="button" class="action-btn"><i class="bx bx-cog"></i></button></td>
                                    </tr>
                                    
                                </tbody>

                            </table>

                        </div>
                        </div>

                        </div>

                </div>

                    </div>



                    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">

                        <div class="row">

                        <div class="col-12 ">

                           <div class="heading-btn-sec align-items-start gap-2">
                                <div>
                                <h3 class="mb-4">Instructions:</h3>
                                <ul class="mb-4">
                                    <li>To Add a new document label, simply click on "Add New Label"</li>
                                    <li>To Edit the name of a label, click on "Edit"</li>
                                    <li>To Edit Permissions for upload and download, click "Permissions</li>
                                    <li>To Delete a label, click on "Delete". You will be presented with a list of documents of that label to change their assigned label in case it isn't empty.</li>
                                </ul>
                                </div>
                                <div><a href="#" class="black-link-txt">Need Help?</a></div>
                            </div>
                            <div class="heading-btn-sec align-items-start gap-2">
                                <h3 >Current Labels:</h3>
                            </div>
                            <div class="project-box">
                            <div class="table-responsive project-table no-border">

                            <table id="datatable" class="table mb-0 dt-responsive nowrap">

                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>MPA</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td><b>Number of Documents :</b> 20 &nbsp;&nbsp; | &nbsp;&nbsp; <b>System Use:</b> TurboApp <br> <b>TurboApp Processors: </b> Fiserv First Data Omaha, Fiserv First Data Wholesale, Fiserv First Data North, TSYS, TSYS - ELAPP, Paysafe, FIS Worldpay, Priority Payments</td>
                                        <td class="d-flex gap-2 justify-content-end"><button type="button" class="action-btn"><i class="bx bx-trash"></i></button><button type="button" class="action-btn"><i class="bx bx-pencil"></i></button><button type="button" class="action-btn"><i class="bx bx-cog"></i></button></td>
                                    </tr>
                                    
                                </tbody>
                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>Merchant Statement</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td><b>Number of Documents :</b> 20 &nbsp;&nbsp; | &nbsp;&nbsp; <b>System Use:</b> Fundomate, TurboApp <br> <b>TurboApp Processors: </b> Fiserv First Data Omaha, Fiserv First Data Wholesale, Fiserv First Data North, Paysafe, Priority Payments</td>
                                        <td class="d-flex gap-2 justify-content-end"><button type="button" class="action-btn"><i class="bx bx-trash"></i></button><button type="button" class="action-btn"><i class="bx bx-pencil"></i></button><button type="button" class="action-btn"><i class="bx bx-cog"></i></button></td>
                                    </tr>
                                    
                                </tbody>

                            </table>

                        </div>
                        </div>

                        </div>

                </div>

                </div>

            </div>

        </div>
    </div>
@endsection
@push('page_script')
@endpush