<style>
    /* ===========================
   SCREEN DESIGN
=========================== */


    .gold-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 25px;
        background: linear-gradient(135deg, #1c1c1c, #2f2f2f);
        color: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .main-logo{
        height: 55px;
    }

    .header-title h2{
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .header-title p{
        margin: 0;
        font-size: 13px;
        color: #ccc;
    }

    /* 🔥 Logout Button */
    .logout-btn{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: linear-gradient(135deg, #ff4d4d, #d60000);
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(255,0,0,0.3);
    }

    .logout-btn:hover{
        transform: translateY(-2px);
        background: linear-gradient(135deg, #ff1a1a, #b30000);
        box-shadow: 0 6px 15px rgba(255,0,0,0.4);
    }

    .logout-btn i{
        font-size: 14px;
    }

    .gold-table-box {

        background: white;
        padding: 25px;
        border-radius: 12px;

        box-shadow:
            0 5px 20px #0002;

    }


    .gold-table {

        width: 100%;
        border-collapse: collapse;

    }



    .gold-table th {

        background: #b8860b;
        color: white;

        padding: 12px;

        font-size: 15px;

    }



    .gold-table td {

        border: 1px solid #ddd;

        padding: 12px;

        text-align: center;

    }



    .gold-table input {

        width: 100%;

        height: 35px;

        border: 1px solid #ccc;

        border-radius: 5px;

    }



    .total-row {

        background: #fff3cd;

        font-weight: bold;

    }





    /* ===========================
        PRINT INVOICE
=========================== */


    .print-invoice {
        display: none;
        position: relative;
        /* padding: 40px; */
        font-family: Arial;
        background: white;
    }

    .print-invoice::before {
        content: "ROYAL GOLD JEWELLERS";
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        font-size: 55px;
        color: rgba(0, 0, 0, 0.04);
        font-weight: bold;
        white-space: nowrap;
        pointer-events: none;
    }

    .shop-logo {

        width: 80px;
        height: 80px;

        object-fit: contain;

        margin-right: 15px;

    }


    .invoice-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        border-bottom: 2px solid #000;

        padding-bottom: 15px;

    }



    .invoice-header .logo {

        order: 2;

        width: 90px;

        height: 90px;

        object-fit: contain;

    }



    .invoice-header .title {

        order: 1;

        text-align: center;

        flex: 1;

    }





    @media print {




        body * {

            visibility: hidden;

        }



        .print-invoice,
        .print-invoice * {

            visibility: visible;

        }



        .print-invoice {


            display: block;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            padding: 40px;

            font-family: Arial;


        }



        .gold-table-box {

            display: none !important;

        }





        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* important */
            border-bottom: 3px solid #b8860b;
            padding-bottom: 10px;
            gap: 10px;
        }



        .invoice-header h1 {
            margin: 0;
            font-size: 24px;
            color: #b8860b;
            letter-spacing: 1px;
        }



        .invoice-header h3 {
            margin: 5px 0;
            font-size: 14px;
            color: #555;
        }




        .customer-info {
            margin-top: 15px;
            padding: 12px;
            border-left: 5px solid #b8860b;
            background: #fafafa;
            font-size: 15px;
            line-height: 24px;
        }





        .invoice-table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
            font-size: 14px;
        }




        .invoice-table th {
            background: #b8860b;
            color: white;
            padding: 10px;
        }

        .invoice-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }




        /* .invoice-table th,
        .invoice-table td {


            border: 1px solid #000;

            padding: 10px;

            text-align: center;


        } */




        .invoice-table tr:nth-child(even) {
            background: #fff8e6;
        }

        .invoice-total {
            margin-top: 20px;
            text-align: right;
            font-size: 26px;
            font-weight: bold;
            color: #b8860b;
        }

        .shop-logo {
            width: 85px;
            height: 85px;
        }

        .inv-box {
            text-align: right;
            font-size: 12px;
            min-width: 140px;
            margin-right: 100px;
            /* important */
            white-space: nowrap;
        }

        .shop-info {
            flex: 1;
            text-align: center;
        }





        .signature {
            margin-top: 70px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        .signature div {
            border-top: 1px solid #000;
            width: 200px;
            text-align: center;
            padding-top: 6px;
        }



    }

    /* Customer Form Fix */

    .customer-card label {

        display: block;

        margin-bottom: 8px;

        font-weight: 600;

        color: #555;

    }


    .customer-card .form-control {

        width: 100%;

        height: 42px;

        border: none !important;

        outline: none !important;

        background: #f8f8f8;

        border-radius: 10px;

        padding: 10px 15px;

        box-shadow:
            inset 0 0 0 1px #eee;

        transition: .3s;

    }



    .customer-card .form-control:focus {

        background: white;

        box-shadow:
            0 0 10px #b8860b55;

    }





    .customer-card .row {

        display: flex;

        gap: 20px;

    }



    .customer-card .col-md-3 {

        flex: 1;

    }





    @media(max-width:768px) {

        .customer-card .row {

            display: block;

        }

    }

    .gold-wrapper {

        background: #f8f5ec;

        padding: 25px;

    }



    /* .gold-header {

        background: white;

        padding: 20px;

        display: flex;

        align-items: center;

        gap: 20px;

        border-radius: 15px;

        box-shadow: 0 5px 20px #0002;

    } */



    /* .main-logo {

        width: 90px;

        height: 90px;

        object-fit: contain;

    } */



    .customer-card {

        background: white;

        padding: 20px;

        margin-top: 20px;

        border-radius: 15px;

        box-shadow: 0 5px 20px #0002;

    }



    .gold-card {

        background: white;

        margin-top: 20px;

        padding: 20px;

        border-radius: 15px;

        box-shadow: 0 5px 20px #0002;

    }



    .gold-table {

        width: 100%;

        border-collapse: collapse;

    }



    .gold-table th {

        background: #b8860b;

        color: white;

        padding: 15px;

    }



    .gold-table td {

        border: 1px solid #ddd;

        padding: 12px;

        text-align: center;

    }



    .gold-img {

        width: 70px;

        height: 70px;

        object-fit: cover;

        border-radius: 10px;

    }



    .total-row {

        background: #fff0b3;

        font-size: 20px;

        font-weight: bold;

    }
    .top-action{
    display: flex;
    justify-content: flex-end;   /* 👈 RIGHT SIDE */
    margin-top: 20px;
}

.upload-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    background: linear-gradient(135deg, #17a2b8, #0d6efd);
    color: #fff;

    border-radius: 8px;
    text-decoration: none;

    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    transition: 0.3s ease;
}

.upload-btn:hover{
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.upload-btn i{
    font-size: 14px;
}

.custom-alert{
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 15px;
    animation: fadeIn 0.4s ease-in-out;
}

.alert-success.custom-alert{
    background: #d1e7dd;
    color: #0f5132;
    border-left: 5px solid #198754;
}

.alert-danger.custom-alert{
    background: #f8d7da;
    color: #842029;
    border-left: 5px solid #dc3545;
}

@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}
</style>





<!-- ===========================
       MAIN SCREEN TABLE
=========================== -->



<div class="gold-wrapper">
    <?php if ($this->session->flashdata('success')) { ?>

    <div class="alert alert-success custom-alert">
        <?= $this->session->flashdata('success'); ?>
    </div>

<?php } ?>

<?php if ($this->session->flashdata('error')) { ?>

    <div class="alert alert-danger custom-alert">
        <?= $this->session->flashdata('error'); ?>
    </div>

<?php } ?>


    <!-- HEADER -->

    <div class="gold-header">

        <img src="<?= base_url('public/assets/logo.png') ?>" class="main-logo">

        <div class="header-title">
            <h2>Gold Purity Estimation</h2>
            <p>Gold Invoice Generator</p>
        </div>

        <a href="<?= base_url('logout') ?>" class="logout-btn">
            <i class="fa fa-sign-out"></i> Logout
        </a>

    </div>

    <div class="top-action">

    <a href="<?= base_url('imageList') ?>" class="upload-btn">
        <i class="fa fa-upload"></i>
        Upload Gold Images
    </a>

</div>







    <!-- CUSTOMER DETAILS -->


    <div class="customer-card">


        <div class="row">


            <div class="col-md-3">

                <label>
                    Customer Name
                </label>


                <input id="cust_name" class="form-control" onkeyup="calcGold()">



            </div>





            <div class="col-md-3">


                <label>
                    Phone
                </label>


                <input id="phone" class="form-control" onkeyup="calcGold()">



            </div>







            <div class="col-md-3">


                <label>
                    City
                </label>


                <input id="city" class="form-control" onkeyup="calcGold()">



            </div>







            <div class="col-md-3">


                <label>
                    Weight (Gram)
                </label>


                <input id="weight" class="form-control" placeholder="Enter Weight (Gram)" onkeyup="calcGold()">



            </div>



        </div>

        <div class="row">


            <div class="col-md-3">

                <label>

                    <input type="checkbox" id="apply_making" onchange="calcGold()">

                    Apply Making Charge

                </label>


                <input id="making" class="form-control" placeholder="Enter Making %" onkeyup="calcGold()">


            </div>




            <div class="col-md-3">


                <!-- GST -->


                <label>

                    <input type="checkbox" id="apply_gst" onchange="calcGold()">

                    Apply GST

                </label>



                <input id="gst" class="form-control" placeholder="Enter GST %" onkeyup="calcGold()">



            </div>

            <div class="col-md-3">

                <label>

                    <input type="checkbox" id="apply_wastage" onchange="calcGold()">

                    Apply Wastage

                </label>


                <input id="wastage" class="form-control" placeholder="Wastage %" onkeyup="calcGold()">


            </div>



        </div>



    </div>








    <!-- GOLD TABLE -->


    <div class="gold-card">



        <table class="gold-table">


            <thead>


                <tr>


                    <th>
                        Image
                    </th>


                    <th>
                        Quality
                    </th>


                    <th>
                        Pure Gold
                    </th>


                    <th>
                        Rate / Gram
                    </th>


                    <th>
                        Amount
                    </th>



                </tr>


            </thead>






            <tbody>

                <?php
                    $row = isset($images[0]) ? $images[0] : [];
                ?>

                <tr>


                    <td>


                        <!-- <img src="<?= $gold[0]['image'] ?>" class="gold-img"> -->
                        <!-- <img src="" class="gold-img"> -->
                        <img src="<?= base_url('uploads/gold/'.($row['img_916'] ?? 'default.png')) ?>" width="70">


                    </td>



                    <td>
                        BIS 916 Hallmark
                    </td>



                    <td>

                        <span id="pure1">
                            0
                        </span>

                    </td>




                    <td>


                        <input id="rate1" value="15700" class="form-control" onkeyup="calcGold()">



                    </td>




                    <td>

                        ₹ <span id="amt1">
                            0
                        </span>


                    </td>



                </tr>









                <tr>


                    <td>


                        <!-- <img src="<?= $gold[1]['image'] ?>" class="gold-img"> -->
                        <img src="<?= base_url('uploads/gold/'.($row['img_machine'] ?? 'default.png')) ?>" width="70">


                    </td>



                    <td>
                        916 KDM Machine
                    </td>



                    <td>

                        <span id="pure2">
                            0
                        </span>

                    </td>




                    <td>


                        <input id="rate2" value="15000" class="form-control" onkeyup="calcGold()">



                    </td>




                    <td>

                        ₹ <span id="amt2">
                            0
                        </span>


                    </td>



                </tr>









                <tr>


                    <td>


                        <!-- <img src="<?= $gold[2]['image'] ?>" class="gold-img"> -->
                        <img src="<?= base_url('uploads/gold/'.($row['img_manual'] ?? 'default.png')) ?>" width="70">


                    </td>



                    <td>
                        916 KDM Manual
                    </td>



                    <td>

                        <span id="pure3">
                            0
                        </span>

                    </td>




                    <td>


                        <input id="rate3" value="16000" class="form-control" onkeyup="calcGold()">



                    </td>




                    <td>

                        ₹ <span id="amt3">
                            0
                        </span>


                    </td>



                </tr>











                <tr>


                    <td>


                        <!-- <img src="<?= $gold[3]['image'] ?>" class="gold-img"> -->
                        <img src="<?= base_url('uploads/gold/'.($row['img_non_kdm'] ?? 'default.png')) ?>" width="70">


                    </td>



                    <td>
                        Non KDM
                    </td>



                    <td>

                        <span id="pure4">
                            0
                        </span>

                    </td>




                    <td>


                        <input id="rate4" value="15000" class="form-control" onkeyup="calcGold()">



                    </td>




                    <td>

                        ₹ <span id="amt4">
                            0
                        </span>


                    </td>



                </tr>









                <tr class="total-row">


                    <td colspan="4">

                        Grand Total

                    </td>


                    <td>

                        ₹ <span id="grand">
                            0
                        </span>

                    </td>


                </tr>




            </tbody>


        </table>






    </div>






    <button onclick="window.print()" class="btn btn-warning">

        Generate Invoice

    </button>



</div>









<!-- ===========================
        PRINT PAGE
=========================== -->





<div class="print-invoice">

    <!-- WATERMARK -->
    <div class="wm">ROYAL GOLD</div>

    <!-- HEADER -->
    <div class="invoice-header">

        <img src="public/assets/logo.png" class="shop-logo">

        <div class="shop-info">
            <h1>ROYAL GOLD JEWELLERS</h1>
            <p>Gold Estimation Invoice</p>
        </div>

        <div class="inv-box">
            <div><b>Invoice:</b> <span id="invoice"></span></div>
            <div><b>Date:</b> <span id="pdate"></span></div>
        </div>

    </div>

    <!-- CUSTOMER CARD -->
    <div class="customer-info">
        <div><b>Name:</b> <span id="pname"></span></div>
        <div><b>Phone:</b> <span id="pphone"></span></div>
        <div><b>City:</b> <span id="pcity"></span></div>
    </div>

    <!-- TABLE -->
    <table class="invoice-table">

        <thead>
            <tr>
                <th>Quality</th>
                <th>Pure Gold (g)</th>
                <th>Rate</th>
                <th>Amount</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td>BIS 916 Hallmark</td>
                <td id="ppure1">0</td>
                <td id="prate1">0</td>
                <td>₹ <span id="pamt1">0</span></td>
            </tr>

            <tr>
                <td>916 KDM Machine</td>
                <td id="ppure2">0</td>
                <td id="prate2">0</td>
                <td>₹ <span id="pamt2">0</span></td>
            </tr>

            <tr>
                <td>916 KDM Manual</td>
                <td id="ppure3">0</td>
                <td id="prate3">0</td>
                <td>₹ <span id="pamt3">0</span></td>
            </tr>

            <tr>
                <td>Non KDM</td>
                <td id="ppure4">0</td>
                <td id="prate4">0</td>
                <td>₹ <span id="pamt4">0</span></td>
            </tr>

            <!-- CHARGES -->
            <tr class="charge">
                <td>Wastage</td>
                <td id="pwastage">0%</td>
                <td>-</td>
                <td>₹ <span id="wastage_amt">0</span></td>
            </tr>

            <tr class="charge">
                <td>Making</td>
                <td id="pmaking">0%</td>
                <td>-</td>
                <td>₹ <span id="making_amt">0</span></td>
            </tr>

            <tr class="charge">
                <td>GST</td>
                <td id="pgst">0%</td>
                <td>-</td>
                <td>₹ <span id="gst_amt">0</span></td>
            </tr>

        </tbody>

    </table>

    <!-- TOTAL BOX -->
    <div class="total-box">
        GRAND TOTAL: ₹ <span id="ptotal">0</span>
    </div>

    <!-- SIGN -->
    <div class="signature">
        <div>Customer Signature</div>
        <div>Authorized Signature</div>
    </div>

</div>









<!-- <script>



    document.getElementById("invoice").innerHTML =
        "GLD-" + Math.floor(Math.random() * 999999);



    document.getElementById("pdate").innerHTML =
        new Date().toLocaleDateString();






    function calcGold() {



        let weight =
            parseFloat(
                document.getElementById("weight").value
            ) || 0;



        let purity = [

            0.916,
            0.916,
            0.916,
            0.750

        ];



        let total = 0;



        let goldTotal = 0;



        // ======================
        // GOLD CALCULATION
        // ======================


        for (let i = 1; i <= 4; i++) {



            let pure =
                weight * purity[i - 1];



            let rate =
                parseFloat(
                    document.getElementById("rate" + i).value
                ) || 0;



            let amount =
                pure * rate;



            document.getElementById("pure" + i).innerHTML =
                pure.toFixed(2);



            document.getElementById("amt" + i).innerHTML =
                amount.toFixed(2);




            document.getElementById("ppure" + i).innerHTML =
                pure.toFixed(2);



            document.getElementById("prate" + i).innerHTML =
                rate;



            document.getElementById("pamt" + i).innerHTML =
                amount.toFixed(2);




            total += amount;



        }







        // ======================
        // MAKING CHARGE
        // ======================


        let making = 0;



        if (
            document.getElementById("apply_making").checked
        ) {

            let makingPercent =
                parseFloat(
                    document.getElementById("making").value
                ) || 0;



            making =
                total * makingPercent / 100;


        }







        // ======================
        // GST
        // ======================


        let gst = 0;



        if (
            document.getElementById("apply_gst").checked
        ) {


            let gstPercent =
                parseFloat(
                    document.getElementById("gst").value
                ) || 0;



            gst =
                (total + making) * gstPercent / 100;


        }








        let finalTotal =
            total + making + gst;







        // ======================
        // DISPLAY
        // ======================



        document.getElementById("making_amt")
            .innerHTML =
            making.toFixed(2);




        document.getElementById("gst_amt")
            .innerHTML =
            gst.toFixed(2);






        document.getElementById("grand").innerHTML =
            finalTotal.toFixed(2);



        document.getElementById("ptotal").innerHTML =
            finalTotal.toFixed(2);









        // ======================
        // CUSTOMER DETAILS
        // ======================



        document.getElementById("pname").innerHTML =
            document.getElementById("cust_name").value;




        document.getElementById("pphone").innerHTML =
            document.getElementById("phone").value;




        document.getElementById("pcity").innerHTML =
            document.getElementById("city").value;



    }



</script> -->

<script>
setTimeout(() => {
    document.querySelectorAll('.custom-alert').forEach(el => {
        el.style.display = 'none';
    });
}, 3000);
</script>

<script>


    // Invoice Number

    document.getElementById("invoice").innerHTML =
        "GLD-" + Math.floor(Math.random() * 999999);



    // Date

    document.getElementById("pdate").innerHTML =
        new Date().toLocaleDateString();





    function calcGold() {



        // ======================
        // INPUT VALUES
        // ======================


        let weight =
            parseFloat(
                document.getElementById("weight").value
            ) || 0;



        let purity = [

            0.916,
            0.916,
            0.916,
            0.750

        ];



        let goldTotal = 0;





        // ======================
        // GOLD CALCULATION
        // ======================


        for (let i = 1; i <= 4; i++) {



            let pure =
                weight * purity[i - 1];



            let rate =
                parseFloat(
                    document.getElementById("rate" + i).value
                ) || 0;




            let amount =
                pure * rate;





            document.getElementById("pure" + i)
                .innerHTML =
                pure.toFixed(2);




            document.getElementById("amt" + i)
                .innerHTML =
                amount.toFixed(2);





            // PRINT DATA


            document.getElementById("ppure" + i)
                .innerHTML =
                pure.toFixed(2);




            document.getElementById("prate" + i)
                .innerHTML =
                rate;





            document.getElementById("pamt" + i)
                .innerHTML =
                amount.toFixed(2);





            goldTotal += amount;



        }







        // ======================
        // WASTAGE
        // ======================


        let wastage = 0;



        if (
            document.getElementById("apply_wastage").checked
        ) {



            let wastagePercent =
                parseFloat(
                    document.getElementById("wastage").value
                ) || 0;

            document.getElementById("pwastage")
                .innerHTML =
                wastagePercent;




            wastage =
                goldTotal * wastagePercent / 100;



        }







        // ======================
        // MAKING CHARGE
        // ======================


        let making = 0;



        if (
            document.getElementById("apply_making").checked
        ) {



            let makingPercent =
                parseFloat(
                    document.getElementById("making").value
                ) || 0;

            document.getElementById("pmaking")
                .innerHTML =
                makingPercent;





            making =
                goldTotal * makingPercent / 100;



        }








        // ======================
        // GST
        // ======================


        let gst = 0;



        if (
            document.getElementById("apply_gst").checked
        ) {



            let gstPercent =
                parseFloat(
                    document.getElementById("gst").value
                ) || 0;

            document.getElementById("pgst")
                .innerHTML =
                gstPercent;





            gst =
                (
                    goldTotal +
                    wastage +
                    making
                )
                *
                gstPercent
                /
                100;



        }








        // ======================
        // FINAL TOTAL
        // ======================



        let finalAmount =
            goldTotal +
            wastage +
            making +
            gst;








        // ======================
        // SHOW RESULT
        // ======================


        document.getElementById("wastage_amt")
            .innerHTML =
            wastage.toFixed(2);




        document.getElementById("making_amt")
            .innerHTML =
            making.toFixed(2);




        document.getElementById("gst_amt")
            .innerHTML =
            gst.toFixed(2);





        document.getElementById("grand")
            .innerHTML =
            finalAmount.toFixed(2);





        document.getElementById("ptotal")
            .innerHTML =
            finalAmount.toFixed(2);








        // ======================
        // CUSTOMER DETAILS
        // ======================


        document.getElementById("pname")
            .innerHTML =
            document.getElementById("cust_name").value;





        document.getElementById("pphone")
            .innerHTML =
            document.getElementById("phone").value;





        document.getElementById("pcity")
            .innerHTML =
            document.getElementById("city").value;



    }




</script>