File manager - Edit - /var/www/ratemypay/resources/views/dashboard/job-experiences/show.blade.php
Back
@extends('layouts.dashboard') @section('content') <div class="max-w-5xl mx-auto md:mt-10 mt-20 px-6 pb-20"> {{-- Back Link --}} <a href="{{ route('dashboard.job-experiences.index') }}" class="inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-[#2F3D7E] mb-6 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> Back to experiences </a> <div class="bg-white rounded-[24px] shadow-sm border border-gray-100 overflow-hidden"> {{-- Header Section --}} <div class="p-8 border-b border-gray-100 flex flex-col md:flex-row justify-between items-start gap-6"> <div> <div class="flex items-center gap-3 mb-2"> <h1 class="text-3xl font-bold text-[#2F3D7E]">{{ $experience->job_title }}</h1> {{-- Status Badge --}} @if($experience->is_published) <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200"> Published </span> @else <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200"> Draft </span> @endif </div> <div class="flex flex-wrap items-center gap-4 text-sm text-gray-600"> <span class="flex items-center gap-1.5"> <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg> {{ $experience->company_name }} </span> <span class="w-1 h-1 rounded-full bg-gray-300"></span> <span class="flex items-center gap-1.5"> <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg> @if($experience->city || $experience->state || $experience->country) {{ $experience->country }} @if($experience->city || $experience->state || $experience->post_code) ( {{ $experience->city }} {{ $experience->city && $experience->state ? ', ' : '' }} {{ $experience->state }} {{ ($experience->city || $experience->state) && $experience->post_code ? ', ' : '' }} {{ $experience->post_code }} ) @endif @endif </span> </div> </div> {{-- Action Buttons --}} <div class="flex items-center gap-3 w-full md:w-auto"> <form action="{{ route('dashboard.job-experiences.toggle', $experience->id) }}" method="POST"> @csrf @method('PATCH') <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium border transition-colors {{ $experience->is_published ? 'border-red-200 text-red-700 bg-red-50 hover:bg-red-100' : 'border-green-200 text-green-700 bg-green-50 hover:bg-green-100' }}"> {{ $experience->is_published ? 'Unpublish' : 'Publish Now' }} </button> </form> <a href="{{ route('dashboard.job-experiences.edit', $experience->id) }}" class="px-4 py-2 bg-[#2F3D7E] hover:bg-[#1E2858] text-white rounded-lg text-sm font-medium transition-colors shadow-sm"> Edit Details </a> <form action="{{ route('dashboard.job-experiences.destroy', $experience->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this experience? This cannot be undone.');"> @csrf @method('DELETE') <button type="submit" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> </button> </form> </div> </div> <div class="p-8 grid grid-cols-1 lg:grid-cols-3 gap-8"> {{-- Left Column: General Info --}} <div class="lg:col-span-2 space-y-8"> {{-- Role Details --}} <section> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Role Overview</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8"> <div> <span class="block text-sm text-gray-500 mb-1">Seniority Level</span> <span class="font-medium text-gray-900">{{ $experience->level }}</span> </div> <div> <span class="block text-sm text-gray-500 mb-1">Employment Type</span> <span class="font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $experience->employment_type)) }}</span> </div> <div> <span class="block text-sm text-gray-500 mb-1">Work Arrangement</span> <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-50 text-blue-700"> {{ ucfirst($experience->work_arrangement) }} </span> </div> <div> <span class="block text-sm text-gray-500 mb-1">Work Status</span> <span class="font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $experience->work_status)) }}</span> </div> <div class="md:col-span-2"> {{-- Duration --}} <div class="flex items-center gap-2 text-sm text-gray-600 mb-6"> <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> <span class="font-medium"> {{ date('M Y', mktime(0, 0, 0, $experience->employment_month, 1, $experience->employment_year)) }} </span> <span>→</span> <span class="font-medium"> @if($experience->still_employed) Present @else {{ date('M Y', mktime(0, 0, 0, $experience->end_month, 1, $experience->end_year)) }} @endif </span> <span class="text-gray-400 ml-2"> @php $startDate = \Carbon\Carbon::create($experience->employment_year, $experience->employment_month, 1); $endDate = $experience->still_employed ? \Carbon\Carbon::now() : \Carbon\Carbon::create($experience->end_year, $experience->end_month, 1); $duration = $startDate->diffInMonths($endDate); $years = floor($duration / 12); $months = $duration % 12; @endphp ({{ $years > 0 ? $years . 'y ' : '' }}{{ $months }}m) </span> </div> </div> </div> </section> <hr class="border-gray-100"> {{-- Descriptions --}} <section> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Additional Details</h3> <div class="space-y-6"> @if($experience->job_description) <div> <span class="block text-sm text-gray-500 mb-2">Job Description</span> <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-line bg-gray-50 p-4 rounded-xl border border-gray-100"> {{ $experience->job_description }} </div> </div> @endif @if($experience->benefits) <div> <span class="block text-sm text-gray-500 mb-2">Benefits & Perks</span> <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-line bg-gray-50 p-4 rounded-xl border border-gray-100"> {{ $experience->benefits }} </div> </div> @endif </div> {{-- Market Comparison Chart --}} @if($chart) <div class="mb-8 pb-8 border-b border-gray-200"> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Market Comparison</h3> <div class="bg-white p-6 rounded-lg border border-gray-200"> <div id="marketComparisonChart" class="w-full"></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script> document.addEventListener('DOMContentLoaded', function () { const options = { chart: { type: 'bar', height: 320, toolbar: { show: false } }, series: [{ name: 'Salary ({{ $chart['currency'] }})', data: {!! json_encode(array_values($chart['values'])) !!} }], colors: [ '#EF4444', // red – very low / negative '#F97316', // orange – low '#EAB308', // yellow – market average '#22C55E', // green – above market '#16A34A', // dark green – top market ], plotOptions: { bar: { borderRadius: 6, columnWidth: '45%', distributed: true } }, dataLabels: { enabled: true, formatter: val => new Intl.NumberFormat().format(val), style: { colors: ['#374151'], fontSize: '12px' } }, xaxis: { categories: {!! json_encode(array_keys($chart['values'])) !!}, title: { text: 'Market Percentiles' } }, yaxis: { labels: { formatter: val => new Intl.NumberFormat().format(val) }, title: { text: 'Annual Compensation' } }, tooltip: { y: { formatter: val => new Intl.NumberFormat().format(val) + ' {{ $chart['currency'] }}' } } }; new ApexCharts( document.querySelector('#marketComparisonChart'), options ).render(); }); </script> @endif {{-- Salary Explanation Section --}} @if($marketComparison) <div class="mb-8"> <h3 class="text-md font-semibold text-gray-900 mb-3"> How your pay compares to the market </h3> <div class="bg-[#F9FAFB] border border-gray-200 rounded-lg p-5 space-y-4"> <p class="text-sm text-gray-700"> Your total compensation is <span class="font-semibold"> {{ number_format($job->total_compensation) }} {{ $marketComparison['currency'] }} </span>. </p> <p class="text-sm text-gray-700"> The market median for this role is <span class="font-semibold"> {{ number_format($marketComparison['percentiles']['p50']) }} {{ $marketComparison['currency'] }} </span>. </p> @php $positioning = $marketComparison['positioning']; $badgeMap = [ 'below_market' => ['bg-red-100', 'text-red-700', 'Below Market'], 'at_market' => ['bg-green-100', 'text-green-700', 'At Market'], 'above_market' => ['bg-blue-100', 'text-blue-700', 'Above Market'], ]; @endphp <div class="flex items-center gap-3"> <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $badgeMap[$positioning][0] ?? 'bg-gray-100' }} {{ $badgeMap[$positioning][1] ?? 'text-gray-700' }}"> {{ $badgeMap[$positioning][2] ?? 'Unknown' }} </span> <span class="text-xs text-gray-500"> Confidence score: {{ (int) ($marketComparison['confidence_score'] * 100) }}% </span> </div> <p class="text-xs text-gray-500"> This estimate is based on role, experience, location, industry, and company size using current market data. </p> </div> </div> @endif </section> </div> {{-- Right Column: Compensation & Company --}} <div class="space-y-6"> {{-- Compensation Card --}} <div class="bg-[#F8FAFC] rounded-2xl p-6 border border-gray-100"> <div class="flex items-center gap-2 mb-4 text-[#2F3D7E]"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> <h3 class="font-bold">Total Compensation</h3> </div> <div class="mb-6"> <span class="block text-xs text-gray-500 mb-1 uppercase tracking-wide">Base Salary</span> <span class="text-2xl font-bold text-gray-900"> {{ $experience->currency }} {{ number_format($experience->annual_base_salary) }} </span> <span class="text-sm text-gray-500">/year</span> </div> <div class="space-y-3 pt-4 border-t border-gray-200"> <div class="flex justify-between items-center text-sm"> <span class="text-gray-500">Bonus</span> <span class="font-medium text-gray-900"> {{ $experience->bonus_commission ? number_format($experience->bonus_commission) : '-' }} </span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-500">Overtime</span> <span class="font-medium text-gray-900"> {{ $experience->overtime_pay ? number_format($experience->overtime_pay) : '-' }} </span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-500">Equity</span> <span class="font-medium text-gray-900"> {{ $experience->equity ? number_format($experience->equity) : '-' }} </span> </div> </div> </div> {{-- Company Stats --}} <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm"> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Company Profile</h3> <div class="space-y-4"> <div> <span class="block text-xs text-gray-400">Industry</span> <span class="font-medium text-gray-800 text-sm">{{ $experience->industry ?? 'Not Listed' }}</span> </div> <div> <span class="block text-xs text-gray-400">Company Size</span> <span class="font-medium text-gray-800 text-sm">{{ $experience->company_size ?? 'Not Listed' }}</span> </div> <div> <span class="block text-xs text-gray-400">Total Experience</span> <span class="font-medium text-gray-800 text-sm">{{ $experience->years_of_experience }} Years</span> </div> <div> <span class="block text-xs text-gray-400">Years in Role</span> <span class="font-medium text-gray-800 text-sm">{{ $experience->number_of_years_as_employee }} Years</span> </div> </div> </div> </div> </div> </div> </div> @endsection
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings