@extends('layouts.authLayout')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@section('title', 'Request Teacher Access')

@section('content')
    <div class="d-flex justify-content-center align-items-center mb-5" style="min-height: 60vh;">
        <div class="p-5 loginModal" style="width: 100%; max-width: 500px;">
            <!-- Logo -->
            <div class="text-center mb-4">
                <a href="{{ route('mainPage') }}">
                    <img src="{{ asset('img/dailyStudyLogo.png') }}" alt="DailyStudy Logo" class="img-fluid" style="max-height: 100px;">
                </a>
            </div>
            <h2 class="text-center mb-4">Request Teacher Access</h2>

            <form action="{{ route('teacher.request.submit') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Nombre -->
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" name="name" class="form-control auth-input" value="{{ Auth::user()->name }}" id="name">
                </div>
                @error('name')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- Apellido -->
                <div class="mb-3">
                    <label class="form-label">Surname</label>
                    <input type="text" name="surname" class="form-control auth-input" value="{{ Auth::user()->surname }}" id="surname">
                </div>
                @error('surname')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- Email -->
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control auth-input" value="{{ Auth::user()->email }}" id="email">
                </div>
                @error('email')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- LinkedIn -->
                <div class="mb-3">
                    <label class="form-label">LinkedIn (optional)</label>
                    <input type="text" name="linkedin" class="form-control auth-input" placeholder="https://www.linkedin.com/in/your-profile" id="linkedin">
                </div>
                @error('linkedin')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- CV -->
                <div class="mb-3">
                    <label class="form-label">Upload your CV (PDF)</label>
                    <input type="file" name="cv" style="margin-top: 10px; margin-bottom: 10px;" class="form-control" accept=".pdf">
                </div>
                @error('cv')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- Portfolio -->
                <div class="mb-3">
                    <label class="form-label">Upload your Portfolio (PDF)</label>
                    <input type="file" name="portfolio" style="margin-top: 10px; margin-bottom: 40px;" class="form-control" accept=".pdf">
                </div>
                @error('portfolio')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror

                <!-- Botón de enviar -->
                <div class="d-grid d-flex justify-content-center mb-3">
                    <button type="submit" class="btn btn1">Submit Request</button>
                </div>
            </form>

        </div>
    </div>
@endsection

@section('scripts')

    <script src="{{ asset('js/submit_teacher.js') }}"></script>

    @if(session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Request sent!',
                text: "{{ session('success') }}",
                confirmButtonColor: '#6f42c1'
            });
        </script>
    @endif

@endsection
