@extends('users/layout')
@section('content')

<section>
<div>
<div class="background-holder overlay" style="background-image:url(template/assets/images/background-2.jpg);background-position: center bottom; height: 50px;">
</div><!--/.background-holder-->
<div class="container">
 <div class="row pt-6" data-inertia='{"weight":1.5}'>
  <div class="col-md-8 px-md-0 color-white" data-zanim-timeline="{}" data-zanim-trigger="scroll">
   <div class="overflow-hidden">
  <h1 class="color-white fs-4 fs-md-5 mb-0 zopacity" data-zanim='{"delay":0}'>{{__('Vacances de poste')}}</h1>
  <div class="nav zopacity" aria-label="breadcrumb" role="navigation" data-zanim='{"delay":0.1}'>
    <ol class="breadcrumb fs-1 pl-0 fw-700">
    <li class="breadcrumb-item">
      <a class="color-white" href="#">Accueil</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">{{__('Vacances de poste')}}
    </li>
    </ol>
  </div>
  </div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>

<br>
<div class="mt-6">

  <style type="text/css">
    .product-grid{
        font-family: 'Roboto', sans-serif;
        /*text-align: center;*/
        transition: all 0.5s;
    }
    .product-grid:hover{ box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3); }
    .product-grid .product-image{
        position: relative;
        overflow: hidden;
    }
    .product-grid .product-image a.image{ display: block; }
    .product-grid .product-image img{
        width: 100%;
        height: auto;
    }
    .product-image .pic-1{
        opacity: 1;
        backface-visibility: hidden;
        transition: all 0.5s;
    }
    .product-grid:hover .product-image .pic-1{ opacity: 0; }
    .product-image .pic-2{
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.5s;
    }
    .product-grid:hover .product-image .pic-2{ opacity: 1; }
    .product-grid .product-sale-label{
        color: #fff;
        background: red;
        font-size: 14px;
        font-style: italic;
        text-transform: uppercase;
        width: 55px;
        height: 55px;
        line-height: 55px;
        border-radius: 50px;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .product-grid .social{
        padding: 0;
        margin: 0;
        list-style: none;
        position: absolute;
        top: 15px;
        right: 7px;
    }
    .product-grid .social li{
        transform: translateX(60px);
        transition: all 0.3s ease 0.3s;
    }
    .product-grid .social li:nth-child(2){ transition: all 0.3s ease 0.4s; }
    .product-grid:hover .social li{ transform: translateX(0); }
    .product-grid .social li a{
        color: #707070;
        background: #fff;
        font-size: 16px;
        line-height: 40px;
        width: 40px;
        height: 40px;
        margin: 0 0 7px;
        border-radius: 50px;
        display: block;
        transition: all 0.3s ease 0s;
    }
    .product-grid .social li a:hover{ color: #6DA84A; }
    .product-grid .product-rating{
        background: rgba(255,255,255,0.95);
        width: 100%;
        padding: 10px;
        opacity: 0;
        position: absolute;
        bottom: -60px;
        left: 0;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid:hover .product-rating{
        opacity: 1;
        bottom: 0;
    }
    .product-grid .rating{
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
    }
    .product-grid .rating li{
        color: #6DA84A;
        font-size: 13px;
    }
    .product-grid .rating li.far{ color: #999; }
    .product-grid .add-to-cart{
        color: red;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #6DA84A;
        float:right;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid .add-to-cart:hover{
        color: #000;
        border-color: #000;
    }
    .product-grid .add-to-cart1{
        color: #000;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #6DA84A;
        float:right;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid .product-content{
        background: #F5F5F5;
        padding: 15px;
        /*height: 150px !important;*/
    }
    .product-grid .title{
        font-size: 18px;
        text-transform: capitalize;
        margin: 0 0 5px;
        max-height: 99px !important;
    }
    .product-grid .title a{
        color: #111;
        transition: all 500ms;
    }
    .product-grid .title a:hover{ color: #6DA84A; }
    .product-grid .price{
        color: red;
        font-size: 17px;
        text-decoration: underline;
    }
    .product-grid .price span{
        text-decoration: line-through;
        margin-right: 5px;
        display: inline-block;
        opacity: 0.6;
    }
    .product-grid .price1{
        color: #000;
        font-size: 17px;
        text-decoration: underline;
    }

    @media only screen and (max-width:990px){
        .product-grid{ margin-bottom: 40px; }
    }



  </style>
  

  <div class="container">
    <div class="row">
      <div class="col"><h5 class="text-center fs-2 fs-lg-3" style="margin-top: -80px;">{{__('Vacance de poste')}}</h5>
        <hr class="short" data-zanim='{"from":{"opacity":0,"width":0},"to":{"opacity":1,"width":"4.20873rem"},"duration":0.8}' data-zanim-trigger="scroll"/>
      </div>
          @if (@$statusMsg != Null)
          <br>
      <div class="alert alert-success">{{$statusMsg}}</div> 
      @endif
    </div>
    
    <br><br>
      <div class="row">
          <div class="col-md-3" style="margin-bottom: 30px; background-color: #eee; height: 100px !important;">
              <div class="list-group">
                <a href="{{url('/carriere')}}" class="list-group-item list-group-item-action">
                  Carrière
                </a>
                <a href="{{url('/vacancedeposte')}}" class="list-group-item list-group-item-action active">Vacance de poste</a>
                
              </div>
          </div>
          <div class="row col-md-9">
              <div class="col-md-8 col-sm-8" style="margin-bottom: 30px">
                  <div class="product-grid">
                      <div class="product-image">
                          <a href="javascript:void(0)" class="image">
                              <img class="pic-1" src="{{asset('job/job.jpg')}}">
                              <img class="pic-2" src="{{asset('job/job.jpg')}}">
                          </a>
                      </div>
                      <div class="product-content">
                          <h3 class="title">{{$offre->articles_title}}</h3>
                          {!! $offre->articles_description !!}
                          
                      </div>
                  </div>
              </div>
          </div>

      </div>
      <div class="row" style="padding-top: 60px">
          <div class="col-md-12">
              <h5 class="text-center fs-2 fs-lg-3" style="margin-top: -80px;">{{__('Postuler')}}</h5>
              <table class="table" style="text-align: center;">
                <thead>
                  
                  <br>
                      
                      
                    
                  <tr>
                    <th>
                      <span style="font-weight: bold;">Formulaire de candidature</span>
                      
                    </th>
                  </tr>
                </thead><!-- /thead -->
                <form method="POST" action="{{url('/traitement_candidature')}}" enctype="multipart/form-data">
                  {{ csrf_field() }}
                  
                  <tbody> 
                      <tr>
                        <td class="row">
                          
                              <div class="form-group col-md-4">
                                  <label for="nom"><span>Nom *</span></label>
                                  <input type="text" name="name" class="form-control" value="" placeholder="Name" required="">
                                  <input type="hidden" name="idoffre" id="idoffre" value="{{$offre->id}}">
                                  <input type="hidden" name="subject" id="subject" value="Candidature au poste de : {{$offre->articles_title}}">
                              </div>
                              <div class="form-group col-md-4">
                                  <label for="prenom"><span>Prénoms *</span></label>
                                  <input type="text" name="prenom" class="form-control" value="" placeholder="Prenoms" required="">
                              </div>
                              <div class="form-group col-md-4">
                                  <label for="fonction"><span>Email *</span></label>
                                  <input type="email" name="email" class="form-control" value="" placeholder="Email address" required=""> 
                              </div>
                          
                          
                          
                              <div class="form-group col-md-4">
                                  <label for="numero"><span>Numero de télephone *</span></label>
                                  <input type="text" name="phone" class="form-control" value="" placeholder="Votre télephone" required="">
                              </div>     
                              <div class="form-group col-md-4">
                                  <label for="cv"><span>Votre CV (pdf) *</span></label>
                                  <input required="" type="file" name="attachment" class="form-control">
                              </div>
                              <div class="form-group col-md-4">
                                  <label for="cv"><span>Votre Dernier Diplôme (pdf) *</span></label>
                                  <input required="" type="file" name="attachment2" class="form-control">
                              </div>

                              <!-- <div class="form-group col-md-4">
                                  <label for="cv"><span>Photo passport *</span></label>
                                  <input type="file" name="attachment3" class="form-control">
                              </div> -->

                              <div class="form-group col-md-4">
                                  <label for="ville"><span>Votre Motivation *</span></label>
                                  <textarea rows="3" name="message" class="form-control" placeholder="Votre motivation" required=""></textarea>
                              </div>

                              <div class="form-group col-md-4 cart-checkout-btn pull-right" id="Postuler"> 
                              <input type="submit" name="submit" class="btn btn-primary " value="Postuler">
                              </div>




                          
                         
                        </td>
                      </tr>

                  </tbody>

                </form>

              </table>
          </div>
      </div>
  </div>
</div>
<br></br>
@endsection