<?php
    require_once("core.php");
    renteez_session_start(); // Session starts here.
    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
        if(isset($_SESSION['logged_in']) && ($_SESSION['logged_in'] == true)) { 
            $user = get_user_details($_SESSION['username']);
            if ($user == null) {
                unset($_SESSION['username']);
            }
        }
        if(isset($_GET['product_id'])) { 
            $pid = $_GET['product_id'];
            $product = get_product_details($pid);
            if ($product !== null ) {
                $vendor = get_user_details_by_id($product->uid);
                $product_assets = json_decode(get_product_assets($pid), true); /* This is JSON */
                // var_dump($product_assets);
                error_log($product_assets[0]['asset_name']);
            }
        } else {
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0">


        <!-- SEO Meta Tags -->
        <meta name="description" content="Renting... Reimagined! Reinvented!! Revolutionized!!!"/>
        <meta name="author" content="(c) Renteez.net">
    
        <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
        <meta property="og:site_name" content="RENTEEZ" />
        <meta property="og:site" content="https://www.renteez.net" />
        <meta property="og:title" content="Renting... Reimagined! Reinvented!! Revolutionized!!!"/>
        <meta property="og:description" content="The World's First Social Rental Platform"/>
        <meta property="og:image" content="https://www.renteez.net/images/Renteez2.jpg" />
        <meta property="og:url" content="https://www.renteez.net" />
        <meta name="twitter:card" content="summary_large_image">

        <!-- Webpage Title -->
        <title>[PRODUCT PAGE] RentEEZ - Renting... Reimagined! Reinvented!! Revolutionized!!!</title>
    
        <!-- Styles -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&display=swap"/>

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/swiper.css" rel="stylesheet">
        <link href="css/magnific-popup.css" rel="stylesheet">
    
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <!-- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'> -->
        <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
        <link rel='stylesheet' href='css/daterangepicker.css'>


        <link rel="stylesheet" href="css/animate.css" type="text/css">
        <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
        <link rel="stylesheet" href="css/owl.theme.default.min.css" type="text/css">
        <link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
        <link rel="stylesheet" href="css/aos.css" type="text/css">
        <link rel="stylesheet" href="css/ionicons.min.css" type="text/css">
        <link rel="stylesheet" href="css/jquery.timepicker.css" type="text/css">
        <link rel="stylesheet" href="css/flaticon.css" type="text/css">
        <link rel="stylesheet" href="css/icomoon.css" type="text/css">
        <link rel="stylesheet" href="css/popup.css"/>
        <link rel="stylesheet" href="css/social-share.css"/>
        <link rel="stylesheet" href="css/new_dashboard.css" />
        <link href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="css/category.css"> 
        <link rel="stylesheet" href="css/new_header.css"/>
        <link rel="stylesheet" href="css/html.css"> 
        <link rel="icon" href="images/favicon.png">

        <script src="js/social-share.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/design.css" />
        <link rel="stylesheet" href="css/product.css" />
        <style>
        .daterangepicker.show-calendar .drp-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: wrap;
            background: #FFF;
            border-radius: 0px 0px 8px 8px;
            border-top: 1px solid black;
        }
        .daterangepicker .drp-selected {
            display: none;
        }
        .daterangepicker .drp-buttons {
            clear: both;
            text-align: right;
            padding-top: 8px;
            padding-bottom: 8px;
            border-top: 1px solid #ddd;
            display: none;
            line-height: 12px;
            vertical-align: middle;
        }
        #datepicker {
            margin: auto;
            width: 100px;
            height: 64px;
        }
        .search_input {  
            height: 64px;
            width: auto;
            border-radius: 8px;
            font-size: 16px;
            border: 1px solid black;
            display: block;
        }
        @media only screen and (max-width: 720px) {
            .search_input {
                display: none;
            }
        }
        .datarangepicker {
            margin-top: 24px !important;
            border: 1px solid black !important;
            border-radius: 8px !important;
            box-shadow: 2px 2px 4px gray !important;
        }
        div:where(.swal2-container) .swal2-html-container {
            overflow: hidden;
            height: 120px;
        }
        .price_wrapper{
            width: 400px;
            background: #fff;
            border-radius: 10px;
            padding: 20px 25px 40px;
            box-shadow: 0 12px 35px rgba(0,0,0,0.1);
        }
        .price-input{
          /* width: 80%; */
          display: flex;
          margin: 8px 0 8px;
          justify-content: space-evenly;
        }
        .price-input .field{
          display: flex;
          width: 100%;
          height: 45px;
          align-items: center;
          justify-content: center;
        }
        .field input{
          width: 50%;
          height: 100%;
          outline: none;
          font-size: 19px;
          margin-left: 12px;
          border-radius: 5px;
          text-align: center;
          border: 1px solid #999;
          -moz-appearance: textfield;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        .price-input .separator{
          width: 130px;
          display: flex;
          font-size: 19px;
          align-items: center;
          justify-content: center;
        }
        .slider{
          height: 8px;
          position: relative;
          background: #ddd;
          border-radius: 5px;
          width: 80%;
          justify-content: center;
          /* position: relative; */
          display: inline-flex;
        }
        .slider .progress{
          height: 100%;
          left: 25%;
          right: 25%;
          position: absolute;
          border-radius: 5px;
          background: #17A2B8;
        }
        .range-input{
          position: relative;
          width: 80%;
          justify-content: center;
          display: inline-flex;
        }
        .range-input input{
          position: absolute;
          width: 100%;
          height: 10px;
          top: -36px;
          padding: 0;
          background: none;
          pointer-events: none;
          -webkit-appearance: none;
          -moz-appearance: none;
        }
        input[type="range"]::-webkit-slider-thumb{
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #17A2B8;
          pointer-events: auto;
          -webkit-appearance: none;
          box-shadow: 0 0 6px rgba(0,0,0,0.05);
        }
        input[type="range"]::-moz-range-thumb{
          height: 17px;
          width: 17px;
          border: none;
          border-radius: 50%;
          background: #17A2B8;
          pointer-events: auto;
          -moz-appearance: none;
          box-shadow: 0 0 6px rgba(0,0,0,0.05);
        }
        .blank_strip {
            height: 120px; 
            background: rgba(255, 255, 255, 1);
            width: 100%;
        }


            .main-screen-wrapper-container {
                margin-left: 20rem; 
                position: relative;
            }
            @media only screen and (max-width: 1080px) {
                .main-screen-wrapper-container {
                    margin-left: 6rem; 
                }
            }
            .services-wrap {
                padding: 0.75rem;
            }
            .services-wrap:hover {
                background: #9c1c20;
                transition: all 0.5s linear;
            }
            .services-wrap:not(:hover) {
                background: #FFFFFF;
                transition: all 0.5s linear;
            }
            #ftco-zoom:hover {
                -webkit-filter: brightness(130%);
                transform: scale(1.02);
                transition: all 0.5s linear;
            }
            #ftco-zoom:not(:hover) {
                -webkit-filter: brightness(100%);
                transform: scale(1);
                transition: all 0.5s linear;
            }
            .hero-wrap:hover {
                -webkit-filter: brightness(120%);
                transition: all 0.5s linear;
            }
            .hero-wrap:not(:hover) {
                -webkit-filter: brightness(100%);
                transition: all 0.5s linear;
            }
        </style>
    </head>

    <body>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
    <?php 
        require ("./header.php");
    ?>
    <?php 
        require ("./sidebar.php");
    ?>
    <div class="body-wrapper"></div>
      
    <!-- Overlay image Modal -->
    <div class="overlay-container">
        <div class="item-overlay">
            <button class="item-overlay__btn">
                <img src="userdata/demo/icon-close.svg" alt="close image" class="item-overlay__btn-img" />
            </button>
            <div class="item-overlay__mainImg">
                <?php 
                    $img = "userdata/$vendor->id/products/$pid/images/" . $product_assets[0]['asset_name'];
                    echo "<img src=$img class='item-overlay__img' />";
                ?>
                <button class="item-overlay__btnlft overlay-btn">
                    <img src="userdata/demo/icon-next.svg" alt="next symbol image" class="item-overlay__btnlft-img overlay-btn__img" />
                </button>
                <button class="item-overlay__btnrgt overlay-btn">
                    <img src="userdata/demo/icon-next.svg" alt="next symbol image" class="item-overlay__btnrgt-img overlay-btn__img" />
                </button>
            </div>
            <div class="overlay-img__btns">
                <?php 
                    $i = 0;
                    foreach ($product_assets as $asset) {
                        $img = "userdata/$vendor->id/products/$pid/images/" . $asset['asset_name'];
                        echo "<button class='overlay-img__btn' data-img='$i'>
                                <img src=$img class='overlay-img__btn-img' />
                                </button>";
                        $i = $i + 1;
                    }
                ?>
                <!-- 
                <button class="overlay-img__btn" data-img="1">
                    <img src="userdata/demo/image-product-2-thumbnail.jpg" alt="shoe product image" class="overlay-img__btn-img" />
                </button>
                <button class="overlay-img__btn" data-img="2">
                    <img src="userdata/demo/image-product-3-thumbnail.jpg" alt="shoe product image" class="overlay-img__btn-img" />
                </button>
                <button class="overlay-img__btn" data-img="3">
                    <img src="userdata/demo/image-product-4-thumbnail.jpg" alt="shoe product image" class="overlay-img__btn-img" />
                </button>
                -->
            </div>
        </div>
    </div>

    
    <main class="item">
        <div class="container-fluid">
            <div class="row justify-content-xl-center g-5 g-lg-5" style="row-gap: 3rem">
                <div class="col-xl-5">
                    <section class="img_panel">
                        <button class="img-main__btnlft img-main__btn">
                            <img src="userdata/demo/icon-next.svg" alt="next symbol image" class="img-main__btnlft-img img-main__btn-img" />
                        </button>
                        <button class="img-main__btnrgt img-main__btn">
                            <img src="userdata/demo/icon-next.svg" alt="next symbol image" class="img-main__btnrgt-img img-main__btn-img" />
                        </button>
                        <?php 
                            $img = "userdata/$vendor->id/products/$pid/images/" . $product_assets[0]['asset_name'];
                            echo "<img src=$img class='img-main' />";
                        ?>
                        <!-- <img src="userdata/demo/image-product-1.jpg" alt="" class="img-main" /> -->
                        <div class="img-btns">
                            <?php 
                                foreach ($product_assets as $asset) {
                                    $img = "userdata/$vendor->id/products/$pid/images/" . $asset['asset_name'];
                                    echo "<button class='img-btn'>
                                            <img src=$img class='img-btn__img' />
                                            </button>";
                                }
                            ?>
                            <!--
                            <button class="img-btn">
                                <img src="userdata/demo/image-product-1-thumbnail.jpg" alt="shoe product image" class="img-btn__img" />
                            </button>
                            <button class="img-btn">
                                <img src="userdata/demo/image-product-2-thumbnail.jpg" alt="shoe product image" class="img-btn__img" />
                            </button>
                            <button class="img-btn">
                                <img src="userdata/demo/image-product-3-thumbnail.jpg" alt="shoe product image" class="img-btn__img" />
                            </button>
                            <button class="img-btn">
                                <img src="userdata/demo/image-product-4-thumbnail.jpg" alt="shoe product image" class="img-btn__img" />
                            </button>
                            -->
                        </div>
                    </section>
                </div>
                <div class="col-xl-7">
                    <section class="price">
                        <h1 class="price-main__heading"><?php echo $product->product_title;?></h1>
                        <h2 class="price-sub__heading">Provider: <span><a href="vendorinfo.php?vendor=<?php echo $vendor->user_name;?>"><?php echo $vendor->user_name;?></a></span> </h2>
                        <div class="price-txt">
                            <?php echo $product->product_description;?>
                        </div>
                        <div class="price-box">
                            <div class="price-box__main">
                            <span class="price-box__main-new">Rent/Day<br>$<?php echo $product->product_rent;?></span>
                            <span class="price-box__main-new">Deposit<br>$<?php echo $product->product_deposit;?></span>
                            </div>
                        </div>
                                
                        <div class="row justify-content-md-center g-2 g-md-2">
                            <div class="col" style="width: 100%">
                                <button name='cal' id='cal' class="distance_button" style="height: 84px; width: 100%"><i class="fa-solid fa-calendar-days"></i><br>Calendar</button>
                                <input type="text" name='date_start' id="date_start" value="00/00/0000" hidden/>
                                <input type="text" name='date_end' id="date_end" value="00/00/0000" hidden/>
                                <input type="text" name='num_days' id="num_days" value="0" hidden/>
                            </div>
                                    
                            <div class="col" style="width: 100%">
                                <button class="distance_button"  style="height: 84px; width: 100%;" onClick="Loading();">Add<br>Insurance</button>
                            </div>

                            <div class="col" style="width: 100%">
                            <button class="distance_button" style="height: 84px; width: 100%;;">Deposit<br>$<?php echo $product->product_deposit;?></button>
                            </div>
                        </div>
                            
                        <div class="price-btnbox">
                                <button id="add_cart_pressed" class="price-cart__btn btn--orange" style="width:100%;">
                                    <img src="userdata/demo/icon-cart.svg" class="price-cart__btn-img"/>Quick Rental
                                </button>
                        </div>
                        <br>
                    </section>
                </div>
            </div>
        </div>
    </main>
      
    <div id="loader_text">Negotiating Qoute...<div id="loader"></div></div>
    <div style="height: 10vh"></div>
    <?php 
        require ("./footer.php");
  	    mysqli_close($con);
    ?>
    <script src='js/daterangepicker.js'></script>
    <script>
        $(document).ready(function() {
            ds = document.getElementById('date_start');
            de = document.getElementById('date_start');
            days = document.getElementById('num_days');
            cal = document.getElementById('cal');
            var dateToday = new Date();
            $("#cal").daterangepicker({ 
                showButtonPanel: true,
                autoUpdateInput: false, 
                minDate: dateToday, 
                numberOfMonths: 3, 
                showButtonPanel: true,
                beforeShow: function( input ) {
                    setTimeout(function() {
                        var buttonPane = $( input ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );
                        var btn = $('Clear');
                        btn.bind("click", function () {
                            $.datepicker._clearDate( input );
                        });
                        btn.appendTo( buttonPane );
                    }, 10 );
                },
                changeMonth: false});

            $("#cal").on('apply.daterangepicker', function(e, picker) {
                var s = picker.startDate._d.getMonth() + 1 + '/' + picker.startDate._d.getDate() + '/' + picker.startDate._d.getUTCFullYear();
                ds.value = s;
                var e = picker.endDate._d.getMonth() + 1 + '/' + picker.endDate._d.getDate() + '/' + picker.endDate._d.getUTCFullYear();
                de.value = e;
                cal.innerHTML = '<i class="fa-solid fa-calendar-days"></i><br>' + s + "<br>" + e;
                
                var date_s = new Date(picker.startDate._d.getUTCFullYear(), picker.startDate._d.getMonth(), picker.startDate._d.getDate());
                var date_e = new Date(picker.endDate._d.getUTCFullYear(),  picker.endDate._d.getMonth(), picker.endDate._d.getDate());
                const _MS_PER_DAY = 1000 * 60 * 60 * 24;
                var diff = Math.floor(date_e - date_s) / _MS_PER_DAY;
                days.value = diff;
            });
        });
    </script>
    <script src="js/shopItems.js"></script>
    <script src="js/product.js"></script>
    
</body>
</html>
