<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

include_once($_SERVER['DOCUMENT_ROOT'] . '/lib/backend/career_apply.php');
$careerApply = new CareerApply();

if (isset($_POST['submit'])) {
    try {
        // hCaptcha Token aus dem POST-Request abrufen
        $captcha = isset($_POST['h-captcha-response']) ? $_POST['h-captcha-response'] : null;

        $careerApply->sendCareerApplyForm(
            $_POST['firstname'],
            $_POST['lastname'],
            $_POST['email'],
            $_POST['phone'],
            $_POST['position'],
            $_POST['location'],
            $_POST['employment'],
            $_POST['salary'],
            $_POST['experience'],
            $_POST['motivation'],
            $_FILES['cv'],
            $captcha
        );
        $successMsg = 'Ihre Bewerbung wurde erfolgreich gesendet';
    } catch (Exception $e) {
        $errorMsg = $e->getMessage();
    }
}
?>

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Bewerbung – FotoVip</title>

    <!-- Other Tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <meta name="description" content="Wir freuen uns auf Ihre Bewerbung.">
    <meta name="keywords" content="Bewerbung, Foto VIP, Foto VIP Bewerbung">
    <meta name="author" content="Jan-Lukas Knoch | www.jlknoch.com">

    <link rel="canonical" href="https://www.fotovip.de/bewerbung">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://www.fotovip.de/bewerbung">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Bewerbung – FotoVIP">
    <meta property="og:description" content="Wir freuen uns auf Ihre Bewerbung.">
    <meta property="og:image" content="https://www.fotovip.de/lib/img/fotovip_logo_white_500x500-min.png">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="https://www.fotovip.de">
    <meta property="twitter:url" content="https://www.fotovip.de/bewerbung">
    <meta name="twitter:title" content="Bewerbung – FotoVIP">
    <meta name="twitter:description" content="Wir freuen uns auf Ihre Bewerbung.">
    <meta name="twitter:image" content="https://www.fotovip.de/lib/img/fotovip_logo_white_500x500-min.png">

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/lib/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/lib/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/lib/favicon/favicon-16x16.png">
    <link rel="manifest" href="/lib/favicon/site.webmanifest">

    <!-- Stylesheets -->
    <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/css/main.css" rel="stylesheet">

    <!-- Scripts -->
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <script src="https://analytics.ahrefs.com/analytics.js" data-key="F30Wentdscb2Zac71YD58w" async></script>
</head>

<body>
    <?php $page = 'career'; ?>
    <?php include_once($_SERVER['DOCUMENT_ROOT'] . '/lib/includes/navbar.php'); ?>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Kontakt Section -->
        <section class="section" id="kontakt">
            <div class="container">
                <div class="section-title">
                    <h2>Bewerbung</h2>
                    <p>Wir freuen uns auf Ihre Bewerbung</p>
                </div>
                <?php if (isset($successMsg)) : ?>
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <div class="alert alert-success text-center" role="alert">
                                <?php echo $successMsg; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
                <?php if (isset($errorMsg)) : ?>
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <div class="alert alert-danger text-center" role="alert">
                                <?php echo $errorMsg; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="contact-form">
                            <form action="/bewerbung" method="POST" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="firstName" class="form-label">Vorname *</label>
                                        <input type="text" class="form-control" id="firstName" name="firstname" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="lastName" class="form-label">Nachname *</label>
                                        <input type="text" class="form-control" id="lastName" name="lastname" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">E-Mail *</label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">Telefon *</label>
                                        <input type="tel" class="form-control" id="phone" name="phone" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="position" class="form-label">Gewünschte Position *</label>
                                    <select class="form-select" id="position" name="position" required>
                                        <option value="studioleitung" selected>Studioleitung (m/w/d)</option>
                                        <option value="fotograf">Fotograf (m/w/d)</option>
                                        <option value="ferienjob">Ferienjob (m/w/d)</option>
                                        <option value="minijob">Minijob (m/w/d)</option>
                                        <option value="ausbildung-fotomedienlaborant">Ausbildung Fotomedienlaborant</option>
                                        <option value="initiativbewerbung">Initiativbewerbung</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="standort" class="form-label">Gewünschter Standort *</label>
                                    <select class="form-select" id="standort" name="location" required>
                                        <option value="osnabrueck" selected>Osnabrück</option>
                                        <option value="muenster">Münster</option>
                                        <option value="friesoythe">Friesoythe</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="beschaeftigungsart" class="form-label">Beschäftigungsart *</label>
                                    <select class="form-select" id="beschaeftigungsart" name="employment" required>
                                        <option value="vollzeit">Vollzeit</option>
                                        <option value="teilzeit">Teilzeit</option>
                                        <option value="ferienjob">Ferienjob</option>
                                        <option value="minijob">Minijob</option>
                                        <option value="ausbildung">Ausbildung</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <div class="col">
                                        <label for="salary" class="form-label">Gehaltsvorstellung *</label>
                                        <input type="text" class="form-control" id="salary" name="salary" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="experience" class="form-label">Berufserfahrung</label>
                                    <textarea class="form-control" id="experience" name="experience" rows="3" placeholder="Konnten Sie bereits relevante Erfahrungen sammeln?"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="motivation" class="form-label">Motivationsschreiben *</label>
                                    <textarea class="form-control" id="motivation" name="motivation" rows="5" placeholder="Warum möchten Sie bei FotoVip arbeiten?" required></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="cv" class="form-label">Lebenslauf hochladen *</label>
                                    <input type="file" class="form-control" id="cv" name="cv" accept=".pdf" required>
                                    <small class="text-muted">PDF, max. 10MB</small>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" value="" id="contact-confirm" required>
                                    <label class="form-check-label" for="contact-confirm">Ich habe die <a class="legal-link" href="/datenschutz" target="_blank">Datenschutzerklärung</a> und gelesen und stimme der Verarbeitung meiner Daten zu.</label>
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <div class="h-captcha" data-sitekey="031a3d46-c054-4352-b6dc-7920c3cee3ba"></div>
                                        <input type="hidden" name="h-captcha-response" id="h-captcha-response">
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary btn-lg" name="submit">Bewerbung senden</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <?php include_once($_SERVER['DOCUMENT_ROOT'] . '/lib/includes/footer.php'); ?>
    </main>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap 5.0 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <script src="/lib/js/main.js"></script>

    <script>
        // hCaptcha Token an das Formular binden
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const captchaInput = document.getElementById('h-captcha-response');

            if (form && captchaInput) {
                form.addEventListener('submit', function(e) {
                    // hCaptcha Token abrufen
                    const hcaptchaResponse = hcaptcha.getResponse();

                    if (!hcaptchaResponse) {
                        e.preventDefault();
                        alert('Bitte bestätigen Sie den Captcha.');
                        return false;
                    }

                    // Token in das versteckte Feld setzen
                    captchaInput.value = hcaptchaResponse;
                });
            }
        });
    </script>
</body>

</html>