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

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

        {{-- Job Header --}}
        <div class="card shadow mb-4 border-0">
            <div class="card-body text-center bg-primary text-white rounded-top">
                <img src="{{ $job->company?->logo ? asset('storage/'.$job->company->logo) : asset('portal/images/default-company.png') }}"
                     alt="Company Logo" class="rounded-circle border border-white mb-3" width="120" height="120">
                <h3 class="mb-0">{{ $job->title }}</h3>
                <p class="mb-0 font-weight-bold">{{ $job->company->name ?? 'N/A' }}</p>
                <small>Posted on {{ \Carbon\Carbon::parse($job->created_at)->format('d M Y') }}</small> <br>
                <a class="btn btn-warning" href="{{route('schedulejobinterviews', $job->uuid)}}">Schedule Interviews</a>
            </div>

            {{-- Tabs --}}
            <ul class="nav nav-tabs nav-justified mt-3" id="jobTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab">
                        Overview
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab">
                        Company Info
                    </a>
                </li>
                @can('view job applications')
                <li class="nav-item">
                    <a class="nav-link" id="applications-tab" data-toggle="tab" href="#applications" role="tab">
                        Applications
                    </a>
                </li>
                @endcan
                @can('process job applications')
                <li class="nav-item">
                    <a class="nav-link" id="interviews-tab" data-toggle="tab" href="#interviews" role="tab">
                        Interviews
                    </a>
                </li>
                @endcan
                <li class="nav-item">
                    <a class="nav-link" id="suggested-tab" data-toggle="tab" href="#suggested" role="tab">
                        Suggested Candidates
                    </a>
                </li>
            </ul>

            {{-- Tab Panes --}}
            <div class="tab-content p-4 border border-top-0 rounded-bottom" id="jobTabsContent">

               {{-- Overview --}}
                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                    <h5 class="mb-3 text-dark font-weight-bold">Job Overview</h5>

                    <div class="row">
                        {{-- Column 1 --}}
                        <div class="col-md-6">
                            <p class="mb-2 text-dark"><strong>Title:</strong> {{ $job->title }}</p>
                            <p class="mb-2 text-dark"><strong>Category:</strong> {{ $job->category->name ?? 'N/A' }}</p>
                            <p class="mb-2 text-dark"><strong>Country:</strong> {{ $job->country->name ?? 'N/A' }}</p>
                            <p class="mb-2 text-dark"><strong>Location:</strong> {{ $job->job_location ?? 'N/A' }}</p>
                            <p class="mb-2 text-dark"><strong>Type:</strong> {{ ucfirst($job->job_type ?? 'N/A') }}</p>
                            <p class="mb-2 text-dark"><strong>Level:</strong> {{ ucfirst($job->job_level ?? 'N/A') }}</p>
                            <p class="mb-2 text-dark"><strong>Gender:</strong> {{ ucfirst($job->job_gender ?? 'Any') }}</p>
                        </div>

                        {{-- Column 2 --}}
                        <div class="col-md-6">
                            <p class="mb-2 text-dark"><strong>Working Hours:</strong> {{ $job->job_working_hours ?? 'N/A' }}</p>
                            <p class="mb-2 text-dark"><strong>Currency:</strong> {{ strtoupper($job->currency ?? 'USD') }}</p>
                            <p class="mb-2 text-dark">
                                <strong>Salary Range:</strong>
                                {{ number_format($job->job_salary_min, 2) }} - {{ number_format($job->job_salary_max, 2) }}
                            </p>
                            <p class="mb-2 text-dark"><strong>Candidates Needed:</strong> {{ $job->job_candidates ?? 'N/A' }}</p>
                            <p class="mb-2 text-dark"><strong>Interview Required:</strong> {{ ucfirst($job->job_interview_required ?? 'No') }}</p>
                            <p class="mb-2 text-dark"><strong>Expiration Date:</strong> {{ \Carbon\Carbon::parse($job->job_expiration)->format('d M Y') }}</p>
                            <p class="mb-2 text-dark">
                                <strong>Status:</strong>
                                @if($job->job_status === 'Active')
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-secondary">{{ $job->job_status }}</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <hr>

                    {{-- Description & Details --}}
                    <div class="row">
                        <div class="col-md-12">
                            <h6 class="text-dark font-weight-bold">Description</h6>
                            <p class="text-dark">{!! formatText($job->job_description) ?? 'No description provided.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Responsibilities</h6>
                            <p class="text-dark">{!! formatText($job->job_responsibilities) ?? 'Not specified.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Requirements</h6>
                            <p class="text-dark">{!! formatText($job->job_requirements) ?? 'Not specified.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Skills Required</h6>
                            <p class="text-dark">{!! formatText($job->job_skill_requirements) ?? 'Not specified.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Experience</h6>
                            <p class="text-dark">{!! formatText($job->job_experience_requirements) ?? 'Not specified.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Education</h6>
                            <p class="text-dark">{!! formatText($job->job_education_requirements) ?? 'Not specified.' !!}</p>

                            <h6 class="text-dark font-weight-bold mt-3">Benefits</h6>
                            <p class="text-dark">{!! formatText($job->job_benefits) ?? 'Not specified.' !!}</p>
                        </div>
                    </div>

                    {{-- Demand Letter --}}
                    @if($job->demand_letter)
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="text-dark font-weight-bold">Demand Letter</h6>
                                <a href="{{ asset('storage/'.$job->demand_letter) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                    <i class="fa fa-file-pdf-o"></i> View Demand Letter
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
                {{-- Company Info --}}
                <div class="tab-pane fade" id="company" role="tabpanel">
                    <h5 class="mb-3">Company Information</h5>
                    <div class="card mb-3">
                        <div class="card-body">
                            <p><strong>Name:</strong> {{ $job->company->name ?? 'N/A' }}</p>
                            <p><strong>Employer:</strong> {{ $job->company->employer->user->name ?? 'N/A' }}</p>
                            <p><strong>Email:</strong> {{ $job->company->employer->user->email ?? 'N/A' }}</p>
                            <p><strong>Industry:</strong> {{ ucfirst($job->company->industry ?? 'N/A') }}</p>
                            <p><strong>Founded:</strong> {{ $job->company->year_founded ?? 'N/A' }}</p>
                            <p><strong>Website:</strong> {{ $job->company->website ?? 'N/A' }}</p>
                            <p><strong>Description:</strong></p>
                            <p>{{ $job->company->description ?? 'No description available.' }}</p>
                        </div>
                    </div>
                </div>

                {{-- Applications --}}
                @can('view job applications')
                    <div class="tab-pane fade" id="applications" role="tabpanel">
                        <h5 class="mb-3">Candidate Applications</h5>

                        @forelse($job->applications as $app)
                            <div class="card mb-3 shadow-sm">
                                <div class="card-body position-relative">
                                    @can('delete job application')
                                    <form
                                        action="{{ route('deletejobapplication', $app->uuid) }}"
                                        method="POST"
                                        class="position-absolute"
                                        style="top: 0; right: 0;"
                                        >
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger confirm-link" data-message="CAREFUL! This action is IRREVERSIBLE">
                                            <i class="fa fa-trash"></i> Delete
                                        </button>
                                        </form>
                                    @endcan
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ $app->candidate->user->name ?? 'N/A' }}</h6>
                                            <p class="mb-1"><strong>Email:</strong> {{ $app->candidate->user->email ?? 'N/A' }}</p>
                                            <p class="mb-1"><strong>Experience:</strong> {{ $app->experience ?? 'N/A' }} years</p>
                                            <p class="mb-1"><strong>Skills:</strong> {{ $app->candidate->skills ?? 'N/A' }}</p>
                                        </div>
                                        <div>
                                            @if($app->status === 'pending')
                                                <span class="badge badge-warning p-2">Pending</span>
                                            @elseif($app->status === 'approved')
                                                <span class="badge badge-success p-2">Approved</span>
                                            @elseif($app->status === 'rejected')
                                                <span class="badge badge-danger p-2">Rejected</span>
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Remarks --}}
                                    @if(!empty($app->remarks))
                                        <div class="mt-2">
                                            <small class="text-muted"><strong>Remarks:</strong> {{ $app->remarks }}</small>
                                        </div>
                                    @endif

                                    {{-- Action Buttons for Pending Applications --}}
                                    @if($app->status === 'pending')
                                        @can('process job applications')
                                            <form method="POST" action="{{ route('approvejobapplication', $app->uuid) }}" class="d-inline-block mr-2 autosubmit">
                                                @csrf
                                                <div class="form-group mt-2 mb-1">
                                                    <textarea name="remarks" class="form-control form-control-sm" rows="2" placeholder="Enter approval note..."></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-sm btn-success">
                                                    <i class="fa fa-check"></i> Approve
                                                </button>
                                            </form>

                                            <form method="POST" action="{{ route('rejectjobapplication', $app->uuid) }}" class="d-inline-block autosubmit">
                                                @csrf
                                                <div class="form-group mt-2 mb-1">
                                                    <textarea name="remarks" class="form-control form-control-sm" rows="2" placeholder="Enter rejection reason..."></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="fa fa-times"></i> Reject
                                                </button>
                                            </form>
                                        @endcan
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p class="text-muted">No candidate applications yet.</p>
                        @endforelse
                    </div>
                @endcan
                {{-- Interviews--}}
                @can('process job applications')
                    <div class="tab-pane fade" id="interviews" role="tabpanel">
                        <h5 class="mb-3">Candidate Interviews</h5>

                        <div class="table-responsive">
                            <table class="table table-striped table-hover downloadable">
                                <thead class="thead-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Ref</th>
                                        <th>Date</th>
                                        <th>Candidate</th>
                                        <th>Status</th>
                                        <th class="text-center">Selected</th>
                                        <th class="text-center">Travelled</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($job->applications as $app)
                                        @foreach($app->interviews as $key => $interview)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $interview->reference ?? '—' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($interview->date)->format('d M Y h:i A') }}</td>
                                                <td>
                                                    <a href="{{ route('candidateprofile', $interview->application?->candidate?->uuid) }}">
                                                        {{ $interview->application->candidate->user->name ?? 'N/A' }}
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="badge
                                                        @if($interview->status === 'passed') badge-success
                                                        @elseif($interview->status === 'failed') badge-danger
                                                        @elseif($interview->status === 'pending') badge-primary
                                                        @else badge-secondary @endif">
                                                        {{ ucfirst($interview->status) }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    @if($interview->selected)
                                                        <i class="fa fa-check-circle text-success" title="Selected"></i>
                                                    @else
                                                        <i class="fa fa-times-circle text-danger" title="Not Selected"></i>
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    @if($interview->travelled)
                                                        <i class="fa fa-check-circle text-success" title="Travelled"></i>
                                                    @else
                                                        <i class="fa fa-times-circle text-danger" title="Not Travelled"></i>
                                                    @endif
                                                </td>


                                                {{-- 🔽 Action Dropdown --}}
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ $interview->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            Actions
                                                        </button>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $interview->uuid }}">
                                                            <a href="#" class="dropdown-item updateInterviewStatusBtn" data-href="{{ route('updateinterviewstatus', $interview->uuid) }}">
                                                                <i class="fa fa-edit mr-1"></i> Update Status
                                                            </a>
                                                            @if($interview->status == "passed")
                                                                <a class="dropdown-item confirm-link" data-message="CAREFULL: This action will mark the candidate as selected for the position and ready to begin travelling process.This Action cannot be Undone" href="{{route('markcandidateselected', $interview->uuid)}}">
                                                                    <i class="fa fa-check mr-1"></i> Mark Selected
                                                                </a>
                                                                @if($interview->selected)
                                                                <a class="dropdown-item markTravelledBtn" href="#" data-href="{{route('markcandidatetravelled', $interview->uuid)}}">
                                                                    <i class="fa fa-plane mr-1"></i> Mark Travelled
                                                                </a>
                                                                @endif
                                                            @endif
                                                            @can('delete job interview')
                                                                <form action="{{ route('deletejobinterview', $interview->uuid) }}" method="POST" class="d-inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" data-message="This Action will delete the Interview permanently" class="dropdown-item border-0 confirm-link text-danger">
                                                                        <i class="text-danger fa fa-trash mr-1"></i> Delete
                                                                    </button>
                                                                </form>
                                                            @endcan
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                @endcan


                {{-- Suggested Candidates --}}
                <div class="tab-pane fade" id="suggested" role="tabpanel">
                    <h5 class="mb-3">Suggested Candidates</h5>
                    @forelse($suggestedCandidates as $candidate)
                        <div class="card mb-3 shadow-sm candidate-card" id="candidate-{{ $candidate->uuid }}">
                            <div class="card-body">
                                <h6 class="card-title mb-1">{{ $candidate->user->name }}</h6>
                                <p class="mb-1"><strong>Email:</strong> {{ $candidate->user->email }}</p>
                                <p class="mb-1"><strong>Experience:</strong> {{ $candidate->experience ?? 'N/A' }} years</p>
                                <p class="mb-1"><strong>Skills:</strong> {{ $candidate->skills ?? 'N/A' }}</p>

                                <div class="mt-2 d-flex flex-wrap gap-2">
                                    <a href="{{ route('candidateprofile', $candidate->uuid) }}"
                                    class="btn btn-sm btn-outline-primary mr-2">
                                        View Profile
                                    </a>
                                    @can('match candidates to job')
                                    <button
                                        class="btn btn-sm btn-primary match-btn"
                                        data-job="{{ $job->uuid }}"
                                        data-candidate="{{ $candidate->uuid }}">
                                        Match Candidate
                                    </button>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted">No suggested candidates found.</p>
                    @endforelse
                </div>


            </div>
        </div>
    </div>
</div>
<!-- Update Status Modal -->
<div class="modal fade" id="updateInterviewStatusModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="updateStatusLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-lg" role="document">
    <form id="updateInterviewStatusForm" class="autosubmit" method="POST" action="">
        @csrf
        <input type="hidden" name="interview_id" id="interview_id">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="updateStatusLabel">Update Interview Status</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="status">Status</label>
                    <select name="status" id="status" class="form-control" required>
                        <option value="pending">Pending</option>
                        <option value="passed">Passed</option>
                        {{-- <option value="cancelled">Cancelled</option> --}}
                        <option value="failed">Failed</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="remarks">Remarks</label>
                    <textarea name="remarks" id="remarks" class="form-control" rows="3" placeholder="Enter remarks here..." required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </form>
  </div>
</div>
<!-- Update Status Modal -->
<div class="modal fade" id="updateTravelModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="updateStatusLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-lg" role="document">
    <form id="updateTravelForm" class="autosubmit" method="POST" action="">
        @csrf
        <input type="hidden" name="interview_id" id="interview_id">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Update Travelling</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Date Travelled</label>
                    <input type="date" name="date_travelled" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </form>
  </div>
</div>

@endsection

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

<script>
$(document).ready(function() {
    $(document).on('click','.match-btn', function() {
        const $btn = $(this);
        const jobUUID = $btn.data('job');
        const candidateUUID = $btn.data('candidate');
        const $card = $btn.closest('.candidate-card');

        $btn.prop('disabled', true).text('Matching...');

        $.ajax({
            url: "{{ route('candidatejobmatching', ['job' => '__JOB__', 'candidate' => '__CAND__']) }}"
                    .replace('__JOB__', jobUUID)
                    .replace('__CAND__', candidateUUID),
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    $btn.html('<i class="fa fa-check text-success"></i> Matched');
                    setTimeout(() => {
                        $card.fadeOut(500, function() {
                            $(this).remove();
                        });
                    }, 600);
                } else {
                    alert(response.message || 'Failed to match candidate.');
                    $btn.prop('disabled', false).text('Match Candidate');
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'An error occurred.';
                alert(msg);
                $btn.prop('disabled', false).text('Match Candidate');
            }
        });
    });
    // Handle opening modal and set interview ID
    $(document).on('click','.updateInterviewStatusBtn', function (e) {
        e.preventDefault();
        var url = $(this).data('href');
        $('#updateInterviewStatusForm').attr('action', url);
        $('#updateInterviewStatusModal').modal('show');
    });
    $(document).on('click','.markTravelledBtn', function (e) {
        e.preventDefault();
        var url = $(this).data('href');
        $('#updateTravelForm').attr('action', url);
        $('#updateTravelModal').modal('show');
    });
});
</script>
@endsection