@extends('layouts.dashboard')

@section('styles')
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<style>
    /* Premium Page Background */
    body, .main { background: #f4f6f9; }
    
    /* Elegant Header */
    .crm-header-wrapper {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        margin-bottom: 2rem;
        border: 1px solid rgba(226, 232, 240, 0.8);
        overflow: hidden;
    }
    .crm-banner {
        height: 120px;
        background: linear-gradient(135deg, #1e293b, #3b82f6);
        position: relative;
    }
    .crm-profile-section {
        padding: 0 2rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .crm-logo-box {
        width: 100px;
        height: 100px;
        background: #ffffff;
        border-radius: 50%;
        padding: 0.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        border: 3px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -50px;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }
    .crm-logo-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    
    .crm-info-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 15px;
    }

    /* Modern Nav Pills */
    .nav-pills-custom {
        gap: 0.5rem;
        margin-bottom: 2rem;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 1rem;
    }
    .nav-pills-custom .nav-link {
        color: #64748b;
        font-weight: 600;
        padding: 0.6rem 1.25rem;
        border-radius: 8px;
        transition: all 0.2s ease;
        background: transparent;
    }
    .nav-pills-custom .nav-link:hover {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }
    .nav-pills-custom .nav-link.active {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    /* Premium Cards */
    .glass-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }
    .card-header-elegant {
        padding: 1.5rem 1.5rem 0;
        border-bottom: none;
        background: transparent;
    }

    /* DataTable Overrides */
    table.dataTable.no-footer { border-bottom: none; }
    table.dataTable thead th { border-bottom: 1px solid #e2e8f0; color: #64748b; font-weight: 600; font-size: 0.85rem; }
    table.dataTable tbody td { padding: 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .dataTables_wrapper .dataTables_filter input { border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.35rem 0.75rem; outline: none; }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-700 mb-0">Candidate Dashboard</h4>
    </div>
    <a href="{{ route('admin.candidates.index') }}" class="btn btn-light border shadow-sm px-4 py-2 fw-600">
        <i class="fas fa-arrow-left me-2"></i> Back to Directory
    </a>
</div>

<!-- Header Section -->
<div class="crm-header-wrapper">
    <div class="crm-banner">
        <!-- Optional banner pattern or gradient here -->
    </div>
    <div class="crm-profile-section">
        <div class="d-flex gap-4 w-100">
            <div class="crm-logo-box">
                <img src="{{ $candidate->avatar_url }}" alt="Avatar">
            </div>
            <div class="crm-info-container flex-grow-1">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <div>
                        <h4 class="fw-700 mb-1 d-flex align-items-center gap-2">
                            {{ $candidate->name }}
                        </h4>
                        <div class="text-muted d-flex gap-4 small fw-500 mt-2">
                            <span><i class="fas fa-briefcase me-1 text-secondary"></i> {{ $candidate->headline ?? 'No Headline' }}</span>
                            <span><i class="fas fa-envelope me-1 text-secondary"></i> {{ $candidate->email ?? 'N/A' }}</span>
                            <span><i class="fas fa-phone me-1 text-secondary"></i> {{ $candidate->phone ?? 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <form method="POST" action="{{ route('admin.candidates.impersonate', $candidate) }}">
                            @csrf
                            <button class="btn btn-outline-success fw-600"><i class="fas fa-sign-in-alt me-2"></i>Login As</button>
                        </form>
                        
                        <div class="dropdown">
                            <button class="btn btn-warning fw-600 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-shield-alt me-2"></i>Status
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end border-0 shadow" style="border-radius:12px;">
                                <li>
                                    <form method="POST" action="{{ route('admin.candidates.status', $candidate) }}">
                                        @csrf
                                        <input type="hidden" name="status" value="active">
                                        <button class="dropdown-item fw-600 py-2 {{ $candidate->status === 'active' ? 'active bg-success text-white' : 'text-success' }}"><i class="fas fa-check-circle me-2"></i> Active</button>
                                    </form>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('admin.candidates.status', $candidate) }}">
                                        @csrf
                                        <input type="hidden" name="status" value="inactive">
                                        <button class="dropdown-item fw-600 py-2 {{ $candidate->status === 'inactive' ? 'active bg-warning text-dark' : 'text-warning' }}"><i class="fas fa-pause-circle me-2"></i> Inactive</button>
                                    </form>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('admin.candidates.status', $candidate) }}">
                                        @csrf
                                        <input type="hidden" name="status" value="banned">
                                        <button class="dropdown-item fw-600 py-2 {{ $candidate->status === 'banned' ? 'active bg-danger text-white' : 'text-danger' }}"><i class="fas fa-ban me-2"></i> Block / Ban</button>
                                    </form>
                                </li>
                            </ul>
                        </div>

                        <a href="{{ route('admin.users.edit', $candidate) }}" class="btn btn-primary fw-600"><i class="fas fa-cog me-2"></i>Manage</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Nav Pills -->
<ul class="nav nav-pills nav-pills-custom" id="crmTabs" role="tablist">
    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#overview"><i class="fas fa-info-circle me-2"></i>Overview</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#resumes"><i class="fas fa-file-pdf me-2"></i>Resumes</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#applications"><i class="fas fa-paper-plane me-2"></i>Applications</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#saved"><i class="fas fa-bookmark me-2"></i>Saved Jobs</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#logs"><i class="fas fa-history me-2"></i>Activity Logs</button></li>
</ul>

<div class="tab-content" id="crmTabsContent">
    
    <!-- OVERVIEW TAB -->
    <div class="tab-pane fade show active" id="overview">
        <div class="row g-4">
            <div class="col-md-5">
                <div class="glass-card h-100">
                    <div class="card-header-elegant">
                        <h6 class="fw-800 text-dark mb-0">Personal Details</h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex flex-column gap-4">
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-map-marker-alt me-3 text-primary opacity-50"></i> Location</span> 
                                <span class="fw-700 text-dark text-end">{{ $candidate->city ?? '-' }}, {{ $candidate->country ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-calendar-alt me-3 text-primary opacity-50"></i> Date of Birth</span> 
                                <span class="fw-700 text-dark">{{ $candidate->dob ? \Carbon\Carbon::parse($candidate->dob)->format('M d, Y') : '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-venus-mars me-3 text-primary opacity-50"></i> Gender</span> 
                                <span class="fw-700 text-dark">{{ ucfirst($candidate->gender ?? '-') }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-clock me-3 text-primary opacity-50"></i> Registered</span> 
                                <span class="fw-700 text-dark">{{ $candidate->created_at->format('M d, Y') }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-power-off me-3 text-primary opacity-50"></i> Status</span> 
                                <span class="badge {{ $candidate->status === 'active' ? 'bg-success' : ($candidate->status === 'inactive' ? 'bg-warning text-dark' : 'bg-danger') }} rounded-pill px-3">{{ ucfirst($candidate->status) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-7">
                <div class="glass-card h-100">
                    <div class="card-header-elegant border-bottom pb-3 mb-3">
                        <h6 class="fw-800 text-dark mb-0">Professional Summary</h6>
                    </div>
                    <div class="card-body p-4 pt-0">
                        <p class="text-muted fw-500 mb-4">{{ $candidate->about ?? 'No summary provided.' }}</p>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="bg-light rounded-3 p-3 border">
                                    <div class="text-muted small fw-600 mb-1">Experience</div>
                                    <div class="fw-700 text-dark">{{ $candidate->experience_years ? $candidate->experience_years . ' Years' : 'Not specified' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="bg-light rounded-3 p-3 border">
                                    <div class="text-muted small fw-600 mb-1">Notice Period</div>
                                    <div class="fw-700 text-dark">{{ $candidate->notice_period ?? 'Not specified' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="bg-light rounded-3 p-3 border">
                                    <div class="text-muted small fw-600 mb-1">Current Salary</div>
                                    <div class="fw-700 text-dark">{{ $candidate->current_salary ? '$'.number_format($candidate->current_salary) : 'Not specified' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="bg-light rounded-3 p-3 border">
                                    <div class="text-muted small fw-600 mb-1">Expected Salary</div>
                                    <div class="fw-700 text-dark">{{ $candidate->expected_salary ? '$'.number_format($candidate->expected_salary) : 'Not specified' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- RESUMES TAB -->
    <div class="tab-pane fade" id="resumes">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Uploaded Resumes</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>File Name</th>
                                <th>Primary</th>
                                <th>Uploaded Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($candidate->resumes as $resume)
                            <tr>
                                <td class="fw-700 text-dark"><i class="fas fa-file-pdf text-danger me-2"></i> {{ $resume->file_name }}</td>
                                <td>
                                    @if($resume->is_default)
                                        <span class="badge bg-primary bg-opacity-10 text-primary px-3 rounded-pill">Yes</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-muted fw-600">{{ $resume->created_at->format('M d, Y h:i A') }}</td>
                                <td>
                                    <a href="{{ asset('storage/'.$resume->file_path) }}" target="_blank" class="btn btn-sm btn-light border fw-600 rounded-pill px-3 hover-lift text-primary"><i class="fas fa-download me-1"></i> Download</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- APPLICATIONS TAB -->
    <div class="tab-pane fade" id="applications">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Job Applications</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Job Title</th>
                                <th>Company</th>
                                <th>Status</th>
                                <th>Applied On</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($candidate->applications as $app)
                            <tr>
                                <td class="fw-700 text-dark"><a href="{{ route('admin.jobs.edit', $app->job) }}" class="text-decoration-none">{{ $app->job->title }}</a></td>
                                <td class="text-muted fw-600">{{ $app->job->company->name ?? '-' }}</td>
                                <td><span class="badge bg-light text-dark border px-3 rounded-pill">{{ ucfirst($app->status) }}</span></td>
                                <td class="text-muted fw-600">{{ $app->created_at->format('M d, Y') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- SAVED JOBS TAB -->
    <div class="tab-pane fade" id="saved">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Saved Jobs</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Job Title</th>
                                <th>Company</th>
                                <th>Saved On</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($candidate->savedJobs as $saved)
                            <tr>
                                <td class="fw-700 text-dark"><a href="{{ route('admin.jobs.edit', $saved->job) }}" class="text-decoration-none">{{ $saved->job->title }}</a></td>
                                <td class="text-muted fw-600">{{ $saved->job->company->name ?? '-' }}</td>
                                <td class="text-muted fw-600">{{ $saved->created_at->format('M d, Y') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ACTIVITY LOGS TAB -->
    <div class="tab-pane fade" id="logs">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">System Audit Trail</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Event Action</th>
                                <th>Module</th>
                                <th>Network IP</th>
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($candidate->activityLogs as $log)
                            <tr>
                                <td class="fw-700 text-dark">{{ $log->action }}</td>
                                <td class="fw-600 text-primary">{{ $log->module ?? '-' }}</td>
                                <td class="text-muted font-monospace small">{{ $log->ip_address ?? 'Unknown' }}</td>
                                <td class="text-muted fw-600">{{ $log->created_at->format('M d, Y h:i A') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function() {
        $('.datatable').DataTable({
            "order": [],
            "pageLength": 10,
            "language": { "search": "", "searchPlaceholder": "Search records..." }
        });
    });
</script>
@endsection