@extends('layouts.webpage.main_two')

@section('page-title', 'Apply Job')

@section('content')

    <div data-aos="fade-up">
        <section class="py-5 mt-5">
            <div class="container">

                <div class="row g-4 align-items-stretch">

                    {{-- Job Details Card - wider --}}
                    <div class="col-lg-7">
                        <div class="card border-0 rounded-4 shadow-sm h-100 overflow-hidden">

                            {{-- Header Banner --}}
                            <div class="bg-dark p-4 d-flex align-items-center gap-3">
                                <div class="flex-grow-1">
                                    <span class="badge rounded-pill bg-primary fw-normal mb-2">
                                        {{ $career->job_type ?? 'Full-Time' }}
                                    </span>
                                    <h4 class="fw-bold text-white mb-1">{{ $career->job_title ?? 'Job Title' }}</h4>
                                    @if($career->industry)
                                        <p class="text-primary-emphasis mb-0 small" style="color: #90caf9 !important;">
                                            <i class="bi bi-building me-1"></i>{{ $career->industry }}
                                        </p>
                                    @endif
                                </div>
                                <img src="{{ asset('assets/img/submit.png') }}" alt="Job"
                                    style="width: 80px; height: 80px; object-fit: cover; border-radius: 12px; opacity: 0.9;">
                            </div>

                            <div class="p-4">

                                {{-- Meta Pills --}}
                                <div class="d-flex flex-wrap gap-2 mb-4">
                                    @if($career->location)
                                        <span class="badge rounded-pill border text-muted fw-normal px-3 py-2"
                                            style="font-size: 12px;">
                                            <i class="bi bi-geo-alt me-1 text-primary"></i>{{ $career->location }}
                                        </span>
                                    @endif
                                    @if($career->experience)
                                        <span class="badge rounded-pill border text-muted fw-normal px-3 py-2"
                                            style="font-size: 12px;">
                                            <i class="bi bi-briefcase me-1 text-primary"></i>{{ $career->experience }} exp
                                        </span>
                                    @endif
                                    @if($career->apply_email)
                                        <span class="badge rounded-pill border text-muted fw-normal px-3 py-2"
                                            style="font-size: 12px;">
                                            <i class="bi bi-envelope me-1 text-primary"></i>{{ $career->apply_email }}
                                        </span>
                                    @endif
                                </div>

                                {{-- Description --}}
                                @if($career->description)
                                    <div class="mb-4">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="bg-primary rounded"
                                                style="width: 4px; height: 18px; display: inline-block;"></span>
                                            <p class="text-uppercase fw-bold text-dark mb-0"
                                                style="font-size: 11px; letter-spacing: .1em;">Description</p>
                                        </div>
                                        <div class="text-muted small lh-lg">{!! $career->description !!}</div>
                                    </div>
                                @endif

                                {{-- Requirements --}}
                                @if($career->requirements)
                                    <div class="mb-4">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="bg-primary rounded"
                                                style="width: 4px; height: 18px; display: inline-block;"></span>
                                            <p class="text-uppercase fw-bold text-dark mb-0"
                                                style="font-size: 11px; letter-spacing: .1em;">Core Requirements</p>
                                        </div>
                                        <div class="text-muted small lh-lg">{!! $career->requirements !!}</div>
                                    </div>
                                @endif

                                {{-- Responsibilities --}}
                                @if($career->responsibilities)
                                    <div class="mb-2">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="bg-primary rounded"
                                                style="width: 4px; height: 18px; display: inline-block;"></span>
                                            <p class="text-uppercase fw-bold text-dark mb-0"
                                                style="font-size: 11px; letter-spacing: .1em;">Responsibilities</p>
                                        </div>
                                        <div class="text-muted small lh-lg">{!! $career->responsibilities !!}</div>
                                    </div>
                                @endif

                            </div>
                        </div>
                    </div>

                    {{-- Application Form - narrower --}}
                    <div class="col-lg-5">
                        <div class="card border-0 rounded-4 shadow-sm h-100 p-4">

                            <div class="mb-3">
                                <p class="text-uppercase fw-bold text-muted mb-1"
                                    style="font-size: 10px; letter-spacing: .1em;">Step 1 of 1</p>
                                <h5 class="fw-bold mb-0 ">Submit Application</h5>
                                <p class="text-muted small mt-1 mb-0">Fill in the details below to apply</p>
                            </div>

                            <hr class="my-3">

                            @if(session('success'))
                                <div class="alert alert-success rounded-3 small py-2">{{ session('success') }}</div>
                            @endif

                            @if($errors->any())
                                <div class="alert alert-danger rounded-3 small py-2">
                                    <ul class="mb-0 ps-3">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form action="{{ route('career.resume.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="career_id" value="{{ $career->id }}">

                                {{-- Full Name --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold text-muted mb-1">Full Name</label>
                                    <input type="text" name="name"
                                        class="form-control form-control-sm rounded-3 @error('name') is-invalid @enderror"
                                        placeholder="John Doe" value="{{ old('name') }}" required>
                                    @error('name')<div class="invalid-feedback small">{{ $message }}</div>@enderror
                                </div>

                                {{-- Email --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold text-muted mb-1">Email Address</label>
                                    <input type="email" name="email"
                                        class="form-control form-control-sm rounded-3 @error('email') is-invalid @enderror"
                                        placeholder="john@example.com" value="{{ old('email') }}" required>
                                    @error('email')<div class="invalid-feedback small">{{ $message }}</div>@enderror
                                </div>

                                {{-- Phone --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold text-muted mb-1">Phone Number</label>
                                    <input type="text" name="phone"
                                        class="form-control form-control-sm rounded-3 @error('phone') is-invalid @enderror"
                                        placeholder="10-digit mobile number" value="{{ old('phone') }}" required>
                                    @error('phone')<div class="invalid-feedback small">{{ $message }}</div>@enderror
                                </div>

                                {{-- Cover Letter --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold text-muted mb-1">
                                        Cover Letter <span class="fw-normal text-muted">(optional)</span>
                                    </label>
                                    <textarea name="message" class="form-control form-control-sm rounded-3" rows="3"
                                        placeholder="Tell us why you're a great fit...">{{ old('message') }}</textarea>
                                </div>

                                {{-- Resume Upload --}}
                                <div class="mb-4">
                                    <label class="form-label small fw-semibold text-muted mb-1">Upload Resume</label>
                                    <input type="file" name="resume_file"
                                        class="form-control form-control-sm rounded-3 @error('resume_file') is-invalid @enderror"
                                        accept=".pdf,.doc,.docx" required>
                                    <div class="form-text" style="font-size: 11px;">PDF, DOC or DOCX only</div>
                                    @error('resume_file')<div class="invalid-feedback small">{{ $message }}</div>@enderror
                                </div>

                                <div class="d-grid">
                                    <button type="submit"
                                        class="btn btn-primary rounded-pill py-2 d-inline-flex align-items-center justify-content-center gap-2">
                                        Submit Application <i class="bi bi-arrow-up-right"></i>
                                    </button>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>

    <style>
        nav a.nav-link {
            color: #030303 !important;
            transition: 0.3s;
        }

        nav a.nav-link:hover {
            color: #030303 !important;
        }
    </style>

@endsection