<style>
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    display: none;
}

.page-width--narrow {
    max-width: 1500px !important;
    width: 100% !important;
    margin: auto !important;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer="defer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer="defer"></script>

<link rel="stylesheet" href="<?php echo e(asset('public/assets/diamond-details.css')); ?>">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer="defer"></script> -->
<!-- <link
    href="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css"
    rel="stylesheet"
    > -->

<!-- <script src="<?php echo e(asset('public/assets/jquery.dataTables.min.js')); ?>" defer="defer"></script>
  <script src="<?php echo e(asset('public/assets/manage_diamond_ajax.js')); ?>" defer="defer"></script> -->

<input type="hidden" id="shop_url" value="">
<input type="hidden" id="page_name" value="">
<input type="hidden" id="stock_id" value="" page_name="" shop_url="">

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class=" " id="img_slider"></div>
        </div>
        <div class="col-md-6">
            <div class="product-detail">
                <h2 id="diamond_title"></h2>
                <div class="product-details-price mt-1">
                    <!-- <span class="old-price">$449</span> -->
                    <span class="new-price" id="diamond_price"></span>
                </div>



                <div class="" id="diamond_info_html">
                </div>
            </div>
        </div>
        <!-- <button alt="Back" onclick="window.history.back();">Back</button> -->

    </div>
</div>

</div>


<script>
diamond_details('https://braintreeeasysoft.com/braintree_products_app/diamond-details');

function diamond_details(url_data) {

    var url_get = new URL(window.location.href);
    var stock_id = url_get.searchParams.get('stock_id');
    var value_form = {
        "stock_id": stock_id
    };
    document.getElementById('stock_id').value = stock_id;
    document.getElementById('stock_id').setAttribute('fullUrl', url_get);

    $.ajax({
        url: url_data,
        type: 'get',
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        data: value_form,
        success: function(data) {
            var details = data.records;
            if (details.length === 0) {
                // Redirect to a specific URL if array is empty
                window.location.href = "/pages/diamond-product-1";
            }

            // console.log(details[0].description);
            console.log(details);
            var total_records = data.total_records;
            var html = "";
            var details_length = details.length;

            var title = details[0].weight + " Carat " + details[0].shape + " Shaped ";

            $("#diamond_title").text(title);
            $("#diamond_price").text('$' + details[0].Buy_Price);

            var img_slider_html = `<div class="product-gallery vertical-pager1">`;
            img_slider_html +=
                ` <ul class="slide_img_ul" style="height: 100%;padding-left: 0; max-width: 550px; width: 100%;">`;
            img_slider_html += `<li class="mySlides easyzoom easyzoom--overlay easyzoom--with-thumbnails" id="slides_1">
                                                    <a href=""> <img onerror="imgError(this)" src="${details[0].diamond_image}" class="img-responsive"></a>
                                                </li>`;
            if (details[0].diamond_video != '') {
                img_slider_html += `<li class="mySlides product_video" id="slides_2"
                                    style="border: 1px solid #ddd;display: none; align-items: center;justify-content: center;max-width:550px;width:100%;"> <video autoplay="" loop="" muted="" width="400px" height="400px">
                                                <source src="${details[0].diamond_video}" type="video/mp4">
                                            </video></li>`;
            }
            if (details[0].CertificateLink != '') {
                img_slider_html += `<li class="mySlides easyzoom easyzoom--overlay easyzoom--with-thumbnails" id="slides_3" style="display: none;">
                                            <a href="">
                                                <iframe src="${details[0].CertificateLink}" title="" width="400px" height="400px"></iframe> 
                                            </a>
                                        </li>`;
            }
            img_slider_html += `</ul>`;
            img_slider_html += `<div id="bx-pager" class="product-gallery_preview">`;
            img_slider_html += `<a data-slide-index="0" href="javascript:void(0)">
                                                <img src="${details[0].diamond_image}" onerror="imgError(this)" onclick="showSlides('1')" width="80px" height="80px" title="Image" data-bs-toggle="tooltip" /> 
                                            </a>`;
            if (details[0].diamond_video != '') {
                img_slider_html += `<a data-slide-index="0" href="javascript:void(0)">
                                                <img src="https://cdn.shopify.com/extensions/b4a9f02d-a599-4bb4-97bf-ef66f9bc575c/0.0.0/assets/vdobig.svg?v=1724756407" onclick="showSlides('2')" width="80px" height="80px" title="Image" data-bs-toggle="tooltip" /> 
                                            </a>`;
            }
            if (details[0].CertificateLink != '') {
                img_slider_html += `<a data-slide-index="0" href="javascript:void(0)">
                                            <img src="https://cdn.shopify.com/extensions/b4a9f02d-a599-4bb4-97bf-ef66f9bc575c/0.0.0/assets/certificate_icon.svg?v=1724756407" onclick="showSlides('3')" width="80px" height="80px" title="Image" data-bs-toggle="tooltip" /> 
                                        </a>`;
            }
            img_slider_html += `</div>
                    </div>`;
            // <button alt="Add To Cart" onclick="add_cart()">Add To Cart</button>

            diamond_info_html = `
                    <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                    <table class="table table-hover table-striped  mt-4">
                        <tbody>
                            <tr>
                                <td>Item# </td>
                                <td>${details[0].stock_id}</td>
                            </tr>
                            <tr>
                                <td>Shape</td>
                                <td>${details[0].shape}</td>
                            </tr>
                            <tr>
                                <td>Carat Weight</td>
                                <td>${details[0].weight}</td>
                            </tr>
                            <tr>
                                <td>Color </td>
                                <td>${details[0].color}</td>
                            </tr>
                            <tr>
                                <td>Clarity</td>
                                <td>${details[0].clarity}</td>
                            </tr>
                            <tr>
                                <td>Polish</td>
                                <td>${details[0].polish}</td>
                            </tr>
                            <tr>
                                <td>Symmetry </td>
                                <td>${details[0].symmetry}</td>
                            </tr>
                            <tr>
                                <td>Flourescence</td>
                                <td>${details[0].fluorescence_int}</td>
                            </tr>
                            <tr>
                                <td class="border-none">Lab </td>
                                <td class="border-none">${details[0].lab}</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                   
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                        <table class="table table table-hover table-striped mt-4">
                        <tbody>
                            <tr>
                                <td >
                                    Origin 
                                </td>
                                <td >
                                    ${details[0].origin}
                                </td>
                            </tr>
                            <tr>
                                <td>Table%</td>
                                <td>${details[0].table_d}</td>
                            </tr>
                            <tr>
                                <td>Depth%</td>
                                <td>${details[0].depth}</td>
                            </tr>
                            <tr>
                                <td>Certification</td>
                                <td>${details[0].depth}</td>
                            </tr>
                            <tr>
                                <td>Measurements</td>
                                <!-- <td></td> -->
                                <td>${details[0].measurements}</td>
                            </tr>
                            <tr>
                                <td class="border-none">Ratio
                                </td>
                                <td class="border-none">
                                    ${details[0].ratio}
                                </td>
                            </tr>
                            <tr>
                                <td>Crown Angle</td>
                                <td>${details[0].crown_angle}</td>
                            </tr>
                            <tr>
                                <td>Crown Height</td>
                                <td>${details[0].crown_ht}</td>
                            </tr>

                        </tbody>
                        </table>
                    </div></div>`;



            $("#img_slider").html(img_slider_html);
            $("#diamond_info_html").html(diamond_info_html);
            // $("#diamond_details").html(details[0].description);
        },
        beforeSend: function() {
            $(".header").removeClass('sorted');
            $("#page-loader").show();
        },
        complete: function() {
            $("#page-loader").fadeOut();
        }

    });
}

function showSlides(n) {
    $(".mySlides").hide();
    // $("#easy_zoom").hide();
    $("#slides_" + n).show();
}

function imgError(e) {
    e.src = 'https://cdn.shopify.com/s/files/1/0697/1742/6414/files/No_image.jpg?v=1718975816';
}
</script><?php /**PATH /home/braintreeeasysof/public_html/braintree_products_app/resources/views/diamond-detalis.blade.php ENDPATH**/ ?>