@extends('layouts.app')

@section('content')
<div class="academy-container" style="max-width: 700px;">
    <a href="{{ route('menu') }}" class="btn-back-icon-top">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
        </svg>
    </a>

    <h1>🎓 همکاری با ما / مدرس شو</h1>
    
    @if ($instructor)
        <div class="success-box" style="background: rgba(16, 185, 129, 0.15); border: 1px solid #10b981; border-radius: 12px; padding: 25px; margin-top: 25px; text-align: center; color: #065f46;">
            <h3>✨ درخواست شما قبلاً ثبت شده است</h3>
            <p style="color: #4a5568; margin-top: 10px; font-size: 0.95rem;">
                اطلاعات شما با موفقیت در سیستم ثبت گردیده است. کارشناسان ما به زودی با شما تماس خواهند گرفت.
            </p>
            <div style="margin-top: 20px; text-align: right; background: #e0e5ec; box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8); padding: 15px; border-radius: 12px; color: #4a5568; font-size: 0.9rem; line-height: 1.8;">
                <div><strong>👤 نام و نام خانوادگی:</strong> {{ $instructor->first_name }} {{ $instructor->last_name }}</div>
                <div><strong>📧 ایمیل:</strong> {{ $instructor->email }}</div>
                <div><strong>📞 شماره تماس:</strong> {{ $instructor->phone_number }}</div>
                <div><strong>🌍 محل سکونت:</strong> {{ $instructor->country }}، {{ $instructor->city }}</div>
            </div>
        </div>
    @else
        <p class="folder-description">
            اگر تخصص، دانش یا مهارتی دارید که می‌خواهید آن را با دیگران به اشتراک بگذارید، درخواست خود را در فرم زیر ثبت کنید تا به عنوان مدرس با ما همکاری کنید.
        </p>

        @if ($errors->any())
            <div class="alert alert-danger" style="display: block; margin-bottom: 20px;">
                <ul style="margin: 0; padding-right: 20px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if(session('resume_via_bot_id'))
            <div class="bot-upload-alert" style="background: rgba(217, 119, 6, 0.08); border: 1px solid #d97706; border-radius: 12px; padding: 20px; margin-bottom: 25px; color: #b45309; text-align: center;">
                <h3>⚠️ تکمیل فرآیند ارسال رزومه در تلگرام</h3>
                <p>لطفاً برای ارسال فایل رزومه خود، روی دکمه زیر کلیک کنید و در ربات تلگرام فایل رزومه را بفرستید:</p>
                <a href="https://t.me/{{ env('BOT_USERNAME', 'rammehraz_bot') }}?start=resume_instructor_{{ session('resume_via_bot_id') }}" 
                   target="_blank" style="display: inline-block; background: #6c5ce7; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: bold; margin-top: 10px; box-shadow: 2px 2px 6px rgba(108, 92, 231, 0.3);">
                    💬 ارسال رزومه در ربات تلگرام
                </a>
            </div>
        @endif

        <form action="{{ route('become-instructor.apply') }}" method="POST" enctype="multipart/form-data" class="form-wrapper">
            @csrf

            <div class="form-row">
                <div class="form-group">
                    <label for="first_name">👤 نام</label>
                    <input type="text" name="first_name" id="first_name" class="form-control" value="{{ old('first_name') }}" required>
                </div>
                <div class="form-group">
                    <label for="last_name">👤 نام خانوادگی</label>
                    <input type="text" name="last_name" id="last_name" class="form-control" value="{{ old('last_name') }}" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="email">📧 ایمیل</label>
                    <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}" required>
                </div>
                <div class="form-group">
                    <label for="phone_number">📞 شماره تماس / تلگرام</label>
                    <input type="text" name="phone_number" id="phone_number" class="form-control" value="{{ old('phone_number') }}" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="country">🌍 کشور</label>
                    <input type="text" name="country" id="country" class="form-control" value="{{ old('country', 'ایران') }}" required>
                </div>
                <div class="form-group">
                    <label for="city">🏙 شهر</label>
                    <input type="text" name="city" id="city" class="form-control" value="{{ old('city') }}" required>
                </div>
            </div>

            <div class="form-group">
                <label for="linkedin">🔗 لینک پروفایل لینکدین (اختیاری)</label>
                <input type="url" name="linkedin" id="linkedin" class="form-control" value="{{ old('linkedin') }}" placeholder="https://linkedin.com/in/username">
            </div>

            <div class="form-group">
                <label>⚙️ نحوه ارسال رزومه یا پورتفولیو</label>
                <div class="radio-group">
                    <label class="radio-label">
                        <input type="radio" name="resume_type" value="text" checked onchange="toggleResumeType('text')">
                        نوشتن رزومه به صورت متنی در کادر زیر
                    </label>
                    <label class="radio-label" style="margin-top: 10px;">
                        <input type="radio" name="resume_type" value="file" onchange="toggleResumeType('file')">
                        آپلود فایل رزومه (PDF یا Word)
                    </label>
                    <label class="radio-label" style="margin-top: 10px;">
                        <input type="radio" name="resume_type" value="bot" onchange="toggleResumeType('bot')">
                        ارسال فایل رزومه از طریق ربات تلگرام
                    </label>
                </div>
            </div>

            <div class="form-group" id="resume_text_wrapper">
                <label for="resume_text">📝 متن رزومه و تجربیات کاری</label>
                <textarea name="resume_text" id="resume_text" class="form-control" rows="5" placeholder="سوابق تحصیلی و تجربیات کاری خود را بنویسید...">{{ old('resume_text') }}</textarea>
            </div>

            <div class="form-group" id="resume_file_wrapper" style="display: none;">
                <label for="resume_file">📎 انتخاب فایل رزومه</label>
                <input type="file" name="resume_file" id="resume_file" class="form-control" accept=".pdf,.doc,.docx">
            </div>

            <button type="submit" class="btn-submit">🚀 ارسال درخواست تدریس</button>
        </form>
    @endif
</div>

<style>
.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-weight: bold;
    font-size: 0.95rem;
    color: #4a5568;
}
.form-control {
    background: #e0e5ec;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 10px 15px;
    color: #4a5568;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s;
}
.form-control:focus {
    border-color: var(--accent-color);
    outline: none;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.radio-group {
    background: #e0e5ec;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4a5568;
}
.btn-submit {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    box-shadow: 3px 3px 6px rgba(108, 92, 231, 0.3);
}
.btn-submit:hover {
    background: #e0e5ec;
    color: #6c5ce7;
    transform: translateY(-2px);
    box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8);
}
@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
function toggleResumeType(type) {
    const textWrapper = document.getElementById('resume_text_wrapper');
    const fileWrapper = document.getElementById('resume_file_wrapper');
    const textInput = document.getElementById('resume_text');
    const fileInput = document.getElementById('resume_file');
    
    if (type === 'text') {
        textWrapper.style.display = 'flex';
        fileWrapper.style.display = 'none';
        textInput.required = true;
        fileInput.required = false;
    } else if (type === 'file') {
        textWrapper.style.display = 'none';
        fileWrapper.style.display = 'flex';
        textInput.required = false;
        fileInput.required = true;
    } else {
        textWrapper.style.display = 'none';
        fileWrapper.style.display = 'none';
        textInput.required = false;
        fileInput.required = false;
    }
}
document.addEventListener('DOMContentLoaded', () => {
    toggleResumeType('text');
});
</script>
@endsection