@extends('layouts.user_type.auth')

@section('companyProfile')

{{-- Inline shared styles for table page (no nav tabs here) --}}
<style>
.cp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--qc-card-3);
}
.cp-page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--qc-ink);
    margin: 0;
    letter-spacing: -0.02em;
}
.cp-card {
    background: var(--qc-card);
    border-radius: 16px;
    border: 1px solid var(--qc-card-3);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    margin: 0 16px 24px;
    overflow: hidden;
}
.cp-btn-create {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--qc-ink);
    color: #fff;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.cp-btn-create:hover {
    background: var(--qc-primary);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.cp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    min-width: 600px;
}
.cp-table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--qc-text-3);
    padding: 11px 16px;
    border-bottom: 1px solid var(--qc-card-3);
    background: var(--qc-card-2);
    white-space: nowrap;
}
.cp-table tbody td {
    padding: 13px 16px;
    color: var(--qc-ink);
    font-weight: 500;
    border-bottom: 1px solid var(--qc-card-2);
    vertical-align: middle;
}
.cp-table tbody tr:last-child td { border-bottom: none; }
.cp-table tbody tr:hover { background: var(--qc-card-2); }
.cp-logo-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--qc-card-3);
    background: var(--qc-card-2);
    padding: 4px;
}
.cp-no-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--qc-card-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--qc-text-3);
    font-weight: 600;
}
.cp-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--qc-card-3);
    color: var(--qc-text-2);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.cp-edit-btn:hover {
    background: var(--qc-primary);
    color: #fff;
    text-decoration: none;
}
.cp-empty-state {
    text-align: center;
    padding: 52px 24px;
}
.cp-empty-state img { width: 140px; opacity: 0.5; margin-bottom: 14px; }
.cp-empty-state p { font-size: 0.88rem; color: var(--qc-text-3); margin: 0; }

@media (max-width: 768px) {
    .cp-card { margin: 0 8px 16px; }
    .cp-page-header { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
}
</style>

<div class="row">
    <div class="col-12">

        @include('components.alert')

        <div class="cp-card">

            <div class="cp-page-header">
                <h5 class="cp-page-title">
                    <i class="fas fa-building me-2" style="color:var(--qc-primary);font-size:.85rem"></i>
                    Manage Company Profiles
                </h5>
                <a href="{{ route('companyProfile.company') }}" class="qc-btn-create cp-btn-create">
                    <i class="fas fa-plus" style="font-size:.75rem"></i>
                    Create Profile
                </a>
            </div>

            <div class="cp-table-wrap">
                <table class="cp-table">
                    <thead>
                        <tr>
                            <th style="width:48px">#</th>
                            <th>Logo</th>
                            <th>Company Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th style="text-align:center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($companyProfiles as $index => $profile)
                            <tr>
                                <td style="color:var(--qc-text-3);font-size:0.78rem">
                                    {{ $companyProfiles->firstItem() + $index }}
                                </td>
                                <td>
                                    @if($profile->company_logo)
                                        <img src="{{ asset('storage/' . $profile->company_logo) }}"
                                             alt="{{ $profile->company_name }}" class="cp-logo-img">
                                    @else
                                        <div class="cp-no-logo">
                                            <i class="fas fa-image"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span style="font-weight:600;color:var(--qc-ink)">{{ $profile->company_name }}</span>
                                </td>
                                <td>{{ $profile->phone }}</td>
                                <td>{{ $profile->email }}</td>
                                <td style="text-align:center">
                                    <a href="{{ route('companyProfile.company', ['id' => $profile->id]) }}"
                                       class="cp-edit-btn" title="Edit Profile">
                                        <i class="fas fa-edit" style="font-size:.8rem"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">
                                    <div class="cp-empty-state">
                                        <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data">
                                        <p>No company profiles found</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($companyProfiles->hasPages())
                <div style="padding:14px 16px;border-top:1px solid var(--qc-card-3)">
                    @include('components.pagination', ['paginator' => $companyProfiles])
                </div>
            @endif

        </div>

    </div>
</div>

@endsection