@extends('portal.layouts.app', [
    'class' => '',
    'elementActive' => ''
])
@section('title','Candidate Profile')

@section('css')
<style>
/* Header styling */
.profile-header {
    background: linear-gradient(135deg, #4e73df, #224abe);
    color: #fff;
    padding: 2rem;
    border-radius: 1rem 1rem 0 0;
}

/* Avatar */
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

/* Tabs styling */
.nav-tabs .nav-link.active {
    background-color: #4e73df;
    color: #fff !important;
    border-color: #4e73df #4e73df #fff;
}
.nav-tabs .nav-link {
    color: #4e73df;
    font-weight: 500;
}

/* Tab content and info items */
.tab-content {
    padding: 1rem;
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    border: 1px solid #dee2e6;
    border-top: none;
    color: #212529; /* Bootstrap dark text */
}
.info-item {
    margin-bottom: .5rem;
    color: #212529;
}

/* General dark text for body content */
.p-4.bg-white,
.bg-light,
.iq-card,
.list-group-item {
    color: #212529 !important;
}

h3, h4, h5, h6, p, strong, small {
    color: #212529;
}

/* Improve readability of small text */
small {
    color: #495057;
}
</style>
@endsection

@section('content')
<div id="content-page" class="content-page">
    <div class="container-fluid">
        <div class="iq-card">

            <!-- Profile Header -->
            <div class="profile-header d-flex align-items-center justify-content-between flex-wrap">
                <div class="d-flex align-items-center mb-3 mb-md-0">
                    <img src="{{asset('storage/candidate_profiles/'.$candidate->passport_photo) }}" alt="avatar" class="profile-avatar mr-3">
                    <div>
                        <h3 class="mb-0 text-white">{{ $candidate->user?->name }}</h3>
                        <p class="mb-0 text-light">{{ $candidate->job_title ?? 'Not specified' }}</p>
                    </div>
                </div>
                <div>
                    <a href="{{ route('candidates') }}" class="btn btn-light text-dark font-weight-bold">← Back</a>
                </div>
            </div>

            <!-- Candidate Summary -->
            <div class="p-4 bg-white border-bottom">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item"><strong>Email:</strong> {{ $candidate->email ?? '-' }}</div>
                        <div class="info-item"><strong>Phone:</strong> {{ $candidate->phone ?? '-' }}</div>
                        <div class="info-item"><strong>Gender:</strong> {{ ucfirst($candidate->gender ?? '-') }}</div>
                        <div class="info-item"><strong>Date of Birth:</strong> {{ $candidate->dob ? $candidate->dob->format('d M Y') : '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item"><strong>Nationality:</strong> {{ $candidate->country ?? '-' }}</div>
                        <div class="info-item"><strong>Location:</strong> {{ $candidate->address ?? '-' }}</div>
                        <div class="info-item"><strong>Agent:</strong> {{ $candidate->agent->name ?? '-' }}</div>
                        <div class="info-item"><strong>Partner:</strong> {{ $candidate->partner->name ?? '-' }}</div>
                    </div>
                </div>

                @if(!empty($candidate->summary))
                    <div class="mt-3">
                        <h6>Summary</h6>
                        <p class="mb-0">{{ $candidate->summary }}</p>
                    </div>
                @endif
            </div>

            <!-- Tabs Section -->
            <div class="p-3 bg-light">
                <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="applications-tab" data-toggle="tab" href="#applications" role="tab">Applications</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="documents-tab" data-toggle="tab" href="#documents" role="tab">Documents</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="education-tab" data-toggle="tab" href="#education" role="tab">Education</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="skills-tab" data-toggle="tab" href="#skills" role="tab">Skills</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="languages-tab" data-toggle="tab" href="#languages" role="tab">Languages</a>
                    </li>
                </ul>

                <div class="tab-content mt-3" id="profileTabsContent">

                    <!-- Applications Tab -->
                    <div class="tab-pane fade show active" id="applications" role="tabpanel">
                        @if($candidate->applications->count())
                            <ul class="list-group">
                                @foreach($candidate->applications as $app)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $app->job_title }}</strong> — {{ $app->company_name }}
                                            <div><small>Status: {{ ucfirst($app->status) }}</small></div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p class="mb-0 text-muted">No applications found.</p>
                        @endif
                    </div>

                    <!-- Documents Tab -->
                    <div class="tab-pane fade" id="documents" role="tabpanel">
                        @if($candidate->documents->count())
                            <ul class="list-group">
                                @foreach($candidate->documents as $doc)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $doc->name }}
                                        <a href="{{ asset('storage/'.$doc->path) }}" target="_blank" class="btn btn-sm btn-outline-primary">View</a>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p class="mb-0 text-muted">No documents uploaded.</p>
                        @endif
                    </div>

                    <!-- Education Tab -->
                    <div class="tab-pane fade" id="education" role="tabpanel">
                        @if($candidate->certifications->count())
                            <ul class="list-group">
                                @foreach($candidate->certifications as $edu)
                                    <li class="list-group-item">
                                        <strong>{{ $edu->degree }}</strong> — {{ $edu->institution }}
                                        <div><small>{{ $edu->year_start }} - {{ $edu->year_end }}</small></div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p class="mb-0 text-muted">No education records found.</p>
                        @endif
                    </div>

                    <!-- Skills Tab -->
                    <div class="tab-pane fade" id="skills" role="tabpanel">
                        @if($candidate->skills)
                            <div>
                                @foreach(explode(',', $candidate->skills) as $skill)
                                    <span class="badge badge-secondary mr-1">{{ trim($skill) }}</span>
                                @endforeach
                            </div>
                        @else
                            <p class="mb-0 text-muted">No skills added.</p>
                        @endif
                    </div>

                    <!-- Languages Tab -->
                    <div class="tab-pane fade" id="languages" role="tabpanel">
                        @if($candidate->languages)
                            <div>
                                @foreach(explode(',', $candidate->languages) as $lang)
                                    <span class="badge badge-info mr-1">{{ trim($lang) }}</span>
                                @endforeach
                            </div>
                        @else
                            <p class="mb-0 text-muted">No languages specified.</p>
                        @endif
                    </div>

                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <form method="POST" class="autosubmit" action="{{ route('approvecandidate', $candidate->uuid) }}" id="approveCandidateForm">
                        @csrf
                        <div class="form-group form-check">
                            <label for="">Remarks</label>
                            <textarea name="remarks" class="form-control" rows="3" placeholder="Enter any remarks here...">{{ $candidate->remarks }}</textarea>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-success" {{ $candidate->status == "approved" ? 'disabled' : '' }}>
                                {{ $candidate->status == "approved" ? 'Approved' : 'Approve Candidate' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
@endsection