@extends('layouts.dashboard')

@section('title', 'Post New Job')

@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">Post New Job</h4>
            <div class="page-title-right">
                <a href="{{ route('company.jobs.index') }}" class="btn btn-light"><i class="ri-arrow-go-back-line align-bottom me-1"></i> Back to Jobs</a>
            </div>
        </div>
    </div>
</div>

<div class="row border-0">
    <div class="col-lg-12">
        <form action="{{ route('company.jobs.store') }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-header border-0">
                    <h5 class="card-title mb-0">Job Details</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-lg-12">
                            <div>
                                <label class="form-label">Job Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" value="{{ old('title') }}" placeholder="Enter job title" required>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div>
                                <label class="form-label">Job Type <span class="text-danger">*</span></label>
                                <select class="form-select" name="job_type" required>
                                    <option value="fixed" {{ old('job_type') == 'fixed' ? 'selected' : '' }}>Fixed Price</option>
                                    <option value="hourly" {{ old('job_type') == 'hourly' ? 'selected' : '' }}>Hourly Rate</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div>
                                <label class="form-label">Application Deadline</label>
                                <input type="date" name="deadline" class="form-control" value="{{ old('deadline') }}">
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div>
                                <label class="form-label">Minimum Budget ($)</label>
                                <input type="number" step="0.01" min="0" name="budget_min" class="form-control" value="{{ old('budget_min') }}">
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div>
                                <label class="form-label">Maximum Budget ($)</label>
                                <input type="number" step="0.01" min="0" name="budget_max" class="form-control" value="{{ old('budget_max') }}">
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div>
                                <label class="form-label">Required Skills</label>
                                <select class="form-select" name="skills[]" multiple size="5">
                                    @foreach($skills as $skill)
                                        <option value="{{ $skill->id }}" {{ in_array($skill->id, old('skills', [])) ? 'selected' : '' }}>{{ $skill->name }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text">Hold Command (Mac) or Ctrl (Windows) to select multiple skills.</div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div>
                                <label class="form-label">Job Description <span class="text-danger">*</span></label>
                                <textarea name="description" class="form-control" rows="8" placeholder="Describe the job, requirements, and responsibilities..." required>{{ old('description') }}</textarea>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card-footer border-0 text-end">
                    <button type="submit" class="btn btn-primary updates-btn">Post Job</button>
                    <a href="{{ route('company.jobs.index') }}" class="btn btn-light">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            var btn = this.querySelector('.updates-btn');
            if(btn) {
                btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Posting...';
                btn.disabled = true;
            }
        });
    });
</script>
@endsection