{% extends 'base.html.twig' %}
{% block title %} {{ 'home'|trans}} {% endblock %}
{% block css %}
<style>
.select2-container--open{
/*position: absolute!important;*/
}
.select2-container--open{
left: unset!important;
}
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("{{ asset('assets/Preloader_7.gif') }}") center no-repeat #fff;
}
.se-pre-con2 {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("{{ asset('assets/Preloader_7.gif') }}") center no-repeat #fff;
}
@keyframes color {
0% { background: #7f3e98; }
20% { background: #33CC36; }
40% { background: #B8CC33; }
60% { background: #FCCA00; }
80% { background: #33CC36; }
100% { background: #33CCCC; }
}
@keyframes color2 {
0% { background: #987f3e; }
20% { background: #a333cc; }
40% { background: #B8CC33; }
60% { background: #3c3b37; }
80% { background: #cdecce; }
100% { background: #2636cf; }
}
.card-img-school-1 {
background: #33CCCC; /* Fallback */
animation: color 9s infinite linear;
text-align: center;
padding: 2em;
}
.card-img-school-2 {
background: #33CCCC; /* Fallback */
animation: color2 9s infinite linear;
text-align: center;
padding: 2em;
}
i{
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
-webkit-animation: 'screen' infinite;
animation: 'screen' infinite;
}
i:nth-child(1){
top:5px;
left:10%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(181, 240, 246, 0.65) 0%,rgba(0,0,0,0) 100%);
box-shadow:0px 0px 5px 0px #7db4ba;
animation-duration: 5s;
}
i:nth-child(2){
top:5px;
left:80%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(139,44,148,0.65) 0%,rgba(0,0,0,0) 100%);
box-shadow:0px 0px 5px 0px #eec2ee;
animation-duration: 5s;
}
@keyframes screen {
from {
opacity: 0;
}
25%{
opacity: 0.3;
transform: scale3d(3, 3, 4);
}
50%{
opacity: 0.75;
}
75%{
opacity: 1;
}
to{
opacity: 0;
}
}
.space-school_image{
margin-right: 20px;
}
@media only screen and (max-width: 425px){
.space-school_image{
margin-right: 0px;
}
}
</style>
{% endblock %}
{% block body %}
<div class=" d-flex flex-column flex-row-fluid">
<div class="card-header border-0 pt-6">
<div id="kt_header" >
<div class="mb-5">
<div class=" py-6 py-lg-0 d-flex flex-column flex-sm-row align-items-lg-stretch justify-content-sm-between">
<div class="card-title">
<!--begin::Search-->
<div class="d-flex align-items-center position-relative my-1">
<form method="get" style="display: inline-flex">
<input type="text" name="keywords" class="form-control form-control-solid w-250px ps-14" value="{% if keywords is defined and keywords != '' %}{{ keywords }}{% endif %}" placeholder="{{ 'search_school'|trans }}">
<button class="btn " type="submit">
<span class="svg-icon svg-icon-1 position-relative ms-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black"></rect>
<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black"></path>
</svg>
</span>
</button>
</form>
</div>
<!--end::Search-->
</div>
<div class="d-flex align-items-center overflow-auto pt-3 pt-sm-0">
<div class="d-flex">
<div class="d-flex align-items-center ">
<a class=" btn btn-light-primary fs-7" href="{{ path('index') }}">{{ 'show_all'|trans }}</a>
</div>
<div class="d-flex align-items-center ">
<button id="kt_drawer_chat_toggle" type="button" class="fs-7 btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-attach="parent"
data-kt-menu-placement="bottom-end" data-kt-menu-flip="bottom">
<!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
<span class="fa fa-filter"></span>
<!--end::Svg Icon-->{{ 'advanced_search'|trans }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body row pt-0" style="padding: 0.1em 0.1em!important;">
{% if keywords is defined and keywords != '' %}
<div class="row align-content-center mt-4">
<p class="text-muted">{{ 'result_for_search'|trans }} : {{ keywords }}</p>
</div>
{% endif %}
<div class="row" id="school-list">
{% for school in schools %}
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-10" >
<div class="card position-relative overflow-hidden border-bottom-0 rounded space-school_image" >
<div class="card-bg" style="min-height: 200px; {% if school.imageCover != '' %}background-repeat:no-repeat;background-size: cover; background-image: url('{{ asset("uploads/schools/"~school.imageCover) }}') ; {% else %} background: #fafafa {% endif %};">
<div class="card-header border-0 pt-8 " style="align-items: center;{% if school.imageCover =='' %}background-color: #fafafa{% endif %};">
<div style="display: none" class="symbol symbol-125px bg-light">
<img src="{% if school.image|length == 0 %} {{asset('assets/school.jpeg')}} {% else %} {{ asset('uploads/schools/'~school.image) }} {% endif %}" alt="image" class=""/>
</div>
<div class="card-title" style="">
{% if school.imageCover == '' %}
{% endif %}
<div class=" row fs-6 fw-bolder text-dark" style="display: none; min-width: 300px; box-shadow: 10px 10px 5px #7f3e9812; height: 68px;word-wrap: break-word;margin-bottom: 10px" {% if school.name|length > 90 %} data-bs-toggle="tooltip" data-bs-placement="top" title="{{ school.name }}" {% endif %}>
<p style="text-align: justify;{% if school.imageCover !='' %}color:white; text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98; {% endif %}"> {{ school.name|length > 90 ? school.name|slice(0, 90) ~ '...' : school.name }}</p>
</div>
</div>
</div>
<div style="padding: 1rem 1rem" class="card-body {% if school.openLink != '#' %} educati-background-school {% endif %}" >
<div class="row ">
<ul class="list" style="display: inline-flex;list-style: none">
<li class="mb-3" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-graduation-cap"></span> {{ school.schoolType.name }}</span></li>
<li class="mb-3" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-globe"></span> {{ school.schoolLanguage.name }}</span></li>
<li class="mb-3" style="margin-left: auto" type="button" data-bs-toggle="modal" data-bs-target="#note--{{ school.id }}">
<span class="badge badge-light-dark "><span class="fa fa-eye "></span> </span>
</li>
<div class="modal fade" data-bs-focus="false" id="note--{{ school.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card mt-3" >
<div class="card-body" style="min-height: 300px; {% if school.imageCover != '' %}background-repeat:no-repeat;background-size: cover; background-image: url('{{ asset("uploads/schools/"~school.imageCover) }}') ; {% else %}background-repeat:no-repeat;background-size: cover; background-image: url('{{ asset("assets/school.jpeg") }}') {% endif %};">
</div>
</div>
<div class="card mt-3">
<div class="card-body" style="padding:1rem 1rem">
<h6 style="color:#7f3e98;font-weight: bold;padding: 0"> {{ school.name|length > 100 ? school.name|slice(0, 100) ~ '...' : school.name }}</h6>
{% if school.slogan != '' %}<p style="font-size: 10px;font-weight:bold">{{ school.slogan }}</p>{% endif %}
<p style="margin-bottom: 20px;margin-top:20px">
<a {% if school.openLink == '#' %}href="#"{% else%} target="_blank" href="{{ school.openLink }}?l={{ app.request.cookies.get('lang') }}" {% endif %} class="fs-8" style="height: 80px;color:#7f3e98;font-weight: bold;text-decoration: underline">
{{ 'website'|trans }}
</a>
</p>
<span class=" badge badge-light-primary fw-bolder ml-auto px-4 py-3">
<span class=" fa fa-location-arrow"></span> {{ school.town.name }} {% if school.neighbordhood is not null and school.neighbordhood !="" %} , {{ school.neighbordhood }} {% endif %}</span>
</div>
</div>
<div class="card mt-3">
<div class="card-body" style="padding:1.5rem 0.1rem">
<ul class="list row" style="display: inline-flex;list-style: none">
<li class="mb-3 col-md-6 col-sm-6" ><span class="badge badge-light"><span class="fa fa-graduation-cap"></span> {{ school.schoolType.name }}</span></li>
<li class="mb-3 col-md-6 col-sm-6" ><span class="badge badge-light"><span class="fa fa-globe"></span> {{ school.schoolLanguage.name }}</span></li>
{% if school.nbStudent != '' %}
<li class="mb-3 col-md-6 col-sm-6" ><span class="badge badge-light"><span class="fa fa-users"></span> {{ 'nb_student'|trans}} {{ school.nbStudent }}</span></li>
{% endif %}
{% if school.hasBoardingSchoolGirl or school.hasBoardingSchoolBoy %}
<li class="mb-3 col-md-6 col-sm-6" ><span class="badge badge-light"><span class="fa fa-bed"></span>
{% if school.hasBoardingSchoolGirl %}
<span class="fa fa-female"></span>
{% endif %}
{% if school.hasBoardingSchoolBoy %}
<span class="fa fa-male"></span>
{% endif %}
{{ 'boarding_school'|trans }}
</span>
</li>
{% endif %}
{% if school.hasTransportService %}
<li class="mb-3 col-md-6 col-sm-6" >
<span class="badge badge-light"><span class="fa fa-bus"></span> {{ 'transport_service'|trans }}</span></li>
{% endif %}
{% if school.hasShoolCafetaria %}
<li class="mb-3 col-md-6 col-sm-6" ><span class="badge badge-light"><span class="fa fa-utensils "></span> {{ 'school_cafetaria'|trans }} </span></li>
{% endif %}
<li class="mb-3 col-md-12 col-sm-12" ><span class="badge badge-light"><span class="fa fa-money-bill "></span> {{ school.schoolFee.name}} {{ 'school_fee'|trans }} </span></li>
</ul>
</div>
</div>
{% if school.description is not null and school.description != '' %}
<div class="card mt-3">
<div class="card-body" >
{{ school.description }}
</div>
</div>
{% endif %}
{% if school.phone1 != '' or school.phone2 != '' %}
<div class="card mt-3">
<div class="card-body" style="padding:1.5rem 0.1rem">
<ul class="list" style="display: inline-flex;list-style: none">
{% if school.phone1 != '' %}
<li class="mb-3" style="margin-right: 10px;font-weight: bold;">
<a href="tel:{{ school.phone1 }}">
<span class="badge badge-light badge-primary"><span class="fa fa-phone-alt"></span> {{ school.phone1 }}</span>
</a>
</li>
{% endif %}
{% if school.phone2 != '' %}
<li class="mb-3" style="margin-right: 10px;font-weight: bold;">
<a href="tel:{{ school.phone2 }}">
<span class="badge badge-light badge-primary"><span class="fa fa-phone-alt"></span> {{ school.phone2 }}</span>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="card-toolbar">
<span class="fa-pull-left badge badge-light-primary fw-bolder ml-auto px-4 py-3">
<span class=" fa fa-location-arrow"></span> {{ school.town.name }} {% if school.neighbordhood is not null and school.neighbordhood !="" %} , {{ school.neighbordhood }} {% endif %}</span>
</div>
</div>
</div>
<a {% if school.openLink == '#' %}href="#"{% else%} target="_blank" href="{{ school.openLink }}?l={{ app.request.cookies.get('lang') }}" {% endif %} class="card-footer fs-4" style="height: 80px;color:#7f3e98;font-weight: bold;padding: 0.5rem 1rem">
{{ school.name|length > 100 ? school.name|slice(0, 100) ~ '...' : school.name }}
</a>
<div class="position-absolute w-100 bottom-0 left-0 h-3px bg-secondary bottom-div-school">
<div class="position-absolute bg-primary left-0 top-0 h-3px" style="width: 0%"></div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if schools | length == 0 %}
<div class="row container-fluid align-content-center mt-4" style="text-align: center">
<p class="text-muted">{{ 'no_result_found'|trans }}</p>
</div>
{% endif %}
<div class="row" style="margin: auto;padding-bottom: 40px;" >
<img id="loading-more" style="width: 50px;height: 30px;margin:auto;display: none" src="{{ asset('assets/Preloader_7.gif') }}"/>
</div>
</div>
<div id="kt_drawer_chat" class="bg-body" style="top:70px" data-kt-drawer="true" data-kt-drawer-activate="true" data-kt-drawer-overlay="false" data-kt-drawer-width="{default:'300px', 'md': '500px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_drawer_chat_toggle" data-kt-drawer-close="#kt_drawer_chat_close">
<div class="card w-100 rounded-0 border-0" id="kt_drawer_chat_messenger">
<div class="card-header pe-5" id="kt_drawer_chat_messenger_header">
<div class="card-title">
<div class="d-flex justify-content-center flex-column me-3">
<a href="#" class="fs-4 fw-bolder text-gray-900 text-hover-primary me-1 mb-2 lh-1">{{ 'advanced_search'|trans }}</a>
</div>
</div>
<div class="card-toolbar">
<div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_chat_close">
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
</div>
</div>
</div>
<div class="card-body" id="kt_drawer_chat_messenger_body">
<form class="form" action="{{ path('index') }}" method="post">
{% if has_country_state %}
<div class="d-flex flex-column mb-8 fv-row">
<label for="town" class="form-label">{{ 'state_region'|trans }}</label>
<select data-dropdown-parent="#kt_drawer_chat" class="form-select form-select-solid" aria-label="" id="state" name="state" data-control="select2" data-hide-search="false" data-placeholder="">
<option value="x" {% if app.session.all['data'] is defined and app.session.all['data']['state'] is defined and app.session.all['data']['state'] == "x" %} selected {% endif %}>{{ 'all'|trans }}</option>
{% for t in states %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['state'] is defined and app.session.all['data']['state'] == t.id %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
{% endif %}
<div class="d-flex flex-column mb-8 fv-row">
<label for="town" class="form-label">{{ 'town'|trans }}</label>
<select class="form-select form-select-solid" aria-label="" id="town" name="town" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="">
<option value="x" {% if app.session.all['data'] is defined and app.session.all['data']['town'] is defined and app.session.all['data']['town'] == "x" %} selected {% endif %}>{{ 'all'|trans }}</option>
{% for t in towns %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['town'] is defined and app.session.all['data']['town'] == t.id %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="town" class="form-label">{{ 'neighbordhood'|trans }}</label>
<input class="form-control" type="text" value="{% if app.session.all['data'] is defined and app.session.all['data']['street'] is defined and app.session.all['data']['street'] != "" %}{{ app.session.all['data']['street']}}{% endif %}" name="street" id="street"/>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="school_type" class=" form-label">{{ 'school_type'|trans }}</label>
<select class="form-select form-select-solid" aria-label="" id="school_type" name="school_type" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="" >
<option value="x" {% if app.session.all['data'] is defined and app.session.all['data']['school_type'] is defined and app.session.all['data']['school_type'] == "x" %} selected {% endif %}>{{ 'all'|trans }}</option>
{% for t in school_types %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['school_type'] is defined and app.session.all['data']['school_type'] == t.id %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="school_language" class=" form-label">{{ 'school_language'|trans }}</label>
<select class="form-select form-select-solid" aria-label="" name="school_language" id="school_language" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="" >
<option value="x" {% if app.session.all['data'] is defined and app.session.all['data']['school_language'] is defined and app.session.all['data']['school_language'] == "x" %} selected {% endif %}>{{ 'all'|trans }}</option>
{% for t in school_languages %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['school_language'] is defined and app.session.all['data']['school_language'] == t.id %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="school_fee" class=" form-label">{{ 'school_fee'|trans }} <span style="font-size: 10px" class="">{{ 'multiple_selection'|trans }}</span></label>
<select multiple class="form-select form-select-solid" aria-label="" id="school_fee" name="school_fee[]" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="" >
{% for t in school_fees %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['school_fee'] is defined and t.id in app.session.all['data']['school_fee'] %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="school_cycle" class=" form-label">{{ 'school_cycle'|trans }} <span style="font-size: 10px" class="">{{ 'multiple_selection'|trans }}</span></label>
<select multiple class="form-select form-select-solid" aria-label="" id="school_cycle" name="school_cycle[]" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="" >
{% for t in school_cycles %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['school_cycle'] is defined and t.id in app.session.all['data']['school_cycle'] %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="d-flex flex-column mb-8 fv-row">
<label for="school_religion" class="required form-label">{{ 'school_religion'|trans }}</label>
<select class="form-select form-select-solid" aria-label="" id="school_religion_edit" name="school_religion" data-control="select2" data-hide-search="false" data-dropdown-parent="#kt_drawer_chat" data-placeholder="" required>
<option value="x" {% if app.session.all['data'] is defined and app.session.all['data']['school_religion'] is defined and app.session.all['data']['school_religion'] == "x" %} selected {% endif %}>{{ 'all'|trans }}</option>
{% for t in school_religions %}
<option value="{{ t.id }}" {% if app.session.all['data'] is defined and app.session.all['data']['school_religion'] is defined and app.session.all['data']['school_religion'] == t.id %} selected {% endif %}>{{ t.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-check form-switch form-check-custom form-check-solid mb-4">
<input class="form-check-input" type="checkbox" name="boarding_school_boy" id="boarding_school_boy_edit" value="off" {% if app.session.all['data'] is defined and app.session.all['data']['boarding_school_boy'] is defined %} checked {% endif %} />
<label class="form-check-label" for="boarding_school_boy">
{{ 'boarding_school_boy'|trans }}
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid mb-4">
<input class="form-check-input" type="checkbox" name="boarding_school_girl" id="boarding_school_girl_edit" {% if app.session.all['data'] is defined and app.session.all['data']['boarding_school_girl'] is defined %} checked {% endif %} value="off"/>
<label class="form-check-label" for="boarding_school_girl">
{{ 'boarding_school_girl'|trans }}
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid mb-4">
<input class="form-check-input" type="checkbox" name="school_cafetaria" id="school_cafetaria_edit" {% if app.session.all['data'] is defined and app.session.all['data']['school_cafetaria'] is defined %} checked {% endif %} value="off"/>
<label class="form-check-label" for="school_cafetaria">
{{ 'school_cafetaria'|trans }}
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid mb-4">
<input class="form-check-input" type="checkbox" name="transport_service" id="transport_service_edit" {% if app.session.all['data'] is defined and app.session.all['data']['transport_service'] is defined %} checked {% endif %} value="off"/>
<label class="form-check-label" for="transport_service">
{{ 'transport_service'|trans }}
</label>
</div>
<div class="d-flex flex-stack">
<button class="btn btn-primary" type="submit" >{{ 'search'|trans }}</button>
<!--end::Send-->
</div>
</form>
</div>
<!--end::Card body-->
<!--begin::Card footer-->
<div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
<!--end::Toolbar-->
</div>
<!--end::Card footer-->
</div>
<!--end::Messenger-->
</div>
</div>
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script id="templateAds" type="text/html">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-10" data-nosnippet>
<div class="card position-relative overflow-hidden border-bottom-0 rounded space-school_image" >
<div class="card-bg" style="[[style1]]">
<div class="card-header border-0 pt-8 " style="[[style2]]">
<div style="display: none" class="symbol symbol-125px bg-light">
<img src="[[img1]]" alt="image" class=""/>
</div>
<div class="card-title" style="">
<div class=" row fs-6 fw-bolder text-dark" style="display: none; min-width: 300px; box-shadow: 10px 10px 5px #7f3e9812; height: 68px;word-wrap: break-word;margin-bottom: 10px" data-bs-toggle="[[tooltip]]" data-bs-placement="top" title="[[title]]">
<p style="[[style3]]">
[[name1]]
</p>
</div>
</div>
</div>
<div style="padding: 1rem 1rem" class="[[class1]]" >
<div class="row ">
<ul class="list" style="display: inline-flex;list-style: none">
<li class="mb-3" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-graduation-cap"></span>[[school_type]]</span></li>
<li class="mb-3" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-globe"></span>[[school_language]]</span></li>
<li class="mb-3" style="margin-left: auto" type="button" data-bs-toggle="modal" data-bs-target="#note--[[school_id1]]">
<span class="badge badge-light-dark "><span class="fa fa-eye "></span> </span>
</li>
<div class="modal fade" data-bs-focus="false" id="note--[[school_id2]]" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card mt-3" >
<div class="card-body" style="[[style4]]">
</div>
</div>
<div class="card mt-3">
<div class="card-body" style="padding:1rem 1rem">
<h6 style="color:#7f3e98;font-weight: bold;padding: 0"> [[name2]]</h6>
<p style="font-size: 10px;font-weight:bold">[[school_slogan]]</p>
<span class=" badge badge-light-primary fw-bolder ml-auto px-4 py-3">
<span class=" fa fa-location-arrow"></span> [[school_town_neighbord]]</span>
</div>
</div>
<div class="card mt-3">
<div class="card-body" style="padding:1.5rem 0.1rem">
<ul class="list row" style="display: inline-flex;list-style: none">
<li class="mb-3 col-md-3 col-sm-6" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-graduation-cap"></span> [[school_type2]]</span></li>
<li class="mb-3 col-md-3 col-sm-6" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-globe"></span> [[school_language2]]</span></li>
<li class="mb-3 col-md-3 col-sm-6" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-users"></span> {{ 'nb_student'|trans}} [[school_student]]</span></li>
<li class="mb-3 col-md-3 col-sm-6" style="[[style_boarding]]"><span class="badge badge-light"><span class="fa fa-bed"></span>
<span style="[[boarding_woman]]" class="fa fa-female"></span>
<span style="[[boarding_man]]" class="fa fa-male"></span>
{{ 'boarding_school'|trans }}
</span>
</li>
<li class="mb-3 col-md-3 col-sm-6" style="[[style_transport]]">
<span class="badge badge-light"><span class="fa fa-bus"></span> {{ 'transport_service'|trans }}</span></li>
<li class="mb-3 col-md-3 col-sm-6" style="[[style_cafetaria]]"><span class="badge badge-light"><span class="fa fa-utensils "></span> {{ 'school_cafetaria'|trans }} </span></li>
<li class="mb-3 col-md-3 col-sm-6" style="margin-right: 10px"><span class="badge badge-light"><span class="fa fa-money-bill "></span> [[school_fee]] {{ 'school_fee'|trans }} </span></li>
</ul>
</div>
</div>
<div class="card mt-3" style="[[style_description]]">
<div class="card-body" >
[[school_description]]
</div>
</div>
<div class="card mt-3" style="[[style_phone]]">
<div class="card-body" style="padding:1.5rem 0.1rem">
<ul class="list" style="display: inline-flex;list-style: none">
<li class="mb-3" style="[[style_phone1]]"><a href="tel:[[school_phone11]]"><span class="badge badge-light"><span class="fa fa-phone-alt"></span> [[school_phone1]]</span></a></li>
<li class="mb-3" style="[[style_phone2]]"><a href="tel:[[school_phone22]]"><span class="badge badge-light"><span class="fa fa-phone-alt"></span> [[school_phone2]]</span></a></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="card-toolbar">
<span class="fa-pull-left badge badge-light-primary fw-bolder ml-auto px-4 py-3">
<span class=" fa fa-location-arrow"></span>[[school_town_neighbord2]]</span>
</div>
</div>
</div>
<a href="[[href_open_link]]" target="[[open_link_target]]" class="card-footer fs-4" style="height: 80px;color:#7f3e98;font-weight: bold;padding: 0.5rem 1rem">
[[school_name3]]
</a>
<div class="position-absolute w-100 bottom-0 left-0 h-3px bg-secondary bottom-div-school">
<div class="position-absolute bg-primary left-0 top-0 h-3px" style="width: 0%"></div>
</div>
</div>
</div>
</script>
<script>
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
return '';
};
let value = '';
let mode = getUrlParameter('s');
if(mode === ''){
mode = getUrlParameter('keywords');
if(mode === ''){
mode = 'n';
value = '';
}else{
value = mode;
mode = 'k';
}
}else {
mode = 's'
}
let maxNb = parseInt("{{ school_limit }}");
let loading = false;
let dataSearch = {};
{% if app.session.all['data'] is defined %}
{% if app.session.all['data']['state'] is defined %}
dataSearch.state="{{ app.session.all['data']['state'] }}";
{% endif %}
{% if app.session.all['data']['town'] is defined %}
dataSearch.town="{{ app.session.all['data']['town'] }}";
{% endif %}
{% if app.session.all['data']['street'] is defined %}
dataSearch.street="{{ app.session.all['data']['street'] }}";
{% endif %}
{% if app.session.all['data']['school_type'] is defined %}
dataSearch.school_type="{{ app.session.all['data']['school_type'] }}";
{% endif %}
{% if app.session.all['data']['school_language'] is defined %}
dataSearch.school_language="{{ app.session.all['data']['school_language'] }}";
{% endif %}
{% if app.session.all['data']['school_fee'] is defined %}
dataSearch.school_fee = [];
{% for t in app.session.all['data']['school_fee'] %}
dataSearch.school_fee.push("{{ t }}");
{% endfor %}
{% endif %}
{% if app.session.all['data']['school_cycle'] is defined %}
dataSearch.school_cycle = [];
{% for t in app.session.all['data']['school_cycle'] %}
dataSearch.school_cycle.push("{{ t }}");
{% endfor %}
{% endif %}
{% if app.session.all['data']['school_religion'] is defined %}
dataSearch.school_religion="{{ app.session.all['data']['school_religion'] }}";
{% endif %}
{% if app.session.all['data']['boarding_school_boy'] is defined %}
dataSearch.boarding_school_boy="{{ app.session.all['data']['boarding_school_boy'] }}";
{% endif %}
{% if app.session.all['data']['boarding_school_girl'] is defined %}
dataSearch.boarding_school_girl="{{ app.session.all['data']['boarding_school_girl'] }}";
{% endif %}
{% if app.session.all['data']['school_cafetaria'] is defined %}
dataSearch.school_cafetaria="{{ app.session.all['data']['school_cafetaria'] }}";
{% endif %}
{% if app.session.all['data']['transport_service'] is defined %}
dataSearch.transport_service="{{ app.session.all['data']['transport_service'] }}";
{% endif %}
{% endif %}
let lastNb = parseInt("{{ last_school_nb }}");
let offset = parseInt("{{ last_school_nb }}");
$(document).ready(function() {
$('.se-pre-con').hide();
});
checkWindowSize();
// Check if the page has enough content or not. If not then fetch records
function checkWindowSize(){
if($(window).height() >= $(document).height()){
// Fetch records
if(lastNb === maxNb){
fetchData();
}
}
}
// Fetch records
function fetchData(){
let url = "{{ path('list_school_json',{'offset':'xxxx'}) }}";
url = url.replace('xxxx',offset);
let params = window.location.search.substring(1).split('&');
if(params.length>0){
url = encodeURI(url + '?' +params);
}
if(loading === false){
loading = true;
$('#loading-more').show();
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function(res){
loading = false;
$('#loading-more').hide();
let templateRep = document.getElementById("templateAds");
let templateRepHtml = templateRep.innerHTML;
let listHtml = "";
res.data.forEach(function (e){
let link = "{{ path('display_ads',{'slug':'0000'}) }}";
let style1 = "min-height: 200px;background: #fafafa";
let style2 = "align-items: center;";
let img1 = "{{asset('assets/school.jpeg')}}";
let tooltip = "";
let title = "";
let style3 = "text-align: justify;";
let name = e.name;
let class1="card-body";
let school_type = e.school_type.name;
let school_language = e.school_language.name;
let school_id1 = e.id;
let school_id2 = e.id;
let style4 = "min-height: 300px;";
let name2 = e.name;
let school_slogan = e.slogan;
let school_town_neighbord= e.town.name;
let school_type2 = e.school_type.name;
let school_language2 = e.school_language.name;
let school_student = e.nb_student;
let style_boarding = "margin-right: 40px;";
let boarding_man = "display:none";
let boarding_woman = "display:none";
let style_transport = "display:none";
let style_cafetaria = "display:none";
let school_fee = e.school_fee.name;
let style_description= "display:none";
let school_description= e.description;
let style_phone= "display:none";
let style_phone1= "display:none";
let style_phone2= "display:none";
let school_phone1= e.phone1;
let school_phone11= e.phone1;
let school_phone2= e.phone2;
let school_phone22= e.phone2;
let school_town_neighbord2= e.town.name;
let href_open_link = "#";
let open_link_target = "_self";
let school_name3 = e.name;
if (e.image_cover.length>0){
style1 = style1 + "background-repeat:no-repeat;background-size: cover;"+
"background-image: url('" + "{{ asset('uploads/schools/') }}" + e.image_cover + "')";
style3 = style3 + "color:white; text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;";
style4 = style4 + "background-repeat:no-repeat;background-size: cover;" +
"background-image: url('" + "{{ asset('uploads/schools/') }}" + e.image_cover + "')";
}
else{
style2 = style2 + "background-color: #fafafa";
style4 = style4 + "background-repeat:no-repeat;background-size: cover;" +
"background-image: url('" + "{{ asset('assets/school.jpeg/') }}";
}
if(e.image.length>0){
img1 = "{{ asset('uploads/schools/') }}" + e.image;
}
if(e.name.length>90){
tooltip = "tooltip";
title = e.name;
name = e.name.slice(0,90) + "...";
name2 = e.name.slice(0,90) + "...";
school_name3 = e.name.slice(0,90) + "...";
}
if(e.open_link!= "#" && e.open_link!=null ){
class1 = class1 + " educati-background-school";
href_open_link = e.open_link;
open_link_target = "_blank";
}
else{
}
if (e.neighbordhood.length > 0){
school_town_neighbord = school_town_neighbord + ", " + e.neighbordhood;
school_town_neighbord2 = school_town_neighbord + ", " + e.neighbordhood;
}
if(e.has_boarding_school_boy || e.has_boarding_school_girl){
if(e.has_boarding_school_boy){
boarding_man = "display:block";
}
if(e.has_boarding_school_girl){
boarding_man = "display:block";
}
}
else{
style_boarding = style_boarding + "display:none";
}
if(e.has_transport_service){
style_transport = "display:block";
}
if(e.has_shool_cafetaria){
style_cafetaria = "display:block";
}
if(e.description.length > 0){
style_description = "display:block";
}
if(e.phone1.length>0 || e.phone2.length >0){
style_phone = "display:block";
if(e.phone1.length>0){
style_phone1 = "display:block";
}
if(e.phone2.length>0){
style_phone2 = "display:block";
}
}
listHtml += templateRepHtml
.replace("[[style1]]",style1)
.replace("[[style2]]",style2)
.replace("[[img1]]",img1)
.replace("[[tooltip]]",tooltip)
.replace("[[title]]",title)
.replace("[[style3]]",style3)
.replace("[[name]]",name)
.replace("[[class1]]",class1)
.replace("[[school_type]]",school_type)
.replace("[[school_language]]",school_language)
.replace("[[school_id1]]",school_id1)
.replace("[[school_id2]]",school_id2)
.replace("[[style4]]",style4)
.replace("[[name2]]",name2)
.replace("[[school_slogan]]",school_slogan)
.replace("[[school_town_neighbord]]",school_town_neighbord)
.replace("[[school_type2]]",school_type2)
.replace("[[school_language2]]",school_language2)
.replace("[[school_student]]",school_student)
.replace("[[style_boarding]]",style_boarding)
.replace("[[boarding_man]]",boarding_man)
.replace("[[boarding_woman]]",boarding_woman)
.replace("[[style_transport]]",style_transport)
.replace("[[style_cafetaria]]",style_cafetaria)
.replace("[[school_fee]]",school_fee)
.replace("[[style_description]]",style_description)
.replace("[[school_description]]",school_description)
.replace("[[style_phone]]",style_phone)
.replace("[[style_phone1]]",style_phone1)
.replace("[[style_phone2]]",style_phone2)
.replace("[[school_phone1]]",school_phone1)
.replace("[[school_phone11]]",school_phone11)
.replace("[[school_phone2]]",school_phone2)
.replace("[[school_phone22]]",school_phone22)
.replace("[[school_town_neighbord2]]",school_town_neighbord2)
.replace("[[href_open_link]]",href_open_link)
.replace("[[open_link_target]]",open_link_target)
.replace("[[school_name3]]",school_name3);
});
$('#school-list').append(listHtml);
lastNb = res.data.length;
offset = offset + res.data.length;
console.log(lastNb);
//checkWindowSize();
},
error :function (error) {
console.log(error);
loading = false;
$('#loading-more').hide();
}
});
}
}
$(document).on('touchmove', onScroll); // for mobile
function onScroll(){
if($(window).scrollTop() > $(document).height() - $(window).height()-100) {
if(lastNb === maxNb){
fetchData();
}
}
}
$(window).scroll(function(){
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
if( position === bottom ){
if(lastNb === maxNb){
fetchData();
}
}
});
</script>
<script>
let towns = {{ towns_array|json_encode|raw}};
$('#state').on('change',function (){
let id = parseInt($(this).val());
if($(this).val() === 'x'){
let temp = "<option value='x'>"+"{{ 'all'|trans }}"+"</option>";
towns.forEach(function (el){
temp+="<option value='"+el.id+"'>"+el.name+"</option>";
});
$('#town').html(temp);
}
else{
let temp = "<option value='x'>"+"{{ 'all'|trans }}"+"</option>";
towns.forEach(function (el){
if(parseInt(el.state) === id){
temp+="<option value='"+el.id+"'>"+el.name+"</option>";
}
});
$('#town').html(temp);
}
});
</script>
{% endblock %}