{% extends 'domain/frontend/layouts/base.html.twig' %}

{% block title %}{{ jobOffer.title }}{% endblock %}
{% block main_title %}{{ jobOffer.title }}{% endblock %}
{% block sub_title %}{{ jobOffer.title }}{% endblock %}
{% block style %}
    {% form_theme form 'form_div_layout.html.twig' %}
{% endblock %}

{% block body %}
    <!-- News Details Start -->
    <section class="news-section fix section-padding">

        <div class="container">
            <!-- Affichage des messages flash -->
            {% for label, messages in app.flashes %}
                <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }}">
                    {% for message in messages %}
                        <p class="text-center">{{ message }}</p>
                    {% endfor %}
                </div>
            {% endfor %}
            <div class="news-details-area">
                <div class="row g-5">
                    <div class="col-12">
                        <div class="blog-post-details">
                            <div class="single-blog-post">
                                <div class="post-content">
                                    <h3>Description</h3>
                                    <p>{{ jobOffer.description|raw }}</p>
                                </div>
                            </div>
                            <div class="comment-form-wrap mt-5">
                                <h3>Déposer votre candidature</h3>
                                {{ form_start(form) }}
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.name) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.email) }}
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.phone) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.cv) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-clt">
                                            {{ form_row(form.lettreMotivation) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <button type="submit" class="theme-btn-2 padding-style">
                                            Déposer
                                            <span class="shape-img">
                                                        <img src="{{ asset('templates/frontend/img/arrow-shape.png') }}"
                                                             alt="shape-img">
                                                    </span>
                                        </button>
                                    </div>
                                </div>
                                <style>textarea {
                                        color: white
                                    }</style>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <style>
        /* ===================================
   Job Offer Details - Modern Styles
   =================================== */

        /* Section principale */
        .news-section {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
            min-height: 100vh;
            padding: 60px 0;
        }

        .news-details-area {
            animation: fadeInUp 0.6s ease-out;
        }

        /* Card principale */
        .blog-post-details {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .blog-post-details:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
        }

        /* Section description */
        .single-blog-post {
            padding: 40px;
            border-bottom: 2px solid #f0f4f8;
        }

        .post-content h3 {
            color: #1a2332;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }

        .post-content h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            border-radius: 2px;
        }

        .post-content p {
            color: #4b5563;
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 15px;
        }

        /* Formulaire de candidature */
        .comment-form-wrap {
            padding: 40px;
            background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
        }

        .comment-form-wrap h3 {
            color: #1a2332;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
        }

        .comment-form-wrap h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            border-radius: 2px;
        }

        /* Champs de formulaire */
        .form-clt {
            position: relative;
        }

        .form-clt label {
            display: block;
            color: #374151;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            transition: color 0.3s ease;
        }

        .form-clt input[type="text"],
        .form-clt input[type="email"],
        .form-clt input[type="tel"],
        .form-clt input[type="file"],
        .form-clt textarea {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 15px;
            color: #1f2937;
            background: #ffffff;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-clt input[type="text"]:focus,
        .form-clt input[type="email"]:focus,
        .form-clt input[type="tel"]:focus,
        .form-clt input[type="file"]:focus,
        .form-clt textarea:focus {
            border-color: var(--color-secondary);
            box-shadow: 0 0 0 4px rgba(56, 94, 164, 0.1);
            background: #ffffff;
        }

        .form-clt textarea {
            min-height: 150px;
            resize: vertical;
            color: #1f2937 !important;
        }

        /* Style pour les fichiers */
        .form-clt input[type="file"] {
            padding: 12px 18px;
            cursor: pointer;
            background: #f9fafb;
            border-style: dashed;
        }

        .form-clt input[type="file"]:hover {
            background: #f3f4f6;
            border-color: var(--color-secondary);
        }

        /* Bouton de soumission */
        .theme-btn-2 {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 40px;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .theme-btn-2::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
            transition: left 0.4s ease;
            z-index: 0;
        }

        .theme-btn-2:hover::before {
            left: 0;
        }

        .theme-btn-2:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
        }

        .theme-btn-2 * {
            position: relative;
            z-index: 1;
        }

        .shape-img img {
            width: 20px;
            height: 20px;
            filter: brightness(0) invert(1);
            transition: transform 0.3s ease;
        }

        .theme-btn-2:hover .shape-img img {
            transform: translateX(5px);
        }

        /* Messages flash */
        .alert {
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 30px;
            border: none;
            font-weight: 500;
            animation: slideDown 0.4s ease-out;
        }

        .alert-success {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #065f46;
        }

        .alert-danger {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            color: #991b1b;
        }

        .alert p {
            margin: 0;
            font-size: 15px;
        }

        /* Messages d'erreur de formulaire */
        .form-error-message {
            color: #dc2626;
            font-size: 13px;
            margin-top: 6px;
            display: block;
            animation: shake 0.3s ease;
        }

        .form-clt.has-error input,
        .form-clt.has-error textarea {
            border-color: #dc2626;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        /* Responsive Design */
        @media (max-width: 991px) {
            .news-section {
                padding: 40px 0;
            }

            .single-blog-post,
            .comment-form-wrap {
                padding: 30px 20px;
            }

            .post-content h3,
            .comment-form-wrap h3 {
                font-size: 24px;
            }
        }

        @media (max-width: 575px) {
            .single-blog-post,
            .comment-form-wrap {
                padding: 25px 15px;
            }

            .post-content h3,
            .comment-form-wrap h3 {
                font-size: 22px;
            }

            .theme-btn-2 {
                width: 100%;
                justify-content: center;
                padding: 14px 30px;
            }
        }

        /* Amélioration des placeholders */
        .form-clt input::placeholder,
        .form-clt textarea::placeholder {
            color: #9ca3af;
            font-size: 14px;
        }

        /* Focus visible pour l'accessibilité */
        .form-clt input:focus-visible,
        .form-clt textarea:focus-visible,
        .theme-btn-2:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 2px;
        }

        /* Style pour les labels requis */
        .form-clt label.required::after {
            content: ' *';
            color: #dc2626;
            font-weight: 700;
        }

        /* Espacement de la grille */
        .row.g-4 {
            margin-bottom: 20px;
        }

        /* Style pour améliorer la lisibilité du texte */
        .post-content ul,
        .post-content ol {
            padding-left: 25px;
            margin: 15px 0;
        }

        .post-content ul li,
        .post-content ol li {
            color: #4b5563;
            line-height: 1.8;
            margin-bottom: 8px;
        }

        .post-content strong {
            color: #1a2332;
            font-weight: 600;
        }
    </style>
{% endblock %}