src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/hire.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <section class="section hire-page">
  4.     <div class="container">
  6.         <div class="row">
  7.             <div class="col-md-12 d-flex justify-content-center align-items-center">
  8.                 <div class="search-area">
  9.                     <h1 class="section-title">Hire Professionals to Do Your Job</h1>
  10.                     <p class="mb-4">Access top freelance professionals within our Honeybee Ecosystem to handle tasks efficiently and affordably. Save on hiring costs while gaining expert support from skilled individuals eager to contribute – the perfect way to keep your business lean and sales strong.</p>
  12.                     {# Search Input for Live Search #}
  13.                     <div class="search-bar-container d-flex justify-content-center">
  14.                         <input
  15.                                 type="text"
  16.                                 id="freelancer-search-input"
  17.                                 name="q"
  18.                                 value="{{ searchValue|default('') }}"
  19.                                 class="form-control"
  20.                                 placeholder="Who are you looking for?"
  21.                         >
  22.                         <button class="search-btn" type="button">
  23.                             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/search.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt="">
  24.                             Search
  25.                         </button>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  31.         <!-- Profiles Grid -->
  32.         <div class="row main-profile-container">
  33.             <div class="profile-container" id="freelancer-results">
  34.                 {% if freelancersData is empty %}
  35.                     <div class="col-12 text-center mt-4">
  36.                         <p>No professionals found matching your search.</p>
  37.                     </div>
  38.                 {% else %}
  39.                     {% for data in freelancersData %}
  40.                         <div class="profile">
  41.                             <div class="profile-card">
  42.                                 <div class="profile-image"
  43.                                         {% if data.image != '' and not data.image is null %}
  44.                                             style="height:200px;background:url('{{ url('dashboard') }}{{ data.image }}?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}');background-size: cover; background-repeat: no-repeat; background-position: center;"
  45.                                         {% else %}
  46.                                             style="height:200px;background:url('{{ url('dashboard') }}honeybee_web_assets/images/hire-page/hire1.png?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}');background-size: cover; background-repeat: no-repeat; background-position: center;"
  47.                                         {% endif %}
  48.                                 ></div>
  50.                                 <div class="rating">
  51.                                     <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/images/hire-page/star.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt=""> 4.5
  52.                                 </div>
  53.                                 <div class="available">Available</div>
  55.                                 <div class="profile-info">
  56.                                     <h5>{{ data.firstname }} {{ data.lastname }}</h5>
  57.                                     <p><strong>Expertise:</strong> {{ data.skillsText }}</p>
  58.                                     <p><strong>Experience:</strong> {{ data.workexperienceyear }} Years</p>
  59.                                     <p><strong>Country:</strong> Bangladesh</p>
  60.                                     <p><strong>Language:</strong> Bengali, English, Hindi</p>
  61.                                     <div class="button-group mt-3 gap-3">
  62.                                         <a class="btn profile-btn" href="{{ path('honeybee_freelancer_profile') }}/{{ data.applicantId }}">View</a>
  63.                                         <a class="btn hire-btn">Hire Now</a>
  64.                                     </div>
  65.                                 </div>
  66.                             </div>
  67.                         </div>
  68.                     {% endfor %}
  69.                 {% endif %}
  70.             </div>
  71.         </div>
  73.         <div class="row">
  74.             <div class="col-12 text-center">
  75.                 <button class="see-more-btn"><img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/caret-down.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt=""> See More</button>
  76.             </div>
  77.         </div>
  79.     </div>
  80. </section>
  82. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  84. {# Live Search AJAX Script #}
  85. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  86. <script>
  87.     $(document).ready(function() {
  88.         var typingTimer;
  89.         var doneTypingInterval = 500; // delay in ms
  91.         $('#freelancer-search-input').on('keyup', function() {
  92.             clearTimeout(typingTimer);
  93.             var query = $(this).val();
  95.             typingTimer = setTimeout(function() {
  96.                 $.ajax({
  97.                     url: "{{ path('honeybee_hire') }}", // your route name
  98.                     type: 'GET',
  99.                     data: { q: query },
  100.                     success: function(data) {
  101.                         var newContent = $(data).find('#freelancer-results').html();
  102.                         $('#freelancer-results').html(newContent);
  103.                     },
  104.                     error: function() {
  105.                         console.log('Error loading search results.');
  106.                     }
  107.                 });
  108.             }, doneTypingInterval);
  109.         });
  110.     });
  111. </script>
  160. {#{% include '@Application/inc/central_header.html.twig' %}#}
  161. {# <style>#}
  163. {#    .profile-card .profile-image#}
  164. {#    {#}
  165. {#        background-size: cover !important;#}
  166. {#        background-position: center !important;#}
  167. {#        height: 221px;#}
  169. {#        background-repeat: no-repeat;#}
  170. {#    }#}
  171. {#</style> #}
  174. {#<section class="section hire-page">#}
  175. {#    <div class="container">#}
  177. {#        <div class="row">#}
  178. {#            <div class="col-md-12 d-flex justify-content-center align-items-center">#}
  179. {#                <div class="search-area">#}
  180. {#                    <h1 class="section-title">Hire Professionals to Do Your Job</h1>#}
  181. {#                    <p class="mb-4">Access top freelance professionals within our Honeybee Ecosystem to handle tasks efficiently and affordably. Save on hiring costs while gaining expert support from skilled individuals eager to contribute – the perfect way to keep your business lean and sales strong.</p>#}
  182. {#                    <div class="search-bar-container d-flex justify-content-center">#}
  183. {#                        <div class="input-group search-bar">#}
  184. {#                            <input type="text" class="form-control" placeholder="Who are you looking for?" aria-label="Search">#}
  185. {#                            <button class="search-btn" type="button">#}
  186. {#                                <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/search.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt=""> Search#}
  187. {#                            </button>#}
  188. {#                        </div>#}
  189. {#                    </div>#}
  190. {#                </div>#}
  192. {#            </div>#}
  193. {#        </div>#}
  195. {#        #}{#{{ dump(freelancersData) }}#}
  197. {#        <!-- Profiles Grid -->#}
  198. {#        <div class="row main-profile-container">#}
  200. {#            <div class="profile-container">#}
  201. {#                {% for data in freelancersData %}#}
  202. {#                <div class="profile">#}
  203. {#                    <div class="profile-card">#}
  204. {#                        <div class="profile-image "#}
  205. {#                                {% if data.image  !='' and not data.image is null   %}#}
  206. {#                                    style="height:200px;background:url('{{ url('dashboard') }}{{ data.image }}?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}');background-size: cover;#}
  207. {#                                            background-repeat: no-repeat"#}
  209. {#                                {% else %}#}
  210. {#                                    style="height:200px;background:url('{{ url('dashboard') }}honeybee_web_assets/images/hire-page/hire1.png?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}');background-size: cover;#}
  211. {#                                            background-repeat: no-repeat"#}
  214. {#                                {% endif %}#}
  215. {#                        >#}
  216. {#                                                       </div>#}
  217. {#                        <div class="rating">#}
  218. {#                            <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/images/hire-page/star.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt=""> 4.5#}
  219. {#                        </div>#}
  220. {#                        <div class="available ">Available</div>#}
  221. {#                        <div class="profile-info">#}
  222. {#                            <h5>{{ data.firstname }} {{ data.lastname }}</h5>#}
  223. {#                            <p><strong>Expertise:</strong> {{ data.skillsText }}</p>#}
  224. {#                            <p><strong>Experience:</strong> {{ data.workexperienceyear }} Years</p>#}
  225. {#                            <p><strong>Country:</strong> Bangladesh</p>#}
  226. {#                            <p><strong>Language:</strong> Bengali, English, Hindi</p>#}
  227. {#                            <div class="button-group mt-3 gap-3">#}
  228. {#                                <a class="btn profile-btn" href="{{ path('honeybee_freelancer_profile') }}/{{ data.applicantId }}" >View </a>#}
  229. {#                                <a class="btn hire-btn" >Hire Now</a>#}
  230. {#                            </div>#}
  231. {#                        </div>#}
  232. {#                    </div>#}
  233. {#                </div>#}
  234. {#                {% endfor %}#}
  236. {#            </div>#}
  238. {#        </div>#}
  241. {#        <div class="row">#}
  242. {#            <div class="col-12 text-center ">#}
  243. {#                <button class="see-more-btn"><img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/caret-down.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt=""> See More</button>#}
  244. {#            </div>#}
  245. {#        </div>#}
  248. {#    </div>#}
  249. {#</section>#}
  251. {#{% include '@HoneybeeWeb/footer/central_footer.html.twig' %}#}