JezK

Edit File: request_quote2.php

<?php
include("app/checkSession.php");
include("app/adminObj.php"); 
if(!isset($_SESSION['user_id'])){
   $customerObj->redirect('login.php');
}
$dealsData=$customerObj->productDealList();
$dealsCheckboxes='';
if(isset($dealsData) && count($dealsData)>0)
{
    foreach($dealsData as $v)
    {
      $activeClass='';
      if($v['deal_id']==1)
        $selectAllClass="id='prdDeal'";
      else
        $selectAllClass="class='prdd1'";

$dealsCheckboxes.="<div class='col-md-6'><label class='ml-4'>".trim($v['deal_name']). "<input type='checkbox' name='productwareHouseDeals[]' $selectAllClass value='".$v['deal_id']."' $activeClass><span class='checkbox'></span></label></div>";
    }
}
include("header.php");
?>
<style>
/* Hide the browser's default checkbox */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox {
    position: absolute;
    top: 2px;
    left: 15px;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid;
}

:hover input~.checkbox {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
input[type="checkbox"]:checked~.checkbox {
    /*     background-color: #17a2b8; */
    background-color: #000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
input[type="checkbox"]:checked~.checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox:after {
    /*     left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); */
    left: 1px;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 12px;
    border: 2px solid white;
    background: #2f63c8;
}

.shadow {
    border: 0;
    box-shadow: 0px 3px 5px #04c6ff45 !important;
}

.border-10 {
    border-radius: 18px !important;
}

input[type="radio"] {
    position: absolute;
    opacity: 7;
    cursor: pointer;
}

span.checkmark {
    border-radius: 50%;
    height: 24px;
    width: 24px;
    position: relative;
    background-color: grey;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-right: 9px;
}

input:checked~.checkmark {
    background-color: #2196F3;
}

input:checked~.radio-inline {
    background-color: #2196F3;
}
</style>
<div class="container mt-2">
    <div class="row d-flex justify-content-center">
        <div class="col-md-11  ">
            <div class="container">
                <form method="post" action="app/request_quote_app.php">
                    <div class="row justify-content-center flex-column  bg-white p-md-4 p-0 card shadow border-10 ">
                        <div class="row col-sm-12">
                            <img class="card-img-top" src="images/logo.png" alt="Card image" style="width:150px"
                                height="100px">
                            <div class="card-body">
                                <h6 class="card-title">1234</h6>
                                <div class="col-sm-6 px-0">
                                    <p class="card-text text-dark">
                                        <img src="images/location.png">&nbsp;kakinad Hyderabad
                                    </p>
                                </div>
                                
                            </div>
                        </div>
                        <div class="alignmentclass row">
                            <div class="col-sm-3 pt-3">
                                <label for="servicetype" class="inpt-label d-block">Service Type</label>
                                <div class="input-container">
                                    <select id="service" name="service" class="form-control frm-input"
                                        onChange="return serviceType()">
                                        <option value="">Select</option>
                                        <option value="1">Pallet</option>
                                        <option value="2">Space</option>
                                    </select>
                                </div>
                            </div>
                            <div class="pallet pt-3 col-sm-3">
                                <label for="pallet" class="inpt-label">Number of Pallets</label>
                                <div class="input-container">
                                    <input type="text" id="pallet" name="pallet" value="" class="form-control frm-input"
                                        placeholder="25" />
                                </div>
                            </div>
                            <div class="space  pt-3" style="display:none">
                                <label for="space" class="inpt-label">Number of Square Meters</label>
                                <div class="input-container">
                                    <input type="text" id="space" name="space" value="" class="form-control frm-input"
                                        placeholder="Sqmts" />
                                </div>
                            </div>
                            <div class=" pt-3 col-sm-3">
                                <label for="fromdate" class="inpt-label">From Date</label>
                                <div class="input-container" style="position: relative">
                                    <input type="date" class="datepicker form-control " id="from_date" name="from_date"
                                        onchange="cal()">
                                    <div class="error from_error text-danger"></div>
                                    
                                    
                                </div>
                            </div>
                            <div class=" pt-3 pb-3 col-sm-3">
                                <label for="todate " class="inpt-label">To Date</label>
                                <div class="input-container" style="position: relative">
                                    <input type="date" class="datepicker form-control " id="to_date" name="to_date"
                                        onchange="cal()">
                                    <div class="error to_error text-danger"></div>
                                    
                                    
                                </div>
                            </div>

</div>

</div>

<div class="row justify-content-center flex-column  bg-white p-md-4 p-0 card shadow border-10 mt-3">
                        
                        <label for="dealswedealwith" class="inpt-label mb-0" data-toggle="collapse"
                            data-target="#demo">Products we deal with<i class="fa fa-angle-down float-right" style="font-size: 25px;"></i></label>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Electronics
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="2"
                                            checked="">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Machine Parts
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="3">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Printer Materials
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="4">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Stationery
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Telecommunication Equipment
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Glass
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Sporting Equipment
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Dry and Liquid Goods
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Amazon FBA
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

<div class="col-md-3 mt-2 mb-2">
                                    <label class="ml-4">Printed Materials
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>
                                <div class="col-md-3 mt-2 mb-2">

<label class="ml-4">Package food and beverage
                                        <input type="checkbox" name="productwareHouseDeals[]" class="prdd1" value="5">
                                        <span class="checkbox"></span></label>
                                </div>

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

<div class="row justify-content-center flex-column  bg-white p-md-4 p-0 card shadow border-10 mt-3">
                        
                        <label for="dealswedealwith" class="inpt-label mb-0" data-toggle="collapse"
                            data-target="#demo1">Description<i class="fa fa-angle-down float-right" style="font-size: 25px;"></i></label>
                        <div id="demo1" class="collapse mt-3">
                            <div class="input-container">
                                <textarea type="text" id="description" name="todate" rows="5"
                                    class="form-control frm-input col-sm-6" placeholder="Description"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include("footer.php"); ?>
<script src="js/validations.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

var todate = new Date(document.getElementById("to_date").value);
    // console.log(document.getElementById('pick_date').value);
    return parseInt((todate - fromdate) / (24 * 3600 * 1000));
}

function cal() {
    if (document.getElementById("to_date").value != '') {
        // console.log("hello")
        document.getElementById("total_days").value = GetDays();
    }
}

$(function() {
    $(document).on('click', '#prdDeal', function() {
        if ($("#prdDeal").prop('checked') == true) {
            $('.prdd1').prop('checked', true);
        } else {
            $('.prdd1').prop('checked', false);
        }
    });
});
</script>