@extends('layouts.applicant.applicant')

@section('title', 'Experience Details')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.experience-step.index', $application) }}">Experience</a></li>
    <li class="breadcrumb-item active">Experience Details</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Experience Details</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            @if($application->isEditable())
                <a href="{{ route('applicant.experience-step.edit', [$application, $experience]) }}" class="btn btn-primary me-2">
                    <i class="fas fa-edit me-1"></i>Edit Experience
                </a>
            @endif
            <a href="{{ route('applicant.experience-step.index', $application) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Experience
            </a>
        </div>
    </div>

    <!-- Experience Details Card -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-briefcase me-2"></i>Professional Experience Details
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Basic Information -->
                <div class="col-md-6">
                    <table class="table table-borderless">
                        <tr>
                            <td class="fw-bold" style="width: 40%;">Experience Type:</td>
                            <td>
                                <span class="badge badge-{{ $experience->experience_type === 'teaching' ? 'primary' : ($experience->experience_type === 'research' ? 'success' : 'info') }} badge-lg">
                                    {{ ucfirst($experience->experience_type) }} Experience
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Position/Designation:</td>
                            <td class="fw-bold">{{ $experience->position_designation }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Institution/Organization:</td>
                            <td>{{ $experience->institution_industry_name }}</td>
                        </tr>
                        @if($experience->department)
                        <tr>
                            <td class="fw-bold">Department/Division:</td>
                            <td>{{ $experience->department }}</td>
                        </tr>
                        @endif
                        @if($experience->employment_type)
                        <tr>
                            <td class="fw-bold">Employment Type:</td>
                            <td>{{ $experience->getEmploymentTypeLabel() }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
                
                <!-- Duration & Pay Information -->
                <div class="col-md-6">
                    <table class="table table-borderless">
                        <tr>
                            <td class="fw-bold" style="width: 40%;">From Date:</td>
                            <td>{{ $experience->from_date->format('F d, Y') }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">To Date:</td>
                            <td>
                                @if($experience->is_current)
                                    <span class="badge badge-success">Currently Working</span>
                                @else
                                    {{ $experience->to_date ? $experience->to_date->format('F d, Y') : 'Not specified' }}
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Total Duration:</td>
                            <td class="fw-bold text-primary">{{ $experience->getFormattedDuration() }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Years & Months:</td>
                            <td>{{ $experience->duration_years }} years, {{ $experience->duration_months }} months</td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- Pay Information -->
            @if($experience->pay_scale || $experience->grade_pay || $experience->pay_level || $experience->pay_amount)
            <hr>
            <h6 class="text-primary mb-3">
                <i class="fas fa-money-bill-wave me-2"></i>Pay Information
            </h6>
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-borderless">
                        @if($experience->pay_scale)
                        <tr>
                            <td class="fw-bold" style="width: 40%;">Pay Scale:</td>
                            <td>{{ $experience->pay_scale }}</td>
                        </tr>
                        @endif
                        @if($experience->grade_pay)
                        <tr>
                            <td class="fw-bold">Grade Pay:</td>
                            <td>₹{{ number_format($experience->grade_pay) }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="table table-borderless">
                        @if($experience->pay_level)
                        <tr>
                            <td class="fw-bold" style="width: 40%;">Pay Level:</td>
                            <td>{{ $experience->pay_level }}</td>
                        </tr>
                        @endif
                        @if($experience->pay_amount)
                        <tr>
                            <td class="fw-bold">Basic Pay:</td>
                            <td>₹{{ number_format($experience->pay_amount, 2) }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
            @endif
            
            <!-- Job Description -->
            @if($experience->description)
            <hr>
            <h6 class="text-primary mb-3">
                <i class="fas fa-clipboard-list me-2"></i>Job Description/Responsibilities
            </h6>
            <div class="bg-light p-3 rounded">
                <p class="mb-0">{{ $experience->description }}</p>
            </div>
            @endif
            
            <!-- Experience Document -->
            <hr>
            <h6 class="text-primary mb-3">
                <i class="fas fa-file-alt me-2"></i>Experience Proof
            </h6>
            @if($experience->document_path)
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fas fa-file-pdf fa-2x text-danger"></i>
                    </div>
                    <div>
                        <h6 class="mb-1">{{ $experience->getDocumentName() }}</h6>
                        <p class="text-muted mb-2">Experience certificate/proof document</p>
                        <a href="{{ route('applicant.experience-step.download-document', [$application, $experience]) }}" 
                           class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-download me-1"></i>Download Document
                        </a>
                    </div>
                </div>
            @else
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    No experience proof document uploaded.
                </div>
            @endif
            
            <!-- Timestamps -->
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <small class="text-muted">
                        <strong>Created:</strong> {{ $experience->created_at->format('F d, Y h:i A') }}
                    </small>
                </div>
                <div class="col-md-6">
                    <small class="text-muted">
                        <strong>Last Updated:</strong> {{ $experience->updated_at->format('F d, Y h:i A') }}
                    </small>
                </div>
            </div>
        </div>
        
        <!-- Card Footer with Actions -->
        <div class="card-footer">
            <div class="d-flex justify-content-between">
                <a href="{{ route('applicant.experience-step.index', $application) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Back to Experience List
                </a>
                
                @if($application->isEditable())
                <div>
                    <a href="{{ route('applicant.experience-step.edit', [$application, $experience]) }}" class="btn btn-primary me-2">
                        <i class="fas fa-edit me-1"></i>Edit Experience
                    </a>
                    <form action="{{ route('applicant.experience-step.destroy', [$application, $experience]) }}" 
                          method="POST" class="d-inline" 
                          onsubmit="return confirm('Are you sure you want to delete this experience? This action cannot be undone.')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger">
                            <i class="fas fa-trash me-1"></i>Delete Experience
                        </button>
                    </form>
                </div>
                @else
                <div class="text-muted">
                    <i class="fas fa-lock me-1"></i>Application is finalized - editing disabled
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
.badge-lg {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.table-borderless td {
    border: none;
    padding: 0.5rem 0;
}

.bg-light {
    background-color: #f8f9fc !important;
}

.card-footer {
    background-color: #f8f9fc;
    border-top: 1px solid #e3e6f0;
}
</style>
@endsection