@{
    ViewBag.Title = "ItemMaster";
}

<style>
    legend {
        background-color: #000;
        color: #fff;
        padding: 3px 6px;
    }

    .modal-xl {
        max-width: 60%;
        margin-left: 20%;
    }
    .prev1, .next1, .prev2, .next2{
    cursor: pointer;
    position: absolute;
    margin-top: 30%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }
   .next1 ,   .next2{
    right: 0;
    border-radius: 3px 0 0 3px;
}
   .prev1 ,   .prev2{
    left: 0;
    border-radius: 3px 0 0 3px;
}
.prev1:hover, .next1:hover,.prev2:hover, .next2:hover,.topIMG:hover {
    background-color: rgba(0,0,0,0.8)!important;
}

   .topIMG{
    cursor: pointer;
    position: absolute;  
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }
   .topIMG {
    top: 0;
    border-radius: 3px 0 0 3px;
}
    .im{
       left:50px;
   }
   .im1{
       left:150px;
   }
    .im2{
       left:300px;
   }
      .im3{
       left:450px;
   }
#TypeDocDiv label{
    color:orange;
}
 
</style>

<style>
    .ui-slider-horizontal .ui-slider-handle {
        display: none !important;
    }
  
     .container1 {
  position: relative;
  width: 100%;max-width: 500px;
   height: 100%;max-height: 450px; overflow:hidden
}

.container1 img {
  width: 100%;height: auto; max-height: 244px; min-height: 244px; 
}

.container1 .btn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.btlft
{
  left: 4%;
}

.btrht
{
  right: -4%;
}

.container1 .btn:hover {
  background-color: black;
}

</style>


<div class="myData" data-x="M309" />
<script type="text/javascript" src="../ProjectScript/CarMaster.js"></script> 
<script src="../app-assets/js/tooltip.js" type="text/javascript"></script>
<script src="~/Scripts/jscolor.js"></script>

<link href="~/360js/css/rotate.css" rel="stylesheet" />
<script type="text/javascript" src="../360js/script/jquery-ui.min.js"></script>

<div id="Entry">

    <div class="row">
        <div class="col-md-12" style="top:-1%">
            <div class="card">

                <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                    <table style="margin-top:0px;" width="100%">
                        <tr>
                            <td><h4 class="card-title mb-0" style="font-weight:bold">CAR</h4></td>
                            <td align="right" class="col-md-12">


                                <fieldset>
                                    <div class="custom-control custom-checkbox" style="float:right">
                                        <input type="checkbox" class="custom-control-input" id="select_status">
                                        <label class="custom-control-label" for="select_status">Out Of Service</label>
                                    </div>
                                </fieldset>

                            </td>
                        </tr>
                    </table>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div style="height:15px;"></div>

                                <table id="itemtable" style="table-layout:fixed;" width="100%">
                                    <tr>
                                        <td id="CELL1" valign="top" width="50%" style="border-right:1px solid #BABFC7">
                                            <table width="100%" >
                                                <tr>
                                                    <td>
                                                        <div class="card-content collapse show">
                                                            <div class="card-body">
                                                                <form class="form">
                                                                    <div class="form-body">
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                <div class="row">
                                                                                    <label class="col-md-2" for="code" style="font-weight:bold">Code<span class="danger">*</span></label>
                                                                                    <div class="col-md-4">

                                                                                        <div class="input-group">
                                                                                            <input class="form-control" placeholder="Search Product" style="display:none" type="text" id="searchcode" autocomplete="off">

                                                                                            <input class="form-control" type="text" id="CarCode" onkeypress="isSinglqts(event)" onkeyup="changetoupper(this.id)" autocomplete="off">

                                                                                            <div class="input-group-append" id="">
                                                                                                <button class="btn btn-outline-primary" type="button" id="searchbutton"><i class="fa fa-search"></i></button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <label class="col-md-2" for="" style="font-weight:bold">Car<span class="danger">*</span></label>
                                                                                    <div class="col-md-4">
                                                                                        <input class="form-control" type="text" id="CarDesc" onkeypress="isSinglqts(event)" onkeyup="changetoupper(this.id)" autocomplete="off">
                                                                                    </div>
                                                                                </div>

                                                                                <div class="form-group row">
                                                                                    <label class="col-md-2" for="description" style="font-weight:bold">Current KM</label>
                                                                                    <div class="col-md-4">
                                                                                        <input class="form-control" type="text" id="CurrentKM" onkeypress="isNumberthis(event,this)" autocomplete="off">
                                                                                    </div>
                                                                                    <label class="col-md-2" for="description" style="font-weight:bold">Next Service</label>
                                                                                    <div class="col-md-4">
                                                                                        <input class="form-control" type="text" id="NextService" onkeypress="isNumberthis(event,this)" autocomplete="off">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="form-group row">
                                                                                    <label class="col-md-2" for="description" style="font-weight:bold">Insurance</label>
                                                                                    <div class="col-md-4">
                                                                                        <input class="form-control" type="text" id="InsuranceDate" autocomplete="off">
                                                                                    </div>
                                                                                    <label class="col-md-2" for="description" style="font-weight:bold">Registration</label>
                                                                                    <div class="col-md-4">
                                                                                        <input class="form-control" type="text" id="RegistrationDate" autocomplete="off">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="form-group row">
                                                                                    <label class="col-md-2" for="" style="font-weight:bold">Year</label>
                                                                                    <div class="col-md-2">
                                                                                        <input class="form-control" type="text" id="IYear" onkeypress="isNumberInt(event, this)" autocomplete="off" style="width:130%">
                                                                                    </div>
                                                                                    <label class="col-md-2 text-lg-right" for="" style="font-weight:bold">Plate</label>
                                                                                    <div class="col-md-2">
                                                                                        <input class="form-control" type="text" id="PlateName" onkeyup="changetoupper(this.id)" autocomplete="off" style="width:130%">
                                                                                    </div>
                                                                                    <label class="col-md-2 text-lg-right" for="" style="font-weight:bold;margin-left:-4%">Code</label>
                                                                                    <div class="col-md-2">
                                                                                        <input class="form-control" type="text" id="PlateCode" onkeyup="changetoupper(this.id)" autocomplete="off" style="width:130%">
                                                                                    </div>
                                                                                </div>

                                                                                <div style="border-bottom:1px solid #c5cdd3;margin-top:-15px;width:100%"></div>
                                                                                <div class="row" style="margin-top:2%">
                                                                                    <div class="col-md-6">
                                                                                        <div class="form-group">

                                                                                            <label for="group" style="font-weight:bold">Engine No</label>
                                                                                            <input class="form-control" type="text" id="EngineNo" onkeyup="changetoupper(this.id)" autocomplete="off">
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-6">
                                                                                        <div class="form-group">

                                                                                            <label for="sbgroup" style="font-weight:bold">Fuel</label>
                                                                                            <input class="form-control" type="text" id="CarFuel" onkeypress="isNumberthis(event, this)" autocomplete="off">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row">
                                                                                    <div class="col-md-6">
                                                                                        <div class="form-group">

                                                                                            <label for="category" style="font-weight:bold">Chassis No</label>
                                                                                            <input class="form-control" type="text" id="ChassisNo" onkeyup="changetoupper(this.id)" autocomplete="off">
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="col-md-6">
                                                                                        <div class="form-group">

                                                                                            <label for="sbcat" style="font-weight:bold">Petrol Charge</label>
                                                                                            <input class="form-control" type="text" id="PetrolCharge" onkeypress="isNumberthis(event, this)" onkeyup="changetoupper(this.id)" autocomplete="off">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @*<hr style="margin-top:-5px" />*@
                                                                                @*<div style="border-bottom:1px solid #c5cdd3;margin-top:-5px;width:100%"></div>*@

                                                                                <fieldset>
                                                                                    <legend>Default Rent Price : </legend>
                                                                                    <div class="row" style="margin-top:2%">

                                                                                        <div class="col-md-3">
                                                                                            <div class="form-group">
                                                                                                <label for="opqty" style="font-weight:bold">Daily<span class="danger">*</span></label>
                                                                                                <input class="form-control" type="text" onkeypress="isNumberthis(event, this)" id="DailyPrice" autocomplete="off">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-3">
                                                                                            <div class="form-group">
                                                                                                <label for="opcost" style="font-weight:bold">Weekly<span class="danger">*</span></label>
                                                                                                <input class="form-control" type="text" onkeypress="isNumberthis(event, this)" id="WeeklyPrice" autocomplete="off">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-3">
                                                                                            <div class="form-group">
                                                                                                <label for="lpcost" style="font-weight:bold">Monthly<span class="danger">*</span></label>
                                                                                                <input class="form-control" type="text" onkeypress="isNumberthis(event, this)" id="MonthlyPrice" autocomplete="off">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-3">
                                                                                            <div class="form-group">
                                                                                                <label for="avgcost" style="font-weight:bold">Annual<span class="danger">*</span></label>
                                                                                                <input class="form-control atfcs" type="text" onkeypress="isNumberthis(event, this)" id="AnnualPrice" autocomplete="off" onkeydown="ManualFocus('AnnualPrice', 'btnsubmit', event)">
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </fieldset>

                                                                                <div class="row">
                                                                                    <div class="col-md-2">

                                                                                        <label for="vatcode" style="font-weight:bold">Comments</label>

                                                                                    </div>
                                                                                    <div class="col-md-10">

                                                                                        <textarea class="form-control" id="Comments" autocomplete="off" style="height:70px;resize:none"></textarea>

                                                                                    </div>

                                                                                </div>
                                                                                <div style="height:10px">

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td width="5%"></td>
                                                </tr>
                                            </table>

                                        </td>
                                        <td id="CELL2" valign="top" width="50%">
                                            <table id="CELL2Table" width="100%">
                                                <tr>
                                                    <td width="5%"></td>
                                                    <td>
                                                        <div class="card-content collapse show">
                                                            <div class="card-body">
                                                                <form class="form">
                                                                    <div class="form-body">
                                                                        <div class="row">
                                                                            <div class="col-md-12">

                                                                                <ul class="nav nav-tabs nav-topline">
                                                                                    <li class="nav-item">
                                                                                        <a class="nav-link active" id="tab1" data-toggle="tab" aria-controls="div1" href="#div1" aria-expanded="true" style="font-weight:bold">&nbsp;Car Picture</a>
                                                                                    </li>
                                                                                    <li class="nav-item">
                                                                                        <a class="nav-link" id="tab2" data-toggle="tab" aria-controls="div2" href="#div2" aria-expanded="false" style="font-weight:bold">OtherInfo</a>
                                                                                    </li>
                                                                                    <li class="nav-item">
                                                                                        <a class="nav-link" id="tab3" data-toggle="tab" aria-controls="div3" href="#div3" aria-expanded="false" style="font-weight:bold">Insurance</a>
                                                                                    </li>
                                                                                    <li class="nav-item">
                                                                                        <a class="nav-link" id="tab4" data-toggle="tab" aria-controls="div4" href="#div4" aria-expanded="false" style="font-weight:bold">Scratches</a>
                                                                                    </li>
                                                                                    <li class="nav-item">
                                                                                        <a class="nav-link" id="tabm" data-toggle="tab" aria-controls="divm" href="#divm" aria-expanded="false" style="font-weight:bold">Spareparts</a>
                                                                                    </li>

                                                                                </ul>
                                                                                <div class="tab-content px-1 pt-1 border-lighten-2 border-0-top" id="tabs">

                                                                                    <div role="tabpanel" class="tab-pane active" id="div1" aria-expanded="true" aria-labelledby="tab1">

                                                                                        <div class="form-group">

                                                                                            <div class="row">
                                                                                                <div class="col-md-1">

                                                                                                </div>
                                                                                                <div class="col-md-10">
                                                                                                    <img id="myImg"  ondblclick="Prodpopshow(0)" style="text-align:center;cursor:pointer;width:650px;height:400px" src="~/app-assets/img/Cars/car1.jpg" class="img-thumbnail  gradient-back-to-earth">
                                                                                                    <label for="img-0" class="prev1" id="previous0" onclick="PrevNext(0,'P')">❮ </label>
                                                                                                    <label for="img-0" class="next1" id="next0" onclick="PrevNext(0,'N')">❯</label> 
                                                                                                    <input type="text" id="imgId" class="form-control" value="0" style="display:none" />
                                                                                                </div>
                                                                                                <div class="col-md-1">

                                                                                                </div>
                                                                                            </div>

                                                                                        </div>

                                                                                        <div class="form-group" style="opacity:0">
                                                                                            <div class="row">
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>

                                                                                        </div>


                                                                                    </div>
                                                                                    <div class="tab-pane" id="div2" aria-labelledby="tab2">

                                                                                        <div class="form-group row">
                                                                                            <label class="col-md-2" for="mod1" style="font-weight:bold">T.C NO</label>
                                                                                            <div class="col-md-4">
                                                                                                <input class="form-control" type="text" id="TCNO" autocomplete="off">
                                                                                            </div>
                                                                                            <label class="col-md-2" for="mod1" style="font-weight:bold">Color</label>
                                                                                            <div class="col-md-4">
                                                                                                <input type="text" id="CarColor" class="form-control jscolor jscolor-active" autocomplete="off" style="background-image: none; background-color: rgb(92, 49, 88)!important; color: rgb(255, 255, 255);">
                                                                                            </div>
                                                                                        </div>


                                                                                        <div class="form-group row">
                                                                                            <label class="col-md-2" for="mod2" style="font-weight:bold">Sub Color</label>
                                                                                            <div class="col-md-4">
                                                                                                <input type="text" id="SubColor" class="form-control jscolor jscolor-active" autocomplete="off" style="background-image: none; background-color: rgb(92, 49, 88)!important; color: rgb(255, 255, 255);">
                                                                                            </div>
                                                                                            <label class="col-md-2" for="mod2" style="font-weight:bold">Category</label>
                                                                                            <div class="col-md-4">
                                                                                                <select class="form-control" id="Category"></select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="form-group row">
                                                                                            <label class="col-md-2" for="mod3" style="font-weight:bold">Model</label>
                                                                                            <div class="col-md-4">
                                                                                                @*<input class="form-control" type="text" id="CarClass" autocomplete="off">*@
                                                                                                <select class="form-control" id="CarClass"></select>
                                                                                            </div>
                                                                                            <label class="col-md-2" for="Class" style="font-weight:bold">Origin</label>
                                                                                            <div class="col-md-4">
                                                                                                <input class="form-control" type="text" id="Origin" autocomplete="off">
                                                                                            </div>
                                                                                        </div>
                                                                                        <hr />

                                                                                        <div class="row">
                                                                                            <div class="col-md-3">
                                                                                                <div class="form-group">
                                                                                                    <label for="maxqty" style="font-weight:bold">Plate Source/Place</label>
                                                                                                    <input class="form-control" type="text" id="PlateSource" name="inputnumberfloat" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                                <div class="form-group">
                                                                                                    <label for="minqty" style="font-weight:bold">Plate Category</label>
                                                                                                    <input class="form-control" type="text" id="PlateCategory" name="inputnumberfloat">

                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                                <div class="form-group">
                                                                                                    <label for="Bins" style="font-weight:bold">Shape</label>

                                                                                                    <input class="form-control" type="text" id="Shape" name="inputnumberfloat" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-3">
                                                                                                <div class="form-group">
                                                                                                    <label for="Bins" style="font-weight:bold">Empty Wt.</label>

                                                                                                    <input class="form-control" type="text" id="EmptyWt" name="inputnumberfloat" onkeypress="isNumberthis(event, this)">

                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="row">
                                                                                            <label for="" class="col-md-3" style="font-weight:bold">G.V Wt.</label>
                                                                                            <label for="" class="col-md-3" style="font-weight:bold">Doors</label>
                                                                                            <label for="" class="col-md-3" style="font-weight:bold">Seats</label>
                                                                                            <label for="" class="col-md-3" style="font-weight:bold">Cylinders</label>
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <div class="row">
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" id="GVWt" autocomplete="off" onkeypress="isNumberthis(event, this)">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" id="Doors" autocomplete="off" onkeypress="isNumberInt(event, this)">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" id="Seats" autocomplete="off" onkeypress="isNumberInt(event, this)">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" id="Cylinders" autocomplete="off" onkeypress="isNumberInt(event, this)">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="row">
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <label for="" style="font-weight:bold">Make</label>
                                                                                                        <select class="form-control" id="CarMake" ></select>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <label for="" style="font-weight:bold">PayLoad</label>
                                                                                                        <input class="form-control" type="text" id="PayLoad" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <label for="maxqty" style="font-weight:bold">Mortage By</label>
                                                                                                        <input class="form-control" type="text" id="MortageBy" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <label for="minqty" style="font-weight:bold">Mortage Number</label>
                                                                                                        <input class="form-control atfcs" type="text" id="MortageNumber" autocomplete="off" onkeydown="ManualFocus('MortageNumber', 'btnsubmit', event)">
                                                                                                    </div>
                                                                                                </div>

                                                                                            </div>
                                                                                            @*<hr style="margin-top:10px"/>*@

                                                                                        </div>



                                                                                    </div>
                                                                                    <div class="tab-pane" id="div3" aria-labelledby="tab3">


                                                                                        <div class="form-group row">
                                                                                            <div class="col-md-6">
                                                                                                <div class="form-group">
                                                                                                    <label for="" style="font-weight:bold">Insurance Company</label>
                                                                                                    <input class="form-control" type="text" id="Insurancecompany" autocomplete="off" >
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <div class="form-group">
                                                                                                    <label for="" style="font-weight:bold">Type of Insurance</label>
                                                                                                    <input class="form-control" type="text" id="InsuranceType" autocomplete="off" >
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <div class="form-group">
                                                                                                    <label for="" style="font-weight:bold">Insurance Number</label>
                                                                                                    <input class="form-control" type="text" id="InsuranceNo" autocomplete="off" >
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <div class="form-group">
                                                                                                    <label for="" style="font-weight:bold">Insurance Start Date</label>
                                                                                                    <input class="form-control atfcs" type="text" id="InsStartDate" autocomplete="off" onkeydown="ManualFocus('InsStartDate', 'btnsubmit', event)">
                                                                                                </div>
                                                                                            </div>

                                                                                        </div>

                                                                                    </div>
                                                                                    <div class="tab-pane" id="div4" aria-labelledby="tab4">
                                                                                    

                                                                                            <div class="row">
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox1" />
                                                                                                        <label class="custom-control-label" for="myCheckbox1"><img src="~/app-assets/img/Cars/radiocar.png" width="122" height="122" />Radio</label>
                                                                                                    </div>

                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox2" />
                                                                                                        <label class="custom-control-label" for="myCheckbox2"><img src="~/app-assets/img/Cars/heaterorac.png" width="122" height="122" />Heater/AC</label>
                                                                                                    </div>

                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox3" />
                                                                                                        <label class="custom-control-label" for="myCheckbox3"><img src="~/app-assets/img/Cars/petrolcar.png" width="122" height="122" />Petrol</label>
                                                                                                    </div>

                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox4" />
                                                                                                        <label class="custom-control-label" for="myCheckbox4"><img src="~/app-assets/img/Cars/toolscar.jpg" width="122" height="122" />Tools&Jack</label>
                                                                                                    </div>

                                                                                                </div>


                                                                                            </div>
                                                                                            <div class="row">
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox5" />
                                                                                                        <label class="custom-control-label" for="myCheckbox5"><img src="~/app-assets/img/Cars/Lightscar.jpg" width="122" height="122" />Lights</label>
                                                                                                    </div>

                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="custom-control custom-checkbox" style="float:right">
                                                                                                        <input type="checkbox" class="custom-control-input scrtchs" id="myCheckbox6" />
                                                                                                        <label class="custom-control-label" for="myCheckbox6"><img src="~/app-assets/img/Cars/sparewheelcar.png" width="122" height="122" />Sparewheel</label>
                                                                                                    </div>

                                                                                                </div>
                                                                                            </div>
                                                                                        <div class="row mt-4">
                                                                                            <div class="col-md">
                                                                                                <div class="container1">
                                                                                                    <img src="~/app-assets/img/NoImage.png" style="width:100%" id="ScratchImg" />
                                                                                                    <button class="btn btlft" type="button" onclick="GetNextScratch(-1)">❮ </button>
                                                                                                    <button class="btn btrht" type="button" onclick="GetNextScratch(1)">❯ </button> 
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="col-md">
                                                                                                <input type="file" id="scrfiles0" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2 scrtimg" name="files[]" multiple="" accept="image/*" autocomplete="off">
                                                                                                <label for="" style="font-weight:bold">Scratch Details</label>
                                                                                                <textarea class="form-control" id="ScratchRemarks" autocomplete="off" style="height:120px;resize:none"></textarea>
                                                                                            </div>

                                                                                        </div>
                                                                                     
                                                                                       
                                                                                    </div>
                                                                                    <div class="tab-pane" id="divm" aria-labelledby="tabm">


                                                                                        <div class="form-group" style="opacity:0">

                                                                                            <div class="row">
                                                                                                <div class="col-md-3">
                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="col-md-3">

                                                                                                    <div class="form-group">
                                                                                                        <input class="form-control" type="text" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>


                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td width="5%"></td>
                                                </tr>
                                            </table>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td colspan="2" class="text-right" style="border-top:1px solid lightgrey;">
                                            @*<hr />*@
                                            <div style="margin-top:5px">
                                                <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1"><u>S</u>ave <i class="fa fa-check-square-o"></i></button>
                                                <button type="button" style="width:100px" id="btnlist" class="btn btn-primary btn-min-width mr-1 mb-1" onclick="GetRows(0)">List <i class="ft-align-justify"></i></button>
                                                <a style="width:100px;display:none;" id="btnlist2" href="@Url.Action("ProductList", "ABDataTable")" class="btn btn-primary btn-min-width mr-1 mb-1"> List <i class="ft-align-justify"></i></a>
                                                <button type="button" style="width:100px" id="btnnew" onclick="thisformrefresh(0); $('#scrfiles0').val('');" class="btn btn-primary btn-min-width mr-1 mb-1">New <i class="ft-refresh-cw position-right"></i></button>
                                                <button style="display:none" type="button" id="btndelete" class="btn btn-primary btn-min-width mr-1 mb-1">Delete <i class="fa fa-times"></i></button>
                                                <button style="display:none" type="button" id="btnprintbarcode" onclick="QuantityBarcode()" class="btn btn-primary btn-min-width mr-1 mb-1">Print Barcode<i class="ft-printer"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                </table>



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

<div style="display:none;" id="listing">
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <table width="100%">
                            <tr>
                                <td><h4 class="card-title" style="font-weight:bold;">Car List</h4></td>
                                <td align="right">
                                    <div class="heading-elements">
                                        <div>
                                            <button type="button" onclick="closelist()" class="btn btn-outline-primary" id="ed"><i class="ft-edit"></i> Add New</button>
                                            <span id="itemListButtonPlace">
                                            </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>


                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard" style="overflow:auto">
                            <table id="TblCars" class="table table-striped table-bordered base-style dataTable"></table>
                            <br />

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


<div id="Itempopup" class="modal fade text-left show ImpDiv" tabindex="-1" role="dialog" aria-labelledby="jobheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog modal-xl" role="document" style="top:3%;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="">IMAGE UPLOAD</h3>
                <button type="button" class="close" onclick="Prodpopshow(1)" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="GoldItemDiv">
                <div class="modal-body">
                    <div id="UploadDiv" class="hidelm">
                        <div style="overflow-y:scroll;overflow-x:hidden;">
                            <div class="px-3">
                                <div class="row">

                                    <label class="col-md-2" style="font-weight:bold;">Image Type</label>
                                    <div class="col-md-3">
                                        <select id="ImgType0" class="form-control">
                                            <option value="0">
                                                Select
                                            </option>
                                            <option value="1">
                                                Exterior
                                            </option>
                                            <option value="2">
                                                Interior
                                            </option>
                                            <option value="3">
                                                360
                                            </option>
                                        </select>

                                    </div>
                                    <label class="col-md-2" style="font-weight:bold;">Image</label>
                                    <div class="col-md-4">
                                        <input type='file' id="files0" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2 slfile" name="files[]" multiple accept="image/*" />
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-primary" id="MultipleUploadbtn" onclick="AddUploadDiv(1,2)" style="margin-top:15%">Add</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="MainDivseq" style="height:400px;overflow-y:scroll;overflow-x:hidden;">

                        </div>

                    </div>

                    <div id="viewdocdiv" style="display:none;height:450px;overflow-y:auto" class="hidelm">
                    <table id="tbl_documentlist" class="table table-striped table-bordered zero-configuration dataTable"></table>
                    </div>

                    <div id="TypeDocDiv" style="display:none;" class="hidelm">
                        <div class="form-group">

                            <div class="row">
                                <div class="col-md-1">

                                </div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <label for="DocImg" class="topIMG col-md-2 im" id="AllDoc"  onclick="$('#DocType').val(2),ViewSavedFiles(2)">ALL </label>
                                        <label for="DocImg" class="topIMG col-md-2 im1" id="INTERIOR"  onclick="$('#DocType').val(3),ViewSavedFiles(3)">INTERIOR </label>
                                        <label for="DocImg" class="topIMG col-md-2 im2" id="EXTERIOR"  onclick="$('#DocType').val(4),ViewSavedFiles(4)">EXTERIOR</label>
                                        <label for="DocImg" class="topIMG col-md-2 im3" id="DOCROT"  onclick="$('#DocType').val(5), ViewSavedFiles(5), GetRotateImg()">360</label>
                                    </div>

                                    <div class="rotatebox" style="text-align:center;cursor:pointer;display:none;">

                                        <div class="row">
                                            <label class="topIMG col-md-2 im" id="AllDoc" style="z-index:1000" onclick="$('#DocType').val(2),ViewSavedFiles(2)">ALL </label>
                                            <label class="topIMG col-md-2 im1" id="INTERIOR" style="z-index:1000" onclick="$('#DocType').val(3),ViewSavedFiles(3)">INTERIOR </label>
                                            <label class="topIMG col-md-2 im2" id="EXTERIOR" style="z-index:1000" onclick="$('#DocType').val(4),ViewSavedFiles(4)">EXTERIOR</label>
                                            <label class="topIMG col-md-2 im3" id="DOCROT" style="z-index:1000" onclick="$('#DocType').val(5), ViewSavedFiles(5), GetRotateImg();">360</label>
                                        </div>
                                        <div class="images slider ">

                                        </div>

                                    </div>


                                    <img id="DocImg" style="text-align:center;cursor:pointer;width:950px;height:600px" src="~/app-assets/img/Cars/car1.jpg" class="img-thumbnail  gradient-back-to-earth">
                                    <label for="DocImg" class="prev2" id="previous1" onclick="PrevNextPopup(0, 'P')">❮ </label>
                                    <label for="DocImg" class="next2" id="next1" onclick="PrevNextPopup(0, 'N')">❯</label>
                                    <input type="text" id="DocId" class="form-control" value="0" style="display:none" />
                                    <input type="text" id="DocType" class="form-control" value="0" style="display:none" />
                                </div>
                                <div class="col-md-1">

                                </div>
                            </div>

                        </div>

                    </div>
                        <div class="form-actions text-right row" style="padding-bottom: 0px">                           
                            <div class="col-md-12">
                             <button type="button" id="btnviedoc" style="display:none" class="btn btn-outline-primary hidelm" onclick="Prodpopshow(4), ViewSavedFiles(0)">View</button>
                             <button type="button" id="btnshowdoc" style="display:none" class="btn btn-outline-primary hidelm" onclick="Prodpopshow(3),ViewSavedFiles(2)">Show</button> 
                             <button type="button" style="display:none" id="btnadddoc" class="btn btn-outline-primary hidelm" onclick="Prodpopshow(5)">Add Image</button>
                             <button type="button" id="btnadd" class="btn btn-outline-primary hidelm" onclick="Prodpopshow(2)">Save</button>  </div>
                        </div>
                   
                </div>

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

</div>

<div style="display:none">
    <input type="text" id="CarId" class="form-control"/> 
</div>