<?php
// upload.php
require_once 'includes/auth.php';
require_once 'includes/functions.php';

if(!isLoggedIn()) {
    header("Location: login.php");
    exit();
}

checkRole(['admin', 'doctor', 'technician', 'staff']);

$error = null;
$success = null;

if($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        // Validate inputs
        $required = ['guest_code'];
        foreach($required as $field) {
            if(empty($_POST[$field])) {
                throw new Exception("Missing required field: $field");
            }
        }

        $patientId = createPatient($_POST['guest_code']);
        
        // Process Before Treatment
        if (!empty($_FILES['before_images']['tmp_name'][0])) {
        // Create a dummy session: treatment_id = 0, session_number = 0
        $sessionId = createSession($patientId, 11, 0);
        processUploadedImages($sessionId, 'before', $patientId);
        }

        // Process After Treatment
        if (!empty($_FILES['after_images']['tmp_name'][0])) {
            if (empty($_POST['session_number']) || empty($_POST['treatment_id'])) {
            throw new Exception("Both Treatment and Session number are required for After Treatment");
        }
            $sessionId = createSession(
            $patientId,
            $_POST['treatment_id'],
            $_POST['session_number']
        );
            processUploadedImages($sessionId, 'after', $patientId);
        }

        $success = "Images uploaded successfully!";
        
    } catch(Exception $e) {
        $error = $e->getMessage();
    }
}
$treatments = $pdo->query("SELECT * FROM treatments")->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
    <?php includeBootstrap(); ?>
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Upload Patient Photos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .split-view {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 1rem 0;
        }
        @media (max-width: 768px) {
            .split-view {
                grid-template-columns: 1fr;
            }
        }
        .upload-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            min-height: 400px;
        }
        .thumbnail-preview {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <?php include 'navbar.php'; ?>
    <div class="container mt-4">
        <h3 class="mb-4">Upload Patient Photos</h3>

        <?php if($error): ?>
            <div class="alert alert-danger"><?= $error ?></div>
        <?php endif; ?>
        <?php if($success): ?>
            <div class="alert alert-success"><?= $success ?></div>
        <?php endif; ?>

        <form id="uploadForm" method="POST" enctype="multipart/form-data">
            <div class="row g-3 mb-4">
                <div class="col-12 col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" name="guest_code" 
                               placeholder="Guest Code" required id="guestCodeInput">
                        <button type="button" class="btn btn-outline-secondary" 
                                id="fetchSessionsBtn">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="split-view">
                <!-- Before Treatment Section -->
                <div class="upload-section" data-type="before">
                    <div class="upload-header d-flex justify-content-between align-items-center mb-3">
                        <h5>Before Treatment</h5>
                        <div class="btn-group">
                            <button type="button" 
                                    class="btn btn-primary btn-sm dropdown-toggle" 
                                    data-bs-toggle="dropdown" 
                                    aria-expanded="false">
                                <i class="bi bi-plus-lg"></i> Add
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><button class="dropdown-item camera-option" type="button" data-type="before">
                                    <i class="bi bi-camera"></i> Camera
                                </button></li>
                                <li><button class="dropdown-item gallery-option" type="button" data-type="before">
                                    <i class="bi bi-images"></i> Gallery
                                </button></li>
                                <li><button class="dropdown-item drive-option" type="button" data-type="before">
                                    <i class="bi bi-cloud-arrow-up"></i> Drive
                                </button></li>
                            </ul>
                        </div>
                    </div>
                    <div class="file-preview-container"></div>
                    <input type="file" name="before_images[]" multiple accept="image/*" class="d-none">
                </div>

                <!-- After Treatment Section -->
                <div class="upload-section" data-type="after">
                    <div class="upload-header d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h5>After Treatment (Session <?= $_POST['session_number'] ?? 'Not Selected' ?>)</h5>
                            <div class="d-flex gap-2 mt-2">
                                <select class="form-select form-select-sm" name="treatment_id" required>
                                    <option value="">Select Treatment</option>
                                    <?php foreach($treatments as $t): ?>
                                        <option value="<?= $t['id'] ?>"><?= htmlspecialchars($t['name']) ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <select class="form-select form-select-sm" name="session_number" required>
                                    <?php for($i=1; $i<=6; $i++): ?>
                                        <option value="<?= $i ?>">Session <?= $i ?></option>
                                    <?php endfor; ?>
                                </select>
                            </div>
                        </div>
                        <div class="btn-group">
                            <button type="button" 
                                    class="btn btn-primary btn-sm dropdown-toggle" 
                                    data-bs-toggle="dropdown" 
                                    aria-expanded="false">
                                <i class="bi bi-plus-lg"></i> Add
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><button class="dropdown-item camera-option" type="button" data-type="after">
                                    <i class="bi bi-camera"></i> Camera
                                </button></li>
                                <li><button class="dropdown-item gallery-option" type="button" data-type="after">
                                    <i class="bi bi-images"></i> Gallery
                                </button></li>
                                <li><button class="dropdown-item drive-option" type="button" data-type="after">
                                    <i class="bi bi-cloud-arrow-up"></i> Drive
                                </button></li>
                            </ul>
                        </div>
                    </div>
                    <div class="file-preview-container"></div>
                    <input type="file" name="after_images[]" multiple accept="image/*" class="d-none">
                </div>
            </div>

            <button type="submit" class="btn btn-success mt-4 w-100">
                <i class="bi bi-cloud-upload"></i> Submit All Images
            </button>
        </form>
    </div>
    <!-- Camera Modal -->
    <div class="modal fade" id="cameraModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Capture Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="camera-container ratio ratio-16x9 bg-dark">
                        <video id="cameraFeed" class="rounded" autoplay></video>
                        <canvas id="photoCanvas" hidden></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <select id="angleSelect" class="form-select me-auto">
                        <option value="front">Front</option>
                        <option value="left">Left</option>
                        <option value="right">Right</option>
                        <option value="top">Top</option>
                        <option value="back">Back</option>
                    </select>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="captureBtn">
                        <i class="bi bi-camera"></i> Capture
                    </button>
                </div>
            </div>
        </div>
    </div>
        <!-- Add jQuery for Bootstrap compatibility -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/webrtc-adapter/adapter.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>