@extends('layouts.main-app')

@section('title', 'Application Form')

@section('content')

    @include('layouts.navbar')
    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 text-center">
            <h1 class="text-4xl font-bold text-black">APPLICATION FORM </h1>
        </div>
    </div>

    <div class="container max-w-screen-lg px-4 mx-auto py-14">
        <div class="grid grid-cols-1">
            <div class="space-y-8">
                <h1 class="text-xl font-semibold">Please do not leave required (*) fields empty.</h1>
                <div class="space-y-4">
                    <form action="{{ route('applications.store') }}" method="POST" enctype="multipart/form-data"
                        class="space-y-4">
                        @csrf
                        <div class="space-y-2">
                            <label for="position">*Desired Position</label>
                            <select id="position" name="position" class="w-full p-2 border border-black">
                                @foreach ($careers as $career)
                                    <option value="{{ $career->id }}">{{ $career->position }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="full_name">*Full Name</label>
                            <input type="text" id="full_name" name="full_name" class="w-full p-2 border border-black">
                        </div>

                        <div class="space-y-2">
                            <label for="email">*Email Address</label>
                            <input type="email" id="email" name="email" class="w-full p-2 border border-black">
                        </div>

                        <div class="space-y-2">
                            <label for="contact_number">*Contact Number</label>
                            <input type="tel" id="contact_number" name="contact_number"
                                class="w-full p-2 border border-black">
                        </div>

                        <div class="space-y-2">
                            <label for="resume">*Upload Resume</label>
                            <input type="file" id="resume" name="resume" class="w-full p-2 border border-black">
                        </div>

                        <div>
                            <button type="submit" class="rounded-full text-white bg-[#0f1d18] px-20 py-2">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footer')


@endsection