@include('htmlpage.frontent.layout.app')
<div class="theme_slider bg-black p-0">
    <main class="wrapper">
        <section class="career_us bg-dark-200 p-0" id="funfacts">
            <div class="d-flex justify-content-end">
                <div class="bg-dark-100 p-60 careerus pt-100 pb-100" data-aos="fade-left" data-aos-duration="1000">
                    <div class="section-header">

                        <h1 class="text-white border-line pb-4 pt-100">Shape the Future with Us!</h1>
                        <p>Join our team and be part of a creative journey where innovation meets excellence.
Contribute to groundbreaking projects and grow with industry leaders. Apply today!</p>
                    </div>
                    <div class="home_contact">

                        <form method="post" action="{{ route('submit.career') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3 careercontact">
                                <div class="dropdown">
                                    <input type="checkbox" id="dropdown-toggle" class="dropdown-toggle">
                                    <label for="dropdown-toggle" class="dropdown-label text-uppercase">Select an
                                        option</label>
                                    <div class="dropdown-menu">
                                        @foreach ($allcareer as $career)
                                            <label class="dropdown-item">
                                                <input type="radio" name="post_applied_for"
                                                    value="{{ $career->job_title }}" id="option-{{ $loop->index }}">
                                                <span>{{ $career->job_title }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const dropdownToggle = document.querySelector('#dropdown-toggle');
                                        const dropdownLabel = document.querySelector('.dropdown-label');
                                        const radioButtons = document.querySelectorAll('.dropdown-item input[type="radio"]');

                                        radioButtons.forEach(radio => {
                                            radio.addEventListener('change', function() {
                                                if (this.checked) {
                                                    dropdownLabel.textContent = this.nextElementSibling.textContent;
                                                    dropdownToggle.checked = false; // Close the dropdown
                                                }
                                            });
                                        });
                                    });
                                </script>
                            </div>
                    </div>
                    <div class="mb-3">
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                            name="email" placeholder="Your Email*">

                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                            name="name" placeholder="Your Name*">
                    </div>
                    <div class="mb-3">
                       <input class="form-control form-control-lg" name="phone" id="phone"
       type="tel" placeholder="Your Phone No"
       aria-label=".form-control-lg example"
       pattern="[0-9]{10}" maxlength="15" minlength="10" required>

                    </div>
                    <div class="upload-box" id="upload-box">
                        <p>Drag & drop your resume here or click to select file</p>
                        <input type="file" name="resume" id="file-input" style="display: none;">
                        <div id="file-preview" class="file-preview"></div>
                        @error('resume')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="g-text-center--xs">
                        <button type="submit" class="btn olive">Join
                            Now</button>
                    </div>
                    </Form>
                </div>
            </div>

        </section>
        <script>
            const uploadBox = document.getElementById('upload-box');
            const fileInput = document.getElementById('file-input');
            const filePreview = document.getElementById('file-preview');

            uploadBox.addEventListener('click', () => {
                fileInput.click();
            });

            uploadBox.addEventListener('dragover', (event) => {
                event.preventDefault();
                uploadBox.classList.add('dragover');
            });

            uploadBox.addEventListener('dragleave', () => {
                uploadBox.classList.remove('dragover');
            });

            uploadBox.addEventListener('drop', (event) => {
                event.preventDefault();
                uploadBox.classList.remove('dragover');
                const files = event.dataTransfer.files;
                if (files.length > 0) {
                    fileInput.files = files;
                    displayPreview(files[0]);
                }
            });

            fileInput.addEventListener('change', () => {
                const files = fileInput.files;
                if (files.length > 0) {
                    displayPreview(files[0]);
                }
            });

            function displayPreview(file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    filePreview.innerHTML = '';
                    if (file.type.startsWith('image/')) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        filePreview.appendChild(img);
                    } else {
                        const span = document.createElement('span');
                        span.textContent = file.name;
                        filePreview.appendChild(span);
                    }
                };

                reader.readAsDataURL(file);
            }
        </script>
    </main>

    @include('htmlpage.frontent.layout.footer')