@extends('layouts.default')
@push('title', get_phrase('Become an instructor'))
@push('meta')@endpush
@push('css')@endpush
@section('content')
    <!------------ My profile area start  ------------>
    <section class="course-content">
        <div class="profile-banner-area"></div>
        <div class="container profile-banner-area-container">
            <div class="row">
                @include('frontend.default.student.left_sidebar')
                <div class="col-lg-9">
                    <h4 class="g-title mb-5">{{ get_phrase('Become an instructor') }}</h4>
                    <div class="my-panel message-panel edit_profile">
                        <form action="{{ route('become.instructor.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12 mb-20">
                                    <div class="form-group">
                                        <label for="nidn" class="form-label">{{ get_phrase('NIDN') }}</label>
                                        <input class="form-control @error('nidn') is-invalid @enderror" id="nidn" type="number" name="nidn" placeholder="{{ get_phrase('Enter your NIDN number') }}" value="{{ old('nidn') }}" required>
                                        @error('nidn')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-20">
                                    <div class="form-group">
                                        <label for="phone" class="form-label">{{ get_phrase('Phone Number') }}</label>
                                        <input class="form-control @error('phone') is-invalid @enderror" id="phone" type="number" name="phone" placeholder="{{ get_phrase('Enter your phone number') }}" value="{{ old('phone') }}" required>
                                        @error('phone')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-20">
                                    <div class="form-group">
                                        <label for="document" class="form-label">{{ get_phrase('Document') }} <small>(doc, docs, pdf)</small></label>
                                        <input class="form-control @error('document') is-invalid @enderror" id="document" type="file" name="document" accept=".doc,.docx,.pdf" onchange="validateFileSize(this)" required>
                                        @error('document')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                        <small class="ps-3 text-secondary">{{ get_phrase('Provide some documents about your qualifications') }}</small>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-20">
                                    <div class="form-group">
                                        <label for="description" class="form-label">{{ get_phrase('Personal Summary') }}</label>
                                        <textarea name="description" class="form-control @error('description') border border-danger @enderror" id="description" cols="30" rows="5" placeholder="{{ get_phrase('Your personal summary here...') }}" required></textarea>
                                        @error('description')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <button class="eBtn btn gradient mt-10">{{ get_phrase('Apply for instructor') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!------------ My profile area end  ------------>
@endsection
@push('js')
   <script>
       "use strict";

       function onLoginSubmit(token) {
           document.getElementById("login-form").submit();
       }


       $(document).ready(function() {
           $('#instructor').on('change', function() {
               if ($(this).is(':checked')) {
                   $('#become-instructor-fields').removeClass('d-none');
               } else {
                   $('#become-instructor-fields').addClass('d-none');
               }
           });
       });


       // File size validation
       function validateFileSize(input) {
           const file = input.files[0];
           if (file) {
               const fileSizeInMB = file.size / (1024 * 1024); // Convert to MB
               if (fileSizeInMB > 2) {
                   // Show error message using existing toaster system
                   error('{{ get_phrase("File size exceeds 2MB limit.") }}');
                   input.value = "";
               }
           }
       }
   </script>
@endpush