<?php $__env->startSection('content'); ?>
    <!--  DataTable CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
body{
    background:#f5f7fc;
    font-family:'Inter',sans-serif;
    color:#1f2937;
}

/*======================================
    PAGE
======================================*/

.product-page{
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

/*======================================
    HEADER
======================================*/

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    margin-bottom:30px;
}

.page-title h2{
    font-size:42px;
    font-weight:700;
    margin:0;
}

.page-title p{
    margin-top:8px;
    color:#6b7280;
    font-size:18px;
}

/*======================================
    RIGHT HEADER
======================================*/

.header-right{
    display:flex;
    gap:18px;
    align-items:stretch;
}

/*======================================
    TIMER
======================================*/

.timer-card{
    min-width:190px;
    display:flex;
    align-items:center;
    gap:18px;
    background:#f7f4ff;
    border:1px solid #ebe6ff;
    border-radius:20px;
    padding:22px;
}

.timer-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#ede7ff;
    color:#6B53EC;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
}

.timer-card small{
    color:#777;
}

.timer-card h4{
    margin-top:5px;
    margin-bottom:0;
    color:#6B53EC;
    font-size:34px;
    font-weight:700;
}

/*======================================
    GOLD CARD
======================================*/

.gold-card{
    min-width:520px;
    background:linear-gradient(135deg,#2e1d74,#6B53EC);
    border-radius:20px;
    color:#fff;
    display:flex;
    align-items:center;
    padding:25px 30px;
}

.gold-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:22px;
    font-size:34px;
    color:#ffc83d;
}

.gold-content{
    flex:1;
}

.gold-content small{
    opacity:.8;
    font-size:14px;
}

.price-row{
    display:flex;
    align-items:center;
    margin-top:12px;
}

.price-row strong{
    display:block;
    font-size:36px;
    color:#ffc83d;
    font-weight:700;
}

.price-row span{
    color:#ddd;
    font-size:15px;
}

.divider{
    width:1px;
    height:55px;
    background:rgba(255,255,255,.15);
    margin:0 30px;
}

/*======================================
    TOOLBAR
======================================*/

.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.toolbar-left,
.toolbar-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/*======================================
    SELECT
======================================*/

.select-box{
    position:relative;
}

.select-box i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#6B53EC;
}

.select-box select{
    width:200px;
    height:54px;
    border-radius:14px;
    border:1px solid #6B53EC;
    background:#fff;
    padding-left:48px;
    padding-right:20px;
    outline:none;
    transition:.3s;
}

.select-box select:focus{
    border-color:#6B53EC;
    box-shadow:0 0 0 4px rgba(107,83,236,.12);
}

/*======================================
    BUTTONS
======================================*/

.btn-refresh{
    height:54px;
    border:none;
    border-radius:14px;
    background:#6B53EC;
    color:#fff;
    font-weight:600;
    padding:0 22px;
    transition:.3s;
}

.btn-refresh:hover{
    background:#563de4;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(107,83,236,.25);
}

/*======================================
    TABLE CARD
======================================*/

.table-card{
    background:#fff;
    border-radius:22px;
    border:1px solid #ececec;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/*======================================
    TABLE
======================================*/

.product-table{
    margin:0;
}

.product-table thead th{
    background:#6B53EC;
    color:#fff;
    font-size:14px;
    font-weight:600;
    border:none;
    padding:18px 16px;
    white-space:nowrap;
    position:sticky;
    top:0;
    z-index:2;
}
        /* Rounded header corners */
        .product-table thead th:first-child {
            border-top-left-radius: 12px;
        }

        .product-table thead th:last-child {
            border-top-right-radius: 12px;
        }

.product-table tbody td{
    padding:18px 16px;
    vertical-align:middle;
    border-color:#f1f1f1;
    white-space:nowrap;
    color:#000;
}

.product-table tbody tr{
    transition:.25s;
}

.product-table tbody tr:hover{
    background:#faf8ff;
}

/*======================================
    DATATABLES
======================================*/

.dataTables_wrapper{
    padding:20px;
}

.dataTables_length select,
.dataTables_filter input{
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    min-height:42px;
}

.dataTables_filter input{
    padding-left:12px !important;
}

.dataTables_info{
    color:#6b7280;
    margin-top:20px;
}

.dataTables_paginate{
    margin-top:20px !important;
}

.dataTables_paginate .paginate_button{
    border:none !important;
    border-radius:10px !important;
    background:#fff !important;
    margin:0 4px !important;
}

.dataTables_paginate .paginate_button.current{
    background:#6B53EC !important;
    color:#fff !important;
}
.dataTables_paginate .paginate_button{
    border:1px solid #6B53EC !important;
}

.dataTables_paginate .paginate_button:hover{
    background:#6B53EC !important;
    color:#fff !important;
}

/*======================================
    SCROLLBAR
======================================*/

.table-responsive::-webkit-scrollbar{
    height:10px;
    width:10px;
}

.table-responsive::-webkit-scrollbar-thumb{
    background:#c9bfff;
    border-radius:20px;
}

.table-responsive::-webkit-scrollbar-track{
    background:#f5f5f5;
}

/*======================================
    RESPONSIVE
======================================*/

@media(max-width:1200px){

.header-right{
    flex-direction:column;
    width:100%;
}

.gold-card{
    min-width:100%;
}

.page-header{
    flex-direction:column;
}

}

@media(max-width:768px){

.product-page{
    padding:20px;
}

.toolbar{
    flex-direction:column;
    gap:15px;
}

.toolbar-left,
.toolbar-right{
    width:100%;
}

.select-box,
.select-box select{
    width:100%;
}

.gold-card{
    flex-direction:column;
    align-items:flex-start;
}

.divider{
    width:100%;
    height:1px;
    margin:20px 0;
}

.page-title h2{
    font-size:32px;
}

.price-row{
    flex-direction:column;
    align-items:flex-start;
}

}
div#productTable_filter {
    margin-bottom: 20px;
}
td.normal-column.action-column a.btn.btn-sm.btn-primary {
    background: #6B53EC;
}
    </style>



  <div class="product-page">

    <!-- Header -->
    <div class="page-header">

        <div class="page-title">

            <h2>Products</h2>

            <p>Manage and view all your store products.</p>

        </div>

        <div class="header-right">

            <!-- Update Timer -->
            

            <!-- Gold Price -->
            <div class="gold-card">

                <div class="gold-icon">

                    <i class="fas fa-coins"></i>

                </div>

                <div class="gold-content">

                    <small>Current Gold Price</small>

                    <div class="price-row">

                        <div>

                            <strong id="currentGoldmain_Price">$0.00</strong>

                            <span>/ ounce</span>

                        </div>

                        <div class="divider"></div>

                        <div>

                            <strong id="currentGoldPrice">

                                $<?php echo e(number_format($goldPrice ?? 0,2)); ?>


                            </strong>

                            <span>/ gram</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Toolbar -->

    <div class="toolbar">

        <div class="toolbar-left">

            <div class="select-box">

                <i class="fas fa-layer-group"></i>

                <select id="categoryFilter">

                    <option value="">All Categories</option>

                    <?php $__currentLoopData = $products->whereNotNull('product_type')->where('product_type','!=','')->unique('product_type'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                    <option value="<?php echo e(trim($product->product_type)); ?>">

                        <?php echo e(trim($product->product_type)); ?>


                    </option>

                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </select>

            </div>

        </div>

        <div class="toolbar-right">

            <button
                id="goldPriceBtn"
                class="btn-refresh">

                <i class="fas fa-sync-alt"></i>

                Refresh Gold

            </button>

        </div>

    </div>

    <!-- Table -->

    <div class="table-card">

        <div class="table-loader" id="tableLoader" style="display:none;">

            <div class="loader-spinner"></div>

        </div>

        <table id="productTable" class="table product-table w-100 table-bordered table-striped table-hover">

            <thead>

                <tr>

                    <th>Image</th>
                    <th>Collection</th>
                    <th>SKU</th>
                    <th>Category</th>
                    <th>Old SKU</th>
                    <th>Vendor ID</th>
                    <th>Barcode WG</th>
                    <th>Barcode YG</th>
                    <th>Description</th>
                    <th>Size</th>
                    <th>PI Status</th>
                    <th>Gold Net Weight</th>
                    <th>Metal KT</th>
                    <th>Metal Color</th>
                    <th>Gross Weight</th>
                    <th>Gold Lock</th>
                    <th>Gold Rate</th>
                    <th>Gold Value</th>
                    <th>Finding Type</th>
                    <th>Finding Qty</th>
                    <th>Finding Weight</th>
                    <th>Finding Rate</th>
                    <th>Finding Value</th>
                    <th>Diamond Type</th>
                    <th>Diamond Size</th>
                    <th>Diamond PCS</th>
                    <th>Diamond Weight</th>
                    <th>Diamond Rate</th>
                    <th>Diamond Value</th>
                    <th>CFP</th>
                    <th>Setting</th>
                    <th>Joining</th>
                    <th>Rhodium</th>
                    <th>Stamp</th>
                    <th>Finding Charge</th>
                    <th>Handling</th>
                    <th>Total Labor</th>
                    <th>Total Value</th>
                    <th>Duty</th>
                    <th>With Duty</th>
                    <th>B2B 90</th>
                    <th>B2B 85</th>
                    <th>B2B 82</th>
                    <th>B2B 80</th>
                    <th>Other Online 75</th>
                    <th>Online 70</th>
                    <th>POP Selling Price</th>
                    <th>BR Cost Price</th>
                    <th>Amazon Price</th>
                    <th>Flyer Price</th>
                    <th>Live Gold Price</th>
                    <th>Final Price</th>
                    <th>Action</th>

                </tr>

            </thead>

        </table>

    </div>

</div>


    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>


    <script>
        let table = $('#productTable').DataTable({

            processing: true,

            responsive: false,

            scrollX: true,

            // scrollCollapse:true,
            scrollCollapse: false,

            autoWidth: false,

            pageLength: 10,

            fixedHeader: true,

            ajax: {
                url: "<?php echo e(route('products.ajax')); ?>",
                type: "GET",
                dataSrc: "",
                beforeSend: function() {

                    $('#tableLoader').show();

                },

                complete: function() {

                    $('#tableLoader').hide();

                }
            },
            columnDefs: [

                // IMAGE
                {
                    targets: 0,
                    className: 'image-column'
                },

                // DESCRIPTION
                {
                    targets: 8,
                    className: 'description-column'
                },

                // ACTION COLUMN (LAST)
                {
                    targets: -1,
                    className: 'action-column'
                },

                // PRICE COLUMNS
                {
                    targets: [
                        16, 17, 18, 19, 20, 21, 22,
                        23, 24, 25, 26, 27, 28, 29,
                        30, 31, 32, 33, 34, 35, 36,
                        37, 38, 39, 40, 41, 42, 43,
                        44, 45, 46, 47, 48, 49, 50
                    ],
                    className: 'price-column'
                },

                // ALL
                {
                    targets: '_all',
                    className: 'normal-column'
                }

            ],

            columns: [

                {
                    data: 'image',
                    width: '90px'
                },

                {
                    data: 'collection',
                    width: '180px'
                },

                {
                    data: 'new_triple_sku',
                    width: '160px'
                },

                {
                    data: 'product_type',
                    width: '140px'
                },

                {
                    data: 'old_triple_sku',
                    width: '160px'
                },

                {
                    data: 'vendor_id',
                    width: '120px'
                },

                {
                    data: 'barcode_wg',
                    width: '140px'
                },

                {
                    data: 'barcode_yg',
                    width: '140px'
                },

                {
                    data: 'description',
                    width: '280px'
                },

                {
                    data: 'size',
                    width: '100px'
                },

                {
                    data: 'pi_status',
                    width: '120px'
                },

                {
                    data: 'net_weight',
                    width: '140px'
                },

                {
                    data: 'metal_kt',
                    width: '120px'
                },

                {
                    data: 'metal_color',
                    width: '140px'
                },

                {
                    data: 'gross_weight',
                    width: '140px'
                },

                {
                    data: 'gold_lock',
                    width: '120px'
                },

                {
                    data: 'gold_rate',
                    width: '140px'
                },

                {
                    data: 'gold_value',
                    width: '140px'
                },

                {
                    data: 'finding_type',
                    width: '160px'
                },

                {
                    data: 'finding_qty',
                    width: '120px'
                },

                {
                    data: 'finding_weight',
                    width: '150px'
                },

                {
                    data: 'finding_rate',
                    width: '140px'
                },

                {
                    data: 'finding_value',
                    width: '150px'
                },

                {
                    data: 'diamond_type',
                    width: '160px'
                },

                {
                    data: 'diamond_size',
                    width: '140px'
                },

                {
                    data: 'diamond_pcs',
                    width: '140px'
                },

                {
                    data: 'diamond_ct',
                    width: '140px'
                },

                {
                    data: 'diamond_rate',
                    width: '140px'
                },

                {
                    data: 'diamond_value',
                    width: '150px'
                },

                {
                    data: 'cfp',
                    width: '120px'
                },

                {
                    data: 'setting',
                    width: '120px'
                },

                {
                    data: 'joining',
                    width: '120px'
                },

                {
                    data: 'rhodium',
                    width: '120px'
                },

                {
                    data: 'stamp',
                    width: '120px'
                },

                {
                    data: 'finding_charge',
                    width: '160px'
                },

                {
                    data: 'handling',
                    width: '120px'
                },

                {
                    data: 'total_labor',
                    width: '160px'
                },

                {
                    data: 'total_value',
                    width: '160px'
                },

                {
                    data: 'duty',
                    width: '120px'
                },

                {
                    data: 'with_duty',
                    width: '140px'
                },

                {
                    data: 'b2b_wholesaler_90',
                    width: '160px'
                },

                {
                    data: 'b2b_wholesaler_85',
                    width: '160px'
                },

                {
                    data: 'b2b_regular_82',
                    width: '160px'
                },

                {
                    data: 'b2b_regular_80',
                    width: '160px'
                },

                {
                    data: 'other_online_75',
                    width: '160px'
                },

                {
                    data: 'online_70',
                    width: '140px'
                },

                {
                    data: 'pop_selling_price',
                    width: '180px'
                },

                {
                    data: 'br_cost_price',
                    width: '160px'
                },

                {
                    data: 'amazon_price',
                    width: '160px'
                },

                {
                    data: 'flyer_price',
                    width: '160px'
                },

                {
                    data: 'goldPrice',
                    width: '160px'
                },

                {
                    data: 'price',
                    width: '160px'
                },

                {
                    data: 'action',
                    width: '120px',
                    orderable: false,
                    searchable: false
                }

            ]

        });

        // Current Gold Price Top Box
        table.on('xhr', function() {

            let json = table.ajax.json();

            if (json.length > 0) {

                let goldPrice = json[0].goldPrice.replace('$', '');
                let MainPrice = json[0].MainPrice.replace('$', '');

                $('#currentGoldPrice').text('$' + goldPrice);
                $('#currentGoldmain_Price').text('$' + MainPrice);
            }

        });


        let btn = $('#goldPriceBtn');

        let seconds = 60;


        // Initial Disable
        btn.prop('disabled', true);


        // Countdown Function
        function startCountdown() {

            let timer = setInterval(function() {

                btn.html(`
                <i class="fas fa-clock"></i>
                Wait ${seconds}s
            `);

                seconds--;

                if (seconds < 0) {

                    clearInterval(timer);

                    btn.prop('disabled', false);

                    btn.html(`
                    <i class="fas fa-coins"></i>
                    Refresh Gold Price
                `);

                    seconds = 60;
                }

            }, 1000);
        }


        // Start First Countdown
        startCountdown();



        // Button Click
        btn.on('click', function() {

                btn.prop('disabled', true);

                btn.html(`
            <i class="fas fa-spinner fa-spin"></i>
            Updating...
            `);

            $.ajax({

                url: "<?php echo e(route('gold.price')); ?>",

                type: "GET",

                success: function(response) {

                    let newGoldPrice =
                        parseFloat(response.price);

                    let newGoldMainPrice =
                        parseFloat(response.main_price);

                    // BUTTON TEXT
                    btn.html(`
                <i class="fas fa-coins"></i>

                Live Gold:
                $${newGoldPrice.toFixed(2)}

                / Gram
            `);

                    btn.prop('disabled', false);

                    // TOP PRICE
                    $('#currentGoldPrice')
                        .text('$' + newGoldPrice.toFixed(2));

                    $('#currentGoldmain_Price')
                        .text('$' + newGoldMainPrice.toFixed(2));

                    // UPDATE TABLE
                    table.rows().every(function() {

                        let row = this.data();

                        let weight =
                            parseFloat(
                                row.net_weight_raw || 0
                            );

                        let extra =
                            parseFloat(
                                row.extra_charge || 0
                            );

                        // FINAL PRICE
                        let finalPrice =
                            (weight * newGoldPrice) +
                            extra;

                        // UPDATE ROW
                        row.goldPrice =
                            '$' + newGoldPrice.toFixed(2);

                        row.price =
                            '$' + finalPrice.toFixed(2);

                        this.data(row);

                    });

                    table.draw(false);

                    // RESTART TIMER
                    startCountdown();
                },

                error: function() {

                    btn.prop('disabled', false);

                    btn.html(`
                <i class="fas fa-coins"></i>
                Refresh Gold Price
            `);

                    alert('Something went wrong');

                }

            });

        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/braintreeeasysof/public_html/popular/resources/views/admin/product/product.blade.php ENDPATH**/ ?>