<?php
/**
 * The template for displaying single tuyen_dung (job) posts
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<div class="page-hero text-center py-5">
    <div class="container">
        <div class="breadcrumbs mb-3 text-sm text-white-70">
            <a href="<?php echo esc_url( home_url('/') ); ?>" class="text-white-70 text-decoration-none hover-white"><?php esc_html_e( 'Trang chủ', 'theme-anphat' ); ?></a>
            <span class="mx-2">/</span>
            <a href="<?php echo esc_url( home_url('/tuyen-dung/') ); ?>" class="text-white-70 text-decoration-none hover-white"><?php esc_html_e( 'Tuyển dụng', 'theme-anphat' ); ?></a>
            <span class="mx-2">/</span>
            <span class="text-white"><?php the_title(); ?></span>
        </div>
        <span class="badge bg-accent text-primary-dark fw-bold mb-2"><?php esc_html_e( 'Đang tuyển dụng', 'theme-anphat' ); ?></span>
        <h1 class="page-title font-heading fw-bold text-white mb-0"><?php the_title(); ?></h1>
    </div>
</div>

<main id="primary" class="site-main py-6 bg-light">
    <div class="container">
        <?php while ( have_posts() ) : the_post(); ?>
        <div class="row g-5">
            <!-- Left: Job Description -->
            <div class="col-lg-8 scroll-reveal">
                <div class="bg-white rounded-4 shadow border p-4 p-md-5 mb-4">
                    <h2 class="font-heading fw-bold text-primary fs-4 mb-4 border-bottom pb-3">
                        <i class="fa-solid fa-briefcase me-2 text-accent"></i><?php esc_html_e( 'Mô tả công việc', 'theme-anphat' ); ?>
                    </h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </div>

                <!-- Apply Form -->
                <div class="bg-white rounded-4 shadow border p-4 p-md-5" id="apply-form">
                    <h3 class="font-heading fw-bold text-primary fs-5 mb-4">
                        <i class="fa-solid fa-paper-plane me-2 text-accent"></i><?php esc_html_e( 'Nộp hồ sơ ứng tuyển', 'theme-anphat' ); ?>
                    </h3>

                    <div id="apply-form-response"></div>

                    <form id="job-application-form" enctype="multipart/form-data">
                        <?php wp_nonce_field( 'anphat_job_app_nonce', 'anphat_job_app_nonce' ); ?>
                        <input type="hidden" name="action" value="anphat_job_application">
                        <input type="hidden" name="job_id" value="<?php echo esc_attr( get_the_ID() ); ?>">
                        <input type="hidden" name="job_title" value="<?php echo esc_attr( get_the_title() ); ?>">

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="apply_name"><?php esc_html_e( 'Họ và tên', 'theme-anphat' ); ?> <span class="text-danger">*</span></label>
                                    <input type="text" id="apply_name" name="apply_name" class="form-control" placeholder="<?php esc_attr_e( 'Nguyễn Văn A', 'theme-anphat' ); ?>" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="apply_phone"><?php esc_html_e( 'Số điện thoại', 'theme-anphat' ); ?> <span class="text-danger">*</span></label>
                                    <input type="tel" id="apply_phone" name="apply_phone" class="form-control" placeholder="0912 345 678" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label" for="apply_email"><?php esc_html_e( 'Email', 'theme-anphat' ); ?> <span class="text-danger">*</span></label>
                            <input type="email" id="apply_email" name="apply_email" class="form-control" placeholder="email@example.com" required>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label" for="apply_experience"><?php esc_html_e( 'Kinh nghiệm làm việc', 'theme-anphat' ); ?></label>
                            <select id="apply_experience" name="apply_experience" class="form-control">
                                <option value=""><?php esc_html_e( '— Chọn kinh nghiệm —', 'theme-anphat' ); ?></option>
                                <option value="Chưa có kinh nghiệm"><?php esc_html_e( 'Chưa có kinh nghiệm', 'theme-anphat' ); ?></option>
                                <option value="Dưới 1 năm"><?php esc_html_e( 'Dưới 1 năm', 'theme-anphat' ); ?></option>
                                <option value="1-3 năm"><?php esc_html_e( '1 – 3 năm', 'theme-anphat' ); ?></option>
                                <option value="3-5 năm"><?php esc_html_e( '3 – 5 năm', 'theme-anphat' ); ?></option>
                                <option value="Trên 5 năm"><?php esc_html_e( 'Trên 5 năm', 'theme-anphat' ); ?></option>
                            </select>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label" for="apply_message"><?php esc_html_e( 'Thư xin việc / Giới thiệu bản thân', 'theme-anphat' ); ?></label>
                            <textarea id="apply_message" name="apply_message" class="form-control" rows="4" placeholder="<?php esc_attr_e( 'Giới thiệu ngắn gọn về bản thân và lý do bạn muốn ứng tuyển vào vị trí này...', 'theme-anphat' ); ?>"></textarea>
                        </div>

                        <div class="form-group mb-4">
                            <label class="form-label" for="apply_cv"><?php esc_html_e( 'Đính kèm CV', 'theme-anphat' ); ?> <span class="text-sm text-muted"><?php esc_html_e( '(PDF, DOC, DOCX – tối đa 5MB)', 'theme-anphat' ); ?></span></label>
                            <input type="file" id="apply_cv" name="apply_cv" class="form-control" accept=".pdf,.doc,.docx">
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold" id="apply-submit-btn">
                            <i class="fa-solid fa-paper-plane me-2"></i><?php esc_html_e( 'Gửi đơn ứng tuyển', 'theme-anphat' ); ?>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Right: Sidebar -->
            <div class="col-lg-4 scroll-reveal-right">
                <!-- Job Quick Info -->
                <div class="sidebar-widget mb-4">
                    <h3><i class="fa-solid fa-info-circle me-2"></i><?php esc_html_e( 'Thông tin tuyển dụng', 'theme-anphat' ); ?></h3>
                    <?php
                    $level    = get_post_meta( get_the_ID(), 'job_level', true );
                    $deadline = get_post_meta( get_the_ID(), 'job_deadline', true );
                    $salary   = get_post_meta( get_the_ID(), 'job_salary', true );
                    $location = get_post_meta( get_the_ID(), 'job_location', true );
                    ?>
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex align-items-start gap-2 mb-3 pb-3 border-bottom">
                            <i class="fa-solid fa-map-marker-alt text-accent mt-1 flex-shrink-0"></i>
                            <div>
                                <span class="d-block text-xs text-muted uppercase fw-semibold"><?php esc_html_e( 'Địa điểm', 'theme-anphat' ); ?></span>
                                <span class="fw-semibold text-dark text-sm"><?php echo $location ? esc_html( $location ) : esc_html__( 'TP. Hồ Chí Minh', 'theme-anphat' ); ?></span>
                            </div>
                        </li>
                        <li class="d-flex align-items-start gap-2 mb-3 pb-3 border-bottom">
                            <i class="fa-solid fa-layer-group text-accent mt-1 flex-shrink-0"></i>
                            <div>
                                <span class="d-block text-xs text-muted uppercase fw-semibold"><?php esc_html_e( 'Cấp bậc', 'theme-anphat' ); ?></span>
                                <span class="fw-semibold text-dark text-sm"><?php echo $level ? esc_html( $level ) : esc_html__( 'Nhân viên', 'theme-anphat' ); ?></span>
                            </div>
                        </li>
                        <li class="d-flex align-items-start gap-2 mb-3 pb-3 border-bottom">
                            <i class="fa-solid fa-money-bill-wave text-accent mt-1 flex-shrink-0"></i>
                            <div>
                                <span class="d-block text-xs text-muted uppercase fw-semibold"><?php esc_html_e( 'Mức lương', 'theme-anphat' ); ?></span>
                                <span class="fw-semibold text-dark text-sm"><?php echo $salary ? esc_html( $salary ) : esc_html__( 'Thương lượng', 'theme-anphat' ); ?></span>
                            </div>
                        </li>
                        <li class="d-flex align-items-start gap-2">
                            <i class="fa-solid fa-calendar-xmark text-accent mt-1 flex-shrink-0"></i>
                            <div>
                                <span class="d-block text-xs text-muted uppercase fw-semibold"><?php esc_html_e( 'Hạn nộp hồ sơ', 'theme-anphat' ); ?></span>
                                <span class="fw-semibold text-dark text-sm"><?php echo $deadline ? esc_html( $deadline ) : '31/07/2026'; ?></span>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- Other Jobs -->
                <div class="sidebar-widget mb-4">
                    <h3><i class="fa-solid fa-list-check me-2"></i><?php esc_html_e( 'Vị trí khác đang tuyển', 'theme-anphat' ); ?></h3>
                    <?php
                    $other_jobs = new WP_Query( array(
                        'post_type'      => 'tuyen_dung',
                        'posts_per_page' => 5,
                        'post__not_in'   => array( get_the_ID() ),
                        'orderby'        => 'date',
                        'order'          => 'DESC',
                    ) );
                    if ( $other_jobs->have_posts() ) :
                        echo '<ul class="sidebar-recent-posts">';
                        while ( $other_jobs->have_posts() ) : $other_jobs->the_post();
                            echo '<li><a href="' . esc_url( get_permalink() ) . '"><i class="fa-solid fa-chevron-right text-accent me-2 text-xs"></i>' . esc_html( get_the_title() ) . '</a></li>';
                        endwhile;
                        echo '</ul>';
                        wp_reset_postdata();
                    else :
                        echo '<p class="text-sm text-muted">' . esc_html__( 'Hiện chưa có vị trí nào khác.', 'theme-anphat' ) . '</p>';
                    endif;
                    ?>
                </div>

                <!-- HR Contact -->
                <div class="bg-primary rounded-4 p-4 text-white text-center">
                    <i class="fa-solid fa-user-tie fs-2 text-accent mb-3 d-block"></i>
                    <h4 class="font-heading fw-bold mb-1 fs-6"><?php esc_html_e( 'Liên hệ phòng Nhân sự', 'theme-anphat' ); ?></h4>
                    <p class="text-white-80 text-sm mb-3"><?php esc_html_e( 'Gửi CV trực tiếp qua email hoặc gọi cho chúng tôi.', 'theme-anphat' ); ?></p>
                    <a href="mailto:hr@anphatpharma.com" class="btn btn-accent fw-bold w-100 mb-2">
                        <i class="fa-solid fa-envelope me-2"></i>hr@anphatpharma.com
                    </a>
                    <a href="#apply-form" class="btn btn-outline-white fw-bold w-100">
                        <i class="fa-solid fa-paper-plane me-2"></i><?php esc_html_e( 'Ứng tuyển ngay', 'theme-anphat' ); ?>
                    </a>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </div>
</main>

<script>
(function(){
    var form = document.getElementById('job-application-form');
    if (!form) return;
    form.addEventListener('submit', function(e){
        e.preventDefault();
        var btn = document.getElementById('apply-submit-btn');
        btn.disabled = true;
        btn.innerHTML = '<span class="fa-spin">&#8635;</span> <?php esc_js_e( 'Đang gửi...', 'theme-anphat' ); ?>';
        var fd = new FormData(form);
        fetch('<?php echo esc_url( admin_url("admin-ajax.php") ); ?>', {
            method:'POST',
            body: fd
        })
        .then(r => r.json())
        .then(function(res){
            var box = document.getElementById('apply-form-response');
            if (res.success) {
                box.innerHTML = '<div class="bg-success text-white rounded-3 p-3 mb-4 form-submission-alert"><i class="fa-solid fa-check-circle me-2"></i>' + res.data + '</div>';
                form.reset();
            } else {
                box.innerHTML = '<div class="bg-danger text-white rounded-3 p-3 mb-4 form-submission-alert"><i class="fa-solid fa-exclamation-triangle me-2"></i>' + (res.data || '<?php esc_js_e( 'Có lỗi xảy ra, vui lòng thử lại.', 'theme-anphat' ); ?>') + '</div>';
            }
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-paper-plane me-2"></i><?php esc_js_e( 'Gửi đơn ứng tuyển', 'theme-anphat' ); ?>';
            box.scrollIntoView({ behavior:'smooth', block:'center' });
        })
        .catch(function(){
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-paper-plane me-2"></i><?php esc_js_e( 'Gửi đơn ứng tuyển', 'theme-anphat' ); ?>';
        });
    });
})();
</script>

<?php get_footer(); ?>
