@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div>
    <div class="col-12 mt-4">
        <div class="back-section">
            <button type="button" class="btn back-btn waves-effect"><i class="'. \Config::get('settings.icon_back') .'"></i> Back to Administration </button>
        </div>
        <div class="project-box">
            <div class="inner-tab ">
                <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">Ticket Types</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">Ticket Categories</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane"
                            type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Ticket Outcomes</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="closing-tab" data-bs-toggle="tab" data-bs-target="#closing-tab-pane"
                            type="button" role="tab" aria-controls="closing-tab-pane" aria-selected="false">Settings</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="d-flex align-items-center justify-content-between mb-4 mobile-serch">
                                <div class="search-field">
                                    <input type="text" class="form-control pr-45" placeholder="Search">
                                    <i class="bx bx-search"></i>
                                </div>
                                <a href="#" class="green-btn-inner waves-effect show-modal-lg">Export <i class="mdi mdi-chevron-down"></i></a>
                        </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"></th>
                                        <th>Ticket Type</th>
                                        <th>Ticket Category</th>
                                        <th>Total tickets</th>
                                        <th>Days of Resolve</th>
                                        <th>Business days only</th>
                                        <th>Active</th>
                                        <th class="text-center">Action</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>Account Closures or Re-Opening Request</td>
                                        <td>-</td>
                                        <td>0</td>
                                        <td>-</td>
                                        <td class="cross-iconn"><i class="mdi mdi-close"></i></td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></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></td>
                                    </tr>
                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>IRIS Enrollment (Auto)</td>
                                        <td>-</td>
                                        <td>0</td>
                                        <td>-</td>
                                        <td class="cross-iconn"><i class="mdi mdi-close"></i></td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></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></td>
                                    </tr>
                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>Address Change</td>
                                        <td>-</td>
                                        <td>0</td>
                                        <td>-</td>
                                        <td class="cross-iconn"><i class="mdi mdi-close"></i></td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></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></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="d-flex align-items-center justify-content-between mb-4 mobile-serch">
                                <div class="search-field">
                                    <input type="text" class="form-control pr-45" placeholder="Search">
                                    <i class="bx bx-search"></i>
                                </div>
                                <a href="#" class="green-btn-inner waves-effect show-modal-lg"><i class="mdi mdi-plus"></i> Add ticket Category</a>
                        </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"></th>
                                        <th>Category</th>
                                        <th>Outcomes</th>
                                        <th>Total tickets Types</th>
                                        <th>Active</th>
                                        <th class="text-right">Action</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>ACH Reject</td>
                                        <td>-</td>
                                        <td>3</td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></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></td>
                                    </tr>
                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>Cancellations</td>
                                        <td>-</td>
                                        <td>3</td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></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></td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
            <div class="row">
                <div class="col-12 ">
                    <div class="d-flex align-items-center justify-content-between mb-4 mobile-serch">
                                <div class="search-field">
                                    <input type="text" class="form-control pr-45" placeholder="Search">
                                    <i class="bx bx-search"></i>
                                </div>
                                <a href="#" class="green-btn-inner waves-effect show-modal-lg">Export <i class="mdi mdi-chevron-down"></i></a>
                        </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"></th>
                                        <th>Outcome</th>
                                        <th>Categories</th>
                                        <th>Count</th>
                                        <th class="w-5">Active</th>
                                        <th class="text-center">Action</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></td>
                                        <td>N/A</td>
                                        <td>-</td>
                                        <td>3</td>
                                        <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></td>
                                        <td class="d-flex gap-2 justify-content-center"><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></td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="tab-pane fade" id="closing-tab-pane" role="tabpanel" aria-labelledby="closing-tab" tabindex="0">
            <div class="row">
                <div class=" col-12 ">
                    <div class="project-box resp-50">
                       <div class="heading-btn-sec flex-column align-items-start gap-1">
                        <h3>Assigned Users Limit</h3>
                        <p>Set the limit for how many users can be assigned to a ticket. Maximum is 20 users.</p>
                       </div>
                       <div class="project-form">
                            <label>Groups</label>
                                <select class="form-select form-control" aria-label="Default select example">
                                    <option class="select-op">All Groups</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection