@extends('layouts.master')

@section('content')

<style>
    

strong {
	font-weight: bold; 
}

em {
	font-style: italic; 
}

table {
	background: #f5f5f5;
	border-collapse: separate;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 24px;
	margin: 5px auto;
	text-align: left;
	width: auto;
}	

th {
  background: linear-gradient(to top,#3d4349, #121212,#3d4349); 
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
  font-weight: bold;
	padding: 5px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 25%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 5px 15px;
	position: relative;
	transition: all 300ms;
  font-weight: bold;
}

td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

tr {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}	

<!---->
tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}	

tbody:hover tr:hover td {
	color: #444;
	text-shadow: 0 1px 0 #fff;
}
</style>

			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <div class="container">
                  <div class="col-md-10" style="text-align: center margin-top:10px;">
            @if(session()->get('success'))
                  <div class="alert alert-success" style=" background: linear-gradient(to top, #60bf89, #d7f3e3, #60bf89); ">
                {{ session()->get('success') }}  
                      </div>
            @endif
          </div></div>

            
                <div class="container">
                  <div class="col-md-12">
              @if(session()->get('errorsrep'))
                  <div class="alert alert-danger">
                {{ session()->get('errorsrep') }}  
                      </div>
              @endif
              </div></div>
              
              <div>
                @if ($errors->any())
                <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div><br/>
              @endif</div>

                <div class="content-header">
                    <div class="container-fluid">
                      <div class="row mb-2">
                        <div class="col-sm-6">
                          <h1 class="m-0 text-dark">Liste des Dossiers</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                          <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">
                                <a href="{{ url('/home') }}" style="color: black;">
                                <i class="fa fa-home fa-fw" aria-hidden="true" style="color:black;"></i> 
                                Accueil
                            </a>
                            </li>
                            <li class="breadcrumb-item active" style="color:#343a40;">Constat</li>
                          </ol>
                        </div><!-- /.col -->
                      </div><!-- /.row -->
                    </div><!-- /.container-fluid -->
                  </div>

				<!-- Main content -->
				<section id="main" class="content">	
        <div class="row" style="float:right; margin-right:5px; margin-bottom:15px;">
           
              <a type="button" class="btn btn-primary"
              style="background:linear-gradient(to top,#1259ac,#42b3ee,#1259ac); 
                                color:#fff; margin-right:5px;" href="{{ url('constats/create') }}"> 
                                
                                <i class="fas fa-car-crash"></i> Ajouter Constat
              </a>    

            </div>
            <br>

        <table id="table" style="width: 100%;" class="table-responsive-sm">
  <thead>
    <tr>
      <th>Numero Police</th>
      <th>Courtier</th>
      <th>Date Avant Reparation</th>
      <th>Réf Dossier</th>
      <th>chocs</th>
      <th>Image_Chocs</th>
      <th>Action</th>
      
    </tr>
  </thead>
  <tbody>
    @foreach ($constats as $constat)
    <tr>
      <input type="hidden" value="{{ $constat->dossier_id}}" class="dossier_id">
      <td><strong>{{ $constat->numeroPolice }}</strong></td>
      <td><strong>{{ $constat->courtier }}</strong></td>
      <td><strong>{{ $constat->avantReparation }}</strong></td>
      <td><strong>{{ $constat->dossier->reference}}</strong></td>
      <td><strong>{{ $constat->chocs}}</strong></td>
      <td style=" background-color: #fff;">
        <!--  <img src="{{ asset('style/images/voiture.png') }}" alt="voiture assurer" style="width: 90px; height:170 0px; margin:0;"> -->
          <img
                              id="veg_image"
                              src="{{asset('style/images/trace voiture.png')}}"
                              usemap="#veg_map{{$constat->id}}"
                              style="width: 180px; height:85px; margin:0; background-color: #fff;"
                            />
                            <map name="veg_map{{$constat->id}}" id="veg_map{{$constat->id}}">
                              <area
                              id="Capot{{$constat->id}}"
                              shape="poly"
                              data-name="Capot"
                              data-description="Capot"
                              data-tooltip="Capot"
                              coords="162,40,142,31,114,31,77,36,63,42,37,64,25,105,22,123,23,159,30,193,45,220,58,231,83,242,104,245,138,246,163,237,143,171,143,119,152,74" 
                              href="#"
                              />
                              
                              <area 
                              id="Porte_Arrière_Droite{{$constat->id}}"
                              shape="poly"
                              data-name="Porte_Arrière_Droite"
                              data-description="Porte_Arrière_Droite"
                              data-tooltip="Porte_Arrière_Droite"
                              coords="331,21,465,20,470,29,457,40,338,36,334,25"
                              href="#"
                              />
                              
                              <area
                              id="Ail_Arrière_Droite{{$constat->id}}"
                              shape="poly"
                              data-name="Ail_Arrière_Droite"
                              data-description="Ail_Arrière_Droite"
                              data-tooltip="Ail_Arrière_Droite"
                              coords="466,19,527,23,559,30,549,33,571,42,586,55,590,62,577,54,561,51,528,50,499,51,479,55,471,59,440,61,433,54,431,48,440,45,452,43,461,38,471,30" 
                              href="#"
                              />
                              
                              <area
                              id="Ail_Arrière_Gauche{{$constat->id}}"
                              shape="poly"
                              data-name="Ail_Arrière_Gauche"
                              data-description="Ail_Arrière_Gauche"
                              data-tooltip="Ail_Arrière_Gauche"
                              coords="471,216,490,224,508,226,528,226,547,226,566,222,579,217,589,214,586,224,573,234,557,241,550,241,559,247,546,251,519,254,491,256,472,256,470,245,460,234,450,232,439,230,432,229,433,220,441,215"
                              href="#"
                              />
                              
                              <area
                              id="Porte_Arrière_Gauche{{$constat->id}}"
                              shape="poly"
                              data-name="Porte_Arrière_Gauche"
                              data-description="Porte_Arrière_Gauche"
                              data-tooltip="Porte_Arrière_Gauche"
                              coords="330,256,466,258,469,244,458,237,429,236,339,240"
                              href="#"
                              />
                              
                              <area
                              id="Porte_Conducteur{{$constat->id}}"
                              shape="poly"
                              data-name="Porte_Conducteur"
                              data-description="Porte_Conducteur"
                              data-tooltip="Porte_Conducteur"
                              coords="185,245,180,254,328,257,336,240,223,238"
                              href="#"
                              />
                              
                              <area
                              id="Porte_Avant_Droite{{$constat->id}}"
                              shape="poly"
                              data-name="Porte_Avant_Droite"
                              data-description="Porte_Avant_Droite"
                              data-tooltip="Porte_Avant_Droite"
                              coords="179,22,328,22,336,35,219,37,184,31"
                              href="#"
                              />
                              
                              <area
                              id="Malle{{$constat->id}}"
                              shape="poly"
                              data-name="Malle"
                              data-description="Malle"
                              data-tooltip="Malle"
                              coords="527,52,558,51,589,63,601,136,590,211,559,221,530,224,552,173,556,133,552,105,541,76"
                              href="#"
                              />
                              
                              <area
                              id="Ail_Avant_Gauche{{$constat->id}}"
                              shape="poly"
                              data-name="Ail_Avant_Gauche"
                              data-description="Ail_Avant_Gauche"
                              data-tooltip="Ail_Avant_Gauche"
                              coords="166,238,184,238,184,245,179,254,127,256,94,255,74,250,63,242,59,234,72,238,84,241,95,245,111,248,139,247"
                              href="#"
                              />
                              
                              
                              <area
                              id="Ail_Avant_Droite{{$constat->id}}"
                              shape="poly"
                              data-name="Ail_Avant_Droite"
                              data-description="Ail_Avant_Droite"
                              data-tooltip="Ail_Avant_Droite"
                              coords="183,38,163,38,145,30,98,30,62,40,76,29,68,28,92,22,126,20,151,21,166,23,176,22"
                              href="#"
                              />
                              
                              <area
                              id="Part_Choque_Avant{{$constat->id}}"
                              shape="poly"
                              data-name="Part_Choque_Avant"
                              data-description="Part_Choque _vant"
                              data-tooltip="Part_Choque_Avant"
                              coords="40,41,23,62,19,69,15,73,1,136,9,186,13,204,21,208,30,228,38,235,36,229,29,219,43,227,49,231,56,235,38,216,33,203,26,184,22,157,20,138,25,97,37,62,59,41,29,60"
                              href="#"
                              />
                              
                              <area
                              id="Part_Choque_Arrière{{$constat->id}}" 
                              shape="poly"
                              data-name="Part_Choque_Arrière"
                              data-description="Part_Choque_Arrière"
                              data-tooltip="Part_Choque_Arrière"
                              coords="591,65,601,134,599,172,593,209,592,226,609,154,606,100,600,71,590,48"
                              href="#"
                              />
                              
                               <area
                               id="Toit{{$constat->id}}"
                              shape="poly"
                              data-name="toit"
                              data-description="Toit"
                              data-tooltip="toit"
                              coords="286,58,287,217,375,211,468,214,469,200,476,141,475,111,468,71,470,61,382,62,335,61"
                              href="#"
                              />
                            
                          </map>
      </td>
      <td>
      <form action="{{ route('constats.destroy', $constat->id) }}" method="post">
          @csrf
          @method('DELETE')
          <div style="text-align:center;">
          <a class="badge badge-light" href="{{ route('constats.edit', $constat->id) }}" >
            <i class="fas fa-edit" style="color: #0bcb85; font-size:13px;"></i>
          </a>
          <button class="badge badge-light" style="font-size:13px; border-style:none; margin-right:10px; margin-left:10px;" type="submit"
          onclick="return confirm('Si cette Dossier est SUPPRIMER en supprimera aussi toutes les vehicules,constats et fournitures qui appartient a cette Constats, Voulez-vous vraiment supprimer cette Constats ??');">
            <i class="fas fa-trash-alt" style="color:red; font-size:13; border-style:none;"></i></button>             
          </div>
         
      </form>
    </tr>
    @endforeach
    
    
    
  </tbody>
  <tfoot>
  <tr>
    <th>Numero Police</th>
    <th>Courtier</th>
    <th>Date Avant Reparation</th>
    <th>Réf Dossier</th>
    <th>chocs</th>
      <th>Image_Chocs</th>
    <th>Action</th>
  </tr>
  </tfoot>
</table>
       
    </section>
<!-- /.content -->
            </div>
            


<script type="text/javascript" src="{{ asset('redist/es6-promise.auto.min.js') }}"></script>
<script src="{{ asset('redist/jquery.PrintArea.js') }}"></script>
<script type="text/javascript" src="{{ asset('redist/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('redist/jquery.imagemapster.js') }}"></script>
<script type="text/javascript" src="{{ asset('redist/html2canvas.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('redist/jspdf.min.js') }}"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
      $(document).ready(function() {
        $('img[usemap]').mapster({
    
    fillColor: 'ff0000',
    //stroke: false,
    singleSelect: false,
    selected: false,
    isSelectable: false, 
  
    fillOpacity: 0.4,
    strokeOpacity: 1,
    strokeWidth: 0.5,
    render_select: {
    strokeWidth: 2
              },
    render_highlight: {
    strokeWidth: 2
              },
    stroke: true,

    
  
  });
  
   //var ds_id= document.getElementById('dossier_id').value;
   var ds_id = document.getElementsByClassName('dossier_id');
   console.log(ds_id.length);
   for (let i=0;i<ds_id.length;i++)
   {
    console.log(ds_id[i].value);
        //$.get("{{url('insert-ajax')}}/"+id, function(data) {
           // for(var i=0;i<data.length;i++){
               //     console.log(data[i].id);
                //  }
          //console.log(ds_id);
  
          $.ajax({
             
             type:'get',
             url:"{{url('insert-ajax')}}/" + ds_id[i].value,
            // url:'{!!URL::to('insert-ajax')!!}',
            // data:{'id':ds_id},
             success:function(data){
                 console.log('success');

                 console.log(data);

                 console.log(data.length);
                 
                for(var i=0;i<data.length;i++){
                  //data1[] = data[i].id;
                  //console.log();
                     console.log(data[i].chocs);
                     const strr = data[i].chocs;
                     var idconstat = data[i].id;
                     console.log(strr);
                     const words = strr.split(',');

//document.getElementById(words[0]).style.color ='blue';
  //var nbm = words.length ;
                    console.log(words);

                    let n=words.length
                    console.log(n);
                for(let i=0;i<n;i++)
               {
                    console.log(words[i]);

                    $('#'+ words[i]+ idconstat ).mapster('select');
//document.getElementById(words[i]).mapster('select');
                }
//$(words[item]).css('color','red');

//console.log(words);
                }
               },
             error:function(){
                    console.log('erreur');
             }
            });  
            }      
            });
 
    </script>
@endsection