<?php $__env->startSection('content'); ?>
    <!-- You are: (shop domain name) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <p>You are: <?php echo e($shopDomain ?? Auth::user()->name); ?></p>

    <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/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer=""></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer=""></script>
<link href="https://www.amipi.com/css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://amipi.com/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://amipi.com/slick/slick-theme.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>
    <style>
        .flex-row {
            position: relative;
        }

        .color-box {
            position: absolute;
            width: 30px;
        }

        .app-content h1 {
            text-align: center;
            margin-bottom: 15px;
        }

        .app-card .color-input {
            padding-left: 38px;
        }

        .color-theme {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }

        .color-theme label {
            width: 187px;
            display: inline-block;
            text-align: left;
            font-size: 15px;
        }

        .heading-input {
            padding-left: 8px !important;
        }

        .color-theme input {
            border: 1px solid #CCC;
            border-radius: 4px;
            padding: 0px;
            height: 30px;
        }

        .color-theme label+input {
            padding: 0;
        }

        .color-theme.retailer-id input {
            padding: 10px;
            height: 38px;
        }

        button#delete-page-btn {
            background: #ff0000;
            border-color: #ff0000;
        }

        button {
            background: #000;
            padding: 10px;
            color: #FFF;
            border-radius: 7px;
            font-size: 15px;
            cursor: pointer;
        }

        .welcom-de .col-sm-4:nth-child(2) {
            border-left: 1px solid #CCC;
            border-right: 1px solid #CCC;
        }

        .color-theme.retailer-id label {
            margin-bottom: 0;
            padding: 12px;
        }

        .color-theme.retailer-id {
            background: #f1f1f1;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border-radius: 15px;
            margin: 20px auto;
        }

        /* .black-box {
                background: black;
                height: 100%;
            } */

        /* .acc-drop {
                margin-bottom: 25px;
            } */
        .row.welcom-de {
            margin-bottom: 25px;
        }

        .acc-drop.black-box {
            background: #000;
            height: 100%;
        }

        .acc-drop .accordion-button:focus {
            z-index: 3;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: none;
        }

        .acc-drop .accordion-button {
            font-weight: 500;
            border-radius:10px !important
        }

        .acc-drop .accordion-item {
            border: 0;
            box-shadow: 0px 0px 13px rgba(0,0,0,10%);
            border-radius: 10px;
        }

        .acc-drop .accordion-button:not(.collapsed) {
            background-color: #eee;
            color: #000;
        }

        .acc-drop div#accordionFlushExample {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .acc-drop .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .acc-drop .accordion-flush .accordion-collapse {
            box-shadow: 0px 0px 13px rgba(0,0,0,10%);
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        /*  .page-width.page-width--narrow {*/
                                    /*    background: var(--button_background_pr) !important;*/
                                    /*}*/
                                    /* Adjust scrollbar height for horizontal scrollbars */
                                    ::-webkit-scrollbar {
                                        height: 5px;
                                        /* Adjust height of horizontal scrollbar */
                                        width: 8px;
                                        /* Adjust width of vertical scrollbar */
                                    }

                                    /* Style the scrollbar thumb */
                                    ::-webkit-scrollbar-thumb {
                                        background: #888;
                                        border-radius: 5px;
                                    }

                                    /* Style the scrollbar track */
                                    ::-webkit-scrollbar-track {
                                        background: #f1f1f1;
                                    }

                                    .container {
                                        max-width: 1600px;
                                        margin: auto;
                                        width: 100%
                                    }

                                    .slider_shape {
                                        display: flex;
                                        overflow-y: auto;
                                        overflow-x: visible !important;
                                        height: 53px;
                                    }

                                    .slider_shape li {
                                        display: flex !important;
                                        flex: 0 0 23%;
                                        margin-right: 8px;
                                        /* padding: 16px; */
                                    }

                                    .quality.shape-caros.m-20 li p.tool-hover {
                                        display: block;
                                        position: absolute;
                                        background: #f1f1f1;
                                        left: 0;
                                        bottom: -10px;
                                        font-size: 11px;
                                        padding: 4px 7px !important;
                                        color: #2c3b5b;
                                        border-radius: 5px;
                                        right: 0;
                                    }

                                    .main {
                                        font-family: Arial;
                                        width: 500px;
                                        display: block;
                                        margin: 0 auto;
                                    }

                                    .action {
                                        display: block;
                                        margin: 100px auto;
                                        width: 100%;
                                        text-align: center;
                                    }

                                    .action a {
                                        display: inline-block;
                                        padding: 5px 10px;
                                        background: var(--button_background_pr) !important;
                                        color: var(--button_text_color_pr) !important;
                                        text-decoration: none;
                                        border-radius: 5px;
                                    }

                                    .action a:hover {
                                        background: #000;
                                    }

                                    div#grid_diamond {
                                        display: flex;
                                        flex-wrap: wrap;
                                    }

                                    p.product-description__title a {
                                        color: var(--heading_color_text_pr) !important;
                                        font-size:var(--primary_font_size) !important
                                    }

                                    .shape-caros h3 {
                                        color: var(--text_color_pr) !important
                                    }

                                    .product-description ul.list-inline.slider_shape li:hover {
                                        border-color: var(--border_color_pr) !important
                                    }

                                    .quality.shape-caros.m-20 label {
                                        color: var(--text_color_pr) !important
                                    }

                                    .stud-subtitle {
                                        color: var(--text_color_pr) !important
                                    }

                                    .studlistscroll p {
                                        color: var(--text_color_pr) !important
                                    }

                                    .product-description__price p {
                                        color: var(--text_color_pr) !important;
                                        text-decoration: none
                                    }

                                    .product-description__price a {
                                        text-decoration: none
                                    }

                                    .img-text-earth span {
                                        color: var(--text_color_pr) !important
                                    }

                                    .product-description__price p {
                                        color: var(--text_color_pr) !important
                                    }

                                    .product-description-variation-details.d-flex p {
                                        color: var(--text_color_pr) !important
                                    }

                                    #ProductListTable .prod-list-block {
                                        height: auto !important
                                    }

                                    .prod-list-block.product_card {
                                        margin: 15px;
                                    }

                                    .quality.shape-caros.m-20 label {
                                        width: auto !important
                                    }

                                    label {
                                        color: #000 !important
                                    }

                                    .quality.shape-caros.m-20 li.active p.tool-hover, .metal-type-detail li.slick-current p.tool-hover, .metal-type-detail li:hover p.tool-hover {
                                        background: red !important;
                                        color: #FFF !important
                                    }

                                    .product-description .list-inline {
                                        margin: 0 !important;
                                        padding: 0 !important
                                    }

                                    .col-xs-12.col-sm-12.product-description__price {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        padding: 7px 15px
                                    }

                                    .product_col.col-sm-3.studz {
                                        padding-bottom: 20px;
                                        margin: auto;
                                    }

                                    .stud-action-filter ul.action.product-d-action .common-btn {
                                        padding: 0;
                                        margin: 0
                                    }

                                    .product-description {
                                        padding: 15px;
                                    }

                                    .img-text-earth svg {
                                        width: 30px !important;
                                        margin-right: 8px;
                                        height: 30px;
                                    }

                                    .col-xs-12.col-sm-12.product-description-variation-details.d-flex.justify-space-between.c_stud_product-description-variation-details {
                                        padding: 7px 15px;
                                        font-size: 14px;
                                    }

                                    .stud-action-filter {
                                        padding: 7px 15px;
                                    }

                                    p.product-description__title {
                                        height: 40px
                                    }

                                    .prod-img.product_thumb img {
                                        height: 350px;
                                        flex: auto;
                                    }

                                    .stud-action-filter ul.action.product-d-action {
                                        padding: 0 !important;
                                    }

                                    /* filter */
                                    .filter-diamond-design {
                                        margin-bottom: 25px;
                                    }

                                    .top-filter-btn {
                                        position: relative;
                                    }

                                    .top-filter-btn .btn-group {
                                        border: 1px solid var(--border_color_pr) !important;
                                        background: #FFF;
                                    }

                                    .top-filter-btn .btn-group label.active {
                                        background: var(--button_background_pr) !important;
                                        color: var(--button_text_color_pr) !important;
                                    }

                                    .top-filter-btn .btn-group label {
                                        font-size: 15px !important;
                                        line-height: 35px !important;
                                        margin-bottom: 0 !important;
                                        border: 0;
                                        color: var(--text_color_pr) !important;
                                        background: transparent !important;
                                        padding: 2px 10px;
                                    }

                                    /* .top-filter-btn .btn-group label input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
} */
                                    .filter input {
                                        color: var(--text_color_pr) !important;
                                        height: 32px;
                                        border-radius: 0px;
                                        padding: 10px;
                                        font-size: 12px;
                                        border: 1px solid #ccc;
                                        width: 110px;
                                        margin-top: 5px;
                                        text-align: center;
                                        position: relative;
                                    }

                                    .top-filter-btn .btn-group label.active {
                                        background: var(--button_background_pr) !important;
                                        color: var(--button_text_color_pr) !important;
                                        font-size: 15px !important;
                                        line-height: 35px !important;
                                        font-weight: 400;
                                    }

                                    .top-filter-btn .ico svg {
                                        width: 40px;
                                        height: 40px;
                                    }

                                    .metal-stud-filter label {
                                        list-style: none;
                                        width: 16.66%;
                                        text-align: center;
                                        margin: 0 15px 0 0;
                                        border-radius: 5px;
                                        cursor: pointer;
                                        margin-bottom: 0;
                                        width: 100%;
                                        padding: 0;
                                        line-height: 33px;
                                    }

                                    .studs-filter.width-1440 .metal-stud-filter label.active {
                                        color: #2c3b5b !important;
                                        font-size: 16px !important;
                                        box-shadow: 2px 5px 10px rgba(35, 31, 32, 60%);
                                        font-weight: 400;
                                        border: 1px solid #2c3b5b !important;
                                    }

                                    .prod-img.product_thumb img {
                                        margin: auto !important
                                    }
                                    /*  .page-width.page-width--narrow {*/
/*    background: var(--button_background_pr) !important;*/
/*}*/
/* Adjust scrollbar height for horizontal scrollbars */
::-webkit-scrollbar {
  height: 5px; /* Adjust height of horizontal scrollbar */
  width: 8px; /* Adjust width of vertical scrollbar */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container{max-width:1600px;margin:auto;width:100%}
.slider_shape {
    display: flex;
    overflow-y: auto;
    overflow-x: visible !important;
    height: 53px;
}
.slider_shape li {
    display: flex !important;
    flex: 0 0 23%;
    margin-right: 8px;
    /* padding: 16px; */
}
.quality.shape-caros.m-20 li p.tool-hover {
    display: block;
    position: absolute;
    background: #f1f1f1;
    left: 0;
    bottom: -10px;
    font-size: 11px;
    padding: 4px 7px !important;
    color: #2c3b5b;
    border-radius: 5px;
    right: 0;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}

.action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.action a {
  display:inline-block;
  padding:5px 10px; 
  background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
  text-decoration:none;
  border-radius:5px;
}
.action a:hover{
  background:#000;
}
div#grid_diamond {
    display: flex;
    flex-wrap: wrap;
}

p.product-description__title a{color:var(--heading_color) !important;font-size:var(--primary_font_size) !important}
.shape-caros h3{color:var(--text_color_pr) !important}
.product-description ul.list-inline.slider_shape li:hover{border-color:var(--border_color_pr) !important}
.quality.shape-caros.m-20 label{color:var(--text_color_pr) !important}
.stud-subtitle{color:var(--text_color_pr) !important}
.studlistscroll p{color:var(--text_color_pr) !important}
.product-description__price p{color:var(--text_color_pr) !important;text-decoration:none}
.product-description__price a{text-decoration:none}
.img-text-earth span{color:var(--text_color_pr) !important}
.product-description__price p{color:var(--text_color_pr) !important}
.product-description-variation-details.d-flex p{color:var(--text_color_pr) !important}

   #ProductListTable .prod-list-block{height:auto !important}
   .prod-list-block.product_card {
    margin: 15px;
}
   .quality.shape-caros.m-20 label{width:auto !important}
   label{color:#000 !important}
   .quality.shape-caros.m-20 li.active p.tool-hover, .metal-type-detail li.slick-current p.tool-hover, .metal-type-detail li:hover p.tool-hover{background:red !important;color:#FFF !important}
   .product-description .list-inline{margin:0 !important;padding:0 !important}
   .col-xs-12.col-sm-12.product-description__price {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding:7px 15px
   }
   .product_col.col-sm-3.studz {
    padding-bottom: 20px;
    margin: auto;
}
.stud-action-filter ul.action.product-d-action .common-btn{padding:0;margin:0}
.product-description{padding: 15px;}
   .img-text-earth svg {
   width: 30px !important;
   margin-right: 8px;
   height: 30px;
   }
   .col-xs-12.col-sm-12.product-description-variation-details.d-flex.justify-space-between.c_stud_product-description-variation-details {
   padding: 7px 15px;
   font-size: 14px;
   }
   .stud-action-filter {
    padding: 7px 15px;
}
p.product-description__title{height:40px}

.prod-img.product_thumb img {
    height: 350px;
    flex: auto;
}
.stud-action-filter ul.action.product-d-action {
    padding: 0 !important;
}
   /* filter */
   .filter-diamond-design {
    margin-bottom: 25px;
}
.top-filter-btn {
    position: relative;
}

.top-filter-btn .btn-group.btn-group-justified {
    width: auto;
}
p.blank-space{margin: 0;}
.top-filter-btn .btn-group {
    border: 1px solid var(--border_color_pr) !important;
    background: #FFF;
}
.top-filter-btn .btn-group label.active {
    background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
}
.top-filter-btn .btn-group label {
    font-size: 15px !important;
    line-height: 35px !important;
    margin-bottom: 0 !important;
    border: 0;
    color: var(--text_color_pr) !important;
    background: transparent !important;
    padding: 2px 10px;
}
/* .top-filter-btn .btn-group label input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
} */
.filter input {
   color: var(--text_color_pr) !important;
    height: 32px;
    border-radius: 0px;
    padding: 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    width: 110px;
    margin-top: 5px;
    text-align: center;
    position: relative;
}
.top-filter-btn .btn-group label.active {
    background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
    font-size: 15px !important;
    line-height: 35px !important;
    font-weight: 400;
}
.top-filter-btn .ico svg {
    width: 40px;
    height: 40px;
}
.metal-stud-filter label {
    list-style: none;
    width: 16.66%;
    text-align: center;
    margin: 0 15px 0 0;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    width: 100%;
    padding: 0;
    line-height: 33px;
}
.studs-filter.width-1440 .metal-stud-filter label.active {
    color: #2c3b5b !important;
    font-size: 16px !important;
    box-shadow: 2px 5px 10px rgba(35, 31, 32, 60%);
    font-weight: 400;
    border: 1px solid #2c3b5b !important;
}
.prod-img.product_thumb img{margin:auto !important}
    </style>
<?php foreach ($data as $theme_data): $theme_css =  $data->toArray()[0]; ?>
    <style>
        :root {
            --heading_color: <?php echo $theme_data->heading_color; ?>;
            --text_color_pr: <?php echo $theme_data->text_color; ?>;
            --border_color: <?php echo $theme_data->border_color; ?>;
            --button_background_pr: <?php echo $theme_data->button_background; ?>;
            --button_text_color_pr: <?php echo $theme_data->button_text_color; ?>;
            --button_background_hover_pr: <?php echo $theme_data->button_background_hover; ?>;
            --button_hover_color: <?php echo $theme_data->button_hover_color; ?>;
            --input_bg: <?php echo $theme_data->input_bg; ?>;
            --font_size: <?php echo $theme_data->heading_font_size; ?>;
             --primary_link_color: <?php echo $theme_data->primary_link_color; ?>;
        }
    </style>
<?php endforeach; ?>
    <h1>Products Page</h1>

    <div class="d-flex">
        <div class="color-theme retailer-id">
            <label for="retaillerid">Retailler Id</label>
            <input type="text" name="retaillerid" id="retaillerid" placeholder="Retailer ID"
                value="<?php echo e(isset($theme_css['retaillerid']) ? $theme_css['retaillerid'] : ''); ?>" />
        </div>

    </div>
    <div class="container">
        <div class="row welcom-de">
            <div class="col-md-6">
                <div class="acc-drop">
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                    Heading
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            
                                                <div class="app-card">
                                                    <div class="color-theme">
                                                        <label for="heading_color">Heading Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="heading_color"
                                                                    name="heading_color"
                                                                    value="<?php echo e(isset($theme_css['heading_color']) ? $theme_css['heading_color'] : '#000000'); ?>"
                                                                    onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="heading_color_text"
                                                                    name="heading_color"
                                                                    value="<?php echo e(isset($theme_css['heading_color']) ? $theme_css['heading_color'] : '#000000'); ?>"
                                                                    onchange="syncInputs(this);">
                                                        </div>
                                                    </div>
                                                    <div class="color-theme">
                                                        <label for="heading_font_size">Heading Font Size</label>
                                                        <div class="flex-row">
                                                            <input type="text" class="heading-input" id="heading_font_size"
                                                                name="heading_font_size"
                                                                value="<?php echo e(isset($theme_css['heading_font_size']) ? $theme_css['heading_font_size']: '16px'); ?>">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="sub_heading_font_size">Sub Heading Font Size</label>
                                                        <div class="flex-row">
                                                            <input type="text" class="heading-input"
                                                                id="sub_heading_font_size" name="sub_heading_font_size"
                                                                value="<?php echo e(isset($theme_css['sub_heading_font_size']) ? $theme_css['sub_heading_font_size'] : '16px'); ?>">
                                                        </div>
                                                    </div>
                                                 
                                                </div>
                                                
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                    aria-controls="flush-collapseTwo">
                                    Font
                                </button>
                            </h2>
                            <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            
                                                <div class="app-card">


                                                    <div class="color-theme">
                                                        <label for="filter_font_size">Filter Title Font Size</label>
                                                        <div class="flex-row">
                                                            <input type="text" class="heading-input" id="filter_font_size"
                                                                name="filter_font_size"
                                                                value="<?php echo e(isset($theme_css['filter_font_size']) ? $theme_css['filter_font_size'] : '16px'); ?>">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="primary_font_size">Primary Font Size</label>
                                                        <div class="flex-row">
                                                            <input type="text" class="heading-input" id="primary_font_size"
                                                                name="primary_font_size"
                                                                value="<?php echo e(isset($theme_css['primary_font_size']) ? $theme_css['primary_font_size'] : '16px'); ?>">
                                                        </div>
                                                    </div>
                                                    <div class="color-theme">
                                                        <label for="body_color">Body</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="body_color"
                                                                name="body_color"
                                                                value="<?php echo e(isset($theme_css['body_color']) ? $theme_css['body_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="body_color_text"
                                                                name="body_color"
                                                                value="<?php echo e(isset($theme_css['body_color']) ? $theme_css['body_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="text_color">Primary Text Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="text_color"
                                                                name="text_color"
                                                                value="<?php echo e(isset($theme_css['text_color']) ? $theme_css['text_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="text_color_text"
                                                                name="text_color"
                                                                value="<?php echo e(isset($theme_css['text_color']) ? $theme_css['text_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>
                                                    <div class="color-theme">
                                                        <label for="input_bg">Text Input Box</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="input_bg"
                                                                name="input_bg"
                                                                value="<?php echo e(isset($theme_css['input_bg']) ? $theme_css['input_bg'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="input_bg_text"
                                                                name="input_bg"
                                                                value="<?php echo e(isset($theme_css['input_bg']) ? $theme_css['input_bg'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="text_color">Primary Link Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="primary_link_color"
                                                                name="primary_link_color"
                                                                value="<?php echo e(isset($theme_css['primary_link_color']) ? $theme_css['primary_link_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="primary_link_color"
                                                                name="primary_link_color"
                                                                value="<?php echo e(isset($theme_css['primary_link_color']) ? $theme_css['primary_link_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseThree" aria-expanded="false"
                                    aria-controls="flush-collapseThree">
                                    Button
                                </button>
                            </h2>
                            <div id="flush-collapseThree" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            
                                                <div class="app-card">
                                                    <div class="color-theme">
                                                        <label for="border_color">Border Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="border_color"
                                                                name="border_color"
                                                                value="<?php echo e(isset($theme_css['border_color']) ? $theme_css['border_color'] : '#0000ff'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input" id="border_color_text"
                                                                name="border_color"
                                                                value="<?php echo e(isset($theme_css['border_color']) ? $theme_css['border_color'] : '#0000ff'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="button_background">Button Background</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="button_background"
                                                                name="button_background"
                                                                value="<?php echo e(isset($theme_css['button_background']) ? $theme_css['button_background'] : '#ff0000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input"
                                                                id="button_background_text" name="button_background"
                                                                value="<?php echo e(isset($theme_css['button_background']) ? $theme_css['button_background'] : '#ff0000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="button_text_color">Button Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="button_text_color"
                                                                name="button_text_color"
                                                                value="<?php echo e(isset($theme_css['button_text_color']) ? $theme_css['button_text_color'] : '#ffffff'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input"
                                                                id="button_text_color_text" name="button_text_color"
                                                                value="<?php echo e(isset($theme_css['button_text_color']) ? $theme_css['button_text_color'] : '#ffffff'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="button_background_hover">Button Hover</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box"
                                                                id="button_background_hover" name="button_background_hover"
                                                                value="<?php echo e(isset($theme_css['button_background_hover']) ? $theme_css['button_background_hover'] : '#cccccc'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input"
                                                                id="button_background_hover_text"
                                                                name="button_background_hover"
                                                                value="<?php echo e(isset($theme_css['button_background_hover']) ? $theme_css['button_background_hover'] : '#cccccc'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                                    <div class="color-theme">
                                                        <label for="button_hover_color">Button Hover Color</label>
                                                        <div class="flex-row">
                                                            <input type="color" class="color-box" id="button_hover_color"
                                                                name="button_hover_color"
                                                                value="<?php echo e(isset($theme_css['button_hover_color']) ? $theme_css['button_hover_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                            <input type="text" class="color-input"
                                                                id="button_hover_color_text" name="button_hover_color"
                                                                value="<?php echo e(isset($theme_css['button_hover_color']) ? $theme_css['button_hover_color'] : '#000000'); ?>"
                                                                onchange="syncInputs(this);">
                                                        </div>
                                                    </div>

                                               

                                                </div>
                                                
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="grid_diamonds">
                <div class="product_col col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 studz col-xs-12 StudActiveClass" id="stud_div_14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings">
                    <div class="prod-list-block product_card">
                        <div id="data_loader_product_variation_2944650" style="display: none;" align="center" class="button-loader">
                        <img src="https://www.amipi.com/images/loader.gif">
                        </div>
                        <div id="StudMainImageDiv-2944650">
                        <div class="CategoryProductListIMG_2944650 prod-img product_thumb">
                            <input type="hidden" id="stud_2944650" name="stud_2944650" value="/pages/jewelry-detalis?stock_number=2944650">
                            
                            <a target="_blank" href="/pages/jewelry-detalis?stock_number=2944650" style=" cursor:pointer"> <img src="https://www.mydiamondsearch.com/ampvd/product_images/4040_Main_W.jpg" alt="14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings" title="14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings" class="14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings" id="product-variation-link-img-2944650" 1303="">
                            </a><a target="_blank " href="/pages/jewelry-detalis?stock_number=2944650">
                            <img src="https://www.mydiamondsearch.com/ampvd/product_images/4040_Main_W.jpg" alt="14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings" title="14K White Gold 1/2 cttw G-H I1 4 Prong Martini Pushback Solitaire Earrings" style="display: none;" class="CategoryProductListIMG_2944650" 1321=""> </a>
                            <div class="overlay" style="display: none;">
                                <div class="btm-btn"> <a class="common-btn" style="cursor:pointer;" onclick="ShowQuickViewProductBox('2944650','view');" title="View Details"><i class="fa fa-eye" aria-hidden="true"></i></a>
                                    <a id="Product_List_WishList-2944650" onclick="AddToWishList('2944650','Product_List_');" class="wishlist-btn AddWishListClass-2944650" style=" cursor:pointer; " title="Add to Wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i></a> <a id="Product_List_RemoveWishList-2944650" onclick="RemoveFromWishList('2944650','Product_List_');" class="wishlist-btn-active RemoveWishListClass-2944650" style=" cursor:pointer;  display:none; " title="Remove From Wishlist"> <i class="fa fa-heart" aria-hidden="true"></i></a>
                                    <a style=" cursor:pointer; " class="AddCompareButtClass-2944650 wishlist-btn" onclick="Product_QV_AddToCompareFunction('2944650');" alt="Add To Compare" title="Compare Products"> <i class="fa fa-exchange" aria-hidden="true"></i></a>
                                    <a style=" cursor:pointer; display:none;" class="RemoveCompareButtClass-2944650 wishlist-btn-active" onclick="Product_QV_RemoveFromCompareFunction('2944650');" alt="Remove From Compare" title="Remove From Compare"> <i class="fa fa-exchange" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                        </div>
                    
                        <div class="product-description c_stud_product_discription">
                        <p class="product-description__title  detail-three  stud-para">
                            <a id="product-title-link-2944650" href="/pages/jewelry-detalis?stock_number=2944650" target="_blank" style="cursor:pointer">
                            4 Prong Martini Solitaire Pushback Stud Earrings								</a>
                            
                        </p>            
                        </div>
                        <!-- category and price -->
                        <a id="product-variation-link-ES40" class="detail-bar product-variation-link-ES40 product-variation-detail" href="/pages/jewelry-detalis?stock_number=2944650" target="_blank">
                        </a>
                        <div class="col-xs-12 col-sm-12 product-description__price">
                        <a id="product-variation-link-ES40" class="detail-bar product-variation-link-ES40 product-variation-detail" href="/pages/jewelry-detalis?stock_number=2944650" target="_blank">
                            <p id="product-variation-name-ES40"> 1/2 ct <span class="fw-light">to</span> 2 ct</p>
                        </a>
                        
                        <a id="product-variation-link-price-ES40" class="detail-bar product-variation-link-ES40 product-variation-detail" href="/pages/jewelry-detalis?stock_number=2944650" target="_blank">
                            <p id="product-variation-price-ES40">$ 368 <span class="fw-light"> &amp; Up</span></p>
                        </a>
                        </div>
                        
                        <div class="col-xs-12 col-sm-12 product-description-variation-details d-flex justify-space-between c_stud_product-description-variation-details">
                        <p id="product-variation-style-no-ES40">#ES40</p>
                        <p id="product-variation-delivery-days-ES40" class="ship"><i class="fa fa-truck" aria-hidden="true"></i> Ships by
                            Tue, Nov 12													
                        </p>
                        </div>
                        <div id="product-description-variation-details-action-ES40" class="c_stud_product-description-variation-details-action col-xs-12 col-sm-12 product-description-variation-details-action-ES40 stud-action-filter" style="display:none">
                        <ul class="action product-d-action">
                            <li class="common-btn svg-design light-fill" 3315="">
                                <a id="product-variation-link-details-btn-ES40" href="/pages/jewelry-detalis?stock_number=2944650" target="_blank" title="Customize">
                                    <svg id="fi_3401263" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                                    <g>
                                        <path d="m498.941 200.291-37.329-7.465c-4.107-13.613-9.55-26.757-16.255-39.257l21.113-31.669c3.967-5.95 3.183-13.872-1.874-18.927l-56.568-56.569c-5.056-5.056-12.978-5.84-18.927-1.875l-31.671 21.113c-12.499-6.704-25.643-12.146-39.257-16.254l-7.465-37.33c-1.401-7.011-7.558-12.058-14.708-12.058h-80c-7.15 0-13.307 5.047-14.709 12.058l-7.465 37.33c-13.614 4.108-26.758 9.551-39.257 16.254l-31.671-21.113c-5.948-3.965-13.871-3.181-18.927 1.875l-56.568 56.569c-5.057 5.056-5.841 12.978-1.874 18.927l21.113 31.669c-6.705 12.5-12.147 25.644-16.255 39.257l-37.329 7.465c-7.011 1.402-12.058 7.559-12.058 14.709v80c0 7.15 5.047 13.307 12.059 14.708l37.329 7.466c4.107 13.612 9.55 26.756 16.255 39.256l-21.113 31.67c-3.967 5.949-3.182 13.871 1.874 18.927l56.568 56.568c5.057 5.057 12.978 5.841 18.927 1.875l31.022-20.68v-94.165c-23.492-25.005-37.921-58.6-37.921-95.625 0-77.32 62.68-140 140-140s140 62.68 140 140c0 37.025-14.429 70.62-37.921 95.625v94.165l31.022 20.68c2.538 1.692 5.435 2.52 8.315 2.52 3.871 0 7.713-1.495 10.611-4.394l56.568-56.568c5.056-5.056 5.841-12.978 1.874-18.927l-21.113-31.67c6.705-12.5 12.147-25.644 16.255-39.256l37.329-7.466c7.013-1.402 12.06-7.559 12.06-14.709v-80c0-7.15-5.047-13.307-12.059-14.709z"></path>
                                        <path d="m303.519 172.811c-7.549-4.373-17.127.267-18.374 8.901l-9.145 63.288h-40l-9.144-63.288c-1.248-8.634-10.825-13.274-18.374-8.901-29.289 16.965-47.482 48.459-47.482 82.189 0 36.552 20.47 69.25 53.421 85.333l1.579.771v155.896c0 8.284 6.716 15 15 15h50c8.284 0 15-6.716 15-15v-155.896l1.579-.771c32.951-16.083 53.421-48.781 53.421-85.333 0-33.73-18.193-65.224-47.481-82.189z"></path>
                                    </g>
                                    </svg>
                                </a>
                            </li>
                            <li 1732="" class="common-btn" style="cursor:pointer;" onclick="ProductShowShareBox('2944650');" title="Share With A Friend"><i class="fa fa-share-alt" aria-hidden="true"></i></li>
                            <li id="WishList-2944650" onclick="AddToWishList('2944650','');" style="cursor:pointer;" title="Add to Wishlist" class="wishlist-btn common-btn">
                                <i class="fa fa-heart" aria-hidden="true"></i>
                            </li>
                            <li style="display:none;" id="RemoveWishList-2944650" onclick="RemoveFromWishList('2944650','');" title="Remove From Wishlist" class="wishlist-btn-active common-btn">
                                <i class="fa fa-heart" aria-hidden="true"></i>
                            </li>
                            <li style=" cursor:pointer; " class="AddCompareButtClass-2944650 wishlist-btn common-btn" onclick="Product_QV_AddToCompareFunction('2944650');" alt="Add To Compare" title="Add To Compare"><i class="fa fa-compress" aria-hidden="true"></i></li>
                            <li style=" cursor:pointer; display:none;" class="RemoveCompareButtClass-2944650 wishlist-btn-active common-btn" onclick="Product_QV_RemoveFromCompareFunction('2944650');" alt="Remove From Compare" title="Remove From Compare"><i class="fa fa-compress" aria-hidden="true"></i></li>
                            <li class="common-btn" style="cursor:pointer;" onclick="AddToCartGridFunction('2944650','ES40')" title="Add To Cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
                        </ul>
                        </div>
                        <!--<span class="price"> <strong>
                        $948.00 											</strong> </span>-->
                    </div>
                </div>
                </div>
            </div>
        </div>

        <button id="create-page-btn">Create product list Page</button>

        <button id="delete-page-btn">Delete product list Pages</button>
   

        <?php foreach ($records as $row) {
        // echo '<pre>';
        // print_r($row);
        // echo '</pre>';
    } ?>


        <div id="response"></div>
        <script>
            function syncInputs(input) {
                const inputId = input.id; // Get the ID of the input that triggered the event
                const value = input.value; // Get the value of the input
                const isColorInput = input.type === 'color'; // Check if it's a color input
                const targetId = isColorInput ?
                    inputId + "_text" // For color input, target the corresponding text input
                    :
                    inputId.replace("_text", ""); // For text input, target the corresponding color input

                // Validate the input value
                const isValidColor = /^#[0-9A-F]{6}$/i.test(value) || /^#[0-9A-F]{3}$/i.test(value);
                if (!isValidColor) {
                    alert("Please enter a valid color code!");
                    return;
                }

                // Update the corresponding input
                const targetInput = document.getElementById(targetId);
                if (targetInput) {
                    targetInput.value = value;
                } else {
                    console.error(`Input with id "${targetId}" not found.`);
                }
            }
        </script>


        <script>
            // var userId = "<?php echo e(Auth::user()->id); ?>";
            // $(document).ready(function () {
            //     $('#create-page-btn').click(function () {
            //         var retaillerid = $('#retaillerid').val();

            //         var text_color = $('#text_color').val();
            //         var border_color = $('#border_color').val();
            //         var button_background = $('#button_background').val();
            //         var button_text_color = $('#button_text_color').val();
            //         var button_background_hover = $('#button_background_hover').val();
            //         var button_hover_color = $('#button_hover_color').val();
            //         var input_bg = $('#input_bg').val();
            //         var body_color = $('#body_color').val();
            //         var heading_color = $('#heading_color').val();
            //         var heading_font_size = $('#heading_font_size').val();
            //         var primary_font_size = $('#primary_font_size').val();
            //         var filter_font_size = $('#filter_font_size').val();
            //         var sub_heading_font_size = $('#sub_heading_font_size').val();


            //         // Create the data object, including the user ID
            //         var data = {
            //             user_id: userId,
            //             retaillerid: retaillerid,
            //             text_color: text_color,
            //             border_color: border_color,
            //             button_background: button_background,
            //             button_text_color: button_text_color,
            //             button_background_hover: button_background_hover,
            //             button_hover_color: button_hover_color,
            //             input_bg: input_bg,
            //             body_color: body_color,
            //             heading_color: heading_color,
            //             heading_font_size: heading_font_size,
            //             primary_font_size: primary_font_size,
            //             filter_font_size: filter_font_size,
            //             sub_heading_font_size: sub_heading_font_size,
            //         };

            //         $.ajax({
            //             url: '<?php echo e(route('create-page')); ?>', // URL for the controller method
            //             type: 'POST',
            //             data: data, // Send the data as part of the request
            //             success: function (response) {
            //                 $('#response').html('<pre>' + JSON.stringify(response, null, 2) +
            //                     '</pre>');
            //             },
            //             error: function (xhr) {
            //                 $('#response').html('<pre>' + xhr.responseText + '</pre>');
            //             }
            //         });

            //     });
            // });

            $(document).ready(function () {
    var userId = "<?php echo e(Auth::user()->id); ?>"; // Dynamically set the user ID

    // When the "create page" button is clicked
    $('#create-page-btn').click(function () {
        // Get the form values
        var retaillerid = $('#retaillerid').val();
        var text_color = $('#text_color').val();
        var border_color = $('#border_color').val();
        var button_background = $('#button_background').val();
        var button_text_color = $('#button_text_color').val();
        var button_background_hover = $('#button_background_hover').val();
        var button_hover_color = $('#button_hover_color').val();
        var input_bg = $('#input_bg').val();
        var body_color = $('#body_color').val();
        var heading_color = $('#heading_color').val();
        var heading_font_size = $('#heading_font_size').val();
        var primary_font_size = $('#primary_font_size').val();
        var filter_font_size = $('#filter_font_size').val();
        var sub_heading_font_size = $('#sub_heading_font_size').val();
        var primary_link_color = $('#primary_link_color').val();
        // Create the data object, including the user ID
       var data = {
            user_id: userId,
            retaillerid: retaillerid,
            text_color: text_color,
            border_color: border_color,
            button_background: button_background,
            button_text_color: button_text_color,
            button_background_hover: button_background_hover,
            button_hover_color: button_hover_color,
            input_bg: input_bg,
            body_color: body_color,
            heading_color: heading_color,
            heading_font_size: heading_font_size,
            primary_font_size: primary_font_size,
            filter_font_size: filter_font_size,
            sub_heading_font_size: sub_heading_font_size,
            primary_link_color: primary_link_color,
        };

        document.documentElement.style.setProperty('--heading-color', heading_color);
        document.documentElement.style.setProperty('--text-color-pr', text_color);
        document.documentElement.style.setProperty('--text-color', text_color);
        document.documentElement.style.setProperty('--border-color', border_color);
        document.documentElement.style.setProperty('--button-background-pr', button_background);
        document.documentElement.style.setProperty('--button-text-color-pr', button_text_color);
        document.documentElement.style.setProperty('--button-background-hover-pr', button_background_hover);
        document.documentElement.style.setProperty('--button-hover-color', button_hover_color);
        document.documentElement.style.setProperty('--input-bg', input_bg);
        document.documentElement.style.setProperty('--body-color', body_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('--filter-font-size', filter_font_size);
        document.documentElement.style.setProperty('--sub-heading-font-size', sub_heading_font_size);
        document.documentElement.style.setProperty('--primary-link-color', primary_link_color);

        // Send the data via AJAX
        $.ajax({
            url: '<?php echo e(route('create-page')); ?>', // Route to your controller
            type: 'POST',
            data: data, // Data to be sent
            success: function (response) {
                // On success, update the response in the HTML
                $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
            },
            error: function (xhr) {
                // On error, show the error message
                $('#response').html('<pre>' + xhr.responseText + '</pre>');
            }
        });
    });
});


            var userId = "<?php echo e(Auth::user()->id); ?>";

            // $(document).ready(function() {

            //     $('#create-page-btn').click(function() {

            //         // Create the data object, including the user ID

            //         var data = {

            //             user_id: userId

            //         };



            //         $.ajax({

            //             url: '<?php echo e(route('create-page')); ?>',  // URL for the controller method

            //             type: 'POST',

            //             data: data,  // Send the data as part of the request

            //             success: function(response) {

            //                 $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');

            //             },

            //             error: function(xhr) {

            //                 $('#response').html('<pre>' + xhr.responseText + '</pre>');

            //             }

            //         });

            //     });

            // });



            // Delete Page Button Click Event

            $('#delete-page-btn').click(function () {

                var data = {
                    user_id: userId
                };



                $.ajax({

                    // url: '<?php echo e(route('create-page')); ?>',

                    url: '<?php echo e(route('deletepr-page')); ?>', // Route for the delete-page method

                    type: 'POST',

                    data: data,

                    success: function (response) {

                        $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');

                    },

                    error: function (xhr) {

                        $('#response').html('<pre>' + xhr.responseText + '</pre>');

                    }

                });

            });

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



    <?php $__env->startSection('scripts'); ?>
        <?php echo \Illuminate\View\Factory::parentPlaceholder('scripts'); ?>



        <script>
            actions.TitleBar.create(app, {
                title: 'Welcome'
            });
        </script>

<script>
   shopify_theme_changes();
   function shopify_theme_changes(){
      var shop_name = `${Shopify.shop}`;
      var data = { shop_name: shop_name };
      $.ajax({
         // url: '<?php echo e(route('create-page')); ?>',
         url: 'https://diamondapp.mydiamondsearch.com/jewelry_app/shopify-theme-changes',  // Route for the delete-page method
         type: 'POST',
         data: data,
         success: function(response) {
            console.log(response.data);
            var heading_color = response.data.heading_color;
            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 font_size = response.data.font_size;
            var input_bg = response.data.input_bg;
   
   
                // Update :root variables with the correct values
                document.documentElement.style.setProperty('--heading_color', heading_color);
                document.documentElement.style.setProperty('--text_color_pr', text_color);
               document.documentElement.style.setProperty('--border_color', border_color);
               document.documentElement.style.setProperty('--button_background_pr', button_background);
               document.documentElement.style.setProperty('--button_text_color_pr', button_text_color);
               document.documentElement.style.setProperty('--button_background_hover_pr', button_background_hover);
               document.documentElement.style.setProperty('--input_bg', input_bg);
      
       if (font_size) {
   	document.documentElement.style.setProperty('--font_size_pr', font_size + 'px');
   	}
   
   	if (font_family) {
   		document.documentElement.style.setProperty('--font_family_pr', font_family);
   	}
   
               // 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>
<script>
   shopify_theme_changes();
   function shopify_theme_changes(){
      var shop_name = `${Shopify.shop}`;
      var data = { shop_name: shop_name };
      $.ajax({
         // url: '<?php echo e(route('create-page')); ?>',
         url: 'https://diamondapp.mydiamondsearch.com/jewelry_app/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>
<script>
   fetch('https://amipi-diamond-store.myshopify.com/cdn/shop/t/1/assets/base.css')
   .then(response => response.text())  // Fetch the CSS content
   .then(css => {
     // Regex to match CSS rules for .btn or .button classes
     const buttonStyleRegex = /\.(btn|button)[^}]*\{([^}]*)\}/g;
     let match;
     
     // Loop through all matching styles
     while ((match = buttonStyleRegex.exec(css)) !== null) {
       const className = match[1];  // .btn or .button
       const styles = match[2];     // The CSS rules inside the curly braces
   
       // Extract individual properties (e.g., background-color, color, font-size, etc.)
       const styleProps = {
         backgroundColor: /background-color\s*:\s*([^;]*)/.exec(styles),
         color: /color\s*:\s*([^;]*)/.exec(styles),
         fontSize: /font-size\s*:\s*([^;]*)/.exec(styles),
       };
   
       // Log the extracted details for each button class
       // console.log(`Styles for .${className}:`);
       if (styleProps.backgroundColor) {
         console.log(`  Background Color: ${styleProps.backgroundColor[1]}`);
       }
       if (styleProps.color) {
         console.log(`  Text Color: ${styleProps.color[1]}`);
       }
       if (styleProps.fontSize) {
         console.log(`  Font Size: ${styleProps.fontSize[1]}`);
       }
       console.log('---');
     }
   })
   .catch(err => console.error('Error fetching CSS:', err));
   
   
       //   getButtonColor();
   
       //   function rgbToHex(rgb) {
       //       var result = rgb.match(/\d+/g);
       //       return "#" + result.map(function(x) {
       //           return ("0" + parseInt(x).toString(16)).slice(-2);
       //       }).join('');
       //   }
   
       //   function getButtonColor() {
       //       // Select the first <button> element on the page
       //       var button = document.querySelector('button');
   
       //       // Get the computed style of the button
       //       var computedStyle = window.getComputedStyle(button);
   
       //       // Get the background color of the button in rgb format
       //       var buttonColor = computedStyle.backgroundColor;
   
       //       // Convert the rgb color to hex
       //       var hexColor = rgbToHex(buttonColor);
   
       //       // Display the background color code in hex
       //       console.log('Button color is: ' + hexColor);
   
       //       var themeColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
       //       var hexColors = rgbToHex(themeColor);
       //       console.log('Current theme color:', hexColors);
   
       //       // alert('Button color code in hex is: ' + hexColor);
       //   }
   
       
     
</script>
    <?php $__env->stopSection(); ?>
    
<?php echo $__env->make('shopify-app::layouts.default', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/amipiinc/diamondapp.mydiamondsearch.com/jewelry_app/resources/views/welcome.blade.php ENDPATH**/ ?>