<?php
/**
 * Template Name: Giao diện Cảnh giác Dược
 * 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( 'Cảnh giác Dược', '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: Pharmacovigilance Instructions -->
            <div class="col-lg-5 scroll-reveal">
                <div class="bg-white p-4 rounded-4 shadow-sm border mb-4">
                    <h3 class="font-heading fw-bold text-primary mb-3"><i class="fa-solid fa-circle-info me-2 text-accent"></i><?php esc_html_e( 'CẢNH GIÁC DƯỢC LÀ GÌ?', 'theme-anphat' ); ?></h3>
                    <p class="text-sm text-muted">
                        <?php esc_html_e( 'Cảnh giác Dược (Pharmacovigilance) là các hoạt động chuyên môn y tế liên quan đến việc phát hiện, đánh giá, hiểu và phòng tránh các phản ứng có hại của thuốc (ADR - Adverse Drug Reaction) hoặc bất kỳ vấn đề nào khác liên quan đến an toàn thuốc.', 'theme-anphat' ); ?>
                    </p>
                    <p class="text-sm text-muted">
                        <?php esc_html_e( 'Tại An Phát Pharma, chúng tôi đặt sự an toàn và sức khỏe của bệnh nhân lên vị trí tối cao. Việc báo cáo phản ứng có hại giúp chúng tôi giám sát chất lượng và nâng cao tính an toàn sử dụng thuốc.', 'theme-anphat' ); ?>
                    </p>
                </div>

                <div class="bg-primary text-white p-4 rounded-4 shadow-sm">
                    <h4 class="font-heading fw-bold text-accent mb-3"><i class="fa-solid fa-hospital-user me-2"></i><?php esc_html_e( 'AI CÓ THỂ BÁO CÁO?', 'theme-anphat' ); ?></h4>
                    <ul class="text-sm d-flex flex-column gap-2 list-unstyled mb-0">
                        <li><i class="fa-solid fa-circle-check text-accent me-2"></i><?php esc_html_e( 'Bác sĩ điều trị, Dược sĩ lâm sàng.', 'theme-anphat' ); ?></li>
                        <li><i class="fa-solid fa-circle-check text-accent me-2"></i><?php esc_html_e( 'Điều dưỡng viên, kỹ thuật viên y tế.', 'theme-anphat' ); ?></li>
                        <li><i class="fa-solid fa-circle-check text-accent me-2"></i><?php esc_html_e( 'Bệnh nhân hoặc người nhà bệnh nhân.', 'theme-anphat' ); ?></li>
                        <li><i class="fa-solid fa-circle-check text-accent me-2"></i><?php esc_html_e( 'Đại lý thuốc, cơ sở y khoa thương mại.', 'theme-anphat' ); ?></li>
                    </ul>
                    <div class="mt-4 pt-3 border-top border-white-20 text-xs text-white-80">
                        <?php esc_html_e( '* Mọi thông tin gửi về sẽ được mã hóa và bảo mật tuyệt đối theo Quy định Y tế Quốc gia về báo cáo ADR.', 'theme-anphat' ); ?>
                    </div>
                </div>
            </div>

            <!-- Right Side: Complex Medical Form -->
            <div class="col-lg-7 scroll-reveal-right">
                <div class="bg-white p-4 p-md-5 rounded-4 shadow border">
                    <h3 class="font-heading fw-bold text-primary text-center mb-3"><?php esc_html_e( 'BÁO CÁO PHẢN ỨNG CÓ HẠI CỦA THUỐC (ADR)', 'theme-anphat' ); ?></h3>
                    <p class="text-xs text-muted text-center mb-4"><?php esc_html_e( 'Quý khách vui lòng cung cấp đầy đủ thông tin nhất có thể để phục vụ việc kiểm tra y tế.', 'theme-anphat' ); ?></p>

                    <form id="adr-report-form">
                        <!-- Part 1: Reporter Info -->
                        <h5 class="font-heading fw-bold text-primary border-bottom pb-2 mb-3"><i class="fa-solid fa-user-pen text-accent me-2"></i><?php esc_html_e( '1. THÔNG TIN NGƯỜI BÁO CÁO', 'theme-anphat' ); ?></h5>
                        <div class="row g-3 form-group">
                            <div class="col-md-6">
                                <label class="form-label" for="reporter_name"><?php esc_html_e( 'Họ và tên người báo cáo', 'theme-anphat' ); ?> *</label>
                                <input type="text" id="reporter_name" name="reporter_name" class="form-control" required placeholder="<?php esc_attr_e( 'Nguyễn Văn B', 'theme-anphat' ); ?>">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="reporter_phone"><?php esc_html_e( 'Số điện thoại', 'theme-anphat' ); ?> *</label>
                                <input type="tel" id="reporter_phone" name="reporter_phone" class="form-control" required placeholder="0908765432">
                            </div>
                        </div>
                        <div class="row g-3 form-group">
                            <div class="col-md-6">
                                <label class="form-label" for="reporter_email"><?php esc_html_e( 'Email liên hệ', 'theme-anphat' ); ?></label>
                                <input type="email" id="reporter_email" name="reporter_email" class="form-control" placeholder="b@gmail.com">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="reporter_job"><?php esc_html_e( 'Nghề nghiệp / Chức vụ', 'theme-anphat' ); ?></label>
                                <input type="text" id="reporter_job" name="reporter_job" class="form-control" placeholder="<?php esc_attr_e( 'Bác sĩ, Dược sĩ, Bệnh nhân...', 'theme-anphat' ); ?>">
                            </div>
                        </div>

                        <!-- Part 2: Patient Info -->
                        <h5 class="font-heading fw-bold text-primary border-bottom pb-2 mb-3 mt-4"><i class="fa-solid fa-hospital-user text-accent me-2"></i><?php esc_html_e( '2. THÔNG TIN BỆNH NHÂN', 'theme-anphat' ); ?></h5>
                        <div class="row g-3 form-group">
                            <div class="col-md-5">
                                <label class="form-label" for="patient_name"><?php esc_html_e( 'Họ tên viết tắt / Mã số bệnh nhân', 'theme-anphat' ); ?> *</label>
                                <input type="text" id="patient_name" name="patient_name" class="form-control" required placeholder="<?php esc_attr_e( 'N.V.A', 'theme-anphat' ); ?>">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="patient_dob"><?php esc_html_e( 'Ngày/Năm sinh', 'theme-anphat' ); ?></label>
                                <input type="text" id="patient_dob" name="patient_dob" class="form-control" placeholder="01/01/1990">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="patient_gender"><?php esc_html_e( 'Giới tính', 'theme-anphat' ); ?></label>
                                <select id="patient_gender" name="patient_gender" class="form-control">
                                    <option value="Nam"><?php esc_html_e( 'Nam', 'theme-anphat' ); ?></option>
                                    <option value="Nữ"><?php esc_html_e( 'Nữ', 'theme-anphat' ); ?></option>
                                    <option value="Khác"><?php esc_html_e( 'Khác', 'theme-anphat' ); ?></option>
                                </select>
                            </div>
                        </div>

                        <!-- Part 3: Suspected Drug -->
                        <h5 class="font-heading fw-bold text-primary border-bottom pb-2 mb-3 mt-4"><i class="fa-solid fa-capsules text-accent me-2"></i><?php esc_html_e( '3. THUỐC NGHI NGỜ GÂY PHẢN ỨNG PHỤ', 'theme-anphat' ); ?></h5>
                        <div class="row g-3 form-group">
                            <div class="col-md-6">
                                <label class="form-label" for="drug_name"><?php esc_html_e( 'Tên thuốc (Thương mại / Hoạt chất)', 'theme-anphat' ); ?> *</label>
                                <input type="text" id="drug_name" name="drug_name" class="form-control" required placeholder="<?php esc_attr_e( 'Cholesome / Atorvastatin', 'theme-anphat' ); ?>">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="drug_lot"><?php esc_html_e( 'Số lô sản xuất (nếu có)', 'theme-anphat' ); ?></label>
                                <input type="text" id="drug_lot" name="drug_lot" class="form-control" placeholder="<?php esc_attr_e( 'Lô 202603', 'theme-anphat' ); ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="drug_usage"><?php esc_html_e( 'Liều dùng & Đường dùng (Ví dụ: Uống 1 viên/ngày)', 'theme-anphat' ); ?></label>
                            <input type="text" id="drug_usage" name="drug_usage" class="form-control" placeholder="<?php esc_attr_e( '1 viên/ngày, đường uống', 'theme-anphat' ); ?>">
                        </div>

                        <!-- Part 4: ADR Description -->
                        <h5 class="font-heading fw-bold text-primary border-bottom pb-2 mb-3 mt-4"><i class="fa-solid fa-notes-medical text-accent me-2"></i><?php esc_html_e( '4. MÔ TẢ PHẢN ỨNG PHỤ', 'theme-anphat' ); ?></h5>
                        <div class="row g-3 form-group">
                            <div class="col-md-6">
                                <label class="form-label" for="adr_date"><?php esc_html_e( 'Ngày xuất hiện phản ứng phụ', 'theme-anphat' ); ?></label>
                                <input type="date" id="adr_date" name="adr_date" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="adr_desc"><?php esc_html_e( 'Mô tả chi tiết triệu chứng phản ứng có hại', 'theme-anphat' ); ?> *</label>
                            <textarea id="adr_desc" name="adr_desc" class="form-control" rows="4" required placeholder="<?php esc_attr_e( 'Mô tả triệu chứng cụ thể: Nổi ban đỏ toàn thân, ngứa, chóng mặt sau khi uống thuốc 30 phút...', 'theme-anphat' ); ?>"></textarea>
                        </div>

                        <button type="submit" class="btn btn-accent btn-lg w-100 fw-bold shadow mt-3"><i class="fa-solid fa-paper-plane me-2"></i><?php esc_html_e( 'Gửi Báo Cáo Bảo Mật', 'theme-anphat' ); ?></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>
