<?php
require_once '../admin/includes/branding.php';
require_once '../admin/includes/config.php';

if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
    header('Location: user_authentication.html');
    exit;
}

$booking_id = $_GET['booking_id'] ?? $_POST['booking_id'] ?? null;
if (!$booking_id) {
    header('Location: my_bookings.php');
    exit;
}

$pdo = getDBConnection();
$stmt = $pdo->prepare("SELECT * FROM bookings WHERE id = ? AND user_id = ?");
$stmt->execute([$booking_id, $_SESSION['user_id']]);
$booking = $stmt->fetch();

if (!$booking) {
    header('Location: my_bookings.php');
    exit;
}

$error = '';
$success = '';

// Get receiver details from settings
$stmt = $pdo->query("SELECT * FROM settings WHERE key_name IN ('gcash_name', 'gcash_number', 'paymaya_name', 'paymaya_number')");
$settings = [];
while ($row = $stmt->fetch()) {
    $settings[$row['key_name']] = $row['key_value'];
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $payment_method = $_POST['payment_method'] ?? '';
    $ref_no = $_POST['reference_number'] ?? '';
    $sender_name = $_POST['sender_name'] ?? '';
    $sender_number = $_POST['sender_number'] ?? '';
    
    if (isset($_FILES['proof_of_payment']) && $_FILES['proof_of_payment']['error'] === UPLOAD_ERR_OK) {
        $upload_dir = '../uploads/payments/';
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir, 0755, true);
        }
        
        $ext = pathinfo($_FILES['proof_of_payment']['name'], PATHINFO_EXTENSION);
        $filename = 'pay_' . $booking_id . '_' . time() . '.' . $ext;
        $dest = $upload_dir . $filename;
        
        if (move_uploaded_file($_FILES['proof_of_payment']['tmp_name'], $dest)) {
            try {
                $pdo->beginTransaction();
                
                // Calculate full URL for the proof of payment
                $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
                $host = $_SERVER['HTTP_HOST'];
                $project_path = str_replace('\\', '/', dirname(dirname($_SERVER['SCRIPT_NAME'])));
                $project_path = rtrim($project_path, '/');
                $baseUrl = $protocol . '://' . $host . $project_path;
                $proof_url = $baseUrl . '/uploads/payments/' . $filename;

                // Insert into payments
                $stmt = $pdo->prepare("
                    INSERT INTO payments (booking_id, reference_number, amount, payment_method, payment_type, transaction_reference, sender_name, sender_number, proof_of_payment, status)
                    VALUES (?, ?, ?, ?, 'downpayment', ?, ?, ?, ?, 'pending')
                    ON DUPLICATE KEY UPDATE
                        transaction_reference = VALUES(transaction_reference),
                        sender_name = VALUES(sender_name),
                        sender_number = VALUES(sender_number),
                        proof_of_payment = VALUES(proof_of_payment)
                ");
                
                $ref = 'PAY-' . strtoupper(bin2hex(random_bytes(4)));
                $stmt->execute([
                    $booking_id, $ref, $booking['downpayment_amount'], 
                    $payment_method, $ref_no, $sender_name, $sender_number, $proof_url
                ]);
                
                $pdo->commit();
                $success = 'Payment proof submitted successfully! Please wait for admin verification.';
            } catch (Exception $e) {
                $pdo->rollBack();
                $error = 'Database error: ' . $e->getMessage();
            }
        } else {
            $error = 'Failed to move uploaded file.';
        }
    } else {
        $error = 'Please select a file to upload.';
    }
}
?>
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Submit Payment - <?= htmlspecialchars(getBrandName()) ?></title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <script src="../admin/includes/tailwind_config.js"></script>
    <link rel="stylesheet" href="../admin/includes/responsive.css">
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white min-h-screen">
    <header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center justify-between px-4 py-4 max-w-7xl mx-auto">
            <a href="booking_details.php?booking_id=<?= $booking_id ?>" class="flex size-10 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-clamp-lg font-bold">Submit Payment</h1>
            <div class="w-10"></div>
        </div>
    </header>

    <main class="responsive-container max-w-4xl p-4">
        <?php if ($success): ?>
            <div class="bg-emerald-100 border border-emerald-400 text-emerald-700 px-4 py-10 rounded-2xl text-center">
                <span class="material-symbols-outlined text-5xl mb-4">check_circle</span>
                <h2 class="text-xl font-bold mb-2">Submitted!</h2>
                <p class="mb-6"><?= $success ?></p>
                <a href="my_bookings.php" class="bg-emerald-600 text-white px-6 py-2 rounded-lg font-bold">Back to Bookings</a>
            </div>
        <?php else: ?>
            <div class="bg-blue-600 text-white rounded-2xl p-clamp-6 mb-6">
                <p class="text-clamp-xs uppercase font-bold opacity-80 mb-1">Total Downpayment</p>
                <h2 class="text-clamp-4xl font-bold">₱<?= number_format($booking['downpayment_amount'], 2) ?></h2>
                <p class="text-clamp-xs mt-4 opacity-80">Reference: <?= $booking['reference_number'] ?></p>
            </div>

            <?php if ($error): ?>
                <div class="bg-rose-100 border border-rose-400 text-rose-700 px-4 py-3 rounded-xl mb-6 text-sm">
                    <?= $error ?>
                </div>
            <?php endif; ?>

            <form method="POST" enctype="multipart/form-data" class="space-y-6">
                <input type="hidden" name="booking_id" value="<?= $booking_id ?>">
                
                <section>
                    <h3 class="text-clamp-base font-bold mb-4">Select Payment Method</h3>
                    <div class="grid grid-cols-1 gap-3">
                        <label class="flex items-center gap-4 border border-gray-200 dark:border-gray-800 p-4 rounded-xl cursor-pointer has-[:checked]:bg-primary/5 has-[:checked]:border-primary transition-all" onclick="showReceiverInfo('gcash')">
                            <input type="radio" name="payment_method" value="gcash" checked class="text-primary focus:ring-primary">
                            <span class="font-medium">GCash</span>
                        </label>
                        <label class="flex items-center gap-4 border border-gray-200 dark:border-gray-800 p-4 rounded-xl cursor-pointer has-[:checked]:bg-primary/5 has-[:checked]:border-primary transition-all" onclick="showReceiverInfo('paymaya')">
                            <input type="radio" name="payment_method" value="paymaya" class="text-primary focus:ring-primary">
                            <span class="font-medium">PayMaya</span>
                        </label>
                        <label class="flex items-center gap-4 border border-gray-200 dark:border-gray-800 p-4 rounded-xl cursor-pointer has-[:checked]:bg-primary/5 has-[:checked]:border-primary transition-all" onclick="showReceiverInfo('bank_transfer')">
                            <input type="radio" name="payment_method" value="bank_transfer" class="text-primary focus:ring-primary">
                            <span class="font-medium">Bank Transfer</span>
                        </label>
                    </div>
                </section>

                <!-- Receiver Information Display -->
                <div id="receiverInfo" class="bg-slate-100 dark:bg-slate-900 rounded-2xl p-6 border border-slate-200 dark:border-slate-800">
                    <h4 class="text-xs font-bold uppercase text-slate-500 mb-4">Receiver Information</h4>
                    <div id="gcashInfo" class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-500">Account Name:</span>
                            <span class="text-sm font-bold"><?= htmlspecialchars($settings['gcash_name'] ?? 'Not Set') ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-500">Account Number:</span>
                            <span class="text-sm font-bold text-primary"><?= htmlspecialchars($settings['gcash_number'] ?? 'Not Set') ?></span>
                        </div>
                    </div>
                    <div id="paymayaInfo" class="space-y-2 hidden">
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-500">Account Name:</span>
                            <span class="text-sm font-bold"><?= htmlspecialchars($settings['paymaya_name'] ?? 'Not Set') ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-slate-500">Account Number:</span>
                            <span class="text-sm font-bold text-primary"><?= htmlspecialchars($settings['paymaya_number'] ?? 'Not Set') ?></span>
                        </div>
                    </div>
                    <div id="bankInfo" class="text-sm text-slate-500 hidden">
                        Please contact support for bank transfer details.
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <section>
                        <label class="block font-bold mb-2">Sender Name</label>
                        <input type="text" name="sender_name" required placeholder="Name in GCash/PayMaya" class="w-full border-gray-200 dark:border-gray-800 dark:bg-gray-900 rounded-xl p-3 focus:ring-primary">
                    </section>
                    <section>
                        <label class="block font-bold mb-2">Sender Number</label>
                        <input type="text" name="sender_number" required placeholder="09xxxxxxxxx" class="w-full border-gray-200 dark:border-gray-800 dark:bg-gray-900 rounded-xl p-3 focus:ring-primary">
                    </section>
                </div>

                <section>
                    <label class="block font-bold mb-2">Transaction Reference #</label>
                    <input type="text" name="reference_number" required placeholder="Enter reference number" class="w-full border-gray-200 dark:border-gray-800 dark:bg-gray-900 rounded-xl p-3 focus:ring-primary">
                </section>

                <section>
                    <label class="block font-bold mb-2">Upload Proof of Payment</label>
                    <div class="border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-2xl p-8 text-center cursor-pointer hover:border-primary transition-colors" onclick="document.getElementById('proofFile').click()">
                        <input type="file" id="proofFile" name="proof_of_payment" accept="image/*" class="hidden" required onchange="updateFileName(this)">
                        <span class="material-symbols-outlined text-4xl text-gray-400 mb-2">cloud_upload</span>
                        <p class="text-sm text-gray-500" id="fileText">Tap to select image</p>
                    </div>
                </section>

                <button type="submit" class="w-full bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30 active:scale-95 transition-transform">
                    Confirm & Submit Payment
                </button>
            </form>
        <?php endif; ?>
    </main>

    <script>
        function updateFileName(input) {
            const text = document.getElementById('fileText');
            if (input.files && input.files[0]) {
                text.textContent = "Selected: " + input.files[0].name;
                text.classList.add('text-primary', 'font-bold');
            }
        }

        function showReceiverInfo(method) {
            const gcash = document.getElementById('gcashInfo');
            const paymaya = document.getElementById('paymayaInfo');
            const bank = document.getElementById('bankInfo');
            const senderNameInput = document.querySelector('input[name="sender_name"]');

            gcash.classList.add('hidden');
            paymaya.classList.add('hidden');
            bank.classList.add('hidden');

            if (method === 'gcash') {
                gcash.classList.remove('hidden');
                senderNameInput.placeholder = "Name in GCash";
            } else if (method === 'paymaya') {
                paymaya.classList.remove('hidden');
                senderNameInput.placeholder = "Name in PayMaya";
            } else {
                bank.classList.remove('hidden');
                senderNameInput.placeholder = "Account Name";
            }
        }
    </script>
</body>
</html>
