<html>
<?php include 'head.php';  ?>
 <style>
.modal-body{
    padding:25px !important;
}

 </style>
<body>
<div class="col-md-12 col-lg-12 col-sm-12" id="capture">
<div id="map" class="col-md-7 col-lg-7 col-sm-7">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		 
<img id="image1" src="img/Car.jpeg" class="map" usemap="#image-map" hidefocus="true">


  <map name="image-map">

    <area  alt="B" title="Front_bumper"  onclick="ShowDG(this)"  coords="228,72,219,50,253,48,275,48,312,50,340,46,364,48,401,49,421,48,439,48,468,50,455,72,340,67" shape="poly">
    <area  alt="G" title="Left_headlamp" onclick="ShowDG(this)"  coords="281,95,12" shape="circle">
    <area  alt="G" title="Right_headlamp"  onclick="ShowDG(this)"  coords="405,95,10" shape="circle">
    <area  alt="B" title="Front_grill" onclick="ShowDG(this)"  coords="300,105,295,83,322,82,335,82,350,80,368,82,389,83,389,105" shape="poly">
    <area  alt="B" title="Front_bonnet" onclick="ShowDG(this)"  coords="229,243,234,122,273,113,325,111,369,114,401,114,455,122,458,238,334,223" shape="poly">
    <area  alt="G" title="Front_glass"  onclick="ShowDG(this)"  coords="261,293,237,250,310,232,345,233,374,235,411,241,446,251,425,293" shape="poly">
    <area  alt="G" title="Right_front_door_glass" onclick="ShowDG(this)" coords="461,286,445,304,436,317,430,333,430,357,431,382,462,381" shape="poly">
    <area  alt="G" title="Right_rare_door_glass" onclick="ShowDG(this)" coords="429,386,461,387,463,501,430,502" shape="poly">
    <area  alt="G" title="Left_front_door_glass" onclick="ShowDG(this)" coords="226,280,254,321,257,382,223,381" shape="poly">
    <area  alt="G" alt="Left_rare_door_glass" title="Left_rare_door_glass" onclick="ShowDG(this)" coords="224,387,257,498" shape="rect">
    <area  alt="B" title="Roof" onclick="ShowDG(this)"  coords="260,384,430,558" shape="rect">
    <area  alt="G" title="Rare_glass" onclick="ShowDG(this)" coords="268,575,259,581,254,593,248,604,248,612,246,620,254,620,269,622,278,626,301,627,318,628,341,629,357,627,377,627,400,624,422,622,430,613,436,609,431,596,424,584,418,575,410,573,392,573,367,574,349,574,331,574,310,573,291,573" shape="poly">
    <area  alt="B" title="Back_door" onclick="ShowDG(this)" coords="227,637,236,618,243,623,236,633,232,642,228,662,228,673,258,686,278,685,302,688,318,689,333,689,359,690,395,687,425,684,457,671,456,634" shape="poly">
    <area  alt="G" title="Left_taillamp" onclick="ShowDG(this)"  coords="245,701,284,707,287,715,248,718" shape="poly">
    <area  alt="G" title="Right_taillamp" onclick="ShowDG(this)"  coords="397,706,436,702,434,716,393,717" shape="poly">
    <area  alt="B" title="Rare_bumper" onclick="ShowDG(this)"  coords="219,762,224,738,313,750,355,750,403,747,460,737,468,762" shape="poly">
    <area  alt="B" title="Right_front_tire" onclick="ShowDG(this)"  coords="604,522,42" shape="circle">
    <area  alt="B" title="Right_front_fender" onclick="ShowDG(this)"  coords="594,80,581,80,562,83,544,89,527,94,515,97,511,105,506,112,502,120,500,132,464,232,466,273,581,274,573,249,555,231,547,218,544,199,543,182,549,165,558,155,580,139,594,137,599,125,599,107,599,92" shape="poly">
    <area  alt="B" title="Right_front_door" onclick="ShowDG(this)"  coords="467,278,581,379" shape="rect">
    <area  alt="B"title="Right_rare_door" onclick="ShowDG(this)"   coords="469,385,479,385,492,384,509,385,522,385,539,385,551,385,560,385,581,386,582,439,528,475,520,496,467,495,467,464" shape="poly">
    <area  alt="B" title="Right_rare_fender" onclick="ShowDG(this)"  coords="594,582,551,552,554,464,538,472,529,498,470,501,467,641,526,641,595,642,549,545,595,639" shape="poly">
    <area  alt="B" title="Right_rare_tire" onclick="ShowDG(this)"  coords="606,197,41" shape="circle">
    <area  alt="B" title="Left_front_tire" onclick="ShowDG(this)"  coords="84,197,40" shape="circle">
    <area  alt="B" title="Left_front_fender" onclick="ShowDG(this)"   coords="92,80,134,85,167,94,176,99,181,111,183,121,187,134,190,143,194,157,220,227,222,272,96,271,97,256,135,231,142,201,142,181,133,157,95,135" shape="poly">
    <area  alt="B" title="Left_front_door"  onclick="ShowDG(this)"  coords="105,280,218,380" shape="rect">
    <area  alt="B" title="Left_rare_door" onclick="ShowDG(this)"  coords="108,388,218,386,217,496,168,492,113,433,109,415" shape="poly">
    <area  alt="B" onclick="ShowDG(this)" title="Left_rare_fender"  coords="93,583,93,644,221,644,218,503,177,501,167,506,162,512,153,519,152,526,127,564" shape="poly">
    <area  alt="B" title="Left_rare_tire" onclick="ShowDG(this)"  coords="82,523,39" shape="circle">

    <!-- <area  alt="rear_bumper_support" title="rear_bumper_support"  coords="223,729,240,736,254,739,282,742,316,743,357,744,410,741,444,736,467,728" shape="poly">
    <area  alt="front_bumper_support" title="front_bumper_support" onclick="ShowDG(this)"  coords="223,87,237,78,282,73,333,72,377,73,431,77,468,84,312,73,260,80" shape="poly">
    <area  alt="Sun_roof" title="Sun_roof" onclick="ShowDG(this)"  coords="260,303,428,380" shape="rect">
    <area  alt="22" title="22" onclick="ShowDG(this)"  coords="55,253,90,467" shape="rect">
    <area  alt="23" title="23" onclick="ShowDG(this)"  coords="601,255,629,465" shape="rect"> -->

    </map>
</div>

 
<div class="col-md-5 col-lg-5 col-sm-5">
<p id="inscpText" style="margin: 10px;"><strong style="font-size:15px;">
   <a alt="E" title="Engine_room" style="background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none; color:green;display:none" onclick="ShowDG(this)">Record Inspection for Engine Room.</a>
  </br>
<a style="display:none" href="recordDesctItems.php">Enter Misc Details.</a></strong></br></p>
<p id="gradeExtText" style="margin: 10px;"><strong style="font-size:17px;">Exterior Grade:</strong></br></p>


<select id="exteriorGrade"  class="form-control" style="margin: 10px;">
  <option value="">Select Exterior Grade</option>
  <option value="S">S</option>
  <option value="5">5</option>
  <option value="4.5">4.5</option>
  <option value="4">4</option>
  <option value="3.5">3.5</option>
  <option value="3">3</option>
  <option value="3">3</option>
  <option value="1">1</option>
  <option value="RA or A1">RA or A1</option>
  <option value="R or A">R or A</option>

</select>

<p id="gradeIntText" style="margin: 10px;"><strong style="font-size:17px;">Interior Grade:&nbsp;</strong></br></p>
<select id="interiorGrade" class="form-control" style="margin: 10px;">
  <option value="">Select Interior Grade</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
 </select>

<button type="button" id="addAuctGrade" style="margin: 10px;" class="btn btn-primary">Save Record</button>

<br>
<p  style="margin: 10px;"><strong style="font-size:17px;">Inspection Table:&nbsp;</strong></br></p>

<table class="table table-striped table-bordered"  style="display:none;"  id="Engine_room_table">
  <thead >
    <!-- <a style="margin: 10px;">Show Complete Code With Keys.(Remove Or Stay Here?)</a></strong></br> -->
    <tr>
      <th>Section</th>
      <th>Inspections</th>
      <!-- <th>Category(Need to Discuss)</th> -->
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>


</div>



</div>


<script>




            function calculateCenterPoint(areas) {

                var maxX = 0,
                    minX = Infinity,
                    maxY = 0,
                    minY = Infinity;

               // note: using Array.prototype.forEach instead of calling forEach directly
               // on "areas" so it will work with array-like objects, e.g. jQuery

                Array.prototype.forEach.call(areas, function (e) {

                    var i = 0,
                        coords = e.getAttribute('coords').split(',');

                    while (i < coords.length) {
                        var x = parseInt(coords[i++],10),
                            y = parseInt(coords[i++],10);

                        if (x < minX) minX = x;
                        else if (x > maxX) maxX = x;

                        if (y < minY) minY = y;
                        else if (y > maxY) maxY = y;
                    }
                });

                return {
                    x: minX + (maxX - minX) / 2,
                    y: minY + (maxY - minY) / 2
                };
            }








  //var stock_id =  "<?php// echo json_decode($_GET['stock_id'])[0]?>";
  var stock_id =  "<?php echo $_GET['stock_id']?>";
  var inspectionArray = new Array;
  var descArr = new Array;
  var arr2;


$("#addAuctGrade").click(function(){

  var interiorGrade = $('#interiorGrade').find(":selected").val();
  var exteriorGrade = $('#exteriorGrade').find(":selected").val();



  if(interiorGrade.length> 0 && exteriorGrade.length>0){
     html2canvas(document.querySelector("#map")).then(canvas => {
     
    $.post("storeAuc.php?stock_id="+stock_id ,
    {
      ext:exteriorGrade,
      int:interiorGrade,
      img:canvas.toDataURL()

    },

     function( data ) {

      // alert(data);
       location.reload();

    });
  });
  }else{
    alert("Please Select Grading");
  }


   });

 
      // Getting Inspections Here..

              $.ajax({
                    async: false,
                    cache: false,
                    type: 'POST',
                    url: "getInspections.php?stock_id="+stock_id,
                    dataType: "JSON",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {


                        if(data.length>0){

                          var keys = Object.keys(data[0]);

                          inspectionArray.push(Object.values(data[0]));

                          if(keys.includes("Engine_room")){
                            console.log("True");
                            console.log(data[0]["Engine_room"]);
                            var Engine_room = "Engine room";
                            $('#Engine_room_table').append('<tr><td>' +Engine_room+ '</td><td>' +data[0]["Engine_room"]+ '</td></tr>');

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

                                $('area').each(function(){

                                  if(keys.includes($(this).attr('title'))){
                                    console.log(typeof $(this).attr('title') );
                                    var txt= data[0][$(this).attr('title')];
                                    var txtNoUnderScore = $(this).attr('title').replace(/_/g,' ');
                                    $('#Engine_room_table').show();
                                    $('#Engine_room_table').append('<tr><td>' +txtNoUnderScore+ '</td><td>' +txt+ '</td></tr>');
                                    var c;
                                    var leftNum = Number(left);

                                    if($(this).attr('shape') === "poly"){
                                      var c = calculateCenterPoint($(this));
                                      console.log(c);
                                      var $span=$('<p>'+txt+'</p>');
                                      $span.css({top:Number(c.y)+'px', left:Number(c.x)-20+'px', position:'absolute', color:"red","margin-top": "-3px","margin-left": "5px"});
                                      $span.appendTo('#map');
                                      if( $(this).attr('title') === "Right_taillamp" || $(this).attr('title') === "Left_taillamp"){
                                        $span.css({top:Number(c.y)-8+'px', left:Number(c.x)+'px', position:'absolute', color:"red","margin-top": "-3px","margin-left": "5px"});


                                        }
                                    }

                                    if($(this).attr('shape') === "rect"){

                                      var coor=$(this).attr('coords');
                                      var coorA=coor.split(',');
                                      var left=coorA[0];
                                      var top=coorA[1];
                                      var $span=$('<p>'+txt+'</p>');
                                      $span.css({top: Number(top)+30+'px', left: Number(left)+15+'px', position:'absolute', color:"red","margin-top": "-3px","margin-left": "5px"});
                                      $span.appendTo('#map');


                                    }

                                    if($(this).attr('shape') === "circle"){
                                        var coor=$(this).attr('coords');
                                        var coorA=coor.split(',');
                                        var left=coorA[0];
                                        var top=coorA[1];
                                        var $span=$('<p>'+txt+'</p>');
                                        $span.css({top: top+'px', left: left+'px', position:'absolute', color:"red","margin-top": "-3px","margin-left": "5px"});
                                        $span.appendTo('#map');
                                      console.log("circle Here");
                                    }
  
                                    //var left=parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2);
                                    //var top=parseInt(coorA[1])+((parseInt(coorA[3])-parseInt(coorA[1]))/2)
 
                                  }
                                  else{

                                   console.log("Not Matched");

                                  }

                              });

                              });


                        }else{
                          console.log("No Record Found");
                        }



                    },
                    error: function (request, ajaxOptions, thrownError) {
                      console.log(thrownError);
                      console.log(ajaxOptions);
                      console.log(request);

                    }
                });



                function onlyUnique(value, index, self) {
                  return self.indexOf(value) === index;
                }





                console.log(inspectionArray.length);
                if(inspectionArray.length>0){

                  arr2 = Object.values(inspectionArray[0]);

                  var unique = arr2.filter(onlyUnique);

                    // $.post("getInspectionDesc.php?id="+JSON.stringify(unique),
                    //
                    //  function( data ) {
                    //
                    //
                    //
                    //    var jsn = $.parseJSON(data);
                    //
                    //
                    //
                    //    for (var i = 0; i < jsn.length; i++)
                    //      {
                    //        if(jsn[i].length===0){
                    //             jsn.splice(i,1);
                    //       }
                    //
                    //
                    //       }
                    //
                    //     for (var k = 0; k < jsn.length; k++){
                    //       $('#Engine_room_table').show();
                    //      $('#Engine_room_table').append('<tr><td>' +jsn[k].id+ '</td><td>' +jsn[k].Desc + '</td></tr>');
                    //
                    //
                    //    }//<td>'+jsn[k].Cat+'</td>
                    //      console.log(jsn);
                    //
                    //
                    //
                    //
                    //
                    // });





                }else{
                  console.log("Error");
                }






                  $.post("getAuctDetails.php?stock_id="+stock_id,

                   function( data ) {

                     if(data.length>0){
                       var jsn = $.parseJSON(data);

                       if(jsn.hideView === 'Yes'){

                         $('#gradeIntText').append(jsn.IntID+" - "+jsn.IntDescr);
                         $('#gradeExtText').append(jsn.ExtID+" - "+jsn.ExtDescr);
                         $('#interiorGrade').hide();
                         $('#exteriorGrade').hide();
                         $('#addAuctGrade').hide();

                       }else{

                         $('#interiorGrade').show();
                         $('#exteriorGrade').show();
                         $('#addAuctGrade').show();
                       }

                     }



                  });


            //End getting Inspections Here...


     var list = [];

     function ShowDG(element) {

      var alt = $(element).attr("alt");
      var title = $(element).attr("title");
      $('#ColumnName').text(title);
      $('#myCheckBoxModal').modal('show');
      getInspectionItems(alt);

    }


    function getInspectionItems(imagePart){



      $.post("getInspectionItems.php",
      {
        Type:imagePart
      },
      function( data ) {


          var jsn = $.parseJSON(data);

          $(".modal-body").empty();
          for (var i = 0; i < jsn.length; i++)
      	    {

                 $('<input />', {type: 'checkbox', 'id':jsn[i].id, 'value':jsn[i].Desc }).appendTo(".modal-body");
                 $('<label />', {'style':'margin-left: 5px; margin-right: 20px;', 'for': jsn[i].id , 'text':jsn[i].id  }).appendTo(".modal-body");
                 //+' / '+ jsn[i].Desc 
                 $( ).appendTo(".modal-body");

        	  }

      });

    }




    $(document).ready(function(){

     $('img[usemap]').rwdImageMaps();

 
         $.post("updateCarDetails.php?stock_id="+stock_id,

    			function(data,status){

    			    if(data = "Record updated successfully"){


    			        console.log("Record Inserted");
    			    }else{

    			         console.log("NO Record Inserted");
    			    }
    			});


    $('#saveChanges').on('click', function(evt)


    {
        $.each($("input[type='checkbox']:checked"), function() {


            $.post("saveInspection.php?stock_id="+stock_id,
        		{
        			row:$(this).attr("id"),
              column: $("#ColumnName").text()
        		},
        			function(data,status){

                $('#myCheckBoxModal').modal('hide');
                location.reload();
        			  console.log(data);

        			});

              });


      }
      );


      });
</script>

<div class="modal fade bd-example-modal-lg" id="myCheckBoxModal" tabindex="-1" role="dialog" aria-labelledby="myCheckBoxModalTitle" aria-hidden="true">
  <div class="modal-dialog   modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="headerValue" style="margin-top: 0px;margin-bottom: -20px;">Record Insepection
        <p id ="ColumnName" style="display:none;">
      </p>
    </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <a  class="btn btn-primary" id="saveChanges">Save Changes</a>

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



  </body>
  </html>
