@extends('layouts/blankLayout')

@section('title', 'Apply Job - Welcome')
@section('content')

<style>
.content-wrapper {
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
    box-sizing: border-box;
    min-height: 297mm; 
    display: block;
    text-align: left; /* ensure left alignment */
}

/* Banner Image */
.welcome-banner {
    background-image: url('{{ asset('assets/egc_images/welcome_banner.jpg') }}');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glassmorphism Overlay */
.banner-overlay {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 40px;
    border-radius: 15px;
    text-align: center;
    color: #000;
}

.banner-overlay h1 {
    margin: 0 0 15px 0;
    font-size: 28px;
    font-weight: 700;
}


.apply-btn {
    background: #AB2B22;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.apply-btn:hover {
    background: rgba(255, 60, 0, 1);
    color: #fff;
}

/* Grid Layout for job content */
.job-content-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 60% / 40% */
    gap: 20px;
    margin-top: 20px;
}

/* Left column cards */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left; /* ensure left alignment */
}

/* Card styling */
.card {
    background: transparent;
    box-shadow: none;
}

.card-right {
    border: 1px solid #e6e6e6ff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
/* #job_description h3 + p  {
    margin-top: 0;
    padding-left:10px;
} */

/* Responsive */
@media (max-width: 768px) {
    .job-content-grid {
        grid-template-columns: 1fr; /* stack columns on small screens */
    }
}
</style>
@php
$short_encrypt_id = base64_encode($jobRequest->sno);
@endphp
<div class="content-wrapper bg-white">
    <div class="welcome-banner">
        <div class="banner-overlay">
            <h1>{{ $jobRequest->job_role_name }}</h1>
            <a href="{{ url('/job_application/' . $short_encrypt_id) }}" class="apply-btn">Apply Now</a>
        </div>
    </div>
    <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
        <h2 style="font-size: 24px; color: #333; margin:10px 0px;text-align: center;">Welcome to the Job Portal!</h2>
        <p style="font-size: 16px; color: #555; margin:5px 0 0 0;">
            We are excited to have you explore the latest job openings. Find the role that suits you best and apply today!
        </p>
    </div>
    <div class="job-content-grid px-4">
        <div class="left-column">
            <!-- <div class="card">
                <h3 style="margin:0 0 10px 0; font-size: 18px; color:#333;">About the Role</h3>
                <p style="margin:0; font-size: 14px; color:#555;">
                    We are hiring a Technical Content Writer to produce clear and accurate documentation, how-to guides, and product content. You will simplify complex concepts into easy-to-understand articles for our users.
                </p>
            </div>
            <div class="card">
                <h3 style="margin:0 0 10px 0; font-size: 18px; color:#333;">Key Responsibilities</h3>
                <ul style="margin:0; padding-left: 20px; font-size: 14px; color:#555;">
                    <li>Write and edit technical documentation and guides</li>
                    <li>Create product content for websites and apps</li>
                    <li>Collaborate with developers and designers</li>
                    <li>Ensure content is clear, concise, and accurate</li>
                </ul>
            </div>
            <div class="card">
                <h3 style="margin:0 0 10px 0; font-size: 18px; color:#333;">Skills</h3>
                <p style="margin:0; font-size: 14px; color:#555;">
                    Technical writing, content strategy, SEO basics, research skills, communication skills, attention to detail.
                </p>
            </div> -->
            <div class="text-justify my-3 text-dark hide-scrollbar " >
                <div id="job_description" class="mb-1 text-dark" style="font-size: 0.9rem; line-height: 1.5; word-wrap: break-word;">
                    {!! $jobRequest->job_description!!} 
                    <!-- {!! Str::limit($jobRequest->job_description, 590) !!} 
                    <span class="see-more text-dark fw-bold" style='cursor:pointer;' onclick="toggleDescription()">See More</span> -->
                </div>
            </div>
        </div>
        <div class="card-right" style="padding:20px; border-radius:12px;margin-bottom:20px;">
            <div style="margin-bottom:10px;">
                <span style="display:inline-block; width:100%; font-weight:600; color:black;">Experience</span>
                <span style="display:inline-block; width:100%; color:#555;">{{$jobRequest->experience > 0 ? '0 -' . $jobRequest->experience . ' Years' : 'Fresher'}}</span>
            </div>
            <div style="margin-bottom:10px;">
                <span style="display:inline-block; width:100%; font-weight:600; color:black;">Salary Range</span>
                <span style="display:inline-block; width:100%; color:#555;">₹ {{$jobRequest->min_salary}} - ₹ {{$jobRequest->max_salary}} /month</span>
            </div>
            <div style="margin-bottom:10px;">
                <span style="display:inline-block; width:100%; font-weight:600; color:black;">Job Created</span>
                <span style="display:inline-block; width:100%; color:#555;">{{ date('d-M-Y', strtotime($jobRequest->created_at)) }}</span>
            </div>
            <div style="margin-bottom:10px;">
                <span style="display:inline-block; width:100%; font-weight:600; color:black;">Due Date</span>
                <span style="display:inline-block; width:100%; color:#555;">{{$jobRequest->last_apply_date ? date('d-M-Y', strtotime($jobRequest->last_apply_date)) :'-' }}</span>
            </div>

            <a href="{{ url('/job_application/' . $short_encrypt_id) }}" class="apply-btn text-center">
                Apply Now
            </a>
        </div>
    </div>
</div>
<script>
    const fullDescription = @json($jobRequest->job_description);
    const limitedDescription = @json(Str::limit($jobRequest->job_description, 620));
    function toggleDescription() {
        var jobDescription = document.getElementById('job_description');
        
        // Check current state using a data attribute or simple text check
        if (jobDescription.innerHTML.includes('See More')) {
            jobDescription.innerHTML = fullDescription + " <span class='see-more text-dark fw-bold' style='cursor:pointer;' onclick='toggleDescription()'>See Less</span>";
        } else {
            jobDescription.innerHTML = limitedDescription + " <span class='see-more text-dark fw-bold' style='cursor:pointer;' onclick='toggleDescription()'>See More</span>";
        }
    }
</script>
@endsection