@extends('layouts.recruiter')
@section('title', 'Post a Job — JOBES')

@section('recruiter_content')
<!-- Header area with Back Button -->
<div class="d-flex align-items-center gap-3 mb-4 animate__animated animate__fadeIn">
    <a href="{{ route('recruiter.jobs.index') }}" class="btn btn-light border d-flex align-items-center justify-content-center" style="width:40px; height:40px; border-radius:10px; background:#fff; color:#475569;" title="Back to Posted Jobs">
        <i class="fas fa-arrow-left"></i>
    </a>
    <h5 class="fw-800 text-dark mb-0" style="font-size:1.25rem;">Post a New Job</h5>
</div>

<div class="card-recruiter-panel animate__animated animate__fadeIn">
    <form method="POST" action="{{ route('recruiter.jobs.store') }}">
        @csrf
        
        @if($errors->any())
            <div class="alert alert-danger border-0 mb-4 shadow-xs" style="background:#fee2e2; color:#991b1b; border-radius:10px;">
                <ul class="mb-0 small fw-600 text-start">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <div class="row g-3">
            <div class="col-12 text-start">
                <label class="form-label text-muted small fw-700">Job Title *</label>
                <input type="text" name="title" class="form-control form-ctrl-light" placeholder="e.g. Senior PHP Developer" value="{{ old('title') }}" required>
            </div>
            
            <div class="col-md-6 col-12 text-start">
                <label class="form-label text-muted small fw-700">Category *</label>
                <select name="category_id" class="form-select form-ctrl-light" required>
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-3 col-6 text-start">
                <label class="form-label text-muted small fw-700">Job Type *</label>
                <select name="job_type" class="form-select form-ctrl-light" required>
                    @foreach(['full-time'=>'Full Time','part-time'=>'Part Time','contract'=>'Contract','internship'=>'Internship','freelance'=>'Freelance','remote'=>'Remote'] as $v=>$l)
                        <option value="{{ $v }}" {{ old('job_type') == $v ? 'selected' : '' }}>
                            {{ $l }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-3 col-6 text-start">
                <label class="form-label text-muted small fw-700">Experience Level *</label>
                <select name="experience_level" class="form-select form-ctrl-light" required>
                    @foreach(['entry'=>'Entry Level','junior'=>'Junior','mid'=>'Mid Level','senior'=>'Senior','lead'=>'Lead','executive'=>'Executive'] as $v=>$l)
                        <option value="{{ $v }}" {{ old('experience_level') == $v ? 'selected' : '' }}>
                            {{ $l }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-4 col-12 text-start">
                <label class="form-label text-muted small fw-700">City</label>
                <input type="text" name="city" class="form-control form-ctrl-light" placeholder="e.g. Mumbai" value="{{ old('city') }}">
            </div>
            
            <div class="col-md-4 col-6 text-start">
                <label class="form-label text-muted small fw-700">Min Salary (₹/month)</label>
                <input type="number" name="salary_min" class="form-control form-ctrl-light" placeholder="e.g. 50000" value="{{ old('salary_min') }}">
            </div>
            
            <div class="col-md-4 col-6 text-start">
                <label class="form-label text-muted small fw-700">Max Salary (₹/month)</label>
                <input type="number" name="salary_max" class="form-control form-ctrl-light" placeholder="e.g. 100000" value="{{ old('salary_max') }}">
            </div>
            
            <div class="col-md-4 col-6 text-start">
                <label class="form-label text-muted small fw-700">Vacancies</label>
                <input type="number" name="vacancies" class="form-control form-ctrl-light" placeholder="1" value="{{ old('vacancies', 1) }}" min="1">
            </div>
            
            <div class="col-md-4 col-6 text-start">
                <label class="form-label text-muted small fw-700">Application Deadline</label>
                <input type="date" name="deadline" class="form-control form-ctrl-light" value="{{ old('deadline') }}">
            </div>
            
            <div class="col-md-4 col-12 d-flex align-items-center gap-3 mt-4 text-start">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="is_remote" id="is_remote" {{ old('is_remote') ? 'checked' : '' }} style="cursor:pointer; width:40px; height:20px;">
                    <label class="form-check-label text-dark small fw-600 ms-2" for="is_remote" style="cursor:pointer; user-select:none;">Remote Job Opportunity</label>
                </div>
            </div>
            
            <div class="col-12 text-start">
                <label class="form-label text-muted small fw-700">Job Description *</label>
                <textarea name="description" class="form-control form-ctrl-light" rows="7" placeholder="Describe the role, candidate responsibilities, qualifications..." required>{{ old('description') }}</textarea>
            </div>
            
            <div class="col-12 text-start">
                <label class="form-label text-muted small fw-700">Requirements</label>
                <textarea name="requirements" class="form-control form-ctrl-light" rows="4" placeholder="List key must-have qualifications or experience...">{{ old('requirements') }}</textarea>
            </div>
            
            <div class="col-12 text-start">
                <label class="form-label text-muted small fw-700">Benefits</label>
                <textarea name="benefits" class="form-control form-ctrl-light" rows="3" placeholder="e.g. Health insurance, flexible timings, work-from-home hybrid allowances...">{{ old('benefits') }}</textarea>
            </div>
            
            @if($skills->count())
            <div class="col-12 text-start">
                <label class="form-label text-muted small fw-700 mb-2">Required Skills</label>
                <div class="d-flex flex-wrap gap-2 pt-1">
                    @foreach($skills as $skill)
                    <label class="badge px-3 py-2.5 shadow-xs border skill-checkbox-badge" style="cursor:pointer; background:#ffffff; border-color:#e2e8f0; color:#475569; border-radius:10px; font-weight:700; transition:all 0.2s;">
                        <input type="checkbox" name="skills[]" value="{{ $skill->id }}" hidden {{ in_array($skill->id, old('skills', [])) ? 'checked' : '' }}>
                        {{ $skill->name }}
                    </label>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        
        <div class="d-flex gap-3 border-top pt-4 mt-4" style="border-top-color:#f1f5f9 !important;">
            <button type="submit" class="btn btn-teal-gradient px-5 py-2.5">
                <i class="fas fa-paper-plane me-2"></i> Submit Job Post
            </button>
            <a href="{{ route('recruiter.jobs.index') }}" class="btn btn-light border fw-800 px-4 py-2.5 text-dark" style="border-radius:0.5rem;">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
// Toggle skill badge style on selection dynamically
document.querySelectorAll('.skill-checkbox-badge').forEach(label => {
    const cb = label.querySelector('input[type=checkbox]');
    
    const updateStyle = () => {
        if(cb.checked) {
            label.style.background = 'rgba(13,148,136,0.08)';
            label.style.color = '#0d9488';
            label.style.borderColor = '#0d9488';
        } else {
            label.style.background = '#ffffff';
            label.style.color = '#475569';
            label.style.borderColor = '#e2e8f0';
        }
    };
    
    updateStyle();
    
    label.addEventListener('click', function() {
        setTimeout(() => {
            updateStyle();
        }, 10);
    });
});
</script>
@endsection