@extends('layouts.master')

@section('title', 'Careers | Setara Group')

@push('styles')
    <style>
        .job-card:hover .apply-btn {
            background-color: var(--accent);
            color: black;
        }
        .modal-glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <header class="pt-48 pb-24 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-hero-glow pointer-events-none"></div>
        <div class="container mx-auto px-6 relative z-10">
            <span class="inline-block px-4 py-1.5 rounded-full border border-primary/20 bg-primary/5 text-primary text-xs font-bold tracking-widest uppercase mb-6 animate-pulse">{{ $header->subtitle ?? 'Join Our Team' }}</span>
            <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tighter leading-none">{!! $header ? str_replace(['Career Path'], ['<span class="text-gradient">Career Path</span>'], e($header->title)) : 'Your <span class="text-gradient">Career Path</span> Begins Here' !!}</h1>
            <p class="text-secondary font-light tracking-wide max-w-xl mx-auto text-lg leading-relaxed">
                {{ $header->description ?? "Be part of a legacy that values innovation, craftsmanship, and global impact. Build your future with Bangladesh's leading industrial group." }}
            </p>
        </div>
    </header>

    <!-- Why Join Us Section -->
    @if($features->count() > 0)
    <section class="py-24 relative">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($features as $feature)
                <div class="glass-card p-10 rounded-3xl hover:-translate-y-2 transition-all duration-500 group">
                    <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors duration-500">
                        <i class="{{ $feature->icon ?? 'fas fa-rocket' }} text-2xl text-primary group-hover:text-black transition-colors duration-500"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-foreground mb-4">{{ $feature->title }}</h3>
                    <p class="text-secondary text-sm leading-relaxed">{{ $feature->description }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Job Listings -->
    <section class="py-24 bg-surface/30">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16">
                <div class="max-w-xl">
                    <h2 class="text-4xl font-bold text-foreground mb-4 tracking-tight">Open <span class="text-gradient">Positions</span></h2>
                    <p class="text-secondary leading-relaxed">Explore current opportunities across our diverse business units.</p>
                </div>
            </div>

            @if(session('success'))
                <div class="mb-8 p-4 bg-green-500/10 border border-green-500/20 text-green-400 rounded-2xl text-center">
                    {{ session('success') }}
                </div>
            @endif

            <div class="space-y-6">
                @forelse($jobs as $job)
                    <div class="job-card glass-card p-8 rounded-[2rem] flex flex-col md:flex-row justify-between items-center group hover:border-primary/50 transition-all duration-500">
                        <div class="flex items-center space-x-6 w-full md:w-auto mb-6 md:mb-0">
                            <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:border-primary/30 transition-all">
                                <i class="fas fa-briefcase text-primary text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-foreground">{{ $job->title }}</h3>
                                <div class="flex items-center space-x-4 mt-2">
                                    <span class="text-secondary text-xs flex items-center"><i class="fas fa-map-marker-alt mr-2 text-primary"></i>{{ $job->location }}</span>
                                    <span class="text-secondary text-xs flex items-center"><i class="fas fa-calendar-alt mr-2 text-primary"></i>Deadline: {{ \Carbon\Carbon::parse($job->deadline)->format('M d, Y') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4 w-full md:w-auto">
                            <button onclick="openApplyModal('{{ $job->id }}', '{{ $job->title }}')" class="apply-btn w-full md:w-auto px-10 py-3 rounded-full border border-primary/20 text-primary text-sm font-bold transition-all text-center">Apply Now</button>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12 glass-card rounded-3xl">
                        <p class="text-secondary">No open positions at the moment. Please check back later.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Application Modal -->
    <div id="apply-modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm modal-close-trigger"></div>
        <div class="relative w-full max-w-lg modal-glass rounded-[2.5rem] p-8 md:p-12 shadow-2xl scale-95 opacity-0 transition-all duration-300" id="modal-content">
            <button class="absolute top-6 right-6 text-secondary hover:text-white modal-close-trigger">
                <i class="fas fa-times text-xl"></i>
            </button>
            <h2 class="text-2xl font-bold text-foreground mb-2">Apply for Position</h2>
            <p id="modal-job-title" class="text-primary text-sm font-bold uppercase tracking-widest mb-8"></p>
            
            <form action="{{ route('careers.apply') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <input type="hidden" name="career_id" id="modal-career-id">
                <div>
                    <input type="text" name="name" required placeholder="Full Name" class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all">
                </div>
                <div>
                    <input type="email" name="email" required placeholder="Email Address" class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all">
                </div>
                <div>
                    <input type="text" name="phone" required placeholder="Phone Number" class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all">
                </div>
                <div class="space-y-2">
                    <label class="text-xs text-secondary uppercase tracking-widest pl-1">Upload CV (PDF/DOC)</label>
                    <input type="file" name="cv" required class="w-full text-sm text-secondary file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer">
                </div>
                <button type="submit" class="w-full py-4 bg-primary text-black font-bold uppercase tracking-wider rounded-xl hover:bg-primary-hover transition-all mt-6">Submit Application</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const modal = document.getElementById('apply-modal');
    const modalContent = document.getElementById('modal-content');
    const jobTitleSpan = document.getElementById('modal-job-title');
    const careerIdInput = document.getElementById('modal-career-id');

    function openApplyModal(id, title) {
        careerIdInput.value = id;
        jobTitleSpan.textContent = title;
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
        }, 10);
        document.body.style.overflow = 'hidden';
    }

    function closeApplyModal() {
        modalContent.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = '';
        }, 300);
    }

    document.querySelectorAll('.modal-close-trigger').forEach(trigger => {
        trigger.onclick = closeApplyModal;
    });

    window.onclick = (e) => {
        if (e.target === modal) closeApplyModal();
    }
</script>
@endpush