@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
$title ?? '',
$subTitle ?? '',
isset($filters) ? $filters : [],
isset($advancedFilters) ? $advancedFilters : [],
)
)
@php($headingOptions = [
'<div class="search-field">
    <input type="text" class="form-control pr-45 module-search" placeholder="Search" value="'. request()->input('search_text') .'">
    '. (request()->has('search_text') && request()->input('search_text') ? '<i class="'. \Config::get('settings.icon_cross') .' search-clear-icon"></i>' : '<i class="'. \Config::get('settings.icon_search') . '"></i>') .'
</div>',
'<a href="' . route($routePrefix.'.create', ['type' => 'category']) . '" class="'. \Config::get('view.buttons.primary') .' show-modal"><i class="'. \Config::get('settings.icon_add') .'"></i> Add New Category</a>',
'<a href="' . route($routePrefix.'.create', ['type' => 'status']) . '" class="'. \Config::get('view.buttons.primary') .' show-modal"><i class="'. \Config::get('settings.icon_add') .'"></i> Add New Status</a>'
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div>
    <div class="col-12 mt-4">
        <div class="project-box">
            <x-heading-sec :module="$module" :options="$headingOptions" />

            <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">
                        <a href="{{route($routePrefix.'.index' )}}" >
                            <button class="nav-link {{$selectedGroup == 0 ? 'active' : ''}} waves-effect">Categories Across All Groups</button></a>
                    </li>

                    @if(isset($masterGroups) && count($masterGroups) > 0)
                    @foreach($masterGroups as $group)
                    <li class="nav-item" role="presentation">
                        <a href="{{route($routePrefix.'.index', ['gr' => $group->id])}}" >
                            <button class="nav-link {{$selectedGroup == $group->id ? 'active' : ''}} waves-effect">{{ $group->title }}</button>
                        </a>
                    </li>
                    @endforeach
                    @endif
                </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>Current Status Categories</h3>
                                </div>

                                <div class="project-box ">
                                    <!-- accordian-->
                                    <div class="accordion project-accordian" id="accordionExample">

                                        @if(isset($data) && count($data) > 0)
                                        @foreach($data as $val)
                                        <div class="accordion-item">
                                            <div class="accordion-header" id="headingOne__{{ $val->id }}">
                                                <div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne__{{ $val->id }}" aria-expanded="false" aria-controls="collapseOne__{{ $val->id }}">
                                                    <div class="acc-text">
                                                        <div class="acc-text-icon">
                                                            <a href="javascript:void(0);" class="toggle-category" data-target="#category-{{ $val->id }}">
                                                                <i class="bx bx-chevron-down" style="font-size: 26px; margin-right: 5px;"></i>
                                                            </a>
                                                            <span style="border: 1px solid gray; background: {{ $val->color_code }}; border-radius: 50%; width: 20px; height: 20px; display: inline-block;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                        </div>
                                                        <div class="acc-main-txt">
                                                            <h4>{{ $val->title }}</h4>
                                                            <span style="font-weight: 300;"> Statuses in category: <b>{{ (isset($val->children) && count($val->children) > 0) ? count($val->children) : 0 }}</b></span>
                                                        </div>
                                                    </div>
                                                    <div class="acc-btn">
                                                        <div class="d-flex gap-2 justify-content-end">
                                                            @if($permission['destroy'])
                                                            <a href="javascript:void(0);" class="action-btn waves-effect" data-toggle="tooltip" title="Delete"
                                                                data-confirm="Are You Sure? | You want to delete this category and all its statuses?"
                                                                data-confirm-yes="event.preventDefault(); document.getElementById('destroy-form-{{ $val->id }}').submit();">
                                                                <i class="bx bx-trash"></i>
                                                                {!! html()->form('DELETE', route($routePrefix . '.destroy', $val->id))->attributes([
                                                                'style' => 'display:inline',
                                                                'id' => 'destroy-form-' . $val->id,
                                                                ])->open() !!}
                                                                {!! html()->hidden('id', $val->id) !!}
                                                                {!! html()->form()->close() !!}
                                                            </a>
                                                            @endif
                                                            @if($permission['edit'])
                                                            <a href="{{ route($routePrefix.'.edit', ['lead_status' => $val->id, 'type' => 'category']) }}" data-url="{{ route($routePrefix.'.edit', ['lead_status' => $val->id, 'type' => 'category']) }}" class="action-btn show-modal"><i class="bx bx-pencil"></i></a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @if(isset($val->children) && count($val->children) > 0)
                                            <div id="collapseOne__{{ $val->id }}" class="accordion-collapse collapse pb-3" aria-labelledby="headingOne__{{ $val->id }}" data-bs-parent="#accordionExample">

                                                @foreach($val->children as $child)

                                                <div class="accordion-body py-0 ">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div style="border: 1px solid gray; background: {{ $child->color_code }}; border-radius: 50%; width: 15px; height: 15px; "> </div>
                                                        {{ $child->title }}
                                                    </div>
                                                    <div class="d-flex gap-2 justify-content-end">
                                                        @if($permission['destroy'])
                                                        <a href="javascript:void(0);" class="action-btn waves-effect" data-toggle="tooltip" title="Delete"
                                                            data-confirm="Are You Sure? | You want to delete this status?"
                                                            data-confirm-yes="event.preventDefault(); document.getElementById('destroy-child-form-{{ $child->id }}').submit();">
                                                            <i class="bx bx-trash"></i>
                                                            {!! html()->form('DELETE', route($routePrefix . '.destroy', $child->id))->attributes([
                                                            'style' => 'display:inline',
                                                            'id' => 'destroy-child-form-' . $child->id,
                                                            ])->open() !!}
                                                            {!! html()->hidden('id', $child->id) !!}
                                                            {!! html()->form()->close() !!}
                                                        </a>
                                                        @endif
                                                        @if($permission['edit'])
                                                        <a href="{{ route($routePrefix.'.edit', ['lead_status' => $child->id, 'type' => 'status']) }}" data-url="{{ route($routePrefix.'.edit', ['lead_status' => $child->id, 'type' => 'status']) }}" class="action-btn show-modal"><i class="bx bx-pencil"></i></a>

                                                        <a href="{{ route($routePrefix.'.triggers', $child->id) }}" data-url="{{ route($routePrefix.'.triggers', $child->id) }}" target="_blank" class="action-btn" title="Configure Status Triggers"><i class="bx bx-cog"></i></a>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            @endif
                                        </div>
                                        @endforeach
                                        @else
                                        <div class="accordion-item">
                                            <div class="accordion-header" id="headingOne">
                                                <div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                    <div class="acc-text">
                                                        <h4>No categories found.</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                    </div>





                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
        @endsection
        @push('page_script')
        <script src="{{ asset('assets/js/common.js') }}"></script>
        @endpush