@extends('layouts.careers')
@section('title', $job->title)

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-white rounded shadow-sm border-0">
            <li class="breadcrumb-item"><a href="{{ route('careers.index') }}">{{ __('Careers') }}</a></li>
            <li class="breadcrumb-item active">{{ $job->title }}</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h1 class="h4 font-weight-bold mb-2">{{ $job->title }}</h1>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @if($job->warehouse)<span class="badge badge-soft"><i class="mdi mdi-map-marker"></i> {{ $job->warehouse->name }}</span>@endif
                        @if($job->department)<span class="badge badge-light border">{{ $job->department->name }}</span>@endif
                        @if($job->designation)<span class="badge badge-light border">{{ $job->designation->name }}</span>@endif
                        @if($job->closing_date)<span class="badge badge-warning text-dark">{{ __('Closes') }} {{ $job->closing_date->format('M j, Y') }}</span>@endif
                    </div>
                    <div class="job-description text-secondary">{!! $job->descriptionHtml() !!}</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm sticky-top" style="top:1rem">
                <div class="card-header bg-primary text-white font-weight-bold">{{ __('Apply for this role') }}</div>
                <div class="card-body">
                    <form method="post" action="{{ route('careers.apply', $job->slug) }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label class="small font-weight-bold">{{ __('Full name') }} <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control form-control-sm" value="{{ old('name') }}" required>
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold">{{ __('Email') }} <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control form-control-sm" value="{{ old('email') }}" required>
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold">{{ __('Phone') }}</label>
                            <input type="text" name="phone" class="form-control form-control-sm" value="{{ old('phone') }}">
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold">{{ __('Cover letter') }}</label>
                            <textarea name="cover_letter" class="form-control form-control-sm" rows="4" maxlength="5000" placeholder="{{ __('Why are you a good fit for this role?') }}">{{ old('cover_letter') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold">{{ __('CV / Resume') }} <span class="text-danger">*</span></label>
                            <div class="custom-file">
                                <input type="file" name="cv" class="custom-file-input" id="cvFile" required accept=".pdf,.doc,.docx">
                                <label class="custom-file-label" for="cvFile">{{ __('Choose file') }}</label>
                            </div>
                            <small class="text-muted">{{ __('PDF or Word, max 10MB') }}</small>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" name="consent" value="1" class="form-check-input" id="consent" required @checked(old('consent'))>
                            <label class="form-check-label small" for="consent">{{ __('I consent to my data being processed for recruitment purposes.') }}</label>
                        </div>

                        @if($job->questions->isNotEmpty())
                            <hr>
                            <h6 class="small font-weight-bold text-uppercase text-muted mb-3">{{ __('Additional questions') }}</h6>
                            @foreach($job->questions as $q)
                                <div class="form-group">
                                    <label class="small font-weight-bold">
                                        {{ $q->label }}
                                        @if($q->is_required)<span class="text-danger">*</span>@endif
                                    </label>
                                    @if($q->field_type === 'textarea')
                                        <textarea name="answers[{{ $q->id }}]" class="form-control form-control-sm" rows="3" @if($q->is_required) required @endif>{{ old('answers.'.$q->id) }}</textarea>
                                    @elseif($q->field_type === 'select' && is_array($q->options))
                                        <select name="answers[{{ $q->id }}]" class="form-control form-control-sm" @if($q->is_required) required @endif>
                                            <option value="">{{ __('Select') }}</option>
                                            @foreach($q->options as $opt)
                                                <option value="{{ $opt }}" @selected(old('answers.'.$q->id) === $opt)>{{ $opt }}</option>
                                            @endforeach
                                        </select>
                                    @elseif($q->field_type === 'yes_no')
                                        <select name="answers[{{ $q->id }}]" class="form-control form-control-sm" @if($q->is_required) required @endif>
                                            <option value="">{{ __('Select') }}</option>
                                            <option value="yes" @selected(old('answers.'.$q->id) === 'yes')>{{ __('Yes') }}</option>
                                            <option value="no" @selected(old('answers.'.$q->id) === 'no')>{{ __('No') }}</option>
                                        </select>
                                    @else
                                        <input type="text" name="answers[{{ $q->id }}]" class="form-control form-control-sm" value="{{ old('answers.'.$q->id) }}" @if($q->is_required) required @endif>
                                    @endif
                                </div>
                            @endforeach
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger small py-2">{{ $errors->first() }}</div>
                        @endif
                        <button type="submit" class="btn btn-primary btn-block">{{ __('Submit application') }}</button>
                    </form>
                    <hr class="my-3">
                    <button type="button" class="btn btn-link btn-sm p-0 text-muted"
                            onclick="navigator.clipboard.writeText('{{ route('careers.show', $job->slug) }}');this.textContent='{{ __('Copied!') }}'">
                        <i class="mdi mdi-share-variant"></i> {{ __('Copy job link') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.getElementById('cvFile')?.addEventListener('change', function () {
    var label = this.files[0]?.name || '{{ __('Choose file') }}';
    this.nextElementSibling.textContent = label;
});
</script>
@endpush