@php($headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
    $title ?? '',
    $subTitle ?? '',
    [],
    []
))
@php($mainHeadingOptions = [
    '<a href="'. route('merchant-helpdesk-tickets.create') .'" class="'. \Config::get('view.buttons.primary') .'"><i class="'. \Config::get('settings.icon_add') .'" ></i> Add New Ticket</a>'
])
@php($activeTab = $activeTab ?? 'my-tickets')
@php($canViewOtherTickets = $canViewOtherTickets ?? false)
@extends('admin.layouts.layout', $headerOption)
@section('content')

{{-- Tab Navigation --}}
<div class="col-12 mb-3">
    <div class="project-box">
        <x-heading-sec :module="'Helpdesk Tickets'" :options="$mainHeadingOptions" />
        <ul class="nav nav-tabs project-tab mb-30" id="ticketTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === 'my-tickets' ? 'active' : '' }} waves-effect" 
                        id="my-tickets-tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#my-tickets-pane" 
                        type="button" 
                        role="tab" 
                        aria-controls="my-tickets-pane" 
                        aria-selected="{{ $activeTab === 'my-tickets' ? 'true' : 'false' }}" 
                        data-tab-key="my-tickets"
                        data-tab-url="{{ route('merchant-helpdesk-tickets.index', ['tab' => 'my-tickets']) }}">
                    My Tickets
                </button>
            </li>
            @if($canViewOtherTickets)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === 'other-tickets' ? 'active' : '' }} waves-effect" 
                        id="other-tickets-tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#other-tickets-pane" 
                        type="button" 
                        role="tab" 
                        aria-controls="other-tickets-pane" 
                        aria-selected="{{ $activeTab === 'other-tickets' ? 'true' : 'false' }}" 
                        data-tab-key="other-tickets"
                        data-tab-url="{{ route('merchant-helpdesk-tickets.index', ['tab' => 'other-tickets']) }}">
                    Other Tickets
                </button>
            </li>
            @endif
        </ul>
    </div>
</div>

{{-- Tab Content --}}
<div class="tab-content" id="ticketTabsContent">
    {{-- My Tickets Tab --}}
    <div class="tab-pane fade {{ $activeTab === 'my-tickets' ? 'show active' : '' }}" 
         id="my-tickets-pane" 
         role="tabpanel" 
         aria-labelledby="my-tickets-tab">
        @include('admin.merchant-helpdesk-tickets.partials.tab-content', ['tab' => 'my-tickets'])
    </div>
    
    @if($canViewOtherTickets)
    {{-- Other Tickets Tab --}}
    <div class="tab-pane fade {{ $activeTab === 'other-tickets' ? 'show active' : '' }}" 
         id="other-tickets-pane" 
         role="tabpanel" 
         aria-labelledby="other-tickets-tab">
        @include('admin.merchant-helpdesk-tickets.partials.tab-content', ['tab' => 'other-tickets'])
    </div>
    @endif
</div>
@endsection

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