@extends('layouts.appadmin')

@section('content')

<style>
.gradient-custom {
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}

.card-custom {
border-bottom-left-radius: 10% 50%;
border-top-left-radius: 10% 50%;
background-color: #f8f9fa ;
}


.input-custom {
background-color: white ;
}

.white-text {
color: hsl(52, 0%, 98%);
font-weight: 100 ;
font-size: 14px;
}

.back-button {
background-color: hsl(52, 0%, 98%);
font-weight: 700;
color: black ;
margin-top: 50px ;
}
</style>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          
            <h2 class="font-weight-bold">Information </h2>
          </div><!-- /.col -->
          
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
<!-- Button trigger modal -->
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#modal-xl">
             Aouter Information </button>
   
               <div class="modal fade" id="modal-xl">
       <div class="modal-dialog modal-xl">
    <div class="modal-content">

      <div class="modal-body bg-info">

      <div class="row mt-3 mx-3" style="margin-top:25px ;">
  <div class="col-md-3">
    <div style="margin-top: 50px; margin-left: 10px;" class="text-center">
      <i id="animationDemo" data-mdb-animation="slide-right" data-mdb-toggle="animation"
        data-mdb-animation-reset="true" data-mdb-animation-start="onScroll"
        data-mdb-animation-on-scroll="repeat" class="fas fa-3x fa-building text-white"></i>
      <h3 class="mt-3 text-white">Bien Venue</h3>
      <p class="white-text">Ces information serant afficher sur les factures </p>
    </div>
    <div class="text-center">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
    </div>


  </div>
  <div class="col-md-9 justify-content-center">
    <div class="card card-custom pb-4">
      <div class="card-body mt-0 mx-5">
        <div class="text-center mb-3 pb-2 mt-3">
          <h4 style="color: #495057 ;">Infrmation </h4>
        </div>

        <form method="POST" action="{{asset('addinfo')}}" enctype="multipart/form-data">

@csrf 

          <div class="row mb-4">
            <div class="col">
            <div class="form-group text-info">
     <label for="exampleFormControlInput1">nom </label>
     <input  type="text" name="nom"  class="form-control" id="exampleFormControlInput1" placeholder="nom ">
   </div>
            </div>
            <div class="col">
            <div class="form-group text-info">
     <label for="exampleFormControlInput1">tele </label>
     <input  type="text" name="tele"  class="form-control" id="exampleFormControlInput1" placeholder="tele ">
   </div>
            </div>
          </div>
          <div class="row mb-4">
            <div class="col">
            <div class="form-group text-info">
     <label for="exampleFormControlInput1">Adress </label>
     <input  type="text" name="adress"  class="form-control" id="exampleFormControlInput1" placeholder="adress ">
   </div>
            </div>
            <div class="col">
            <div class="form-group text-info">
     <label for="exampleFormControlInput1">rib</label>
     <input  type="text" name="rib"  class="form-control" id="exampleFormControlInput1" placeholder="rib ">
   </div>
            </div>
          </div>
          <div class="row mb-4">
      
            <div class="col">
            <label class="form-label" for="form9Example6">Logo</label>
            <input   type="file" name="image"  >
            </div>
            
          </div>

          <div class="float-end ">
            <!-- Submit button -->
            <button type="submit" class="btn btn-secondary" >enregistrer</button>

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



          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->


    <section class="content">
      <div class="row">
        <div class="col-12">
          <div class="card">
          <div class="card-header  bg-info">
          <div class="col-md-3 font-weight-bold"><i class="fas fa fa-users"></i>  information:
       </div>
     </div><!-- /.col -->   
     @foreach($info as $inf)
     <div class="card-body" style="    font-size: 30px;
    font-weight: bold;"> 
     <div class="col-md-12 d-flex align-items-stretch flex-column">
              <div class="card bg-light d-flex flex-fill">
                <div class="card-header text-muted border-bottom-0">
                {{$inf->nom}}
                </div>
                <div class="card-body pt-0">
                  <div class="row">
                    <div class="col-7">
                      <h2 class="lead"><b>  {{$inf->nom}}</b></h2>
                      <p class="text-muted text-sm"><b>About: </b> .</p>
                      <ul class="ml-4 mb-0 fa-ul text-muted">
                        <li class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> Address:  {{$inf->adress}}</li>
                        <li class="small"><span class="fa-li"><i class="fas fa-lg fa-phone"></i></span> Tele:  {{$inf->tele}}</li>
                      </ul>
                    </div>
                    <div class="col-5 text-center">
                      <img style="width: 150px;
    height: 150px;" src="{{asset('img/'.$inf->logo)}}" alt="user-avatar" class="img-circle img-fluid">
                    </div>
                  </div>
                </div>
                <div class="card-footer">
                  <div class="text-right">
                  
                    <a href="#" class="btn btn-sm btn-primary">
                      <i class="fas fa-user"></i>Modifier
                    </a>
                  </div>
                </div>
              </div>
            </div>

     </div><!-- /.row -->
     @endforeach
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
 





  





   </div>


             
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
        @endsection









</body>
</html>