<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Disable user zoom -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Send Roses</title>
    <style>
        body {
            margin:0;
            font-family:Arial,sans-serif;
            background-color:#f9f9f9;
        }
        .rose-container {
            max-width:400px;
            margin:30px auto;
            background:#fff;
            padding:20px;
            border-radius:8px;
            box-shadow:0 4px 6px rgba(0,0,0,0.1);
        }
        .rose-container h1 {
            text-align:center;
        }
        .info {
            margin-bottom:15px;
            font-size:16px;
        }
        /* Buttons */
        .buttons {
            margin-top:20px;
            display:flex;
            justify-content:space-between;
        }
        .btn {
            padding:8px 16px;
            border:none;
            border-radius:4px;
            font-size:14px;
            cursor:pointer;
            text-align:center;
            color:#fff;
        }
        .btn-confirm {
            background-color:#28a745;
        }
        .btn-confirm:hover {
            background-color:#218838;
        }
        .btn-cancel {
            background-color:#6c757d;
        }
        .btn-cancel:hover {
            background-color:#5a6268;
        }
        .btn-disabled {
            background-color:#aaa !important;
            cursor:not-allowed !important;
        }

        /* The clickable blocks for rose amount */
        .rose-choose-container {
            display:grid;
            grid-template-columns: repeat(5, 1fr);
            gap:6px;
            margin-top:10px;
        }
        .rose-choose-option {
            height:40px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:14px;
            cursor:pointer;
            border:2px solid #ccc;
            border-radius:8px;
            user-select:none;
            transition: background-color 0.2s, border-color 0.2s;
        }
        .rose-choose-option:hover {
            background-color:#f1f1f1;
        }
        .rose-choose-option.selectedRose {
            border-color:#ff8500;
            background-color:#ffe4c2;
        }

        /* Recharge info */
        .recharge-info {
            margin-top:20px;
            font-size:14px;
            line-height:1.5;
            color:#666;
        }
        .recharge-info li {
            margin-bottom:6px;
        }

        /* Modal overlay + message box => same pattern as list.html "messages" modal */
        .modal-overlay {
            display:none;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,0.4);
            z-index:9999;
        }
        .modal-box {
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            background:#fff;
            border-radius:8px;
            box-shadow:0 4px 6px rgba(0,0,0,0.2);
            width:80%;
            max-width:400px;
            padding:20px;
            text-align:center;
        }
        .modal-box h2 {
            margin-top:0;
            margin-bottom:10px;
            font-size:18px;
        }
        .modal-box p {
            margin:10px 0;
            font-size:16px;
        }
        .close-btn {
            display:block;
            margin:0 auto;
            margin-top:10px;
            padding:8px 16px;
            background-color:#007bff;
            color:#fff;
            border:none;
            border-radius:4px;
            font-size:14px;
            cursor:pointer;
        }
        .close-btn:hover {
            background-color:#0056b3;
        }
    </style>
</head>
<body>
<div class="rose-container">
    <h1>Send Roses</h1>
    <p class="info">
        <!-- 这里显示：名称 + 对方需求 + 我方余额 -->
        Recipient: <strong>{{.TargetName}}</strong><br>
        The recipient requires: <span style="font-size:18px;">🌹</span>X<strong>{{.TargetRoseNeeded}}</strong><br>
        You currently have: <span style="font-size:18px;">🌹</span>X<strong id="currentBalanceSpan">{{.CurrentUserBalance}}</strong>
    </p>

    <form id="roseForm">
        <!-- name="targetName" 用于后端仅提示，对方是谁 -->
        <input type="hidden" name="targetName" value="{{.TargetName}}">

        <!-- name="targetAcc" 用于后端逻辑(以 account 查找用户) -->
        <input type="hidden" name="targetAcc" id="targetAccInput" value="">

        <!-- hidden input: store chosen rose amount -->
        <input type="hidden" id="roseAmount" name="amount" value="{{.TargetRoseNeeded}}">

        <label>Number of roses to send:</label>
        <div class="rose-choose-container">
            <div class="rose-choose-option" onclick="chooseRose('1')"   id="rose1">1</div>
            <div class="rose-choose-option" onclick="chooseRose('2')"   id="rose2">2</div>
            <div class="rose-choose-option" onclick="chooseRose('5')"   id="rose5">5</div>
            <div class="rose-choose-option" onclick="chooseRose('10')"  id="rose10">10</div>
            <div class="rose-choose-option" onclick="chooseRose('20')"  id="rose20">20</div>

            <div class="rose-choose-option" onclick="chooseRose('50')"  id="rose50">50</div>
            <div class="rose-choose-option" onclick="chooseRose('100')" id="rose100">100</div>
            <div class="rose-choose-option" onclick="chooseRose('200')" id="rose200">200</div>
            <div class="rose-choose-option" onclick="chooseRose('300')" id="rose300">300</div>
            <div class="rose-choose-option" onclick="chooseRose('500')" id="rose500">500</div>
        </div>

        <div class="buttons">
            <button id="confirmBtn" type="submit" class="btn btn-confirm">Send</button>
            <a href="/list" class="btn btn-cancel">Back</a>
        </div>
    </form>

    <!-- Keep your recharge info as-is -->
    <div class="recharge-info">
        <strong>How to recharge roses?</strong>
        <ol>
            <li>Use cash at the scanning station</li>
            <li>Use Zelle: pay to 8888588@gmail.com, then email us your ID + payment screenshot, we will process within 1~30 minutes</li>
        </ol>
        <p>Note: 1 Rose = 1 USD. If you wish to exchange roses back to USD, we charge a 50% service fee.</p>
    </div>
</div>

<!-- Modal overlay for success/fail messages -->
<div id="roseModal" class="modal-overlay">
    <div class="modal-box">
        <h2 id="modalTitle">Title</h2>
        <p id="modalDetails">Details...</p>
        <button class="close-btn" onclick="closeModal()">OK</button>
    </div>
</div>

<script>
    (function(){
        var currentUserBalance = parseInt("{{.CurrentUserBalance}}", 10) || 0;
        var targetNeeded = parseInt("{{.TargetRoseNeeded}}", 10) || 0;
        var confirmBtn = document.getElementById("confirmBtn");
        var roseAmtInput = document.getElementById("roseAmount");

        // 从URL里获取 targetAcc
        var query = new URLSearchParams(window.location.search);
        var targetAcc = query.get("targetAcc") || "";
        // 放到隐藏域 #targetAccInput
        document.getElementById("targetAccInput").value = targetAcc;

        // Default highlight
        highlightChoice(roseAmtInput.value);

        // If user doesn't have enough roses for the default selection, disable button
        if(currentUserBalance < targetNeeded){
            confirmBtn.disabled = true;
            confirmBtn.textContent = "Insufficient Balance";
            confirmBtn.classList.add("btn-disabled");
        }

        // AJAX form submission
        var roseForm = document.getElementById('roseForm');
        roseForm.addEventListener('submit', function(e){
            e.preventDefault();

            var formData = new FormData(roseForm);

            fetch('/rose/transfer', {
                method: 'POST',
                body: formData
            })
                .then(function(res){
                    if(!res.ok){
                        throw new Error("Network response was not ok, code="+res.status);
                    }
                    return res.json();
                })
                .then(function(data){
                    if(data.success){
                        // Update "You currently have" with data.newBalance
                        currentUserBalance = data.newBalance;
                        document.getElementById("currentBalanceSpan").textContent = data.newBalance;

                        openModal("Success", "Your roses have been sent successfully!<br>" + data.message);
                    } else {
                        openModal("Failed to send", "Sorry, we could not send your roses.<br>" + data.message);
                    }
                })
                .catch(function(err){
                    openModal("Request failed", "Something went wrong.<br>" + err);
                });
        });
    })();

    function chooseRose(val){
        var roseAmtInput = document.getElementById("roseAmount");
        roseAmtInput.value = val;
        highlightChoice(val);

        // also check if we have enough balance
        var confirmBtn = document.getElementById("confirmBtn");
        var currentBalance = parseInt(document.getElementById("currentBalanceSpan").textContent, 10) || 0;
        var chosen = parseInt(val, 10) || 0;

        if(currentBalance < chosen){
            confirmBtn.disabled = true;
            confirmBtn.textContent = "Insufficient Balance";
            confirmBtn.classList.add("btn-disabled");
        } else {
            confirmBtn.disabled = false;
            confirmBtn.textContent = "Send";
            confirmBtn.classList.remove("btn-disabled");
        }
    }

    function highlightChoice(val){
        var all = ["1","2","5","10","20","50","100","200","300","500"];
        all.forEach(function(x){
            var block = document.getElementById("rose"+x);
            if(block){
                block.classList.remove("selectedRose");
            }
        });
        var chosenBlock = document.getElementById("rose"+val);
        if(chosenBlock){
            chosenBlock.classList.add("selectedRose");
        }
    }

    // Modal logic
    function openModal(title, details){
        document.getElementById("modalTitle").innerHTML = title;
        document.getElementById("modalDetails").innerHTML = details;
        document.getElementById("roseModal").style.display = "block";
    }
    function closeModal(){
        document.getElementById("roseModal").style.display = "none";
        // optionally redirect
        // window.location.href = "/list";
    }
</script>

</body>
</html>
