@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="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="heading-btn-sec">
                            <h3>Branding</h3>
                            <div class="heading-btn">
                                <button type="button" class="green-btn-inner waves-effect"><i class="bx bx-plus"></i>Assign random colors</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">Calendar Colors</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">Logos & Domains</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">Site CSS</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"><h3>User Colors</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>User</th>

                                            <th>Color</th>

                                            <th class="w-5 text-end">Actions</th>

                                        </tr>



                                    </thead>



                                    <tbody>



                                        <tr>

                                            <td>Taufiq Mithani</td>

                                            <td >rgb(22, 196, 192)</td>

                                            <td class="w-5 text-end"><button type="button" class="action-btn"><i class="bx bx-wrench"></i></button></td>

                                        </tr>
                                        <tr>

                                            <td>Aaron Ruppel</td>

                                            <td >rgb(32, 169, 58)</td>

                                            <td class="w-5 text-end"><button type="button" class="action-btn"><i class="bx bx-wrench"></i></button></td>

                                        </tr>
                                       <tr>

                                            <td>Adam Goldstone </td>

                                            <td >rgb(247, 172, 81)</td>

                                            <td class="w-5 text-end"><button type="button" class="action-btn"><i class="bx bx-wrench"></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 flex-column align-items-start gap-2"><h3>Instructions :</h3>
                                <p class="mb-0">Add your company's logo to show at the top of all pages in the CRM.
                                    You can also use custom domains to access the CRM. To learn more, go to: Domain Setup Guide</p>
                            </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>Site Title</th>
                                            <th>Domain</th>
                                            <th>Site Logo</th>
                                            <th>New UI Logo</th>
                                            <th>Icon</th>
                                            <th class="text-end">Actions</th>
                                        </tr>

                                    </thead>



                                    <tbody>



                                        <tr>

                                            <td>Hubwallet</td>

                                            <td >hubwallet.iriscrm.com</td>

                                            <td ><img src="{{ asset('img/table-logo.png') }}" ></td>
                                            <td ><img src="{{ asset('img/table-logo.png') }}" ></td>
                                            <td ><img src="{{ asset('img/table-logo-2.png') }}" ></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="heading-btn-sec">
                                <p class="mb-0">This page gives you the ability to override your site CSS.<br> <b>Note:</b> This feature is for advanced users only</p>
                            </div>

                                <textarea type="text" class="form-control" rows="8"></textarea>
                        <div class="d-flex align-items-center gap-2 mt-4">
                            <button type="button" class="green-btn-inner waves-effect">Save Changes</button>
                            <button type="button" class="black-btn-inner waves-effect">Validate CSS</button>
                        </div>
                    </div>

                </div>

            </div>


            <nav aria-label="Page navigation example " class="mt-3 pagination-two">
                            <span>Showing 0 to 0 of 0 entries</span>
                            <ul>
                                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            </ul>
                        </nav>
        </div>
    </div>
@endsection
@push('page_script')
@endpush