<?php $__env->startSection('content'); ?>

<?php echo $__env->make('frontend.layout.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

<style>

body{
    background:#f8fafc;
    font-family:Arial,sans-serif;
}

/* HERO */

.hero-section{

    background:linear-gradient(135deg,#111827,#1e293b);
    border-radius:30px;
    padding:70px 50px;
    margin-bottom:45px;
    position:relative;
    overflow:hidden;

}

input.shareProduct {
    position: absolute;
    top: 10px;
    right: 10px;
}

.hero-title{

    color:#fff;
    font-size:58px;
    font-weight:900;
    line-height:1.1;

}

.hero-title span{

    color:#fbbf24;

}

.hero-text{

    color:#d1d5db;
    margin-top:18px;
    font-size:17px;
    line-height:30px;
    max-width:650px;

}

/* FILTER */

.filter-box{

    background:#fff;
    padding:24px;
    border-radius:24px;
    margin-bottom:35px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}

.form-control,
.form-select{

    height:58px;
    border-radius:16px;
    border:1px solid #e5e7eb;
    padding-left:18px;

}

.filter-btn{

    height:58px;
    width:100%;
    border:none;
    border-radius:16px;
    background:#111827;
    color:#fff;
    font-weight:800;
    font-size:16px;

}

/* PRODUCT */

.product-card{

    background:#fff;
    border-radius:24px;
    overflow:hidden;
    transition:0.3s;
    border:none;
    box-shadow:0 5px 18px rgba(0,0,0,0.06);
    height:100%;

}

.product-card:hover{

    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(0,0,0,0.10);

}

.product-image{

    width:100%;
    height:280px;
    object-fit:cover;
    background:#f3f4f6;

}

.product-content{

    padding:15px;

}

.product-content a {
    text-decoration: none;
}

.product-name{

    font-size:16px;
    font-weight:500;
    color:#111827;

}

.product-category{

    margin-top:5px;
    color:#6b7280;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;

}

.product-price {
    font-size: 20px;
    font-weight: 500;
    color: #c59d5f;
    margin-top: 6px;
    line-height: normal;
}

.buy-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    background: #dddddd;
    font-weight: 600;
    transition: 0.3s;
    padding: 10px;
    font-size: 16px;
    color: #000;
}

.buy-btn:hover{

    background:#000;
    color: #fff;

}

.pagination{

    justify-content:center;
    margin-top:15px;
    gap:10px;

}

.page-link{

    /* border:none !important; */
    border-radius:12px !important;
    color:#111827;
    font-weight:700;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;

}


.product-card{
    position:relative;
}

.product-checkbox{

    position:absolute;
    top:12px;
    left:12px;
    z-index:99;
    width:20px;
    height:20px;
    cursor:pointer;

}

.copy-success-popup{
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    z-index: 99999;
    display: none;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.share-products-box .dropdown{
    margin-top: 15px;
}

.variation-colors {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
}
.variation-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #ccc;
    transition: all .2s ease;
}

.variation-circle.yellow{
    background:#D4AF37;
}

.variation-circle.white{
    background:#F5F5F5;
}

.variation-circle.rose{
    background:#B76E79;
}

.variation-circle.active {
    border: 1px solid #000;
    /* transform: scale(1.15); */
    box-shadow: 0 0 0 2px #fff;
}

</style>

<div class="container py-5">

    

    <div class="hero-section">

        <div class="hero-title">

            Discover Luxury
            <br>

            <span>Jewelry Collection</span>

        </div>

        <div class="hero-text">

            Explore handcrafted rings, necklaces,
            bracelets and premium diamond jewelry
            collections with modern luxury design.

        </div>

    </div>

    

    <div class="filter-box">

        <div class="row g-3">

            

            <div class="col-lg-2">

                <select
                    id="limit"
                    class="form-select">

                    <option value="10">
                        Show 10
                    </option>

                    <option value="25">
                        Show 25 
                    </option>

                    <option value="50">
                        Show 50
                    </option>

                    <option value="100">
                        Show 100
                    </option>

                </select>

            </div>

            <div class="col-lg-4">

                <input
                    type="text"
                    id="search"
                    class="form-control"
                    placeholder="Search Jewellery">

            </div>

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

                <select
                    id="category"
                    class="form-select">

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

                    <option value="Ring">
                        Ring
                    </option>

                    <option value="Necklace">
                        Necklace
                    </option>

                    <option value="Bracelet">
                        Bracelet
                    </option>

                </select>

            </div>

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

                <select
                    id="sort"
                    class="form-select">

                    <option value="">
                        Sort By
                    </option>

                    <option value="low_to_high">
                        Price Low To High
                    </option>

                    <option value="high_to_low">
                        Price High To Low
                    </option>

                </select>

            </div>

        </div>

                <div class="share-products-box mb-4">

            <div class="d-flex justify-content-between align-items-center flex-wrap">

                <div class="d-flex gap-2">

                   <div class="dropdown mt-3">

                    <button
                        class="btn btn-success dropdown-toggle"
                        type="button"
                        data-bs-toggle="dropdown">

                        Whatsapp

                    </button>

                    <ul class="dropdown-menu">

                        <li>
                            <a
                                href="javascript:void(0)"
                                class="dropdown-item"
                                id="shortLink">

                                With Price

                            </a>
                        </li>

                        <li>
                            <a
                                href="javascript:void(0)"
                                class="dropdown-item"
                                id="shortLinkWOP">

                                Without Price

                            </a>
                        </li>

                </ul>

        </div>

                    <!-- <button
                        type="button"
                        class="btn btn-primary"
                        id="shareEmail">

                        Share Email

                    </button> -->

                </div>

            </div>

        </div>

    </div>

    

    <div class="row g-4" id="productData"></div>

</div>

<?php echo $__env->make('frontend.layout.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css">

<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>

<script>

$(document).ready(function(){

    loadProducts();

});

function loadProducts(page = 1)
{

    $.ajax({

        url:"<?php echo e(route('products')); ?>",

        type:"GET",

        data:{

            page:page,
            search:$('#search').val(),
            category:$('#category').val(),
            sort:$('#sort').val(),
            limit:$('#limit').val()

        },

        beforeSend:function(){

            $('#productData').html(`

                <div class="text-center p-5">

                    Loading...

                </div>

            `);

        },

        success:function(response){

            $('#productData').html(response);

        }

    });

 }

    $('#filterBtn').click(function(){

        loadProducts();

    });

    $('#category,#sort,#limit').change(function(){

        loadProducts();

    });

    var typingTimer;

    $('#search').keyup(function(){

        clearTimeout(typingTimer);

        typingTimer = setTimeout(function(){

            loadProducts();

        },500);

    });

    $(document).on(
        'click',
        '.pagination a',
        function(e){

            e.preventDefault();

            let page =
                $(this)
                .attr('href')
                .split('page=')[1];

            loadProducts(page);

    });


 $(document).on(
    'click',
    '.addToCartBtn',
    function(){

        let product_id = $(this).data('id');
        let metal      = $(this).data('metal'); // selected variation

        $.ajax({

            url:"<?php echo e(route('add.to.cart')); ?>",

            type:"POST",

            data:{

                _token:"<?php echo e(csrf_token()); ?>",

                product_id: product_id,

                metal: metal

            },

            success:function(response){

                $('.cartCount')
                    .show()
                    .text(response.cartCount);

                $('.cart-success-popup').remove();

                $('body').append(`
                    <div class="cart-success-popup">
                        Product Added To Cart (${metal})
                    </div>
                `);

                $('.cart-success-popup')
                    .fadeIn()
                    .delay(1500)
                    .fadeOut(500, function(){
                        $(this).remove();
                    });

            }

        });
});

    function updateSelectedCount()
    {
        // $('#selectedCount').text(
        //     $('.shareProduct:checked').length
        // );
    }

    $(document).on(
        'change',
        '.shareProduct',
        function(){

            updateSelectedCount();

    });


    $('#shareEmail').click(function(){

        let body = 'Jewelry Collection\n\n';

        $('.shareProduct:checked').each(function(){

            body +=
                $(this).data('name') +
                '\n' +
                $(this).data('url') +
                '\n\n';

        });

        if(body === 'Jewelry Collection\n\n'){
            alert('Please select products');
            return;
        }

        window.location.href =
            'mailto:?subject=' +
            encodeURIComponent('Jewelry Collection') +
            '&body=' +
            encodeURIComponent(body);

    });

    
$('#shortLink').click(function () {

    copySelectedProducts(1);

});

$('#shortLinkWOP').click(function () {

    copySelectedProducts(0);

});

function copySelectedProducts(withPrice)
{
    let checked = $('.shareProduct:checked');

    if(checked.length == 0){

        alert('Please select at least one product');
        return;
    }

    let copiedText = '';

    checked.each(function(index){

        if(index != 0){
            copiedText += '__________________________________\n';
        }

        copiedText += 'Product : ' + $(this).data('name') + '\n';
        copiedText += 'Sku : ' + $(this).data('sku') + '\n';
        copiedText += 'Type : ' + $(this).data('type') + '\n';
        copiedText += 'Color : ' + $(this).data('metal_color') + '\n';
        copiedText += 'Description : ' + $(this).data('description') + '\n';
        copiedText += 'Net weight : ' + $(this).data('net_weight') + '\n';
        copiedText += 'Metal kt : ' + $(this).data('metal_kt') + '\n';

        if(withPrice == 1){
            copiedText += 'Price : $' + $(this).data('price') + '\n';
        }

        copiedText += 'Link : ' + $(this).data('url') + '\n\n';

    });

    let textarea = document.createElement('textarea');

    textarea.value = copiedText;

    document.body.appendChild(textarea);

    textarea.select();

    try {

        let copied = document.execCommand('copy');

        if(copied){

            $('.copy-success-popup').remove();

            $('body').append(`
                <div class="copy-success-popup">
                    Product details copied successfully
                </div>
            `);

            $('.copy-success-popup')
                .fadeIn()
                .delay(2000)
                .fadeOut(500, function(){
                    $(this).remove();
                });

        } else {

            alert('Copy failed');
        }

    } catch(err){

        console.log(err);

        alert('Copy failed');
    }

    document.body.removeChild(textarea);
}


$(document).on('click', '.variation-circle', function () {

    let metal = $(this).data('metal');

    let card = $(this).closest('.product-card');

    card.find('.variation-circle')
        .removeClass('active');

    $(this).addClass('active');

    let product_id = card.find('.addToCartBtn').data('id');

    $.ajax({

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

        type: "POST",

        data: {
            _token: "<?php echo e(csrf_token()); ?>",
            product_id: product_id,
            metal_color: metal
        },

        success: function(response){

            card.find('.product-image')
                .attr('src', response.image);

            card.find('.product-price')
                .html('$' + response.price);

            card.find('.product-category')
                .html(response.sku);

            card.find('.addToCartBtn')
                .attr('data-id', response.id)
                .attr('data-metal', metal);
        }
    });

});



</script>


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