@extends('layout.master')

@section('css')
<style>



      #apply_for_best_pos{
        background-color: #F4F6F6;
      }
      .categoriesName{
        font-weight:900;
        color:#34495E;
        margin:0px;
      }
      .categoriesName{
        font-size:19px;
      }
      .categoriesImg{
        height:80px;
      }

      .cardDeck{
        width:100%
      }
      .cardDeck p{
        font-size:20px;
      }

      .apply_btn{
        font-size:15px;
        border:1px solid #3498DB;
        color:#3498DB;
        font-weight:600;
        height:40px;
        padding:0px 20px;
        position:absolute;
        right:10px;
        bottom:10px;
      }

      .jobs-title{
            font-size:17px;
            font-weight:600;
            color:#2C3E50;
          }

      .jobs-company-name{
        font-size:13px;
        font-weight:500;
        color:#808B96;
      }

      .jobs-city{
          font-size:12px;
          font-weight:400
        }

        .jobs-salary-icon{
            color:#34495E;
            font-size:13px;
        }

        .jobs-salary{
            font-weight:600;
        }
      @media only screen and (max-width: 600px) {
        .categoriesName{
          font-size:12px;
        }
       .categoriesImg{
          height:40px;
        }



        .cardDeck{
          width:150%
        }
        .cardDeck p{
          font-size:15px;
        }

        .apply_btn{
            font-size:10px;
            border:1px solid #3498DB;
            color:#3498DB;
            font-weight:600;
            height:20px;
            padding:0px 20px;
            position:absolute;
            right:10px;
             bottom:10px;
          }

          .jobs-col{
            margin-top:10px;
          }

          .jobs-title{
            font-size:15px;
            font-weight:600;
            color:#2C3E50;
          }

          .jobs-company-name{
            font-size:13px;
            font-weight:500;
            color:#808B96;
          }

        .jobs-city{
          font-size:12px;
          font-weight:400
        }

        .jobs-salary-icon{
            color:#34495E;
            font-size:11px;
        }

        .jobs-salary{
            font-weight:600;
            font-size:12px;
        }


      }


  </style>
@endsection

@section('content')
    
  <div class="content">
		<div class="indigo" >
	    	<div class="mask">
		      <div class="row pt-3">
		        <div class="col-md-6 col-12 text-center">
		            <img src="{{ url('assets/img/bg/intro.png') }}"  class="img-responsive"  id="img-desk" >
		        </div>
		        <div class="col-md-6 col-12 white-text m-0 pl-5" style="margin-left: auto;margin-right: auto;;padding:0px;text-align:left">
                  <center>
		              <img src="{{ url('assets/img/bg/Capture-1.png') }}" class="img-responsive" id="img-info">
		              <div class="pb-5">
		                <a class="align-center" href="{{ url('user/register')  }}"
		                  style="background:white;padding:10px;font-weight:400;color:#3B90F1;font-size:20px">
		                  Register
		                </a>
		                <a class="align-center ml-4" href="{{ url('user/login')  }}"
		                  style="border:1px solid white;padding:8px 20px 8px 20px;font-weight:300;color:white;font-size:20px">
		                  Login
		                </a>
		              </div>
                  </center>
		        </div> <!-- COL -->
		      </div> <!-- ROW -->
	     	</div>
	    </div>
	</div>


<div class="container-fluid pt-5 pb-5" id="apply_for_best_pos">

<center>
          <p style="font-size:25px;font-weight:900"><b>Apply For Best Position</b></p>
      </center>
    <div class="row">
      <div class="col-12 col-md-3 pr-3">
      <form action="{{ url('search') }}" method="post">
      @csrf
      <div class="card p-3 mt-2" style="border-radius:20px">
          <ul class="list-group ">
              <li class="list-group-item d-flex justify-content-between p-2" id="city_head"  data-toggle="collapse" data-target="#city_s"
                  aria-expanded="true" aria-controls="city_s"
                  style="font-size:18px;font-weight:900;margin:0px;padding:5px;border:none">
                City
                <i class="fas fa-chevron-down"></i>            
                </li>
                                <div id="city_s" class="collapse p-2" aria-labelledby="city_head" data-parent="#city_head">
                                      <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                                    <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                                    <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                                    <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                                    <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                                    <p class="p-0 m-0"> <input type="checkbox" name="city_id[]" value="{{ $key }}"> {{ $value }} </p>

                            </div>
          </ul>

          <ul class="list-group mt-3">
              <li class="list-group-item d-flex justify-content-between p-2" id="job_head"  data-toggle="collapse" data-target="#job_s"
              aria-expanded="true" aria-controls="job_s"
              style="font-size:18px;font-weight:900;margin:0px;padding:5px;border:none">
              Category
              <i class="fas fa-chevron-down"></i>

            </li>
            <div id="job_s" class="collapse p-2" aria-labelledby="job_head" data-parent="#job_head">