@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->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 class="d-flex justify-content-between gap-1">
                    <div>
                        @can('call candidate')
                                <a href="#"
                                    class="btn btn-primary"
                                    data-toggle="modal"
                                    data-target="#callCandidateModal">
                                    <i class="fa fa-phone-square text-white"></i> Call
                                </a>

                                <!-- 📞 Call Modal -->
                                <div class="modal fade" id="callCandidateModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <form method="POST" class="modal-content autosubmit" action="{{ route('callcandidate', $candidate->uuid) }}">
                                            @csrf
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="callModalLabel">Log Call</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>

                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="call_status">Call Status</label>
                                                    <select name="call_status" id="call_status" class="form-control" required>
                                                        <option value="">Select Status</option>
                                                        <option value="received">Received</option>
                                                        <option value="declined">Declined</option>
                                                        <option value="unreachable">Unreachable</option>
                                                        <option value="missed_call">Missed Call</option>
                                                        <option value="voice mail">Voice Mail</option>
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label for="remarks">Remarks (optional)</label>
                                                    <textarea name="remarks" id="remarks" class="form-control" rows="3" placeholder="Enter remarks..."></textarea>
                                                </div>
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                        @endcan
                    </div>
                    <div>
                        @can('match candidate to job')
                            <a href="#"
                                class="btn btn-warning "
                                data-toggle="modal"
                                data-target="#matchCandidateModal">
                                <i class="fa fa-link text-white"></i> Match
                            </a>

                            <!-- 📞 Match Candidate Modal -->
                            <div class="modal fade" id="matchCandidateModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <form method="POST"
                                        id="matchCandidate"
                                        class="modal-content autosubmit"
                                        action="{{ route('candidatejobmatching', ['candidate' => $candidate->uuid, 'job' => ':job']) }}">
                                        @csrf

                                        <div class="modal-header">
                                            <h5 class="modal-title" id="callModalLabel">Match Candidate</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="availableJob">Available Jobs</label>
                                                <select name="job" class="form-control select2" id="availableJob" required>
                                                    <option value="">-- Select Job --</option>
                                                    @foreach($availableJobs as $job)
                                                        <option value="{{ $job->uuid }}">
                                                            {{ $job->jobTitle->name ?? 'N/A' }} at {{ $job->company->name ?? 'N/A' }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                            <button type="submit" id="submitMatchBtn" class="btn btn-primary" disabled>Submit</button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        @endcan
                    </div>

                </div>
                <div>
                    <a href="{{ route('editcandidate', $candidate->uuid) }}" class="btn btn-light text-dark font-weight-bold">← Edit</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->user->email ?? '-' }}</div>
                        <div class="info-item"><strong>Phone:</strong> {{ $candidate->user->phone ?? '-' }}</div>
                        <div class="info-item"><strong>Gender:</strong> {{ ucfirst($candidate->gender ?? '-') }}</div>
                        <div class="info-item"><strong>Date of Birth:</strong> {{ $candidate->dob ? \Carbon\Carbon::parse($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->sub_county}}, {{ $candidate->county}}</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>
        <span class="badge badge-warning mr-2">{{ $app->reference }}</span>
        <span class="badge bg-primary">{{ ucfirst($app->status) }}</span><br>
        <strong>{{ $app->job->title ?? '' }}</strong> - {{ $app->job->company->name ?? '' }}<br>
        <small>Applied on: {{ \Carbon\Carbon::parse($app->created_at)->format('d M Y') }}</small>
    </div>

    <form action="{{ route('deletejobapplication', $app->uuid) }}" method="POST" class="ml-auto">
        @csrf
        @method('DELETE')
        <button type="submit"
            class="confirm-link btn border-0"
            data-message="Are you sure you want to delete this application? This action is irreversible!">
            <i class="fa fa-trash text-danger fa-2x"></i>
        </button>
    </form>
</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">
                        <div class="d-flex justify-content-between mb-3">
                            <h6 class="mb-0">Documents</h6>
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addCandidateDocumentModal">
                                <i class="bi bi-plus-circle"></i> Add Document
                            </button>
                        </div>

                        @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">
                                        {{ ucfirst(str_replace('_', ' ', $doc->type)) }}
                                        <a href="{{ asset('storage/'.$doc->file_name) }}" target="_blank" class="btn btn-sm btn-outline-primary">View</a>
                                        @can('delete candidate document')
                                            <form action="{{route('deletecandidatedocument', $doc->uuid)}}" method="post">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger confirm-link" data-message="This action is irreversible!!!">Delete</button>
                                            </form>
                                        @endcan
                                    </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">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">Education History</h5>
                            @can('edit candidate')
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addEducationModal">
                                <i class="fa fa-plus"></i> Add Education
                            </button>
                            @endcan
                        </div>

                        @if($candidate->certifications->count())
                            <ul class="list-group">
                                @foreach($candidate->certifications as $edu)
                                    <li class="list-group-item">
                                        <strong>{{ $edu->level }}</strong> — {{ $edu->institution }}
                                        <div><small>{{ $edu->course ?? 'N/A' }}</small></div>
                                        <div><small>{{ $edu->period }}</small></div>
                                        @if($edu->certificate)
                                            <a href="{{ asset('storage/'.$edu->certificate) }}" target="_blank" class="btn btn-link btn-sm">
                                                <i class="fa fa-file"></i> View File
                                            </a>
                                        @endif
                                    </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>

            @can('approve candidate')
                <div class="p-3 bg-white border-top text-right"><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>
            @endcan
        </div>
    </div>
</div>
<!-- Add Document Modal -->
<div class="modal fade" data-backdrop="static" id="addCandidateDocumentModal" tabindex="-1" role="dialog" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form action="{{ route('addcandidatedocument', $candidate->uuid) }}" method="POST" enctype="multipart/form-data" class="autosubmit">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="addDocumentModalLabel">Add Document</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <!-- Document Type -->
          <div class="form-group">
            <label for="document_type">Document Type</label>
            <select class="form-control select2" id="document_type" name="document_type" required>
              <option value="">Select Document Type</option>
              <option value="cv">CV</option>
              <option value="medical">Medical</option>
              <option value="attestation">Attestation</option>
              <option value="driver_license">Driver License</option>
              <option value="good_conduct">Good Conduct</option>
              <option value="passport">Passport</option>
              <option value="mofa">MOFA</option>
              <option value="offer_letter">Offer Letter</option>
              <option value="national_id_front">National ID (Front)</option>
              <option value="national_id_back">National ID (Back)</option>
              <option value="birth_certificate">Birth Certificate</option>
            </select>
          </div>

          <!-- File Input -->
          <div class="form-group">
            <label for="document_file">Upload File</label>
            <input type="file" class="form-control-file" id="document_file" name="document_file" accept=".pdf,.jpg,.jpeg,.png" required>
          </div>

          <!-- Preview -->
          <div class="text-center mt-3" id="previewContainer" style="display:none;">
            <p class="text-muted mb-2">Preview:</p>
            <iframe id="filePreview" class="border rounded" style="width:100%; height:300px;"></iframe>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Upload</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 📘 Add Education Modal -->
<div class="modal fade" data-backdrop="static" id="addEducationModal" tabindex="-1" role="dialog" aria-labelledby="addEducationLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form action="{{ route('updatecandidateeducation', $candidate->uuid) }}" method="POST" enctype="multipart/form-data" class="modal-content autosubmit">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="addEducationLabel">Add Education Record</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="form-group">
                    <label for="institution">Institution</label>
                    <input type="text" name="institution" class="form-control" required placeholder="Enter institution name">
                </div>

                <div class="form-group">
                    <label for="course">Course</label>
                    <input type="text" name="course" class="form-control" placeholder="Eg. KCSE, Degree in Computer Science">
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="from">From</label>
                        <input type="date" name="from" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="to">To</label>
                        <input type="date" name="to" class="form-control">
                    </div>
                </div>

                <div class="form-group">
                    <label for="level">Level</label>
                    <select name="level" class="form-control select2" required>
                        <option value="">Select Level</option>
                        <option value="Highschool">Highschool</option>
                        <option value="University/College">University/College</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="file">Upload Certificate (optional)</label>
                    <input type="file" name="file" class="form-control-file" accept=".pdf,.jpg,.png,.jpeg">
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
<script>
document.getElementById('document_file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const previewContainer = document.getElementById('previewContainer');
    const preview = document.getElementById('filePreview');

    if (file) {
        const fileURL = URL.createObjectURL(file);
        preview.src = fileURL;
        previewContainer.style.display = 'block';
    } else {
        preview.src = '';
        previewContainer.style.display = 'none';
    }
});
</script>
<script>
$(document).ready(function() {
    const form = $('#matchCandidate');
    const select = $('#availableJob');
    const submitBtn = $('#submitMatchBtn');

    // Store the original action template
    const originalAction = form.attr('action');

    // When job is selected
    select.on('change', function() {
        const jobUuid = $(this).val();

        if (jobUuid) {
            // Replace :job placeholder with actual UUID
            const newAction = originalAction.replace(':job', jobUuid);
            form.attr('action', newAction);
            submitBtn.prop('disabled', false);
        } else {
            // Reset form to original and disable submit
            form.attr('action', originalAction);
            submitBtn.prop('disabled', true);
        }
    });
});
</script>


@endsection