@extends('frontend.layouts.partials.app')

@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

@section('content')
    @if ($errors)
        <ol>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ol>
    @endif
    <section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
        @if (session('success'))
            <div class="bg-brandBlue text-green-800 px-4 py-2 rounded-md mb-4">
                {{ session('success') }}
            </div>
        @endif

        <h2 class="font-heading mb-5 text-4xl tracking-tighter bold">{{ $career->name }}</h2>

        <p class="mb-3 text-gray-500 dark:text-gray-400">{!! $career->description !!}</p>
        <p class="mb-3 text-gray-500 dark:text-gray-400"><b>No of Opening:</b> {!! $career->number_of_openings !!}</p>

        <form method="POST" action="{{ route('applyJob') }}" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-1">
                <div class="w-full flex flex-col space-y-3">
                    <label for="full_name">Full Name <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="full_name" name="full_name"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('full_name') error-field @enderror"
                        placeholder="Your Full Name" required
                        value="{{ old('full_name', isset($career) ? $career->full_name : null) }}">
                    @error('full_name')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="w-full flex flex-col space-y-3">
                    <label for="email">Email <span class="text-[#ff0000] ">*</span></label>
                    <input type="email" id="email" name="email"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('email') error-field @enderror"
                        placeholder="Your Email Address" required
                        value="{{ old('email', isset($career) ? $career->email : null) }}">
                    @error('email')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="w-full flex flex-col space-y-3">
                    <label for="address">Address <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="address" name="address"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('address') error-field @enderror"
                        placeholder="Your Address" required
                        value="{{ old('address', isset($career) ? $career->address : null) }}">
                    @error('address')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="w-full flex flex-col space-y-3">
                    <label for="contact">Contact Number <span class="text-[#ff0000] ">*</span></label>
                    <input type="tel" id="contact" name="contact"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('contact') error-field @enderror"
                        placeholder="Your Contact Number" required
                        value="{{ old('contact', isset($career) ? $career->contact : null) }}">
                    @error('contact')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="w-full flex flex-col space-y-3">
                    <label for="current_position">Current Position <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="current_position" name="current_position"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('current_position') error-field @enderror"
                        placeholder="Your Current Position" required
                        value="{{ old('current_position', isset($career) ? $career->current_position : null) }}">
                    @error('current_position')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="w-full flex flex-col space-y-3">
                    <label for="current_salary">Current Salary <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="current_salary" name="current_salary"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('current_salary') error-field @enderror"
                        placeholder="Your Current Salary" required
                        value="{{ old('current_salary', isset($career) ? $career->current_salary : null) }}">
                    @error('current_salary')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="w-full flex flex-col space-y-3">
                    <label for="current_company">Current Company <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="current_company" name="current_company"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('current_company') error-field @enderror"
                        placeholder="Your Current Company" required
                        value="{{ old('current_company', isset($career) ? $career->current_company : null) }}">
                    @error('current_company')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="w-full flex flex-col space-y-3">
                    <label for="expected_salary">Expected Salary <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="expected_salary" name="expected_salary"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('expected_salary') error-field @enderror"
                        placeholder="Your Expected Salary" required
                        value="{{ old('expected_salary', isset($career) ? $career->expected_salary : null) }}">
                    @error('expected_salary')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="w-full flex flex-col space-y-3">
                    <label for="notice_period">Notice Period <span class="text-[#ff0000] ">*</span></label>
                    <input type="text" id="notice_period" name="notice_period"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('notice_period') error-field @enderror"
                        placeholder="Your Notice Period" required
                        value="{{ old('notice_period', isset($career) ? $career->notice_period : null) }}">
                    @error('notice_period')
                        <div class="text-[#ff0000]  small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="w-full flex flex-col space-y-3">
                    <label for="message">Your Message <span class="text-[#ff0000]">*</span></label>
                    <textarea name="message" id="message" cols="30" rows="2"
                        class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9] @error('message') error-field @enderror"
                        placeholder="Thoughts">{{ old('message', isset($message) ? $message->message : '') }}</textarea>
                    @error('message')
                        <div class="text-[#ff0000] small">{{ $message }}</div>
                    @enderror
                </div>


                <div>
                    <label for="dropzone-file"
                        class="flex flex-col items-center w-full max-w-lg p-5 mx-auto mt-2 text-center bg-white border-2 border-gray-300 border-dashed cursor-pointer dark:bg-gray-900 dark:border-gray-700 rounded-xl">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-8 h-8 text-gray-500 dark:text-gray-400">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
                        </svg>
                        <h2 id="dropzone-label" class="mt-1 font-medium tracking-wide text-gray-700 dark:text-gray-200">
                            Document Upload</h2>
                        <p class="mt-2 text-xs tracking-wide text-gray-500 dark:text-gray-400">Click Here </p>

                        <input id="dropzone-file" type="file" class="hidden" name="cv_resume" />
                    </label>
                </div>

                <input type="hidden" name="career_id" value="{{ $career->id }}">
                @error('file')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror

                <div>
                    {!! NoCaptcha::renderJs() !!}
                    {!! NoCaptcha::display() !!}
                    @error('g-recaptcha-response')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex justify-end mt-6 justify-center">
                <button
                    class="py-2 px-5 rounded-md w-44 bg-[#005aab] text-white hover:scale-x-95 duration-200 transition ease-in-out">
                    Save
                </button>
            </div>
        </form>
    </section>
@endsection

@section('scripts')
    <script>
        const dropzoneFile = document.getElementById('dropzone-file');
        const dropzoneLabel = document.getElementById('dropzone-label');

        dropzoneFile.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                dropzoneLabel.textContent = file.name;
            } else {
                dropzoneLabel.textContent = 'Document';
            }
        });
    </script>
@endsection