@extends('layouts.app')

@section('content')
        <style type="text/css">
          .img-card{
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
            position: absolute;
          }

          @media(max-width:768px){
              .img-card {
                min-width: 100%;
                max-width: 100%;
                min-height: 150px;
                max-height: 150px;
                position: relative;
              }
          }

        </style>
        <section class="pt-md-4 pb-md-0 bg-dark">
          <div class="container">
            <div class="row justify-content-between align-items-center">
              <div class="col-lg-8 col-md-9">
                <div class="d-none d-md-block">
                  <br>
                </div>
                <h1 class="d-none d-md-block" style="color: white;">Busca más fácil tu hotel</h1>
                <p class="lead"></p>
              </div>
              <div class="col-md-3 d-none d-md-none">
                <img src="{{asset('img/hotel.png')}}" style="width: 1000px;" alt="Image">
              </div>
            </div>
            <form action="{{asset('/hoteles')}}" method="GET">
                <div class="row">
                    <div class="col-12 col-md-2">
                       <label style="margin: 0px; color: white;">Departamento</label>
                       <select class="form-control" name="departamento" id="departamento">
                           <option value="">Selecciona una opción</option>
                           @foreach($departamentos as $key)
                            <option value="{{$key->id}}"