<script>
var vendCostGlobal = <?=$machine['vendCost']?>;
var prizeCostGlobal = <?=$machine['prizeCost']?>;
var commissionGlobal = <?=$machine['commission']?>;

function calculateGross(value) {
    if (isNaN(value)) {
        alert("Invalid value, please enter numeric value");
        return false;
    }
    let grossSale = value * vendCostGlobal;
    let commissionOwed = (grossSale * commissionGlobal) / 100;
    $('#grossSale').val(grossSale);
    $('#grossSaleDiv').text("$" + grossSale);
    $('#commissionOwed').val(commissionOwed);
    $('#commissionOwedDiv').text("$" + commissionOwed);
}

function calculatePrize(value) {
    if (isNaN(value)) {
        alert("Invalid value, please enter numeric value");
        return false;
    }
    let prizeCost = value * prizeCostGlobal;
    $('#prizeCost').val(prizeCost);
    $('#prizeCostDiv').text("$" + prizeCost);

}
</script>
<section class="machineInfo my-5">
    <div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="machineInfo-content">
                    <div class="machineInfo-image-content position-relative">
                        <div class="col-dollar-content machineInfo-btn-content position-absolute">
                            <button class="btn btn-col-dollar machineInfo-btn">$</button>
                        </div>
                        <div class="bottom-contact-machineInfo position-absolute">
                            <div class="bg-color-machineInfo">
                                <h5 class="contact-title-machineInfo">
                                    Contact Person
                                </h5>
                                <div class="contact-details-machineInfo">
                                    <div class="person-machineInfo">
                                        <p class="nicole"><?=$location['contact']?></p>
                                        <p class="nicole number-person"><?=$location['phone']?></p>
                                    </div>

                                    <div class="person-image-machineInfo">
                                        <img src="<?=base_url()?>assets/images-claw/Icon awesome-user-alt.png" class="user-image-machineInfo" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="claw-home-section my-4">
                        <h4 class="claw-home-title machineInfo-drogon-title"><?=$machine['type']?></h4>
                        <!-- <p class="para-machineInfoSuper">Super mini Crane</p> -->
                        <div class="location-content location-content-machineInfo">
                            <img src="<?=base_url()?>assets/images-claw/Icon material-location-on1.png" class="location-icon location-icon-machineInfo" alt="location">
                            <p class="location-para location-para-machineInfo"><?=$location['address']?></p>
                        </div>
                    </div>

                    <div class="claw-home-section my-4">
                        <h5 class="para-machineInfoSuper note-machineInfo">Note</h5>
                        <p class="para-machineInfoSuper para-note-machineInfo">
                            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
                            making it look like readable English.
                            <br>
                            Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                        </p>
                    </div>

                    <div class="claw-home-section mt-4">
                        <div class="col-h6-title-content-popup">
                            <h6 class="h6-title machineInsights-title">Machine Insights</h6>
                            <ul class="ul-list-popup mb-0">
                                <li class="li-list-item">
                                    <p class="sales-title">Placement date</p>
                                    <p class="sales-title number-price"><?=$machine['placedDate']?></p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Commission rate</p>
                                    <p class="sales-title number-price"><?=$machine['commission']?>%</p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Lifetime gross sales</p>
                                    <p class="sales-title number-price">$188.00</p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Lifetime profit after commission</p>
                                    <p class="sales-title number-price">$122.20</p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Average collection</p>
                                    <p class="sales-title number-price">$94.00</p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Actual win ratio</p>
                                    <p class="sales-title number-price"><?=$machine['prizeCost']?></p>
                                </li>

                                <li class="li-list-item">
                                    <p class="sales-title">Lifetime paid commission</p>
                                    <p class="sales-title number-price">00</p>
                                </li>

                                <li class="li-list-item red">
                                    <p class="sales-title red unpaidRed">Unpaid Commission</p>
                                    <p class="sales-title number-price red">$65.80</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <hr>

                    <div class="claw-home-section my-4">
                        <div class="col-h6-title-content-popup">
                            <h6 class="h6-title machineInsights-title">Recent Machine Performance ($)</h6>
                            <div class="col-md-6">
                                <canvas id="performanceChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="claw-home-section my-4">
                        <div class="btns-machineInfo d-flex">
                            <button class="btn btn-lg btn-job-seeker background-btn-color w-100 createReport">Create Report</button>
                            <button class="btn btn-lg btn-job-seeker background-btn-color w-100 createReport addPreviousDate">Add Previous Date</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>


<!-- <div class="container">

    <div class="modal-container modal-container2" id="myModal">
        <div class="modal-wrapper">
            <div class="modal modal2">
                <header class="header-popup">
                    <h3 class="header-popup-title">Add Previous Data</h3>
                </header>
                <main class="main-popup">
                    <div class="background-signup">
                        <form class="row gy-4" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="pastSales">Past Total Sales</label>
                                <input class="form-control price-popup" type="number" name="pastSales" placeholder="Enter Past Total Sales" required>
                            </div>
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="pastCommissionPaid">Past Commission Paid</label>
                                <input class="form-control price-popup" type="number" name="pastCommissionPaid" placeholder="Enter Past Commission Paid" required>
                            </div>

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="pastPrizesWon">Past Prizes Won</label>
                                <input class="form-control price-popup" type="number" name="pastPrizesWon" placeholder="Enter Past Prizes Won" required>
                            </div>
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="pastTotalProfit">Past Total Profit</label>
                                <input class="form-control price-popup" type="number" name="pastTotalProfit" placeholder="Enter Past Total Profit" required>
                            </div>

                            <div class="col-md-12 d-flex flex-column">
                                <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 my-4 save-collection" type="button">Add Data</button>
                            </div>
                        </form>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div> -->


<div class="container">
    <div class="modal-container" id="myModalMachime">
        <div class="modal-wrapper">
            <div class="modal">
                <header class="header-popup">
                    <h3 class="header-popup-title">New Collection</h3>
                </header>
                <main class="main-popup">
                    <div class="col-h6-title-content-popup">
                        <h6 class="h6-title"><?=$machine['type']?></h6>
                        <!-- <p class="para-col">Super Mini Crane</p> -->
                    </div>
                    <div class="background-signup">
                        <form class="row gy-4" action="<?=base_url()?>site/addcollection" method="POST">
                            <input type="hidden" name="machineId" value="<?=$machineId?>" />
                            <input type="hidden" name="locationId" value="<?=$machine['locationId']?>" />
                            <input type="hidden" name="grossSale" id="grossSale" />
                            <input type="hidden" name="prizeCost" id="prizeCost" />
                            <input type="hidden" name="commissionOwed" id="commissionOwed" />
                            <div class="col-md-12">
                                <label class="label-form popup-label" for="collectionDate">Collection Date</label>
                                <input class="form-control date popup" type="date" name="collectionDate" required>
                            </div>
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="credits">Credits Played</label>
                                <input class="form-control price-popup" type="number" step="0.01" name="credits" placeholder="00" onkeyup="calculateGross(this.value);" required>
                            </div>
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="prizes">Prizes Won</label>
                                <input class="form-control price-popup" type="number" step="0.01" name="prizes" placeholder="00" onkeyup="calculatePrize(this.value);" required>
                            </div>

                            <div class="col-md-6">
                                <div class="col-h6-title-content-popup">
                                    <h6 class="h6-title">Calculation</h6>
                                    <ul class="ul-list-popup">
                                        <li class="li-list-item">
                                            <p class="sales-title">Gross Sales:</p>
                                            <p class="sales-title number-price" id="grossSaleDiv">$0.00</p>
                                        </li>

                                        <li class="li-list-item">
                                            <p class="sales-title">Prize Cost:</p>
                                            <p class="sales-title number-price" id="prizeCostDiv">$0.00</p>
                                        </li>

                                        <li class="li-list-item">
                                            <p class="sales-title">Commission Owed (<span id="comm"></span>% of Gross):</p>
                                            <p class="sales-title number-price" id="commissionOwedDiv">$0.00</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-md-8" style="margin-top: -1rem;">
                                <label class="label-form popup-label" for="commission">Commission to be Paid*</label>
                                <input class="form-control price-popup" type="number" step="0.01" name="commissionToBePaid" placeholder="00" required>
                                <textarea class="form-control price-popup h-auto mt-4" id="textarea" name="notes" rows="5" placeholder="Optional notes specific to this collection..."></textarea>
                            </div>
                            <div class="col-md-4 m-top-col-8" style="margin-top: -1rem;">
                                <label class="label-form popup-label" for="location_image">Location image</label>
                                <div class="img-content-popup position-relative">
                                    <img id="uploadedImage" src="<?=$location['image']?>" alt="Uploaded Image" accept="image/png, image/jpeg">
                                    <div class="cross-icon position-absolute">
                                        <i class="fa-solid fa-xmark"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 d-flex flex-column">
                                <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 my-4" type="submit">Save Collection</button>
                                <button class="btn btn-job-seeker background-btn-color height-45 w-100 mb-4 save-collection" type="button">Cancel</button>
                            </div>
                        </form>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div>


<div class="container">
    <div class="modal-container1" id="myModal1">
        <div class="modal-wrapper1">
            <div class="modal1">
                <header class="header-popup1">
                    <h3 class="header-popup-title1">! Reminder !</h3>
                    <p class="para-popup-remainder">Reset Machine Count Clear Date</p>
                    <button class="btn btn-lg btn-job-seeker background-btn-color w-100 mt-4 mb-0 ok-btn" type="button">Ok</button>
                </header>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="modal-container modal-container3" id="myModal">
        <div class="modal-wrapper">
            <div class="modal modal3">
                <header class="header-popup">
                    <h3 class="header-popup-title">
                        Your have 2 unpaid collections totaling $65.80
                    </h3>
                </header>
                <main class="main-popup main-popup3">
                    <div class="background-signup">
                        <form class="row gy-4" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
                            <div class="col-md-6">
                                <div class="bg-popup-modal3">
                                    <p class="nicole collection">5/13/2023 Collection</p>
                                    <div class="contact-details-machineInfo">
                                        <div class="person-machineInfo">
                                            <p class="nicole owed">Owed: $36.40</p>
                                        </div>

                                        <div class="checkbox-content-popup form-group position-relative">
                                            <label class="label markPaidLabel position-relative" for="markPaid">Mark Paid</label>
                                            <input type="checkbox" name="markPaid" id="markPaid" class="markPaid" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="bg-popup-modal3">
                                    <p class="nicole collection">5/13/2023 Collection</p>
                                    <div class="contact-details-machineInfo">
                                        <div class="person-machineInfo">
                                            <p class="nicole owed">Owed: $36.40</p>
                                        </div>

                                        <div class="checkbox-content-popup form-group position-relative">
                                            <label class="label markPaidLabel position-relative" for="markPaid">Mark Paid</label>
                                            <input type="checkbox" name="markPaid" id="markPaid" class="markPaid" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="hidden-box-popup">
                                <div class="col-md-6">
                                    <label class="label-form popup-label" for="date">Date</label>
                                    <input class="form-control date popup" type="date" name="date" placeholder="Date" required>
                                </div>
                                <div class="col-md-12 d-flex flex-column mt-4">
                                    <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 save-collection mb-0 paid" type="button">Paid</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div>


<script>
function Modal() {
    let modal = document.querySelector("#myModalMachime");
    //   let modalOne = document.querySelector(".modal-container1");
    let dollarBtn2 = document.querySelector(".btn-col-dollar.machineInfo-btn");
    let saveCollection = document.querySelector("#save");

    //   dollarBtn.forEach((eachBtn) => {
    dollarBtn2.addEventListener("click", () => {
        modal.classList.add("show");
    });
    //   });

    saveCollection.addEventListener("click", () => {
        modal.classList.remove("show");
        // modalOne.classList.add("show");
    });

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.classList.remove("show");
        }
    };
}

Modal();
</script>