@php
    $headerOption = [
        'title' => $module ?? 'Sales Offices',
        'header_buttons' => [
            '<a class="' .
            \Config::get('view.buttons.primary') .
            '" href="' .
            route('users.create', ['ref' => 'salesoffice']) .
            '" data-toggle="tooltip" data-original-title="Add New Record">
' .
            \Config::get('settings.icon_add') .
            ' <span>Add New</span></a>',
        ],
        'filters' => $filters ?? [],
        'data' => $salesOffices ?? collect(),
    ];
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="table-responsive">
        <table class="{!! \Config::get('view.table.table_class') !!}">
            <thead class="{!! \Config::get('view.table.table_head_class') !!}">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Agents</th>
                    <th>Status</th>
                    <th>Created On</th>
                    <th>Last Login</th>
                    @if ($permission['edit'] || $permission['destroy'])
                        <th class="text-end" style="width:15%">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse($salesOffices as $index => $office)
                    @php $officeAgents = $agentsBySalesOffice->get($office->id) ?? collect(); @endphp
                    <tr class="sales-office-row">
                        <td>
                            <a href="javascript:void(0)" class="toggle-agent" data-target="#agents-row-{{ $office->id }}"
                                aria-expanded="false"><i class="bx bx-chevron-down"></i></a>
                            {{ $office->first_name }} {{ $office->last_name }}
                        </td>
                        <td>{{ $office->email }}</td>
                        <td>{{ \App\Helpers\Helper::phone($office->phone) }}</td>
                        <td><span class="badge bg-primary">{{ $officeAgents->count() }}</span></td>
                        <td><span
                                class="badge badge-pill badge-soft-{{ $office->statuses[$office->status]['badge'] }} font-size-12">{{ $office->statuses[$office->status]['name'] }}</span>
                        </td>
                        <td>
                            @if ($office->created_at)
                                <span class="utc-time" data-time="{{ $office->created_at->toIso8601String() }}"></span>
                            @endif
                        </td>
                        <td>
                            @if ($office->last_login_at)
                                <span class="utc-time" data-time="{{ $office->last_login_at->toIso8601String() }}"></span>
                            @endif
                        </td>
                        @if ($permission['edit'] || $permission['destroy'])
                            <td class="text-end">
                                @if ($permission['edit'])
                                    <a href="{{ route('users.edit', ['user' => $office->id, 'ref' => 'salesoffice']) }}"
                                        class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip"
                                        data-original-title="Edit">{!! \Config::get('settings.icon_edit') !!}</a>
                                @endif
                                @if ($office->status > 0)
                                    @if ($permission['destroy'])
                                        <a class="{!! \Config::get('view.table.list_danger_button') !!}" data-toggle="tooltip"
                                            data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                            data-confirm-yes="event.preventDefault();document.getElementById('delete-office-form-{{ $office->id }}').submit();"
                                            data-original-title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
                                        {!! html()->form('DELETE', route('users.destroy', ['user' => $office->id, 'ref' => 'salesoffice']))->attributes(['style' => 'display:none', 'id' => 'delete-office-form-' . $office->id])->open() !!}
                                        {!! html()->form()->close() !!}
                                    @endif
                                @else
                                    <a href="{{ route('users.resend-verification', ['user' => $office->id, 'ref' => 'salesoffice']) }}"
                                        class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip"
                                        data-original-title="Resend Verification">{!! \Config::get('settings.icon_mail') ?? '<i class="bx bx-envelope"></i>' !!}</a>
                                @endif

                            </td>
                        @endif
                    </tr>
                    <tr id="agents-row-{{ $office->id }}" class="collapse bg-light">
                        @php $colspan = ($permission['edit'] || $permission['destroy']) ? 8 : 7; @endphp
                        <td colspan="{{ $colspan }}" class="p-0">
                            <div class="p-3">
                                <h6 class="mb-3">Agents of {{ $office->first_name }} {{ $office->last_name }}</h6>
                                @if ($officeAgents->isEmpty())
                                    <div class="text-muted">No agents assigned.</div>
                                @else
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th style="width:40px;">#</th>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Phone</th>
                                                    <th>Status</th>
                                                    <th>Created On</th>
                                                    <th>Last Login</th>
                                                    @if ($permission['edit'] || $permission['destroy'])
                                                        <th class="text-end" style="width:120px;">Action</th>
                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($officeAgents as $aIndex => $agent)
                                                    <tr>
                                                        <td>{{ $aIndex + 1 }}</td>
                                                        <td>{{ $agent->first_name }} {{ $agent->last_name }}</td>
                                                        <td>{{ $agent->email }}</td>
                                                        <td>{{ \App\Helpers\Helper::phone($agent->phone) }}</td>
                                                        <td><span
                                                                class="badge badge-pill badge-soft-{{ $agent->statuses[$agent->status]['badge'] }} font-size-12">{{ $agent->statuses[$agent->status]['name'] }}</span>
                                                        </td>
                                                        <td>
                                                            @if ($agent->created_at)
                                                                <span class="utc-time"
                                                                    data-time="{{ $agent->created_at->toIso8601String() }}"></span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($agent->last_login_at)
                                                                <span class="utc-time"
                                                                    data-time="{{ $agent->last_login_at->toIso8601String() }}"></span>
                                                            @endif
                                                        </td>
                                                        @if ($permission['edit'] || $permission['destroy'])
                                                            <td class="text-end">
                                                                @if ($permission['edit'])
                                                                    <a href="{{ route('users.edit', ['user' => $agent->id, 'ref' => 'salesoffice']) }}"
                                                                        class="{!! \Config::get('view.table.list_light_button') !!}"
                                                                        data-toggle="tooltip"
                                                                        data-original-title="Edit">{!! \Config::get('settings.icon_edit') !!}</a>
                                                                @endif
                                                                @if ($agent->status > 0)
                                                                    @if ($permission['destroy'])
                                                                        <a class="{!! \Config::get('view.table.list_danger_button') !!}"
                                                                            data-toggle="tooltip"
                                                                            data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                                                            data-confirm-yes="event.preventDefault();document.getElementById('delete-agent-form-{{ $agent->id }}').submit();"
                                                                            data-original-title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
                                                                        {!! html()->form('DELETE', route('users.destroy', ['user' => $agent->id, 'ref' => 'salesoffice']))->attributes(['style' => 'display:none', 'id' => 'delete-agent-form-' . $agent->id])->open() !!}
                                                                        {!! html()->form()->close() !!}
                                                                    @endif
                                                                @else
                                                                    <a href="{{ route('users.resend-verification', ['user' => $agent->id, 'ref' => 'salesoffice']) }}"
                                                                        class="{!! \Config::get('view.table.list_light_button') !!}"
                                                                        data-toggle="tooltip"
                                                                        data-original-title="Resend Verification">{!! \Config::get('settings.icon_mail') ?? '<i class="bx bx-envelope"></i>' !!}</a>
                                                                @endif

                                                            </td>
                                                        @endif
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    @if (!(isset($unassignedAgents) && $unassignedAgents->count()))
                        <tr>
                            <td colspan="8">
                                <div class="alert alert-info mb-0">No Sales Office users found.</div>
                            </td>
                        </tr>
                    @endif
                @endforelse

                @if (isset($unassignedAgents) && $unassignedAgents->count())
                    @php $unassignedCount = $unassignedAgents->count(); @endphp
                    <tr class="sales-office-row">
                        <td><a href="javascript:void(0)" class="toggle-agent" data-target="#agents-row-unassigned"
                                aria-expanded="false"><i class="bx bx-chevron-down"></i></a> No Sales Officer</td>
                        <td></td>
                        <td></td>
                        <td><span class="badge bg-primary">{{ $unassignedCount }}</span></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        @if ($permission['edit'] || $permission['destroy'])
                            <td class="text-end"></td>
                        @endif
                    </tr>
                    <tr id="agents-row-unassigned" class="collapse bg-light">
                        @php $colspan = ($permission['edit'] || $permission['destroy']) ? 8 : 7; @endphp
                        <td colspan="{{ $colspan }}" class="p-0">
                            <div class="p-3">
                                <h6 class="mb-3">Agents (No Sales Officer)</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th style="width:40px;">#</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                                <th>Status</th>
                                                <th>Created On</th>
                                                <th>Last Login</th>
                                                @if ($permission['edit'] || $permission['destroy'])
                                                    <th class="text-end" style="width:120px;">Action</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($unassignedAgents as $uaIndex => $agent)
                                                <tr>
                                                    <td>{{ $uaIndex + 1 }}</td>
                                                    <td>{{ $agent->first_name }} {{ $agent->last_name }}</td>
                                                    <td>{{ $agent->email }}</td>
                                                    <td>{{ \App\Helpers\Helper::phone($agent->phone) }}</td>
                                                    <td><span
                                                            class="badge badge-pill badge-soft-{{ $agent->statuses[$agent->status]['badge'] }} font-size-12">{{ $agent->statuses[$agent->status]['name'] }}</span>
                                                    </td>
                                                    <td>
                                                        @if ($agent->created_at)
                                                            <span class="utc-time"
                                                                data-time="{{ $agent->created_at->toIso8601String() }}"></span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($agent->last_login_at)
                                                            <span class="utc-time"
                                                                data-time="{{ $agent->last_login_at->toIso8601String() }}"></span>
                                                        @endif
                                                    </td>
                                                    @if ($permission['edit'] || $permission['destroy'])
                                                        <td class="text-end">
                                                            @if ($permission['edit'])
                                                                <a href="{{ route('users.edit', ['user' => $agent->id, 'ref' => 'salesoffice']) }}"
                                                                    class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip"
                                                                    data-original-title="Edit">{!! \Config::get('settings.icon_edit') !!}</a>
                                                            @endif
                                                            @if ($agent->status > 0)
                                                                    @if ($permission['destroy'])
                                                                <a class="{!! \Config::get('view.table.list_danger_button') !!}" data-toggle="tooltip"
                                                                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                                                    data-confirm-yes="event.preventDefault();document.getElementById('delete-agent-form-unassigned-{{ $agent->id }}').submit();"
                                                                    data-original-title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
                                                                {!! html()->form('DELETE', route('users.destroy', ['user' => $agent->id, 'ref' => 'salesoffice']))->attributes(['style' => 'display:none', 'id' => 'delete-agent-form-unassigned-' . $agent->id])->open() !!}
                                                                {!! html()->form()->close() !!}
                                                            @endif
                                                            @else
                                                                <a href="{{ route('users.resend-verification', ['user' => $agent->id, 'ref' => 'salesoffice']) }}"
                                                                    class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip"
                                                                    data-original-title="Resend Verification">{!! \Config::get('settings.icon_mail') ?? '<i class="bx bx-envelope"></i>' !!}</a>
                                                            @endif
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>
    <div class="mt-3">{!! $salesOffices->links() !!}</div>

    <style>
        tr.sales-office-row:hover {
            background: #f5f7fa;
        }

        .toggle-agent {
            display: inline-flex;
            align-items: center;
            margin-right: 6px;
        }

        .toggle-agent i {
            transition: transform .2s ease;
        }

        .toggle-agent[aria-expanded='true'] i {
            transform: rotate(180deg);
        }
    </style>
    @push('page_script')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.addEventListener('click', function(e) {
                    const t = e.target.closest('.toggle-agent');
                    if (!t) return;
                    const sel = t.getAttribute('data-target');
                    const row = document.querySelector(sel);
                    if (!row) return;
                    const c = bootstrap.Collapse.getOrCreateInstance(row, {
                        toggle: false
                    });
                    c.toggle();
                    const expanded = t.getAttribute('aria-expanded') === 'true';
                    t.setAttribute('aria-expanded', expanded ? 'false' : 'true');
                });
            });
        </script>
    @endpush
@endsection