<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function shortList(button) {
    // Prevent the default behavior of the button
    event.preventDefault();
console.log(button);
    // Get the current URL (including query parameters)
    var currentUrl = window.location.href;

    // Gather form data
    var formData = {
        'your_name': $('#your-name').val(),
        'your_email': $('#your-email').val(),
        'friend_name': $('#friend-name').val(),
        'friend_email': $('#friend-email').val(),
        'personal_message': $('#personal-message').val(),
        'stock_number': $('#stock_number').val(),  // Hidden field (stock number)
        'current_url': currentUrl  // Include current URL in the request
    };
//console.log(formData);
    // Make an AJAX POST request to the server
    $.ajax({
        url: 'https://diamondapp.mydiamondsearch.com/diamond_products/send-mail', // The URL to send the POST request to
        type: 'POST',
        data: formData, // Send form data
        success: function(response) {
            // Handle success response
            console.log(response);
            if (response.status === 'success') {
                alert('Email sent successfully!');
                // Optionally reset the form or close a modal
                $('#shortlist-form')[0].reset(); // Reset the form fields
            } else {
                alert('Failed to send email.');
            }
        },
        error: function(xhr, status, error) {
            // Handle error response
            console.error('Error sending email:', error);
            console.log('Error sending email:', error);
            console.log('Status:', status);
            console.log('Response:', xhr.responseText);
        }
    });
}
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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="{{ asset('public/assets/diamond-details.css') }}">
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5a2a38288c8f3c0013a02024&product=sop' async='async'></script>
<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="{{ asset('public/assets/jquery.dataTables.min.js') }}" defer="defer"></script>
  <script src="{{ 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 my-5">
        <div class="col-md-6 col-lg-4 order-1 order-md-1 order-lg-1">
            <div class="detail-img">
               <!-- <img class="img-fluid" src="https://diamondapp.mydiamondsearch.com/cdn/shop/files/image-1_470x.jpg?v=1725543082"
                    alt="">-->
            </div>
        </div>
       
        <div class="col-md-6 col-lg-4 order-3 order-md-2 order-lg-3">
            <div class="detail-img">
                <!--<img class="img-fluid"
                    src="https://diamondapp.mydiamondsearch.com/cdn/shop/files/diamond-_img-_2_470x.jpg?v=1731416525" alt="">-->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-5 col-xl-7 mt-5">
            <div class=" " id="img_slider"></div>
        </div>
        <div class="col-md-12 col-lg-7 col-xl-5 mt-5">
            <div class="product-detail">
                <h2 id="diamond_title"></h2>
                
                <h3 id="diamond_title_dec"></h3>
                <hr class="mb-1">
                <div class="product-details-price mt-4">
                    <!-- <span class="old-price">$449</span> -->
                    <span class="new-price" id="diamond_price"></span>
                </div>
                <div class="d-flex mb-4 align-items-center igi" id="certTageLine">
                </div>
                <hr class="mb-1">
                <div id="email_us_div" class="mt-4 mb-4"></div>
                
                <div class="social-detail">
                    <ul>
                        
                    </ul>
                </div>
                <div class="delivery-detail">
                    <div class="truck">
                        
                    </div>
                   <!-- <div class="delivery-text">
                        <p>Ships by <span class="day-date">Monday, 25 Nov</span> | Track in real time before it ships
                        </p>
                    </div>-->
                </div>
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Diamond Details
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="" id="diamond_info_html">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                
                <div class="wish-cart" id="details_cart_btn">
                    <button class="detail-cart" >ADD TO CART - $<span id="cart_price_btn"></span></button>
                    <!-- <button class="detail-wish" type="submit"><svg xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 32 32" aria-hidden="true" focusable="false" role="presentation"
                            class="icon icon-wishlist">
                            <path
                                d="M 9.5 5 C 5.363281 5 2 8.402344 2 12.5 C 2 13.929688 2.648438 15.167969 3.25 16.0625 C 3.851563 16.957031 4.46875 17.53125 4.46875 17.53125 L 15.28125 28.375 L 16 29.09375 L 16.71875 28.375 L 27.53125 17.53125 C 27.53125 17.53125 30 15.355469 30 12.5 C 30 8.402344 26.636719 5 22.5 5 C 19.066406 5 16.855469 7.066406 16 7.9375 C 15.144531 7.066406 12.933594 5 9.5 5 Z M 9.5 7 C 12.488281 7 15.25 9.90625 15.25 9.90625 L 16 10.75 L 16.75 9.90625 C 16.75 9.90625 19.511719 7 22.5 7 C 25.542969 7 28 9.496094 28 12.5 C 28 14.042969 26.125 16.125 26.125 16.125 L 16 26.25 L 5.875 16.125 C 5.875 16.125 5.390625 15.660156 4.90625 14.9375 C 4.421875 14.214844 4 13.273438 4 12.5 C 4 9.496094 6.457031 7 9.5 7 Z">
                            </path>
                        </svg></button> -->
                </div>
            </div>
        </div>
        <!-- <button alt="Back" onclick="window.history.back();">Back</button> -->

    </div>
</div>

</div>


<script>
    diamond_details('https://diamondapp.mydiamondsearch.com/diamond_products/diamond-details');


    function diamond_details(url_data) {
	//alert('153d');
        var url_get = new URL(window.location.href);
        var stock_id = url_get.searchParams.get('stock_number');
		
        var shop = `${Shopify.shop}`;
        var value_form = {
            "stock_id": stock_id,
            "shop":shop
        };
        console.log(value_form);
        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;
				var shop_D = data.shop_D;
				//shop_D.exit;
				 console.log('g');
                console.log(details[0].stock_number);
				
				//console.log(shop_D['shop'].email);
                // if (details.length === 0) {
                //     // Redirect to a specific URL if array is empty
                //     window.location.href = "/pages/diamond-product";
                // }

                // console.log(details[0].description); 
                //console.log(details);
                var total_records = data.total_records;
                var html = "";
                var details_length = details.length;
				
				// Assuming details is an array of objects with dm_diamond_type as a key
				const diamondType = details[0].dm_diamond_type;
				let diamondDescription = '';
				
				if (diamondType === 'Natural Diamonds') {
					diamondDescription = 'Earth Mined Diamond';
				} else if (diamondType === 'CVD Diamonds') {
					diamondDescription = 'Lab Grown Diamond';
				}
				
				
				const certTageLineCertcheck = details[0].certificate_company;
				let certTageLinePtag = '';
				
				if (certTageLineCertcheck != '') {
					 certTageLinePtag = ` 
						<p class="mb-0">
						<svg id="fi_18502262" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m320.72 191.29a91.52 91.52 0 1 0 0 129.43 91.53 91.53 0 0 0 0-129.43zm-64.72-46.58a111.3 111.3 0 1 1 -111.3 111.29 111.3 111.3 0 0 1 111.3-111.29zm-100.22-89.47a477.65 477.65 0 0 0 95.52-38 9.88 9.88 0 0 1 9.3-.06 477.29 477.29 0 0 0 95.62 38.08 500 500 0 0 0 102.53 17.11 9.86 9.86 0 0 1 9.91 9.88v122.51.07c-.73 75.26-18.37 136.17-53.26 184.25s-86.87 83.07-156.23 106.38a9.79 9.79 0 0 1 -6.26 0c-69.36-23.31-121.31-58.27-156.23-106.38-34.79-47.88-52.42-108.49-53.29-183.31a8.44 8.44 0 0 1 0-1v-122.52a9.87 9.87 0 0 1 9.28-9.85 500.05 500.05 0 0 0 103.11-17.16zm100.22-18.24c60.35 31.13 125.32 49.07 192.89 54.42v113.34c-.71 70.92-17.12 128-49.56 172.73-31.92 44-79.6 76.26-143.37 98.21-63.77-21.95-111.45-54.23-143.37-98.21-32.29-44.55-48.69-101.41-49.51-171.99 0-.24 0-.49 0-.74v-113.32c67.6-5.35 132.57-23.29 192.92-54.44zm35.45 181a9.86 9.86 0 0 1 14.44 13.44l-58.27 62.67a9.85 9.85 0 0 1 -15-.61l-26.62-29.5a9.84 9.84 0 1 1 14.6-13.21l19.85 21.93z" fill-rule="evenodd"></path></svg> With this purchase, you will receive an ${details[0].certificate_company} Certificate for authenticity!
					</p> `;
				} else {
					certTageLinePtag = '';
				}
				
			
				
				
				//alert();dm_diamond_type

                var title = `${details[0].carat_weight ? `${details[0].carat_weight} Carat ` : ''} ${details[0].ShapeName} ${diamondDescription}`;
				var title_dec = `${details[0].fullcut ? `${details[0].fullcut} cut ` : ''} ${details[0].ColorName ? `${details[0].ColorName} color ` : ''} ${details[0].clarity_name ? `${details[0].clarity_name} clarity` : ''}`; 

				var emailPart = shop_D.shop.email 
    ? `<span class="detail-cart"><button type="button" class="btn drop" data-bs-toggle="modal" data-bs-target="#email-btn">
    <a href="mailto:${shop_D.shop.email}?subject=I'm%20interested%20in%20this%20${details[0].carat_weight}ct%20${details[0].ShapeName}%20${details[0].ColorName}-${details[0].clarity_name}%20${diamondDescription}%20Diamond%20-%20$${Math.round(details[0].price)}&body=Hello,%0A%0AI%20am%20interested%20in%20the%20above%20mentioned%20diamond.%20Could%20you%20please%20confirm%20availability%20and%20revert%20to%20discuss%20next%20steps?%0A%0AThank%20you.%0A-%0A" class="email-us-button">
    
    <svg version="1.1" id="fi_471664" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<path d="M256,0C114.509,0,0,114.496,0,256c0,141.489,114.496,256,256,256c141.491,0,256-114.496,256-256
			C512,114.509,397.504,0,256,0z M256,476.279c-121.462,0-220.279-98.816-220.279-220.279S134.538,35.721,256,35.721
			c121.463,0,220.279,98.816,220.279,220.279S377.463,476.279,256,476.279z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M248.425,323.924c-14.153,0-25.61,11.794-25.61,25.946c0,13.817,11.12,25.948,25.61,25.948
			c14.49,0,25.946-12.131,25.946-25.948C274.371,335.718,262.577,323.924,248.425,323.924z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M252.805,127.469c-45.492,0-66.384,26.959-66.384,45.155c0,13.142,11.12,19.208,20.218,19.208
			c18.197,0,10.784-25.948,45.155-25.948c16.848,0,30.328,7.414,30.328,22.915c0,18.196-18.871,28.642-29.991,38.077
			c-9.773,8.423-22.577,22.24-22.577,51.22c0,17.522,4.718,22.577,18.533,22.577c16.511,0,19.881-7.413,19.881-13.817
			c0-17.522,0.337-27.631,18.871-42.121c9.098-7.076,37.74-29.991,37.74-61.666S295.937,127.469,252.805,127.469z"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg> Request a Quote</a></button></span>` 
    : '';

var phonePart = shop_D.shop.phone 
    ? `<span class="detail-cart"><span id=""><a href="tel:${shop_D.shop.phone}" class="call-us-button"> <svg version="1.1" id="fi_159832" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.6 482.6" style="enable-background:new 0 0 482.6 482.6;" xml:space="preserve">
<g>
	<path d="M98.339,320.8c47.6,56.9,104.9,101.7,170.3,133.4c24.9,11.8,58.2,25.8,95.3,28.2c2.3,0.1,4.5,0.2,6.8,0.2
		c24.9,0,44.9-8.6,61.2-26.3c0.1-0.1,0.3-0.3,0.4-0.5c5.8-7,12.4-13.3,19.3-20c4.7-4.5,9.5-9.2,14.1-14
		c21.3-22.2,21.3-50.4-0.2-71.9l-60.1-60.1c-10.2-10.6-22.4-16.2-35.2-16.2c-12.8,0-25.1,5.6-35.6,16.1l-35.8,35.8
		c-3.3-1.9-6.7-3.6-9.9-5.2c-4-2-7.7-3.9-11-6c-32.6-20.7-62.2-47.7-90.5-82.4c-14.3-18.1-23.9-33.3-30.6-48.8
		c9.4-8.5,18.2-17.4,26.7-26.1c3-3.1,6.1-6.2,9.2-9.3c10.8-10.8,16.6-23.3,16.6-36s-5.7-25.2-16.6-36l-29.8-29.8
		c-3.5-3.5-6.8-6.9-10.2-10.4c-6.6-6.8-13.5-13.8-20.3-20.1c-10.3-10.1-22.4-15.4-35.2-15.4c-12.7,0-24.9,5.3-35.6,15.5l-37.4,37.4
		c-13.6,13.6-21.3,30.1-22.9,49.2c-1.9,23.9,2.5,49.3,13.9,80C32.739,229.6,59.139,273.7,98.339,320.8z M25.739,104.2
		c1.2-13.3,6.3-24.4,15.9-34l37.2-37.2c5.8-5.6,12.2-8.5,18.4-8.5c6.1,0,12.3,2.9,18,8.7c6.7,6.2,13,12.7,19.8,19.6
		c3.4,3.5,6.9,7,10.4,10.6l29.8,29.8c6.2,6.2,9.4,12.5,9.4,18.7s-3.2,12.5-9.4,18.7c-3.1,3.1-6.2,6.3-9.3,9.4
		c-9.3,9.4-18,18.3-27.6,26.8c-0.2,0.2-0.3,0.3-0.5,0.5c-8.3,8.3-7,16.2-5,22.2c0.1,0.3,0.2,0.5,0.3,0.8
		c7.7,18.5,18.4,36.1,35.1,57.1c30,37,61.6,65.7,96.4,87.8c4.3,2.8,8.9,5,13.2,7.2c4,2,7.7,3.9,11,6c0.4,0.2,0.7,0.4,1.1,0.6
		c3.3,1.7,6.5,2.5,9.7,2.5c8,0,13.2-5.1,14.9-6.8l37.4-37.4c5.8-5.8,12.1-8.9,18.3-8.9c7.6,0,13.8,4.7,17.7,8.9l60.3,60.2
		c12,12,11.9,25-0.3,37.7c-4.2,4.5-8.6,8.8-13.3,13.3c-7,6.8-14.3,13.8-20.9,21.7c-11.5,12.4-25.2,18.2-42.9,18.2
		c-1.7,0-3.5-0.1-5.2-0.2c-32.8-2.1-63.3-14.9-86.2-25.8c-62.2-30.1-116.8-72.8-162.1-127c-37.3-44.9-62.4-86.7-79-131.5
		C28.039,146.4,24.139,124.3,25.739,104.2z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg> Call Us</a></span></span>` 
    : '';

var email_us = `<div class="call-btn">
                    <p>
                        ${emailPart}  
                    </p>
                    <p>
                        ${phonePart}	  
                    </p>
                    <p>
                    
                    <button type="button" class="btn drop" data-bs-toggle="modal" data-bs-target="#shortlist-btn">
                    <svg version="1.1" id="fi_646094" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<path d="M467,76H45C20.137,76,0,96.262,0,121v270c0,24.885,20.285,45,45,45h422c24.655,0,45-20.03,45-45V121
			C512,96.306,491.943,76,467,76z M460.698,106c-9.194,9.145-167.415,166.533-172.878,171.967c-8.5,8.5-19.8,13.18-31.82,13.18
			s-23.32-4.681-31.848-13.208C220.478,274.284,64.003,118.634,51.302,106H460.698z M30,384.894V127.125L159.638,256.08L30,384.894z
			 M51.321,406l129.587-128.763l22.059,21.943c14.166,14.166,33,21.967,53.033,21.967c20.033,0,38.867-7.801,53.005-21.939
			l22.087-21.971L460.679,406H51.321z M482,384.894L352.362,256.08L482,127.125V384.894z"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>  Drop a Hint
                  </button>
                    </p>
                </div>
                <!-- The Modal -->
                <div class="modal" id="shortlist-btn">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                
                      <!-- Modal Header -->
                      <div class="modal-header border-0">
                        <h4 class="modal-title col-lg-11 text-center text-primary">Drop a Hint</h4>
                        <button type="button" class="btn-close col-lg-1" data-bs-dismiss="modal"></button>
                      </div>
                
                      <!-- Modal body -->
                      <div class="modal-body">
                         <form id="shortlist-form" action="javascript:void(0);">
                         <div class="row jumbotron ">
                            <!-- CSRF Token for Laravel -->
                            <input type="hidden" name="_token" value="">
                
                            <!-- Hidden input for stock_number (product handle or custom field) -->
                            <input type="hidden" name="stock_number" id="stock_number" value="${details[0].stock_number}">
                
                            <!-- Hidden input for current page URL -->
                            <input type="hidden" name="current_url" id="current_url" value="#">
                            <div class="col-sm-6 form-group mt-2">
                                <label for="your-name">Your Name*</label>
                                <input type="text" class="form-control" name="your_name" placeholder="Enter your first name." id="your-name" required>
                            </div>
                            <div class="col-sm-6 form-group mt-2">
                                <label for="your-email">Your Email*</label>
                                <input type="email" class="form-control" placeholder="Enter your email." name="your_email" id="your-email" required>
                            </div>
                            <div class="col-sm-6 form-group mt-4">
                                <label for="friend-name">Your Friend's Name*</label>
                                <input type="text" class="form-control" placeholder="Enter your friend name." name="friend_name" id="friend-name" required>
                            </div>
                            <div class="col-sm-6 form-group mt-4">
                                <label for="friend-email">Your Friend's Email*</label>
                                <input type="email" class="form-control" placeholder="Enter your friend email." name="friend_email" id="friend-email" required>
                            </div>
                            <div class="col-sm-12 form-group mt-4">
                                <label for="personal-message">Personal Message (Optional)</label>
                                <textarea class="form-control" placeholder="Enter your message." name="personal_message" id="personal-message">Your friend recently visited our website and wanted to share some information with you, as well as the following note:</textarea>
                            </div>
                            <div class="col-sm-12 form-group mb-0 mt-4 text-right">
                                <button id="send-mail" onclick="shortList(this)" class="btn btn-primary" >Send Email</button>
                            </div>
                        </form>
                        </div>
                      </div>
                

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

                <!-- The Modal -->
                <div class="modal" id="email-btn">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                
                      <!-- Modal Header -->
                      <div class="modal-header border-0">
                        <h4 class="modal-title col-lg-11 text-center text-primary">Request a Quote</h4>
                        <button type="button" class="btn-close col-lg-1" data-bs-dismiss="modal"></button>
                      </div>
                
                      <!-- Modal body -->
                      <div class="modal-body">
                         <form id="shortlist-form" action="javascript:void(0);">
                         <div class="row jumbotron ">
                            <!-- CSRF Token for Laravel -->
                            <input type="hidden" name="_token" value="">
                
                            <!-- Hidden input for stock_number (product handle or custom field) -->
                            <input type="hidden" name="stock_number" id="stock_number" value="${details[0].stock_number}">
                
                            <!-- Hidden input for current page URL -->
                            <input type="hidden" name="current_url" id="current_url" value="#">
                            <div class="col-sm-6 form-group mt-2">
                                <label for="your-name">Your Name*</label>
                                <input type="text" class="form-control" name="your_name" placeholder="Enter your first name." id="your-name" required>
                            </div>
                            <div class="col-sm-6 form-group mt-2">
                                <label for="your-email">Your Email*</label>
                                <input type="email" class="form-control" placeholder="Enter your email." name="your_email" id="your-email" required>
                            </div>
                            <div class="col-sm-12 form-group mt-4">
                                <label for="friend-email">Your Friend's Email*</label>
                                <input type="email" class="form-control" placeholder="Enter your friend email." name="friend_email" id="friend-email" required>
                            </div>
                            <div class="col-sm-12 form-group mt-4">
                                <label for="personal-message">Personal Message (Optional)</label>
                                <textarea class="form-control" placeholder="Enter your message." name="personal_message" id="personal-message">Your friend recently visited our website and wanted to share some information with you, as well as the following note:</textarea>
                            </div>
                            <div class="col-sm-12 form-group mb-0 mt-4 text-right">
                                <button id="send-mail" onclick="shortList(this)" class="btn btn-primary" >Send Email</button>
                            </div>
                        </form>
                        </div>
                      </div>
                

                
                    </div>
                  </div>
                </div>
              
                `;

				
                $("#diamond_title").text(title);
				$("#diamond_title_dec").text(title_dec);
				$("#email_us_div").html(email_us);
                var mainprice = Math.round(details[0].price);
                $("#diamond_price").text('$' + mainprice);
                $("#cart_price_btn").text(mainprice);
                
                // var shop_name = 'amipi-diamond-store.myshopify.com';
                var shop_name = `${Shopify.shop}`;

                var details_cart_html = `<button class="detail-cart" onclick="add_to_cart('${details[0].stock_number}', '${details[0].vendorname}', '${shop_name}','add_to_cart')">ADD TO CART - $<span id="">${mainprice}</span></button>`;
                $("#details_cart_btn").html(details_cart_html);

                var diamond_choose_btn_html = `<button id="selectedButtonStone" onclick="add_to_cart('${details[0].stock_number}', '${details[0].vendorname}', '${shop_name}','choose_diamond')">Add To Ring</button>`;
                $("#diamond_choose_btn").html(diamond_choose_btn_html);
                


                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: 758px; 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=";display: none; align-items: center;justify-content: center;max-width:550px;width:100%;">
                                   
                                            <iframe src="${details[0].diamond_video}" frameborder="0" sandbox='allow-scripts allow-same-origin'></iframe>
                                            </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].diamond_cert_link}" title="" width="400px" height="400px" sandbox='allow-scripts allow-same-origin'></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="{{ asset('public/assets/small1.png') }}" 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="${details[0].diamond_cert_link}" target="_blank">
                                            <img src="{{ asset('public/assets/cert-logo.jpg') }}"  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>

               let diamond_info_html = `
									<div class="row">
										<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
											<input type="hidden" name="product-id" value="8855900291323" />
											<table class="table">
												<tbody>`;
								
								const createRow = (label, value) => {
									return value ? `<tr><td>${label} </td><td><strong>${value}</strong></td></tr>` : '';
								};
								
								// Adding rows based on values
								diamond_info_html += createRow('Lot #', details[0].stock_number);
								diamond_info_html += createRow('Shape', details[0].ShapeName);
								diamond_info_html += createRow('Carat Weight', details[0].carat_weight);
								diamond_info_html += createRow('Color', details[0].color_name);
								diamond_info_html += createRow('Clarity', details[0].clarity_name);
								diamond_info_html += createRow('Cut', details[0].fullcut);
								diamond_info_html += createRow('Polish', details[0].fullpolish);
								diamond_info_html += createRow('Symmetry', details[0].fullsymmetry);
								diamond_info_html += createRow('Flourescence', details[0].fullfluorescence);
								diamond_info_html += createRow('lab', details[0].certificate_company);
								diamond_info_html += createRow('L/W Ratio', details[0].length_width_radio);
								diamond_info_html += createRow('Certificate.', details[0].certificate_number);
								
								diamond_info_html += `
												</tbody>
											</table>
										</div>
										<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
											<table class="table">
												<tbody>`;
								
								// Adding more rows for the second table
								diamond_info_html += createRow('Depth%', `${details[0].depth || ''}%`);
								diamond_info_html += createRow('Table%', `${details[0].table_diamond || ''}%`);
								//diamond_info_html += createRow('MEASUREMENT', details[0].measurement);
								diamond_info_html += createRow('Length', details[0].measurement_l);
								diamond_info_html += createRow('Width', details[0].measurement_w);
								diamond_info_html += createRow('Height', details[0].measurement_h);
								diamond_info_html += createRow('Girdle', details[0].girdle);
								diamond_info_html += createRow('Girdle From', details[0].girdle_thin);
								diamond_info_html += createRow('Gridle To', details[0].girdle_thick);
								diamond_info_html += createRow('Culet', details[0].culet);
								//diamond_info_html += createRow('Shade', details[0].shade);
								
								diamond_info_html += `
												</tbody>
											</table>
										</div>
									</div>
									<div class="call-btn call-share-btn">
									 <div class="sharethis-inline-share-buttons" style="display:none"></div>
										<div class="share-buttons"  style="display:none">
										  <a href="https://www.facebook.com/sharer/sharer.php?u=${shop_D['shop'].domain}/products/${details[0].stock_number}" target="_blank"><i class="fa-brands fa-facebook-f"></i> Share on Facebook</a>
										  <a href="https://twitter.com/share?url=${shop_D['shop'].domain}/products/${details[0].stock_number}&text=${details[0].stock_number}" target="_blank"><i class="fa-brands fa-twitter"></i> Share on Twitter</a>
										  <a href="https://wa.me/?text=${shop_D['shop'].domain}/products/${details[0].stock_number}" target="_blank"><i class="fa-brands fa-whatsapp"></i>Share on WhatsApp</a>
										</div>

										<p  style="display:none">
											<span><share-button id="Share-template--23736271929508__main" class="share-button quick-add-hidden">
  <button class="share-button__button">
    <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-share" viewBox="0 0 13 12"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.625 8.125v2.167a1.083 1.083 0 0 0 1.083 1.083h7.584a1.083 1.083 0 0 0 1.083-1.083V8.125"></path><path fill="currentColor" fill-rule="evenodd" d="M6.148 1.271a.5.5 0 0 1 .707 0L9.563 3.98a.5.5 0 0 1-.707.707L6.501 2.332 4.147 4.687a.5.5 0 1 1-.708-.707z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.125a.5.5 0 0 1 .5.5v6.5a.5.5 0 0 1-1 0v-6.5a.5.5 0 0 1 .5-.5" clip-rule="evenodd"></path></svg>
</span>
    Share
  </button>
  <details id="Details-share-template--23736271929508__main" hidden="">
    <summary class="share-button__button" role="button" aria-expanded="false">
      <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-share" viewBox="0 0 13 12"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.625 8.125v2.167a1.083 1.083 0 0 0 1.083 1.083h7.584a1.083 1.083 0 0 0 1.083-1.083V8.125"></path><path fill="currentColor" fill-rule="evenodd" d="M6.148 1.271a.5.5 0 0 1 .707 0L9.563 3.98a.5.5 0 0 1-.707.707L6.501 2.332 4.147 4.687a.5.5 0 1 1-.708-.707z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.125a.5.5 0 0 1 .5.5v6.5a.5.5 0 0 1-1 0v-6.5a.5.5 0 0 1 .5-.5" clip-rule="evenodd"></path></svg>
</span>
      Share
    </summary>
    <div class="share-button__fallback motion-reduce">
      <div class="field">
        <span id="ShareMessage-template--23736271929508__main" class="share-button__message hidden" role="status"> </span>
        <input type="text" class="field__input" id="ShareUrl-template--23736271929508__main" value="https://${shop_D['shop'].domain}/products/details[0].stock_number" placeholder="Link" onclick="this.select();" readonly="">
        <label class="field__label" for="ShareUrl-template--23736271929508__main">Link</label>
      </div>
      <button class="share-button__close hidden">
        <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="currentColor" d="M.865 15.978a.5.5 0 0 0 .707.707l7.433-7.431 7.579 7.282a.501.501 0 0 0 .846-.37.5.5 0 0 0-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 1 0-.707-.708L8.991 7.853 1.413.573a.5.5 0 1 0-.693.72l7.563 7.268z"></path></svg>
</span>
        <span class="visually-hidden">Close share</span>
      </button>
      <button class="share-button__copy">
        <span class="svg-wrapper"><svg class="icon icon-clipboard" width="11" height="13" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 11 13">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1a1 1 0 011-1h7a1 1 0 011 1v9a1 1 0 01-1 1V1H2zM1 2a1 1 0 00-1 1v9a1 1 0 001 1h7a1 1 0 001-1V3a1 1 0 00-1-1H1zm0 10V3h7v9H1z" fill="currentColor"></path>
</svg>
</span>
        <span class="visually-hidden">Copy link</span>
      </button>
    </div>
  </details>
</share-button></span>
										</p>
									</div>`;
									
								
								
								// Now, diamond_info_html contains only the rows with valid values.




                $("#img_slider").html(img_slider_html);
                $("#diamond_info_html").html(diamond_info_html);
                $("#certTageLine").html(certTageLinePtag);
            },
            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';
    }

    function add_to_cart(stock_id, vendor_id, shop_name, type) {
    var value_form = {
        "stock_id": stock_id,
        "vendor_id": vendor_id,
        "shop_name": shop_name,
    };

    var url = "https://diamondapp.mydiamondsearch.com/diamond_products/add-to-cart";
    
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        data: value_form,
        success: function(data) {
            console.log('AJAX Response:', data); // Debug the response data
            if(data.status == 'true' && data.records.length > 0) {
                var product_id = data.records[0].product_id;
                var variant_id = data.records[0].variant_id;
                
                console.log('Product ID:', product_id);
                console.log('Variant ID:', variant_id);

                if(type == 'add_to_cart'){    
                    // Check if variant_id is valid and exists in your store
                    if (variant_id) {
                        addToCart(product_id, variant_id);
                        // addToCart(product_id, 46688687423739);
                    } else {
                        console.error('Variant ID not found.');
                    }
                }else if(type == 'choose_diamond'){
                    add_diamond_builder(product_id, variant_id)
                }
            } else {
                console.error('Invalid response or no records found.');
            }
        },
        beforeSend: function() {
            $("#page-loader").show();
        },
        complete: function() {
            $("#page-loader").fadeOut();
        }
    });
}

function addToCart(id, selectedVariantId) {
    // Check if selectedVariantId is valid
    if (!selectedVariantId || selectedVariantId <= 0) {
        console.error('Invalid Variant ID:', selectedVariantId);
        return;
    }

    const formData = {
        items: [{
            id: selectedVariantId,
            quantity: 1
        }]
    };

    console.log(`Adding to cart: Variant ID = ${selectedVariantId}, Product ID = ${id}`);

    const apiUrl = window.Shopify.routes.root + 'cart/add.js';
    console.log('API URL:', apiUrl);  // Debugging the API URL

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    };

    fetch(apiUrl, requestOptions)
        .then(res => res.json())
        .then(data => {
            console.log(data);
            
            setTimeout(function() {
              window.location.href = '/cart';
            }, 1000);

            if (data.status == 200) {
                console.log('Product added to cart successfully:', data);

            } else {
                console.error('Error adding product to cart:', data);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
}
</script>

<script>
    function add_diamond_builder(product_id, variant_id){
          var url = window.location.href;
          const urlObject = new URL(url);
        const selectedButtonStone = document.getElementById('selectedButtonStone');
          selectedButtonStone.innerHTML = '<span class="loader"></span> Adding ...';
        const params = new URLSearchParams(urlObject.search);
        const jewelryValue = params.get("jewelry") || '';
        const diamondValue = params.get("diamond");
        // const shapeValue = params.get("shape");

        localStorage.setItem('selectedDVariantId', variant_id);
        localStorage.setItem('DiamondId', product_id);
        localStorage.setItem('Ring_builder', '1');
        var selected_ring = localStorage.getItem('selected_ring');

        if(selected_ring ==1){
   
            // setTimeout(function() {
              window.location.href = 'https://www.diamondapp.mydiamondsearch.com/pages/complete-setting?product_id=' + product_id;
            // }, 1450);
     
        }else{

            var url = window.location.href;
            const urlObject = new URL(url);
            const shapeValue = params.get("shape");

          localStorage.setItem('selected_diamond','1');
         // setTimeout(function() {
          window.location.href = '/collections/engagement-rings?filter.p.tag=Diamond+Shape%3A+'+shapeValue;
            // window.location.href = 'https://www.diamondapp.mydiamondsearch.com/collections/engagement-rings?filter.p.tag=Diamond+Shape%3A+'+shapeValue;
         // }, 1450);
    }

    }

  

    //   document.addEventListener("DOMContentLoaded", function() {
    //       var url = window.location.href;
    //       const urlObject = new URL(url);
    //       const pathname = urlObject.pathname.toLowerCase();
    //       const params = new URLSearchParams(urlObject.search);
    //       const diamondValue = params.get("diamond");
    //     if(diamondValue == 1){
          
    //         var targetElement = document.getElementById('choose-diamond');
    //         var currentPageURL = window.location.href;
    //         if (currentPageURL === window.location.href) {
    //         targetElement.classList.add('active');
    //       }
    //     }else{

    //        var targetElement = document.getElementById('choose-ring');
    //       var currentPageURL = window.location.href;
    //       if (currentPageURL === window.location.href) {
    //       targetElement.classList.add('active');
    //      }
    //    }
    // });

</script>

<script>
   shopify_theme_changes();
   function shopify_theme_changes(){
      var shop_name = `${Shopify.shop}`;
      var data = { shop_name: shop_name };
      $.ajax({
         // url: '{{ route('create-page') }}',
         url: 'https://diamondapp.mydiamondsearch.com/diamond_products/shopify-theme-changes',  // Route for the delete-page method
         type: 'POST',
         data: data,
         success: function(response) {
            console.log(response.data);
            var text_color = response.data.text_color;
            var border_color = response.data.border_color;
            var button_background = response.data.button_background;
            var button_text_color = response.data.button_text_color;
            var button_background_hover = response.data.button_background_hover;
            var button_hover_color = response.data.button_hover_color;

            var body_color = response.data.body_color;
            var heading_color = response.data.heading_color;
            var heading_font_size = response.data.heading_font_size;
            var primary_font_size = response.data.primary_font_size;
            var input_bg = response.data.input_bg;
            var filter_font_size = response.data.filter_font_size;
            

   
   
                // Update :root variables with the correct values
               document.documentElement.style.setProperty('--text_color', text_color);
               document.documentElement.style.setProperty('--border_color', border_color);
               document.documentElement.style.setProperty('--button_background', button_background);
               document.documentElement.style.setProperty('--button_text_color', button_text_color);
               document.documentElement.style.setProperty('--button_background_hover', button_background_hover);
               document.documentElement.style.setProperty('--button_hover_color', button_hover_color);

               document.documentElement.style.setProperty('--body_color', body_color);
               document.documentElement.style.setProperty('--heading_color', heading_color);
               document.documentElement.style.setProperty('--heading_font_size', heading_font_size);
               document.documentElement.style.setProperty('--primary_font_size', primary_font_size);
               document.documentElement.style.setProperty('--input_bg', input_bg);
               document.documentElement.style.setProperty('--filter_font_size', filter_font_size);
   
               // document.querySelector('.text_color').style.color = text_color;
               // document.querySelector('.border_color').style.color = border_color;
               // document.querySelector('.button_background').style.color = button_background;
               // document.querySelector('.button_text_color').style.color = button_text_color;
               // document.querySelector('.button_background_hover').style.color = button_background_hover;
               // document.querySelector('.button_hover_color').style.color = button_hover_color;
            // $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
         },
         error: function(xhr) {
            $('#response').html('<pre>' + xhr.responseText + '</pre>');
         }
      });
   }
</script>
<!-- Make sure you include jQuery in your HTML -->
<script>
// function shortList(data) {
//     var value_form = data;
//   console.log('value_form:', value_form); 
//     var url = "https://diamondapp.mydiamondsearch.com/diamond_products/send-mail";
    
//     $.ajax({
//         url: url,
//         type: 'POST',
//         dataType: 'json',
//         headers: {
//             'Content-Type': 'application/json'
//         },
//         data: value_form,
//         success: function(data) {
//             console.log('AJAX Response:', data); // Debug the response data
          
//             } else {
//                 console.error('Invalid response or no records found.');
//             }
//         },
//         beforeSend: function() {
//             $("#page-loader").show();
//         },
//         complete: function() {
//             $("#page-loader").fadeOut();
//         }
//     });
// }
</script>


