<?php include 'header.php'; ?>
<?php
$u_id = $_SESSION['u_id'];
$today = date('Y-m-d');

// 1. ดึงข้อมูลการลงเวลาของวันนี้
$sql_today = "SELECT * FROM attendance WHERE u_id = '$u_id' AND att_date = '$today'";
$res_today = mysqli_query($conn, $sql_today);
$att_data = mysqli_fetch_assoc($res_today);

// 2. ดึงประวัติการปฏิบัติงาน (ย้อนหลัง 30 วัน)
$sql_history = "SELECT * FROM attendance WHERE u_id = '$u_id' ORDER BY att_date DESC LIMIT 30";
$res_history = mysqli_query($conn, $sql_history);
?>

<div class="container py-4">
    <div class="row mb-4 text-center">
        <div class="col-md-12">
            <h3 class="fw-bold text-dark">ระบบลงเวลาปฏิบัติงาน</h3>
            <p class="text-muted">วันที่ <?php echo DateThai($today); ?></p>
        </div>
    </div>

    <div class="row g-3 mb-5">
        <div class="col-md-4">
            <div class="card text-center p-4 h-100 border-0 shadow-sm">
                <i class="fas fa-sign-in-alt fa-3x mb-3 text-primary"></i>
                <h5 class="fw-bold">1. ลงเวลาเข้างาน</h5>
                <?php if(!$att_data): ?>
                    <a href="process.php?action=checkin" class="btn btn-primary w-100 mt-2 py-2 rounded-pill shadow-sm">ลงเวลาปฏิบัติงาน</a>
                <?php else: ?>
                    <div class="alert alert-success mt-2 mb-0 py-2 rounded-pill">เข้างานแล้ว: <?php echo $att_data['time_in']; ?></div>
                <?php endif; ?>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card text-center p-4 h-100 border-0 shadow-sm">
                <i class="fas fa-map-marker-alt fa-3x mb-3 text-warning"></i>
                <h5 class="fw-bold">2. สถานที่/ภารกิจ</h5>
                <?php if($att_data): ?>
                    <button class="btn btn-warning w-100 mt-2 py-2 rounded-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#workModal">
                        <?php 
                            if(empty($att_data['work_location'])) echo 'ระบุสถานที่/ภารกิจ';
                            else echo 'แก้ไข ('.($att_data['work_location'] == 'office' ? 'สำนักงาน' : 'ที่บ้าน').')';
                        ?>
                    </button>
                <?php else: ?>
                    <button class="btn btn-secondary w-100 mt-2 py-2 rounded-pill" disabled>รอลงเวลาเข้างาน</button>
                <?php endif; ?>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card text-center p-4 h-100 border-0 shadow-sm">
                <i class="fas fa-sign-out-alt fa-3x mb-3 text-danger"></i>
                <h5 class="fw-bold">3. ลงเวลากลับ</h5>
                <?php 
                if($att_data): 
                    if($att_data['time_out'] != "00:00:00" && !empty($att_data['time_out'])): ?>
                        <div class="alert alert-danger mt-2 mb-0 py-2 text-white bg-danger border-0 rounded-pill">กลับแล้ว: <?php echo $att_data['time_out']; ?></div>
                    <?php 
                    else: 
                        $can_checkout = false;
                        if($att_data['work_location'] == 'office') $can_checkout = true;
                        elseif($att_data['work_location'] == 'home' && !empty($att_data['work_detail'])) $can_checkout = true;

                        if($can_checkout): ?>
                            <button class="btn btn-danger w-100 mt-2 py-2 rounded-pill shadow-sm checkout-btn" 
                                    data-id="<?php echo $att_data['att_id']; ?>" 
                                    data-date="<?php echo DateThai($att_data['att_date']); ?>"
                                    data-bs-toggle="modal" data-bs-target="#checkoutModal">ลงเวลากลับ</button>
                        <?php else: ?>
                            <div class="alert alert-light border mt-2 mb-0 py-2 text-muted small rounded-pill">กรุณาระบุภารกิจก่อน</div>
                        <?php endif; 
                    endif; 
                else: ?>
                    <button class="btn btn-secondary w-100 mt-2 py-2 rounded-pill" disabled>รอลงเวลาเข้างาน</button>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-primary"><i class="fas fa-history me-2"></i>ประวัติการปฏิบัติงาน</h5>
            <a href="print_report.php" target="_blank" class="btn btn-sm btn-dark px-3 rounded-pill"><i class="fas fa-print me-1"></i> พิมพ์รายงานทั้งหมด</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th width="15%">วันที่</th>
                            <th width="12%">เวลาเข้า</th>
                            <th width="15%">เวลากลับ</th>
                            <th>รายละเอียดภารกิจ</th>
                            <th width="10%" class="text-center">พิมพ์</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php while($row = mysqli_fetch_assoc($res_history)): ?>
                        <tr>
                            <td class="fw-bold"><?php echo DateThai($row['att_date']); ?></td>
                            <td class="text-primary"><?php echo $row['time_in']; ?></td>
                            <td>
                                <?php if($row['time_out'] != "00:00:00" && !empty($row['time_out'])): ?>
                                    <span class="text-danger"><?php echo $row['time_out']; ?></span>
                                <?php else: ?>
                                    <?php 
                                    // ตรวจสอบว่าลงภารกิจหรือยัง ถึงจะให้ลงเวลากลับได้
                                    if(!empty($row['work_location'])): ?>
                                        <button class="btn btn-sm btn-outline-danger px-3 rounded-pill checkout-btn" 
                                                data-id="<?php echo $row['att_id']; ?>" 
                                                data-date="<?php echo DateThai($row['att_date']); ?>"
                                                data-bs-toggle="modal" data-bs-target="#checkoutModal">
                                            <i class="fas fa-clock me-1"></i> ลงกลับย้อนหลัง
                                        </button>
                                    <?php else: ?>
                                        <span class="text-muted small italic">ยังไม่ระบุภารกิจ</span>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php 
                                if($row['work_location'] == 'office') {
                                    echo '<span class="text-primary small"><i class="fas fa-building me-1"></i> ปฏิบัติงานในสำนักงาน</span>';
                                } else {
                                    $plain_text = strip_tags($row['work_detail']);
                                    echo mb_strimwidth($plain_text, 0, 30, "..."); 
                                    if(!empty($plain_text)) {
                                        echo ' <button class="btn btn-link btn-sm p-0 text-decoration-none view-full-work" 
                                                data-date="'.DateThai($row['att_date']).'" 
                                                data-content="'.htmlspecialchars($row['work_detail']).'" 
                                                data-bs-toggle="modal" data-bs-target="#viewFullWorkModal">ดูเพิ่ม</button>';
                                    }
                                }
                                ?>
                            </td>
                            <td class="text-center">
                                <a href="print_report.php?id=<?php echo $row['att_id']; ?>" target="_blank" class="btn btn-sm btn-outline-info rounded-circle"><i class="fas fa-print"></i></a>
                            </td>
                        </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="workModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <form action="process.php" method="post">
                <input type="hidden" name="action" value="save_work">
                <input type="hidden" name="att_id" value="<?php echo $att_data['att_id']; ?>">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title fw-bold">ระบุสถานที่และรายละเอียดภารกิจ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-4">
                        <label class="form-label fw-bold">สถานที่ปฏิบัติงาน:</label>
                        <div class="d-flex gap-4 border p-3 rounded bg-light">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="work_location" id="loc_office" value="office" <?php if($att_data['work_location'] == 'office') echo 'checked'; ?> required onclick="toggleWorkDetail(false)">
                                <label class="form-check-label" for="loc_office">ปฏิบัติงานที่สำนักงาน</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="work_location" id="loc_home" value="home" <?php if($att_data['work_location'] == 'home') echo 'checked'; ?> onclick="toggleWorkDetail(true)">
                                <label class="form-check-label" for="loc_home">ปฏิบัติงานที่บ้าน (WFH)</label>
                            </div>
                        </div>
                    </div>
                    <div id="detail_section" style="<?php echo ($att_data['work_location'] == 'home') ? 'display:block;' : 'display:none;'; ?>">
                        <label class="form-label fw-bold">รายละเอียดภารกิจ:</label>
                        <textarea name="work_detail" id="editor_work"><?php echo $att_data['work_detail']; ?></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="submit" class="btn btn-primary px-5 rounded-pill">บันทึกข้อมูล</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="checkoutModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <form action="process.php" method="post">
                <input type="hidden" name="action" value="checkout">
                <input type="hidden" name="att_id" id="checkout_att_id">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title fw-bold"><i class="fas fa-clock me-2"></i>ลงเวลากลับ</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <h6 class="mb-3">วันที่: <span id="checkout_display_date" class="fw-bold text-primary"></span></h6>
                    <label class="mb-2">ระบุเวลากลับ</label>
                    <input type="time" name="time_out" class="form-control form-control-lg text-center fw-bold" value="<?php echo date('H:i'); ?>" required>
                    <small class="text-muted mt-2 d-block">* ตรวจสอบความถูกต้องของเวลาก่อนบันทึก</small>
                </div>
                <div class="modal-footer bg-light">
                    <button type="submit" class="btn btn-danger w-100 py-2 rounded-pill fw-bold">ยืนยันลงเวลากลับ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="viewFullWorkModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">รายละเอียดภารกิจ</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6 id="modal_work_date" class="fw-bold text-primary mb-3"></h6>
                <div id="modal_work_content" class="p-3 bg-light rounded border" style="line-height: 1.6;"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 1. ตั้งค่า CKEditor
    CKEDITOR.replace('editor_work', { versionCheck: false, height: 250, enterMode: CKEDITOR.ENTER_BR });
    
    // 2. ฟังก์ชันสลับส่วนกรอกภารกิจ
    function toggleWorkDetail(show) {
        document.getElementById('detail_section').style.display = show ? 'block' : 'none';
    }

    $(document).ready(function(){
        // 3. จัดการการส่งค่าไปยัง Modal ลงเวลากลับ (ปัจจุบัน/ย้อนหลัง)
        $('.checkout-btn').on('click', function(){
            var id = $(this).data('id');
            var date = $(this).data('date');
            $('#checkout_att_id').val(id);
            $('#checkout_display_date').text(date);
        });

        // 4. จัดการการดูรายละเอียดภารกิจฉบับเต็ม
        $('.view-full-work').on('click', function(){
            $('#modal_work_date').text('ภารกิจวันที่: ' + $(this).data('date'));
            $('#modal_work_content').html($(this).data('content'));
        });
    });
</script>
<?php include 'footer.php'; ?>