<?php
/**
 * Template Name: Giao diện Tuyển dụng
 * Template Post Type: page
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

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

<main id="primary" class="site-main py-5 bg-light text-dark">
    <div class="container">
        <div class="row g-5">
            <!-- Left Side: List of Jobs -->
            <div class="col-lg-7 scroll-reveal">
                <h3 class="font-heading fw-bold text-primary mb-4"><i class="fa-solid fa-briefcase me-2 text-accent"></i><?php esc_html_e( 'CƠ HỘI NGHỀ NGHIỆP', 'theme-anphat' ); ?></h3>

                <?php
                $args = array(
                    'post_type'      => 'tuyen_dung',
                    'posts_per_page' => -1,
                    'orderby'        => 'date',
                    'order'          => 'DESC'
                );
                $query = new WP_Query( $args );

                if ( $query->have_posts() ) :
                    while ( $query->have_posts() ) : $query->the_post();
                        ?>
                        <div class="job-item bg-white p-4 rounded-4 shadow-sm border mb-3">
                            <h4 class="font-heading fw-bold text-dark fs-5 mb-2"><?php the_title(); ?></h4>
                            <div class="job-meta text-xs text-muted mb-3 d-flex flex-wrap gap-3">
                                <span><i class="fa-regular fa-clock me-1"></i><?php esc_html_e( 'Hạn nộp: Thường xuyên', 'theme-anphat' ); ?></span>
                                <span><i class="fa-solid fa-location-dot me-1 text-primary"></i><?php esc_html_e( 'TP.HCM / Hà Nội', 'theme-anphat' ); ?></span>
                                <span><i class="fa-solid fa-money-bill-1-wave me-1 text-success"></i><?php esc_html_e( 'Lương thỏa thuận', 'theme-anphat' ); ?></span>
                            </div>
                            <div class="job-desc text-sm text-muted mb-3 line-clamp-3">
                                <?php the_excerpt(); ?>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="#job-form-anchor" onclick="document.getElementById('job_id_select').value='<?php echo get_the_ID(); ?>';" class="btn btn-primary btn-sm px-3 rounded-pill"><i class="fa-solid fa-paper-plane me-1"></i><?php esc_html_e( 'Ứng Tuyển Ngay', 'theme-anphat' ); ?></a>
                                <a href="<?php the_permalink(); ?>" class="text-xs fw-bold text-primary text-decoration-none"><?php esc_html_e( 'Xem mô tả công việc', 'theme-anphat' ); ?><i class="fa-solid fa-angle-right ms-1"></i></a>
                            </div>
                        </div>
                    <?php
                    endwhile;
                    wp_reset_postdata();
                else :
                    ?>
                    <!-- Fallback / Empty state -->
                    <div class="bg-white p-5 rounded-4 shadow-sm border text-center">
                        <span class="fs-1 text-muted"><i class="fa-solid fa-face-meh"></i></span>
                        <h4 class="font-heading fw-bold text-dark mt-3"><?php esc_html_e( 'Hiện tại chưa có vị trí tuyển dụng mới', 'theme-anphat' ); ?></h4>
                        <p class="text-muted text-sm"><?php esc_html_e( 'Vui lòng nộp hồ sơ ứng tuyển tự do ở biểu mẫu bên phải để chúng tôi lưu trữ hồ sơ cho các đợt tuyển dụng sau.', 'theme-anphat' ); ?></p>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Right Side: Application Form -->
            <div class="col-lg-5 scroll-reveal-right" id="job-form-anchor">
                <div class="apply-box bg-white p-4 rounded-4 shadow border">
                    <h3 class="font-heading fw-bold text-primary mb-2 text-center"><?php esc_html_e( 'NỘP HỒ SƠ TRỰC TUYẾN', 'theme-anphat' ); ?></h3>
                    <p class="text-xs text-muted text-center mb-4"><?php esc_html_e( 'Hãy gửi CV của bạn để gia nhập đội ngũ chuyên nghiệp của An Phát Pharma', 'theme-anphat' ); ?></p>

                    <form id="job-application-form" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="form-label" for="fullname"><?php esc_html_e( 'Họ và tên', 'theme-anphat' ); ?> *</label>
                            <input type="text" id="fullname" name="fullname" class="form-control" required placeholder="<?php esc_attr_e( 'Nguyễn Văn A', 'theme-anphat' ); ?>">
                        </div>

                        <div class="form-row row g-3">
                            <div class="col-6 form-group">
                                <label class="form-label" for="email"><?php esc_html_e( 'Email', 'theme-anphat' ); ?> *</label>
                                <input type="email" id="email" name="email" class="form-control" required placeholder="a@gmail.com">
                            </div>
                            <div class="col-6 form-group">
                                <label class="form-label" for="phone"><?php esc_html_e( 'Số điện thoại', 'theme-anphat' ); ?> *</label>
                                <input type="tel" id="phone" name="phone" class="form-control" required placeholder="0901234567">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="job_id_select"><?php esc_html_e( 'Vị trí ứng tuyển', 'theme-anphat' ); ?> *</label>
                            <select id="job_id_select" name="job_id" class="form-control" required>
                                <option value="0"><?php esc_html_e( 'Ứng tuyển tự do (Lưu hồ sơ dự bị)', 'theme-anphat' ); ?></option>
                                <?php
                                $jobs = get_posts( array(
                                    'post_type'      => 'tuyen_dung',
                                    'posts_per_page' => -1
                                ) );
                                foreach ( $jobs as $job ) {
                                    echo '<option value="' . esc_attr( $job->ID ) . '">' . esc_html( $job->post_title ) . '</option>';
                                }
                                ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="cv_file"><?php esc_html_e( 'Đính kèm CV (PDF, DOC, DOCX - Tối đa 5MB)', 'theme-anphat' ); ?> *</label>
                            <input type="file" id="cv_file" name="cv_file" class="form-control" required accept=".pdf,.doc,.docx">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="message"><?php esc_html_e( 'Lời giới thiệu bản thân', 'theme-anphat' ); ?></label>
                            <textarea id="message" name="message" class="form-control" rows="3" placeholder="<?php esc_attr_e( 'Viết ngắn gọn kinh nghiệm làm việc hoặc lý do ứng tuyển...', 'theme-anphat' ); ?>"></textarea>
                        </div>

                        <button type="submit" class="btn btn-accent btn-lg w-100 fw-bold shadow mt-2"><i class="fa-solid fa-paper-plane me-2"></i><?php esc_html_e( 'Nộp Hồ Sơ Ứng Tuyển', 'theme-anphat' ); ?></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>
