@include('partials.staff_navbar')

<div class="container-fluid my-5 px-md-5">
    <div class="row mb-4">
        <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <div>
                <span class="text-uppercase text-primary fw-bold font-monospace tracking-wider" style="font-size: 11px;">
                    Secure Internal Matrix / Systems Registry
                </span>
                <h2 class="fw-bold text-dark mt-1 mb-0">Master Data Handler Registrations</h2>
                <p class="text-muted small mb-0">Audit, evaluate, and search through submission entries arranged chronologically from newest to oldest.</p>
            </div>
            <div>
                <a href="{{ route('staff.dashboard') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-2 fw-semibold">
                    <i class="fa fa-arrow-left me-2"></i>Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm bg-white rounded-3 p-3 mb-4">
        <form action="{{ route('staff.registrations.index') }}" method="GET" class="row g-2">
            <input type="hidden" name="tab" value="{{ $activeTab }}">
            
            <div class="col-md-9 col-lg-10">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted">
                        <i class="fa fa-search"></i>
                    </span>
                    <input type="text" name="search" class="form-control bg-light border-start-0 ps-0" 
                           placeholder="Search within this tab by legal corporate name, DPA tracking code, representative or email..." 
                           value="{{ $search }}">
                </div>
            </div>
            <div class="col-md-3 col-lg-2 d-grid">
                <button type="submit" class="btn btn-primary fw-semibold rounded-2">
                    <i class="fa fa-filter me-1"></i> Filter Selection
                </button>
            </div>
        </form>
    </div>

    <ul class="nav nav-tabs border-bottom-0 mb-n1 gap-2" role="tablist">
        <li class="nav-item">
            <a class="nav-link border-0 rounded-top-3 px-4 py-2.5 fw-semibold font-monospace small transition-all {{ $activeTab === 'pending_audit' ? 'bg-white shadow-sm border border-bottom-0 text-primary active' : 'text-muted bg-light border-0' }}"
               href="{{ route('staff.registrations.index', ['tab' => 'pending_audit', 'search' => $search]) }}">
                <i class="fa fa-clock me-2 text-warning"></i>Pending Audit (Under Review)
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link border-0 rounded-top-3 px-4 py-2.5 fw-semibold font-monospace small transition-all {{ $activeTab === 'delivered' ? 'bg-white shadow-sm border border-bottom-0 text-success active' : 'text-muted bg-light border-0' }}"
               href="{{ route('staff.registrations.index', ['tab' => 'delivered', 'search' => $search]) }}">
                <i class="fa fa-check-circle me-2 text-success"></i>Issued / Delivered (Paid)
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link border-0 rounded-top-3 px-4 py-2.5 fw-semibold font-monospace small transition-all {{ $activeTab === 'drafts' ? 'bg-white shadow-sm border border-bottom-0 text-secondary active' : 'text-muted bg-light border-0' }}"
               href="{{ route('staff.registrations.index', ['tab' => 'drafts', 'search' => $search]) }}">
                <i class="fa fa-file-alt me-2 text-secondary"></i>Draft Profiles (Unpaid)
            </a>
        </li>
        
        <li class="nav-item ms-auto">
            <a class="nav-link border-0 rounded-top-3 px-4 py-2.5 fw-semibold font-monospace small transition-all {{ $activeTab === 'all' ? 'bg-white shadow-sm border border-bottom-0 text-dark active' : 'text-muted bg-light border-0' }}"
               href="{{ route('staff.registrations.index', ['tab' => 'all', 'search' => $search]) }}">
                <i class="fa fa-th-list me-2 text-dark"></i>All Applications
            </a>
        </li>
    </ul>

    <div class="card border-0 shadow-sm rounded-bottom-3 rounded-end-3 bg-white border-top">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-uppercase font-monospace text-muted small" style="font-size: 11px; letter-spacing: 0.5px;">
                    <tr>
                        <th class="ps-4 py-3 border-0">Tracking Ref / Org Name</th>
                        <th class="py-3 border-0">Operational Boundary</th>
                        <th class="py-3 border-0">Representative Profile</th>
                        <th class="py-3 border-0">Workflow State</th>
                        <th class="py-3 border-0 text-center">Filing Invoice</th>
                        <th class="py-3 border-0">
                            {{ $activeTab === 'delivered' ? 'Date of Completion' : 'Date Logged' }}
                        </th>
                        <th class="pe-4 py-3 border-0 text-end">Management Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($registrations as $reg)
                        @php
                            $isFullyDelivered = ($reg->status === 'delivery' && $reg->payment_status === 'paid');
                        @endphp
                        <tr>
                            <td class="ps-4 py-3">
                                <span class="d-block font-monospace text-secondary small fw-bold mb-1">
                                    {{ $reg->resume_code }}
                                </span>
                                <div class="fw-bold text-dark fs-6">
                                    {{ $reg->org_legal_name ?? $reg->rep_institution ?? 'Incomplete Shell Record' }}
                                </div>
                                <small class="text-muted text-capitalize d-block font-monospace" style="font-size: 11px;">
                                    Class: <span class="text-dark fw-semibold">{{ $reg->handler_legal_class ?? 'N/A' }}</span>
                                </small>
                            </td>

                            <td class="py-3">
                                <div class="mb-1">
                                    @if($reg->data_handler_role === 'both')
                                        <span class="badge bg-purple-subtle text-purple border border-purple border-opacity-25 px-2 py-1 rounded small text-capitalize">
                                            Controller & Processor
                                        </span>
                                    @elseif($reg->data_handler_role === 'controller')
                                        <span class="badge bg-primary-subtle text-primary border border-primary border-opacity-25 px-2 py-1 rounded small text-capitalize">
                                            Data Controller
                                        </span>
                                    @elseif($reg->data_handler_role === 'processor')
                                        <span class="badge bg-info-subtle text-info border border-info border-opacity-25 px-2 py-1 rounded small text-capitalize">
                                            Data Processor
                                        </span>
                                    @else
                                        <span class="badge bg-light text-muted border px-2 py-1 rounded small">Not Set</span>
                                    @endif
                                </div>
                                <span class="text-muted font-monospace text-capitalize small d-block" style="font-size: 11px;">
                                    <i class="fa fa-folder opacity-50 me-1"></i>{{ $reg->sector ?? 'Unassigned Sector' }}
                                </span>
                            </td>

                            <td class="py-3">
                                <span class="fw-semibold text-dark d-block small">{{ $reg->rep_name ?? 'N/A' }}</span>
                                <span class="text-secondary d-block small font-monospace mb-1" style="font-size: 12px;">
                                    <i class="fa fa-phone me-1 opacity-50"></i>+{{ $reg->rep_phone_country_code ?? '252' }} {{ $reg->rep_phone ?? '' }}
                                </span>
                                <a href="mailto:{{ $reg->rep_email }}" class="text-decoration-none text-muted font-monospace d-block small" style="font-size: 12px;">
                                    <i class="fa fa-envelope me-1 opacity-50"></i>{{ $reg->rep_email ?? 'N/A' }}
                                </a>
                            </td>

                            <td class="py-3">
                                <div class="mb-1">
                                    @if($reg->status === 'delivery')
                                        <span class="badge bg-success text-white px-2 py-1 rounded small text-capitalize">
                                            <i class="fa fa-check-circle me-1"></i>Issued / Delivered
                                        </span>
                                    @elseif($reg->status === 'under_review')
                                        <span class="badge bg-warning text-dark px-2 py-1 rounded small text-capitalize">
                                            <i class="fa fa-clock me-1"></i>Audit Pending
                                        </span>
                                    @elseif($reg->status === 'draft')
                                        <span class="badge bg-secondary text-white px-2 py-1 rounded small text-capitalize">
                                            Draft Profile
                                        </span>
                                    @else
                                        <span class="badge bg-dark text-white px-2 py-1 rounded small text-capitalize">
                                            {{ $reg->status }}
                                        </span>
                                    @endif
                                </div>
                                <div class="progress rounded-pill bg-light border" style="height: 6px; width: 110px;" title="Current configuration progress step: {{ $reg->current_step }} of 9">
                                    <div class="progress-bar rounded-pill bg-primary" role="progressbar" style="width: {{ ($reg->current_step / 9) * 100 }}%"></div>
                                </div>
                            </td>

                            <td class="py-3 text-center font-monospace">
                                <span class="fw-bold d-block text-dark small">${{ number_format($reg->invoice_amount, 2) }}</span>
                                @if($reg->payment_status === 'paid')
                                    <span class="text-success small fw-bold" style="font-size: 11px;">
                                        <i class="fa fa-circle me-1" style="font-size: 7px;"></i>Paid
                                    </span>
                                @else
                                    <span class="text-danger small fw-bold" style="font-size: 11px;">
                                        <i class="fa fa-circle me-1" style="font-size: 7px;"></i>Unpaid
                                    </span>
                                @endif
                            </td>

                            <td class="py-3 small text-muted">
                                @if($isFullyDelivered)
                                    <span class="d-block text-success fw-bold">
                                        <i class="fa fa-award me-1"></i>
                                        {{ $reg->date_of_completion ? $reg->date_of_completion->format('M d, Y') : ($reg->payment_date ? $reg->payment_date->format('M d, Y') : $reg->updated_at->format('M d, Y')) }}
                                    </span>
                                    <span class="font-monospace opacity-70 d-block" style="font-size: 11px;">
                                        Approved File
                                    </span>
                                @else
                                    <span class="d-block text-dark fw-medium">
                                        {{ $reg->created_at ? $reg->created_at->format('M d, Y') : 'N/A' }}
                                    </span>
                                    <span class="font-monospace opacity-70" style="font-size: 11px;">
                                        {{ $reg->created_at ? $reg->created_at->format('h:i A') : '--:--' }}
                                    </span>
                                @endif
                            </td>

                            <td class="pe-4 py-3 text-end">
                                <div class="btn-group">
                                    <a href="{{ route('staff.registrations.show', $reg->id) }}" class="btn btn-light btn-sm text-dark border fw-semibold rounded-start px-3" title="Review full details">
                                        <i class="fa fa-eye me-1"></i> View
                                    </a>
                                    <button type="button" class="btn btn-light btn-sm text-dark border border-start-0 dropdown-toggle dropdown-toggle-split px-2 rounded-end" data-bs-toggle="dropdown" aria-expanded="false">
                                        <span class="visually-hidden">Options</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li><a class="dropdown-item small" href="#"><i class="fa fa-edit text-muted me-2"></i>Modify Records</a></li>
                                        <li><a class="dropdown-item small" href="#"><i class="fa fa-file-invoice text-muted me-2"></i>Override Payment</a></li>
                                        @if($isFullyDelivered)
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item small text-success" href="{{ route('staff.registration.download', $reg->id) }}"><i class="fa fa-download me-2"></i>Download Certificate</a></li>
                                        @endif
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-5">
                                <div class="py-4">
                                    <i class="fa fa-folder-open d-block opacity-20 mb-3" style="font-size: 48px;"></i>
                                    <h5 class="fw-bold text-secondary mb-1">No Records Discovered</h5>
                                    <p class="small text-muted mb-0">There are no individual registration entries matching this workspace tab container definition filter.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($registrations->hasPages())
            <div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
                {!! $registrations->links() !!}
            </div>
        @endif
    </div>
</div>

<style>
    .transition-all { transition: all 0.2s ease-in-out; }
    .nav-tabs .nav-link:hover { background-color: rgba(0, 0, 0, 0.03) !important; }
    .bg-purple-subtle { background-color: #f3e8ff !important; }
    .text-purple { color: #6b21a8 !important; }
    .border-purple { border-color: #d8b4fe !important; }
    .bg-primary-subtle { background-color: #e0f2fe !important; }
    .text-primary { color: #0369a1 !important; }
    .bg-info-subtle { background-color: #ecfeff !important; }
    .text-info { color: #0e7490 !important; }
</style>

@include('partials.footer')