@extends('layouts.dashboard')
@section('title', __('Become an Instructor'))
@section('page_title', __('Become an Instructor'))

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="lf-welcome mb-4">
            <div class="d-flex align-items-center gap-3">
                <div class="lf-ico-tile lf-soft-primary"><i class="bi bi-easel"></i></div>
                <div>
                    <h4 class="mb-1 fw-bold">{{ __('Teach on :site', ['site' => setting('site_name', 'Learnify')]) }}</h4>
                    <p class="mb-0 small opacity-75">{{ __('Share what you know, reach learners worldwide and earn :share% of every sale.', ['share' => rtrim(rtrim(number_format(100 - (float) setting('admin_commission', 20), 2), '0'), '.')]) }}</p>
                </div>
            </div>
        </div>

        @if($profile && $profile->status === 'pending')
            <div class="card border-0 shadow-sm"><div class="card-body text-center py-5">
                <i class="bi bi-hourglass-split display-5 text-warning d-block mb-2"></i>
                <h5 class="fw-bold">{{ __('Application under review') }}</h5>
                <p class="text-muted mb-0">{{ __('We received your application on :date. You will get an e-mail as soon as it is reviewed.', ['date' => optional($profile->applied_at)->format('M d, Y')]) }}</p>
            </div></div>
        @else
            @if($profile && $profile->status === 'rejected')
                <div class="alert alert-warning"><i class="bi bi-info-circle me-1"></i>{{ __('Your previous application was not approved.') }}@if($profile->review_note) {{ __('Reviewer note:') }} <em>{{ $profile->review_note }}</em>@endif {{ __('You can update your details and apply again.') }}</div>
            @endif
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white fw-semibold py-3">{{ __('Tell us about yourself') }}</div>
                <div class="card-body">
                    <form action="{{ route('instructor.apply.store') }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Professional title') }} <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $profile?->title) }}" placeholder="{{ __('e.g. Senior Laravel Developer') }}" required>
                            @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Area of expertise') }} <span class="text-danger">*</span></label>
                            <input type="text" name="expertise" class="form-control @error('expertise') is-invalid @enderror" value="{{ old('expertise', $profile?->expertise) }}" placeholder="{{ __('e.g. Web development, UX design') }}" required>
                            @error('expertise')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ __('Years of experience') }}</label>
                            <input type="number" name="experience_years" min="0" max="60" class="form-control" value="{{ old('experience_years', $profile?->experience_years) }}">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">{{ __('Website / portfolio') }}</label>
                            <input type="url" name="website" class="form-control @error('website') is-invalid @enderror" value="{{ old('website', $profile?->website) }}" placeholder="https://">
                            @error('website')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">LinkedIn</label>
                            <input type="url" name="linkedin" class="form-control" value="{{ old('linkedin', $profile?->linkedin) }}" placeholder="https://linkedin.com/in/…">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">YouTube</label>
                            <input type="url" name="youtube" class="form-control" value="{{ old('youtube', $profile?->youtube) }}" placeholder="https://youtube.com/@…">
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('Short bio') }} <span class="text-danger">*</span></label>
                            <textarea name="bio" rows="4" class="form-control @error('bio') is-invalid @enderror" required>{{ old('bio', $profile?->bio) }}</textarea>
                            <div class="form-text">{{ __('Shown on your public instructor page once approved.') }}</div>
                            @error('bio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('What would you like to teach, and why?') }}</label>
                            <textarea name="application_note" rows="3" class="form-control">{{ old('application_note', $profile?->application_note) }}</textarea>
                        </div>
                        <div class="col-12 d-flex align-items-center justify-content-between">
                            <span class="small text-muted">{{ $needsReview ? __('Applications are reviewed by the academy team.') : __('You will be able to create courses right away.') }}</span>
                            <button class="btn btn-primary"><i class="bi bi-send me-1"></i>{{ __('Submit application') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection