{{-- resources/views/agent/clients.blade.php --}}
@extends('layouts.contentLayoutMaster')

@section('title', 'My Clients')

@section('content')
    @php
        use Illuminate\Support\Facades\Route as R;

        // Helper: humanize snake-case types (e.g., "term_life" => "Term Life")
        $humanize = function (?string $val) {
            if (!$val) return 'N/A';
            $v = str_replace('_', ' ', trim($val));
            return $v !== '' ? ucwords($v) : 'N/A';
        };
    @endphp

    <div class="container-fluid px-4 py-3">
        {{-- Flash messages --}}
        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Header --}}
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-3">
            {{-- Left: Title only --}}
            <h3 class="mb-0" style="color:#0B1970;">My Clients</h3>

            {{-- Right: Actions + Export + Search + Appointments --}}
            <div class="d-flex align-items-center gap-2">
                {{-- Actions (bulk) --}}
                <div class="dropdown">
                    <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="bulkActionsBtn"
                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bulk actions">
                        Actions
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bulkActionsBtn">
                        <li>
                            <button type="submit" form="bulkActionForm" class="dropdown-item text-danger" id="bulkDeleteBtn">
                                Delete selected
                            </button>
                        </li>
                    </ul>
                </div>

                {{-- Export --}}
                <a href="{{ route('agent.clients.export') }}" class="btn btn-outline-primary btn-sm">Export</a>

                {{-- Search --}}
                <form class="d-flex" method="GET" action="{{ route('agent.clients') }}">
                    <input type="text" name="search" class="form-control form-control-sm me-2"
                        placeholder="Search clients..." value="{{ request('search') }}" autocomplete="off">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>

                @if (request('search'))
                    <a href="{{ route('agent.clients') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
                @endif

                {{-- Global Appointments list for the agent --}}
                @if (R::has('agent.appointments.index'))
                    <a href="{{ route('agent.appointments.index') }}" class="btn btn-outline-success btn-sm">
                        Appointments
                    </a>
                @endif
            </div>
        </div>

        {{-- Only tighten the Email column + Actions column --}}
        <style>
            .tbl-clients th.email-col, .tbl-clients td.email-col { max-width: 28ch; width: 28ch; }
            .tbl-clients td.email-col .truncate {
                display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            @media (max-width: 767.98px) {
                .tbl-clients th.email-col, .tbl-clients td.email-col { max-width: none; width: auto; }
            }
            .tbl-clients th.select-col, .tbl-clients td.select-col { width: 42px; }

            /* NEW: Actions column width + center content */
            .tbl-clients th.actions-col, .tbl-clients td.actions-col { width: 160px; }
            .tbl-clients td.actions-col { text-align: center; }
        </style>

        {{-- Bulk form wraps the table so selected IDs submit together --}}
        <form id="bulkActionForm" method="POST" action="{{ route('agent.clients.bulkDestroy') }}">
            @csrf
            {{-- POST route name must be agent.clients.bulkDestroy --}}

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped align-middle tbl-clients">
                    <thead class="table-light">
                        <tr>
                            <th class="select-col"><input type="checkbox" id="selectAll" aria-label="Select all"></th>
                            <th>Name</th>
                            <th class="email-col">Email</th>
                            <th>Phone</th>
                            <th>City / State</th>
                            <th>Insurance Type</th>
                            <th>Lead Type</th>
                            <th class="actions-col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($clients as $client)
                            @php
                                $fname = trim($client->first_name ?? '');
                                $lname = trim($client->last_name ?? '');
                                $name = trim($fname . ' ' . $lname) ?: 'N/A';

                                $email = $client->email ?? null;
                                $phone = $client->phone_number ?? 'N/A';

                                $city  = trim((string) ($client->city ?? ''));
                                $state = trim((string) ($client->state ?? ''));
                                $cityState = $city && $state ? "{$city}, {$state}" : ($city ?: ($state ?: 'N/A'));

                                $rawType = strtolower(trim($client->lead_type ?? ($client->source ?? ($client->origin ?? ''))));
                                $typeMap = [
                                    'assigned' => ['Assigned', 'bg-secondary'],
                                    'assigned lead' => ['Assigned', 'bg-secondary'],
                                    'personal' => ['Personal', 'bg-dark'],
                                    'personal lead' => ['Personal', 'bg-dark'],
                                    'purchased' => ['Purchased', 'bg-primary'],
                                    'purchased lead' => ['Purchased', 'bg-primary'],
                                    'social' => ['Social Media', 'bg-info text-dark'],
                                    'social media' => ['Social Media', 'bg-info text-dark'],
                                    'social media lead' => ['Social Media', 'bg-info text-dark'],
                                ];
                                [$leadLabel, $leadClass] = $typeMap[$rawType] ?? [
                                    $rawType ? ucwords($rawType) : 'N/A',
                                    $rawType ? 'bg-light text-dark' : 'bg-light text-muted',
                                ];

                                $insLabel = $humanize($client->insurance_type ?? null);
                            @endphp

                            <tr>
                                <td class="select-col">
                                    <input type="checkbox" name="ids[]" value="{{ $client->id }}" class="row-check"
                                        aria-label="Select client {{ $name }}">
                                </td>

                                <td>{{ $name }}</td>

                                {{-- Tightened email column --}}
                                <td class="email-col">
                                    <span class="truncate" title="{{ $email ?? 'N/A' }}">{{ $email ?? 'N/A' }}</span>
                                </td>

                                <td>{{ $phone }}</td>
                                <td>{{ $cityState }}</td>

                                <td><span class="badge bg-info text-dark">{{ $insLabel }}</span></td>

                                {{-- Lead Type --}}
                                <td class="lead-type-col">
                                    <span class="badge {{ $leadClass }}">{{ $leadLabel }}</span>
                                </td>

                                {{-- Actions (centered) --}}
                                <td class="actions-col">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('agent.clients.show', $client->id) }}" class="btn btn-info">
                                            View
                                        </a>
                                        @if (R::has('agent.appointments.create'))
                                            <a href="{{ route('agent.appointments.create', ['client_id' => $client->id]) }}"
                                               class="btn btn-success">
                                                Schedule
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">No clients assigned to you yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>

        {{-- Pagination (if using ->paginate()) --}}
        @if (method_exists($clients, 'links'))
            <div class="mt-2">
                {{ $clients->links() }}
            </div>
        @endif
    </div>

    {{-- Minimal JS: just Select All (delete works without JS) --}}
    @push('scripts')
        <script>
            (function() {
                const selectAll = document.getElementById('selectAll');
                const rowChecks = document.querySelectorAll('.row-check');
                if (selectAll) {
                    selectAll.addEventListener('change', function() {
                        rowChecks.forEach(ch => ch.checked = selectAll.checked);
                    });
                }
            })();
        </script>
    @endpush
@endsection