@extends('layouts.master')

@section('content')

<style>
  body {
background: #fafafa url(https://jackrugile.com/images/misc/noise-diagonal.png);
color: #444;
font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
text-shadow: 0 1px 0 #fff;
}

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 Vehicules Adversaire</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;">Dossier</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('vehiculeas/create') }}"> 
                                
              <i class="fas fa-car-side"></i> Ajouter Vehicule Adversaire
              </a>  
                                
            </div>
            <br>

        <table id="table" style="width: 100%;" class="table-responsive-sm">
  <thead>
    <tr>
      <th>Matricule</th>
      <th>Marque</th>
      <th>Type</th>
      <th>Numero Serie</th>
      <th>Puissange Fisc</th>
            <th>Energie</th>         
            <th>DMC</th>
            <th>Kilometrage</th>
            <th>Etat Generale</th>
            <th>Etat Pneus</th>
            <th>Immobilisation</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($vehicules as $vehicule)
    <tr>
      <td><strong>{{ $vehicule->matricule }}</strong></td>
      <td><strong>{{ $vehicule->marque }}</strong></td>
      <td><strong>{{ $vehicule->type }}</strong></td>
      <td><strong>{{ $vehicule->numeroSerie }}</strong></td>
      <td><strong>{{ $vehicule->puissangeFisc }}</strong></td>
      <td><strong>{{ $vehicule->energie }}</strong></td>
      <td><strong>{{ $vehicule->DMC }}</strong></td>
      <td><strong>{{ $vehicule->kilometrage }}</strong></td>
      <td><strong>{{ $vehicule->etatGenerale }}</strong></td>
      <td><strong>{{ $vehicule->etatPneus }}</strong></td>
      <td><strong>{{ $vehicule->immobilisation }}</strong></td>
      
      <td>
      <form action="{{ route('vehiculeas.destroy', $vehicule->id ) }}" method="post">
          @csrf
          @method('DELETE')
          <div style="text-align:center;">
          <a class="badge badge-light" href="{{route('vehiculeas.edit', $vehicule->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:5px; margin-left:5px;" type="submit"
          onclick="return confirm('Voulez-vous vraiment supprimer cette vehicule ??');">
            <i class="fas fa-trash-alt" style="color:red; font-size:13; border-style:none;"></i></button> 
            
          </div>
         
      </form>
       </td>
      
    </tr>
    @endforeach
  
   
  </tbody>
  <tfoot>
  <tr>
      <th>Matricule</th>
      <th>Marque</th>
      <th>Type</th>
      <th>Numero Serie</th>
      <th>Puissange Fisc</th>
            <th>Energie</th>         
            <th>DMC</th>
            <th>Kilometrage</th>
            <th>Etat Generale</th>
            <th>Etat Pneus</th>
            <th>Immobilisation</th>
      <th>Action</th>
    </tr>
  </tfoot>
</table>
       
    </section>
<!-- /.content -->
            </div>
            


<!-- Button trigger modal -->
  

@endsection