@extends('layouts.app')

@section('title', $job->title . ' | Infra24')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Job Details</h4>
            <div class="page-title-right">
                <a href="{{ route('jobs.index') }}" class="btn btn-light"><i class="ri-arrow-go-back-line align-bottom me-1"></i> Back to Listing</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xxl-8 col-lg-7">
        <div class="card">
            <div class="card-body p-4">
                <h4 class="fw-semibold mb-3">{{ $job->title }}</h4>
                <div class="d-flex gap-2 mb-4">
                    <span class="badge badge-soft-info fs-13 px-2 py-1"><i class="ri-price-tag-3-line me-1"></i> {{ ucfirst($job->job_type) }} Price</span>
                    <span class="badge badge-soft-success fs-13 px-2 py-1">
                        <i class="ri-wallet-3-line me-1"></i>
                        @if($job->budget_min && $job->budget_max)
                            ${{ $job->budget_min }} - ${{ $job->budget_max }}
                        @elseif($job->budget_min)
                            Min ${{ $job->budget_min }}
                        @elseif($job->budget_max)
                            Max ${{ $job->budget_max }}
                        @else
                            Negotiable
                        @endif
                    </span>
                    @if($job->deadline)
                        <span class="badge badge-soft-danger fs-13 px-2 py-1"><i class="ri-timer-line me-1"></i> Deadline: {{ \Carbon\Carbon::parse($job->deadline)->format('M d, Y') }}</span>
                    @endif
                </div>

                <h5 class="fs-16 mb-3">Job Description</h5>
                <div class="text-muted">
                    {!! nl2br(e($job->description)) !!}
                </div>

                <div class="mt-4 pt-3 border-top border-top-dashed">
                    <h5 class="fs-16 mb-3">Required Skills</h5>
                    <div class="d-flex gap-2 flex-wrap">
                        @forelse($job->skills as $skill)
                            <span class="badge bg-light text-dark fs-13">{{ $skill->name }}</span>
                        @empty
                            <span class="text-muted">No specific skills listed.</span>
                        @endforelse
                    </div>
                </div>
            </div>
            
            <div class="card-footer bg-light border-0 py-3">
                @if(auth()->check() && auth()->user()->hasRole('executor'))
                    @php
                        $hasApplied = \App\Models\Application::where('job_id', $job->id)->where('user_id', auth()->id())->exists();
                    @endphp

                    @if($hasApplied)
                        <button class="btn btn-success w-100" disabled>
                            <i class="ri-check-line align-middle me-1"></i> Already Applied
                        </button>
                    @else
                        <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#applyModal">
                            <i class="ri-send-plane-fill align-middle me-1"></i> Apply Now
                        </button>
                        <!-- Application Modal -->
                        <div class="modal fade" id="applyModal" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered">
                                <form action="{{ route('freelancer.applications.store', $job->id) }}" method="POST" class="modal-content">
                                    @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title">Apply for {{ $job->title }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body text-start">
                                        <div class="mb-3">
                                            <h6 class="form-label">Cover Letter</h6>
                                            <textarea class="form-control" name="cover_letter" rows="6" placeholder="Why are you a great fit for this job? Detail your experience and approach..." required></textarea>
                                        </div>
                                        <p class="text-muted small mb-0">Your full profile and portfolio will be attached automatically.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-primary updates-btn">Submit Application</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endif
                @elseif(!auth()->check())
                    <a href="{{ route('login') }}" class="btn btn-primary w-100">
                        Login as Freelancer to Apply
                    </a>
                @endif
            </div>
        </div>
    </div>

    <div class="col-xxl-4 col-lg-5">
        <div class="card">
            <div class="card-body p-4 text-center">
                <h5 class="fs-16 mb-4 text-start">About the Company</h5>
                <div class="profile-user position-relative d-inline-block mx-auto mb-3">
                    @if($job->company->logo)
                        <img src="{{ Storage::url($job->company->logo) }}" class="rounded-circle avatar-lg img-thumbnail" alt="company-logo">
                    @else
                        <div class="avatar-lg rounded-circle img-thumbnail bg-light d-flex align-items-center justify-content-center mx-auto">
                            <i class="ri-building-fill text-muted fs-36"></i>
                        </div>
                    @endif
                </div>
                <h5 class="fs-15 mb-1">{{ $job->company->name }}</h5>
                <p class="text-muted">{{ Str::limit($job->company->description, 100) }}</p>

                <div class="mt-4 pt-3 border-top border-top-dashed text-start">
                    <ul class="list-unstyled mb-0">
                        @if($job->company->website)
                        <li class="d-flex mb-2">
                            <div class="flex-shrink-0"><i class="ri-global-line text-muted fs-15 me-2"></i></div>
                            <div class="flex-grow-1"><a href="{{ $job->company->website }}" target="_blank" class="text-body">{{ $job->company->website }}</a></div>
                        </li>
                        @endif
                        <li class="d-flex mb-2">
                            <div class="flex-shrink-0"><i class="ri-mail-line text-muted fs-15 me-2"></i></div>
                            <div class="flex-grow-1">{{ $job->company->contact_email ?? 'Not provided' }}</div>
                        </li>
                        <li class="d-flex mb-2">
                            <div class="flex-shrink-0"><i class="ri-phone-line text-muted fs-15 me-2"></i></div>
                            <div class="flex-grow-1">{{ $job->company->contact_phone ?? 'Not provided' }}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection