@extends('layout.master')
@section('css')

<style type="text/css">
  .avatar-pic{
    width:80px;
    height:80px;
  }
  @media only screen and (max-width: 600px) {
    #introSection{
      display:none;
    }
    .avatar-pic{
      width:50px;
      height:50px;
    }
    .skillsCol span{
        overflow-wrap: break-word;
      }
      .spanBadge{
        width:170px; 
        word-wrap:break-word;
        white-space: normal;
      }
  }
</style>
@endsection
@section('content')
            <div class="row" id="introSection">
              <div class="col-md-3 p-4">
                <div class=" gradient-card">
                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                    <a href="#!">
                      <div class="text-white d-flex  mask blue-gradient-rgba">
                        <div class="first-content align-self-center p-2">
                          <h3 class="card-title">CATEGORY</h3>
                          <p class="lead ">More on this</p>
                        </div>
                        <div class="second-content align-self-center mx-auto text-center">
                          <i class="far fa-money-bill-alt fa-3x"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </div> <!-- CARD -->
              </div>  <!-- INNER COL -->

              <div class="col-md-3 p-4">
                <div class=" gradient-card">
                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                    <a href="#!">
                      <div class="text-white d-flex  mask peach-gradient-rgba">
                        <div class="first-content align-self-center p-2">
                          <h3 class="card-title">Featured</h3>
                          <p class="lead ">More on this</p>
                        </div>
                        <div class="second-content align-self-center mx-auto text-center">
                          <i class="fas fa-chart-line fa-3x"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </div> <!-- CARD -->
              </div>  <!-- INNER COL -->

              <div class="col-md-3 p-4">
                <div class=" gradient-card">
                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                    <a href="#!">
                      <div class="text-white d-flex  mask blue-gradient-rgba">
                        <div class="first-content align-self-center p-2">
                          <h3 class="card-title">Popular</h3>
                          <p class="lead ">More on this</p>
                        </div>
                        <div class="second-content align-self-center mx-auto text-center">
                          <i class="far fa-money-bill-alt fa-3x"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </div> <!-- CARD -->
              </div>  <!-- INNER COL -->

              <div class="col-md-3 p-4">
                <div class=" gradient-card">
                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                    <a href="#!">
                      <div class="text-white d-flex  mask peach-gradient-rgba">
                        <div class="first-content align-self-center p-2">
                          <h3 class="card-title">Most Applied</h3>
                          <p class="lead ">More on this</p>
                        </div>
                        <div class="second-content align-self-center mx-auto text-center">
                          <i class="fas fa-chart-line fa-3x"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </div> <!-- CARD -->
              </div>  <!-- INNER COL -->
            </div> <!--INNER ROW -->
<div class="container-fluid">
  <div class="row mt-4">

  <div class="col-md-8">
    <div class="card mt-2">
      <div class="card-header bg-white">

        <div class="row">
          <div class="col-md-2">
                      </div>
          <div class="col-md-10 text-left text-info">
            <h3 style="margin-bottom:auto;"><b>{{ $job->company_name}}</b></h3>   
          </div>
        </div>
        
      </div>
      <div class="card-body">

        <div class="row border-bottom">
          <div class="col-md-9 text-muted">
            <h5><b>{{ $job->title}}</b></h5>
          </div>
          <div class="col-md-3 text-right">
                        <p class="text-muted" style="font-size:12px;font-weight:500;margin:0px">
                          Posted On: 01-01-1970 
                        </p>
                    </div>
        </div>

        <div class="row mt-2">
          <div class="col-md-2 text-muted">
            <p class="text-muted" style="font-weight:500;margin:0px">
                          Description :
                      </p>
          </div>
          <div class="col-md-10"> 
                      </div>
        </div>

        <div class="row mt-3">
          <div class="col-md-2 col-5">
            <p class="text-muted" style="font-weight:500;margin:0px">
                Experience :
            </p>
          </div>
          <div class="col-md-4 col-6">
                          NA 
          </div>
        </div>

        <div class="row mt-3">
          <div class="col-md-2 col-5">
              <p class="text-muted" style="font-weight:500;margin:0px">
                  For : 
              </p>
          </div>
          <div class="col-md-4 col-6">
              {{ $job->gender  }} 
          </div>                    
        </div>


        <div class="row mt-3">
          <div class="col-md-2 col-5">
            <p class="text-muted" style="font-weight:500;margin:0px">
                  Salary :
              </p>
          </div>
          <div class="col-md-9 col-6">
            <i class="fas fa-rupee-sign mr-1" style="color:#34495E;font-size:14px;"></i>  -           </div>
        </div>


        <div class="row mt-3">
          <div class="col-md-2 col-5">
            <p class="text-muted" style="font-weight:500;margin:0px">
                          Qualification :
                      </p>
          </div>
          <div class="col-md-9 col-7" style="overflow-wrap: break-word;">